新聞中心
js基礎(chǔ)面試題1-10道
1.document load 和 document ready 的區(qū)別
創(chuàng)新互聯(lián)長(zhǎng)期為成百上千家客戶(hù)提供的網(wǎng)站建設(shè)服務(wù),團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年,關(guān)注不同地域、不同群體,并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù);打造開(kāi)放共贏平臺(tái),與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為館陶企業(yè)提供專(zhuān)業(yè)的網(wǎng)站設(shè)計(jì)制作、網(wǎng)站設(shè)計(jì),館陶網(wǎng)站改版等技術(shù)服務(wù)。擁有十余年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。
參考答案:文檔解析過(guò)程中,ready在加載圖片等外部資源前觸發(fā),load在之后觸發(fā)。如果頁(yè)面中要是沒(méi)有圖片之類(lèi)的媒體文件的話ready與load是差不多的,但是頁(yè)面中有文件就不一樣了,所以還是推薦大家在工作中用ready
解析:
DOM文檔解析:
頁(yè)面加載完成有兩種事件
1.load是當(dāng)頁(yè)面所有資源全部加載完成后(包括DOM文檔樹(shù),css文件,js文件,圖片資源等),執(zhí)行一個(gè)函數(shù)
缺點(diǎn):如果圖片資源較多,加載時(shí)間較長(zhǎng),onload后等待執(zhí)行的函數(shù)需要等待較長(zhǎng)時(shí)間,所以一些效果可能受到影響
代碼形式:
2.$(document).ready()是當(dāng)DOM文檔樹(shù)加載完成后執(zhí)行一個(gè)函數(shù) (不包含圖片,css等)所以會(huì)比load較快執(zhí)行
在原生的jS中不包括ready()這個(gè)方法,Jquery才有,jquery中有 $().ready(function)。
代碼形式為:
參與互動(dòng)
2.JavaScript 中如何檢測(cè)一個(gè)變量是一個(gè) String 類(lèi)型?
參考答案:三種方法(typeof、constructor、Object.prototype.toString.call())
解析:
參與互動(dòng)
3.請(qǐng)用 js 去除字符串空格?
參考答案:replace 正則匹配方法、str.trim()方法、JQ 方法:$.trim(str)方法
解析:
方法一:replace 正則匹配方法
去除字符串內(nèi)所有的空格:str = str.replace(/s*/g, "");
去除字符串內(nèi)兩頭的空格:str = str.replace(/^s*|s*$/g, "");
去除字符串內(nèi)左側(cè)的空格:str = str.replace(/^s*/, "");
去除字符串內(nèi)右側(cè)的空格:str = str.replace(/(s*$)/g, "");
示例:
方法二:str.trim()方法
trim()方法是用來(lái)刪除字符串兩端的空白字符并返回,trim 方法并不影響原來(lái)的字符串本身,它返回的是一個(gè)新的字符串。
缺陷:只能去除字符串兩端的空格,不能去除中間的空格
示例:
方法三:JQ 方法:$.trim(str)方法
$.trim() 函數(shù)用于去除字符串兩端的空白字符。
注意:$.trim()函數(shù)會(huì)移除字符串開(kāi)始和末尾處的所有換行符,空格(包括連續(xù)的空格)和制表符。如果這些空白字符在字符串中間時(shí),它們將被保留,不會(huì)被移除。
示例:
參與互動(dòng)
4.js 是一門(mén)怎樣的語(yǔ)言,它有什么特點(diǎn)
參考答案:
1.腳本語(yǔ)言。JavaScript 是一種解釋型的腳本語(yǔ)言, C、C++等語(yǔ)言先編譯后執(zhí)行, 而 JavaScript 是在程序的運(yùn)行過(guò)程中逐行進(jìn)行解釋。
2.基于對(duì)象。JavaScript 是一種基于對(duì)象的腳本語(yǔ)言, 它不僅可以創(chuàng)建對(duì)象, 也能使用現(xiàn)有的對(duì)象。
3.簡(jiǎn)單。JavaScript 語(yǔ)言中采用的是弱類(lèi)型的變量類(lèi)型, 對(duì)使用的數(shù)據(jù)類(lèi)型未做出嚴(yán)格的要求, 是基于 Java 基本語(yǔ)句和控制的腳本語(yǔ)言, 其設(shè)計(jì)簡(jiǎn)單緊湊。
4.動(dòng)態(tài)性。JavaScript 是一種采用事件驅(qū)動(dòng)的腳本語(yǔ)言, 它不需要經(jīng)過(guò) Web 服務(wù)器就可以對(duì)用戶(hù)的輸入做出響應(yīng)。
5.跨平臺(tái)性。JavaScript 腳本語(yǔ)言不依賴(lài)于操作系統(tǒng), 僅需要瀏覽器的支持。
參與互動(dòng)
5.== 和 === 的不同
參考答案: == 是抽象相等運(yùn)算符,而 === 是嚴(yán)格相等運(yùn)算符。 == 運(yùn)算符是在進(jìn)行必要的類(lèi)型轉(zhuǎn)換后,再比較。 === 運(yùn)算符不會(huì)進(jìn)行類(lèi)型轉(zhuǎn)換,所以如果兩個(gè)值不是相同的類(lèi)型,會(huì)直接返回 false 。使用 == 時(shí),可能發(fā)生一些特別的事情,例如:
如果你對(duì) == 和 === 的概念不是特別了解,建議大多數(shù)情況下使用 ===
參與互動(dòng)
6.怎樣添加、移除、移動(dòng)、復(fù)制、創(chuàng)建和查找節(jié)點(diǎn)?
參考答案:
1)創(chuàng)建新節(jié)點(diǎn)
2)添加、移除、替換、插入
3)查找
參與互動(dòng)
7.事件委托是什么
參考答案:利用事件冒泡的原理,讓自己的所觸發(fā)的事件,讓他的父元素代替執(zhí)行!
解析:
1、那什么樣的事件可以用事件委托,什么樣的事件不可以用呢?
2、為什么要用事件委托
3、事件冒泡與事件委托的對(duì)比
4、事件委托怎么取索引?
拓展:
參考
參與互動(dòng)
8.require 與 import 的區(qū)別
參考答案:兩者的加載方式不同、規(guī)范不同
第一、兩者的加載方式不同,require 是在運(yùn)行時(shí)加載,而 import 是在編譯時(shí)加載
require('./a')(); // a 模塊是一個(gè)函數(shù),立即執(zhí)行 a 模塊函數(shù)
var data = require('./a').data; // a 模塊導(dǎo)出的是一個(gè)對(duì)象
var a = require('./a')[0]; // a 模塊導(dǎo)出的是一個(gè)數(shù)組 ====== 哪都行
import $ from 'jquery';
import * as _ from '_';
import {a, b, c} from './a';
import {default as alias, a as a_a, b, c} from './a'; ======用在開(kāi)頭
第二、規(guī)范不同,require 是 CommonJS/AMD 規(guī)范,import 是 ESMAScript6+規(guī)范
第三、require 特點(diǎn):社區(qū)方案,提供了服務(wù)器/瀏覽器的模塊加載方案。非語(yǔ)言層面的標(biāo)準(zhǔn)。只能在運(yùn)行時(shí)確定模塊的依賴(lài)關(guān)系及輸入/輸出的變量,無(wú)法進(jìn)行靜態(tài)優(yōu)化。
import 特點(diǎn):語(yǔ)言規(guī)格層面支持模塊功能。支持編譯時(shí)靜態(tài)分析,便于 JS 引入宏和類(lèi)型檢驗(yàn)。動(dòng)態(tài)綁定。
參與互動(dòng)
9.javascript 對(duì)象的幾種創(chuàng)建方式
參考答案:
第一種:Object 構(gòu)造函數(shù)創(chuàng)建
這行代碼創(chuàng)建了 Object 引用類(lèi)型的一個(gè)新實(shí)例,然后把實(shí)例保存在變量 Person 中。
第二種:使用對(duì)象字面量表示法
對(duì)象字面量是對(duì)象定義的一種簡(jiǎn)寫(xiě)形式,目的在于簡(jiǎn)化創(chuàng)建包含大量屬性的對(duì)象的過(guò)程。也就是說(shuō),第一種和第二種方式創(chuàng)建對(duì)象的方法其實(shí)都是一樣的,只是寫(xiě)法上的區(qū)別不同
在介紹第三種的創(chuàng)建方法之前,我們應(yīng)該要明白為什么還要用別的方法來(lái)創(chuàng)建對(duì)象,也就是第一種,第二種方法的缺點(diǎn)所在:它們都是用了同一個(gè)接口創(chuàng)建很多對(duì)象,會(huì)產(chǎn)生大量的重復(fù)代碼,就是如果你有 100 個(gè)對(duì)象,那你要輸入 100 次很多相同的代碼。那我們有什么方法來(lái)避免過(guò)多的重復(fù)代碼呢,就是把創(chuàng)建對(duì)象的過(guò)程封裝在函數(shù)體內(nèi),通過(guò)函數(shù)的調(diào)用直接生成對(duì)象。
第三種:使用工廠模式創(chuàng)建對(duì)象
在使用工廠模式創(chuàng)建對(duì)象的時(shí)候,我們都可以注意到,在 createPerson 函數(shù)中,返回的是一個(gè)對(duì)象。那么我們就無(wú)法判斷返回的對(duì)象究竟是一個(gè)什么樣的類(lèi)型。于是就出現(xiàn)了第四種創(chuàng)建對(duì)象的模式。
第四種: 使用構(gòu)造函數(shù)創(chuàng)建對(duì)象
對(duì)比工廠模式,我們可以發(fā)現(xiàn)以下區(qū)別:
1.沒(méi)有顯示地創(chuàng)建對(duì)象
2.直接將屬性和方法賦給了 this 對(duì)象
3.沒(méi)有 return 語(yǔ)句
4.終于可以識(shí)別的對(duì)象的類(lèi)型。對(duì)于檢測(cè)對(duì)象類(lèi)型,我們應(yīng)該使用 instanceof 操作符,我們來(lái)進(jìn)行自主檢測(cè):
同時(shí)我們也應(yīng)該明白,按照慣例,構(gòu)造函數(shù)始終要應(yīng)該以一個(gè)大寫(xiě)字母開(kāi)頭,而非構(gòu)造函數(shù)則應(yīng)該以一個(gè)小寫(xiě)字母開(kāi)頭。
那么構(gòu)造函數(shù)確實(shí)挺好用的,但是它也有它的缺點(diǎn):
就是每個(gè)方法都要在每個(gè)實(shí)例上重新創(chuàng)建一遍,方法指的就是我們?cè)趯?duì)象里面定義的函數(shù)。如果方法的數(shù)量很多,就會(huì)占用很多不必要的內(nèi)存。于是出現(xiàn)了第五種創(chuàng)建對(duì)象的方法
第五種:原型創(chuàng)建對(duì)象模式
使用原型創(chuàng)建對(duì)象的方式,可以讓所有對(duì)象實(shí)例共享它所包含的屬性和方法。
如果是使用原型創(chuàng)建對(duì)象模式,請(qǐng)看下面代碼:
當(dāng)為對(duì)象實(shí)例添加一個(gè)屬性時(shí),這個(gè)屬性就會(huì)屏蔽原型對(duì)象中保存的同名屬性。
這時(shí)候我們就可以使用構(gòu)造函數(shù)模式與原型模式結(jié)合的方式,構(gòu)造函數(shù)模式用于定義實(shí)例屬性,而原型模式用于定義方法和共享的屬性
第六種:組合使用構(gòu)造函數(shù)模式和原型模式
解析: 參考
參與互動(dòng)
10.JavaScript 繼承的方式和優(yōu)缺點(diǎn)
參考答案:六種方式
js基礎(chǔ)面試題71-80道題目
71.IE 和標(biāo)準(zhǔn)下有哪些兼容性的寫(xiě)法
參考答案:
參與互動(dòng)
72.變量提升
參考答案:
A、js 代碼執(zhí)行的過(guò)程
B、變量提升發(fā)生的環(huán)境:發(fā)生在代碼所處的當(dāng)前作用域。
解析:
對(duì)應(yīng)面試題
參與互動(dòng)
73.如何阻止冒泡與默認(rèn)行為
參考答案:
解析:
當(dāng)需要阻止冒泡行為時(shí),可以使用
當(dāng)需要阻止默認(rèn)行為時(shí),可以使用
參與互動(dòng)
74.js 中 this 閉包 作用域
參考答案:
this:指向調(diào)用上下文
閉包:定義一個(gè)函數(shù)就開(kāi)辟了一個(gè)局部作用域,整個(gè) js 執(zhí)行環(huán)境有一個(gè)全局作用域
作用域:一個(gè)函數(shù)可以訪問(wèn)其他函數(shù)中的變量(閉包是一個(gè)受保護(hù)的變量空間)
參與互動(dòng)
75.javascript 的本地對(duì)象,內(nèi)置對(duì)象和宿主對(duì)象
參考答案:
1.本地對(duì)象
ECMA-262 把本地對(duì)象(native object)定義為“獨(dú)立于宿主環(huán)境的 ECMAScript 實(shí)現(xiàn)提供的對(duì)象"。簡(jiǎn)單來(lái)說(shuō),本地對(duì)象就是 ECMA-262 定義的類(lèi)(引用類(lèi)型)。它們包括:Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError
2.內(nèi)置對(duì)象
JS中內(nèi)置了17個(gè)對(duì)象,常用的是Array對(duì)象、Date對(duì)象、正則表達(dá)式對(duì)象、string對(duì)象、Global對(duì)象
3.宿主對(duì)象
由ECMAScript實(shí)現(xiàn)的宿主環(huán)境提供的對(duì)象,可以理解為:瀏覽器提供的對(duì)象。所有的BOM和DOM都是宿主對(duì)象。
參與互動(dòng)
76.javascript 的同源策略
參考答案:一段腳本只能讀取來(lái)自于同一來(lái)源的窗口和文檔的屬性
解析:
同源策略:限制從一個(gè)源加載的文檔或腳本如何與來(lái)自另一個(gè)源的資源進(jìn)行交互。這是一個(gè)用于隔離潛在惡意文件的關(guān)鍵的安全機(jī)制。(來(lái)自 MDN 官方的解釋?zhuān)?/p>
簡(jiǎn)單來(lái)說(shuō)就是:一段腳本只能讀取來(lái)自于同一來(lái)源的窗口和文檔的屬性,這里的同一來(lái)源指的是主機(jī)名、協(xié)議和端口號(hào)的組合 具體解釋?zhuān)?/p>
(1)源包括三個(gè)部分:協(xié)議、域名、端口(http 協(xié)議的默認(rèn)端口是 80)。如果有任何一個(gè)部分不同,則源不同,那就是跨域了。
(2)限制:這個(gè)源的文檔沒(méi)有權(quán)利去操作另一個(gè)源的文檔。這個(gè)限制體現(xiàn)在:(要記住)
Cookie、LocalStorage 和 IndexDB 無(wú)法獲取。
無(wú)法獲取和操作 DOM。
不能發(fā)送 Ajax 請(qǐng)求。我們要注意,Ajax 只適合同源的通信。
同源策略帶來(lái)的麻煩:ajax 在不同域名下的請(qǐng)求無(wú)法實(shí)現(xiàn),需要進(jìn)行跨域操作
參與互動(dòng)
77.事件冒泡與事件捕獲
參考答案:
事件冒泡:由最具體的元素(目標(biāo)元素)向外傳播到最不具體的元素
事件捕獲:由最不確定的元素到目標(biāo)元素
參與互動(dòng)
78.foo = foo||bar ,這行代碼是什么意思?為什么要這樣寫(xiě)?
參考答案:
這種寫(xiě)法稱(chēng)為短路表達(dá)式
解析:
相當(dāng)于
常用于函數(shù)參數(shù)的空判斷
參與互動(dòng)
79.復(fù)雜數(shù)據(jù)類(lèi)型如何轉(zhuǎn)變?yōu)樽址?/p>
參考答案:
參與互動(dòng)
80.javascript 中 this 的指向問(wèn)題
參考答案:
解析:
全局環(huán)境下,this 始終指向全局對(duì)象(window),無(wú)論是否嚴(yán)格模式;
2.1 普通函數(shù)
普通函數(shù)內(nèi)部的 this 分兩種情況,嚴(yán)格模式和非嚴(yán)格模式。
(1)非嚴(yán)格模式下,沒(méi)有被上一級(jí)的對(duì)象所調(diào)用, this 默認(rèn)指向全局對(duì)象 window。
(2)嚴(yán)格模式下,this 指向 undefined。
2.2 函數(shù)作為對(duì)象的方法
(1)函數(shù)有被上一級(jí)的對(duì)象所調(diào)用,那么 this 指向的就是上一級(jí)的對(duì)象。
(2)多層嵌套的對(duì)象,內(nèi)部方法的 this 指向離被調(diào)用函數(shù)最近的對(duì)象(window 也是對(duì)象,其內(nèi)部對(duì)象調(diào)用方法的 this 指向內(nèi)部對(duì)象, 而非 window)。
特殊例子
2.3 原型鏈中的 this
(1)如果該方法存在于一個(gè)對(duì)象的原型鏈上,那么 this 指向的是調(diào)用這個(gè)方法的對(duì)象,就像該方法在對(duì)象上一樣。
上述例子中,對(duì)象 p 沒(méi)有屬于它自己的 f 屬性,它的 f 屬性繼承自它的原型。當(dāng)執(zhí)行 p.f()時(shí),會(huì)查找 p 的原型鏈,找到 f 函數(shù)并執(zhí)行。因?yàn)?f 是作為 p 的方法調(diào)用的,所以函數(shù)中的 this 指向 p。
(2)相同的概念也適用于當(dāng)函數(shù)在一個(gè) getter 或者 setter 中被調(diào)用。用作 getter 或 setter 的函數(shù)都會(huì)把 this 綁定到設(shè)置或獲取屬性的對(duì)象。
(3)call()和 apply()方法:當(dāng)函數(shù)通過(guò) Function 對(duì)象的原型中繼承的方法 call() 和 apply() 方法調(diào)用時(shí), 其函數(shù)內(nèi)部的 this 值可綁定到 call() apply() 方法指定的第一個(gè)對(duì)象上, 如果第一個(gè)參數(shù)不是對(duì)象,JavaScript 內(nèi)部會(huì)嘗試將其轉(zhuǎn)換成對(duì)象然后指向它。
(4)bind()方法:由 ES5 引入, 在 Function 的原型鏈上, Function.prototype.bind。通過(guò) bind 方法綁定后, 函數(shù)將被永遠(yuǎn)綁定在其第一個(gè)參數(shù)對(duì)象上, 而無(wú)論其在什么情況下被調(diào)用。
2.4 構(gòu)造函數(shù)中的 this
當(dāng)一個(gè)函數(shù)用作構(gòu)造函數(shù)時(shí)(使用 new 關(guān)鍵字),它的 this 被綁定到正在構(gòu)造的新對(duì)象。
構(gòu)造器返回的默認(rèn)值是 this 所指的那個(gè)對(duì)象,也可以手動(dòng)返回其他的對(duì)象。
特殊例子
當(dāng) this 碰到 return 時(shí)
2.5 setTimeout setInterval
(1)對(duì)于延時(shí)函數(shù)內(nèi)部的回調(diào)函數(shù)的 this 指向全局對(duì)象 window;
(2)可以通過(guò) bind()方法改變內(nèi)部函數(shù) this 指向。
3.1 作為一個(gè) DOM 事件處理函數(shù)
當(dāng)函數(shù)被用作事件處理函數(shù)時(shí),它的 this 指向觸發(fā)事件的元素(針對(duì) addEventListener 事件)。
3.2 作為一個(gè)內(nèi)聯(lián)事件處理函數(shù)
(1)當(dāng)代碼被內(nèi)聯(lián)處理函數(shù)調(diào)用時(shí),它的 this 指向監(jiān)聽(tīng)器所在的 DOM 元素;
(2)當(dāng)代碼被包括在函數(shù)內(nèi)部執(zhí)行時(shí),其 this 指向等同于 普通函數(shù)直接調(diào)用的情況,即在非嚴(yán)格模式指向全局對(duì)象 window,在嚴(yán)格模式指向 undefined:
4.1 全局環(huán)境中
在全局代碼中,箭頭函數(shù)被設(shè)置為全局對(duì)象:
4.2 this 捕獲上下文
箭頭函數(shù)沒(méi)有自己的 this,而是使用箭頭函數(shù)所在的作用域的 this,即指向箭頭函數(shù)定義時(shí)(而不是運(yùn)行時(shí))所在的作用域。
4.2 this 捕獲上下文
箭頭函數(shù)沒(méi)有自己的 this,而是使用箭頭函數(shù)所在的作用域的 this,即指向箭頭函數(shù)定義時(shí)(而不是運(yùn)行時(shí))所在的作用域。
在 setTimeout 中的 this 指向了構(gòu)造函數(shù)新生成的對(duì)象,而普通函數(shù)指向了全局 window 對(duì)象。
4.3 箭頭函數(shù)作為對(duì)象的方法使用
箭頭函數(shù)作為對(duì)象的方法使用,指向全局 window 對(duì)象;而普通函數(shù)作為對(duì)象的方法使用,則指向調(diào)用的對(duì)象。
4.4 箭頭函數(shù)中,call()、apply()、bind()方法無(wú)效
4.5 this 指向固定化
箭頭函數(shù)可以讓 this 指向固定化,這種特性很有利于封裝回調(diào)函數(shù)
上面代碼的 init 方法中,使用了箭頭函數(shù),這導(dǎo)致這個(gè)箭頭函數(shù)里面的 this,總是指向 handler 對(duì)象。如果不使用箭頭函數(shù)則指向全局 document 對(duì)象。
4.6 箭頭函是不適用場(chǎng)景
(1)箭頭函數(shù)不適合定義對(duì)象的方法(方法內(nèi)有 this),因?yàn)榇藭r(shí)指向 window;
(2)需要?jiǎng)討B(tài) this 的時(shí)候,也不應(yīng)使用箭頭函數(shù)。
參與互動(dòng)
Web前端5道面試題
1.請(qǐng)說(shuō)明ECMAScript,JavaScript,Jscript之間的關(guān)系?
ECMAScript提供腳本語(yǔ)言必須遵守的規(guī)則、
細(xì)節(jié)和準(zhǔn)則,是腳本語(yǔ)言的規(guī)范。
比如:ES5,ES6就是具體的一js版本。
JavaScript是ECMAScript的一個(gè)分支版本,
JavaScript實(shí)現(xiàn)了多數(shù)ECMA-262中
描述的ECMAScript規(guī)范,但存在少數(shù)差異。
JScript是微軟公司對(duì)ECMA-262語(yǔ)言規(guī)范的
一種實(shí)現(xiàn),除了少數(shù)例外(這是為了保持向后兼容),
微軟公司宣稱(chēng)JScript完全實(shí)現(xiàn)了ECMA標(biāo)準(zhǔn).
關(guān)系:
JavaScript和JScript都是ECMAScript的版本分支,
二者在語(yǔ)法上沒(méi)有多大的區(qū)別;
只不過(guò)一個(gè)是NetScape公司的,一個(gè)是微軟的;
IE系列默認(rèn)是JScript,其它的則反之用JavaScript。
2.頁(yè)面加載過(guò)程中可能觸發(fā)哪些事件?它們的順序是?
頁(yè)面加載時(shí),大致可以分為以下幾個(gè)步驟:1)開(kāi)始解析HTML文檔結(jié)構(gòu)2)加載外部樣式表及JavaScript腳本3)解析執(zhí)行JavaScript腳本4)DOM樹(shù)渲染完成5)加載未完成的外部資源6)頁(yè)面加載成功
執(zhí)行順序:1)documentreadystatechange事件2)documentDOMContentLoaded事件3)windowload事件
3.函數(shù)中在聲明變量a前使用a會(huì)產(chǎn)生錯(cuò)誤嗎?為什么?
不會(huì),JS中能夠進(jìn)行變量作用域提升,
把所有變量、函數(shù)的聲明提升到當(dāng)前
作用域的最前面,但不進(jìn)行賦值操作;
所以可能造成獲取的值是undefined。
4.什么是hash,以及hashchange事件?
先了解下什么是hash:hash即URL中"#"字符后面的部分。
a)使用瀏覽器訪問(wèn)網(wǎng)頁(yè)時(shí),
如果網(wǎng)頁(yè)URL中帶有hash,
頁(yè)面就會(huì)定位到id(或name)
與hash值一樣的元素的位置;
b)hash還有另一個(gè)特點(diǎn),
它的改變不會(huì)導(dǎo)致頁(yè)面重新加載;
c)hash值瀏覽器是不會(huì)隨請(qǐng)求發(fā)送到服務(wù)器端的;
d)通過(guò)window.location.hash屬性獲取和設(shè)置hash值。
window.location.hash值的變化會(huì)直接
反應(yīng)到瀏覽器地址欄(#后面的部分會(huì)發(fā)生變化),同時(shí),瀏覽器地址欄hash值的變化也會(huì)觸發(fā)
window.location.hash值的變化,
從而觸發(fā)onhashchange事件。
再來(lái)了解下什么是hashchange事件:
a)當(dāng)URL的片段標(biāo)識(shí)符更改時(shí),
將觸發(fā)hashchange事件(跟在#符號(hào)后面的URL部分,包括#符號(hào))b)
hashchange事件觸發(fā)時(shí),
事件對(duì)象會(huì)有hash改變前的URL(oldURL)和hash改變后的URL(newURL)兩個(gè)屬性。
5.什么是CDN,CDN對(duì)于網(wǎng)站有什么意義,它有什么樣的缺點(diǎn)?
CDN又稱(chēng)為內(nèi)容分發(fā)網(wǎng)絡(luò);本意在于
盡可能避開(kāi)互聯(lián)網(wǎng)上有可能影響數(shù)據(jù)
傳輸速度和穩(wěn)定性的瓶頸和環(huán)節(jié),
使內(nèi)容傳輸?shù)母臁⒏€(wěn)定。
主要目的:
解決因分布、帶寬、服務(wù)器性能帶來(lái)的訪問(wèn)延遲問(wèn)題,
適用于站點(diǎn)加速、點(diǎn)播、直播等場(chǎng)景。
使用戶(hù)可就近取得所需內(nèi)容,解決Internet網(wǎng)絡(luò)擁擠的狀況,
提高用戶(hù)訪問(wèn)網(wǎng)站的響應(yīng)速度和成功率。
缺點(diǎn):
a)實(shí)施復(fù)雜,投資大;
b)目前大部分的CDN還只是對(duì)靜態(tài)內(nèi)容加速,
對(duì)動(dòng)態(tài)加速效果不好;
而雙線對(duì)動(dòng)態(tài)加速的效果跟靜態(tài)是一樣的。
js基礎(chǔ)面試題131-160道題目
131.用原生 JavaScript 的實(shí)現(xiàn)過(guò)什么功能嗎?
參考答案:輪播圖、手風(fēng)琴、放大鏡、3D動(dòng)畫(huà)效果等,切記,所答的一定要知道實(shí)現(xiàn)原理!,不知道還不如不說(shuō)!
參與互動(dòng)
132.javascript 代碼中的"use strict"; 是什么意思 ? 使用它區(qū)別是什么?
參考答案:意思是使用嚴(yán)格模式,使用嚴(yán)格模式,一些不規(guī)范的語(yǔ)法將不再支持
參與互動(dòng)
133.簡(jiǎn)述創(chuàng)建函數(shù)的幾種方式
參考答案:
參與互動(dòng)
134.window.location.search() 返回的是什么?
參考答案:查詢(xún)(參數(shù))部分。除了給動(dòng)態(tài)語(yǔ)言賦值以外,我們同樣可以給靜態(tài)頁(yè)面, 并使用 javascript 來(lái)獲得相信應(yīng)的參數(shù)值 返回值:?ver=1.0id=timlq 也就是問(wèn)號(hào)后面的!
參與互動(dòng)
135.window.location.hash 返回的是什么?
參考答案:錨點(diǎn) , 返回值:#love ;
參與互動(dòng)
136.window.location.reload() 作用?
參考答案:刷新當(dāng)前頁(yè)面
參與互動(dòng)
137.為什么不能定義 1px 左右的 p 容器?
參考答案: IE6 下這個(gè)問(wèn)題是因?yàn)槟J(rèn)的行高造成的,解決的方法也有很多,例如: overflow:hidden | zoom:0.08 | line-height:1px
參與互動(dòng)
138.BOM 對(duì)象有哪些,列舉 window 對(duì)象?
參考答案:
參與互動(dòng)
139.簡(jiǎn)述 readonly 與 disabled 的區(qū)別
參考答案:
參與互動(dòng)
140.為什么擴(kuò)展 javascript 內(nèi)置對(duì)象不是好的做法?
參考答案:
參與互動(dòng)
141.什么是三元表達(dá)式?“三元”表示什么意思?
參考答案:三元如名字表示的三元運(yùn)算符需要三個(gè)操作數(shù)。
語(yǔ)法是 條件 ? 結(jié)果1 : 結(jié)果2; .這里你把條件寫(xiě)在問(wèn)號(hào)(?)的前面后面跟著用冒號(hào)(:)分隔的結(jié)果1和結(jié)果2。滿(mǎn)足條件時(shí)結(jié)果1否則結(jié)果2。
參與互動(dòng)
142.我們給一個(gè) dom 同時(shí)綁定兩個(gè)點(diǎn)擊事件,一個(gè)用捕獲,一個(gè)用冒泡,你來(lái)說(shuō)下會(huì)執(zhí)行幾次事件,然后會(huì)先執(zhí)行冒泡還是捕獲
參考答案:所有事件的順序是:其他元素捕獲階段事件 - 本元素代碼順序事件 - 其他元素冒泡階段事件 。
參考
參與互動(dòng)
144.簡(jiǎn)述一下 Handlebars 的基本用法?
參考答案:沒(méi)有用過(guò)的話說(shuō)出它是干什么的即可
參與互動(dòng)
143.簡(jiǎn)述一下 Handlerbars 的對(duì)模板的基本處理流程, 如何編譯的?如何緩存的?
參考答案:
參與互動(dòng)
145.前端 templating(Mustache, underscore, handlebars)是干嘛的, 怎么用?
參考答案:
參與互動(dòng)
146.知道什么是 webkit 么? 知道怎么用瀏覽器的各種工具來(lái)調(diào)試和 debug 代碼么?
參考答案:Webkit 是瀏覽器引擎,包括 html 渲染和 js 解析功能,手機(jī)瀏覽器的主流內(nèi)核,與之相對(duì)應(yīng)的引擎有 Gecko(Mozilla Firefox 等使用)和 Trident(也稱(chēng) MSHTML,IE 使用)。 對(duì)于瀏覽器的調(diào)試工具要熟練使用,主要是頁(yè)面結(jié)構(gòu)分析,后臺(tái)請(qǐng)求信息查看,js 調(diào)試工具使用,熟練使用這些工具可以快速提高解決問(wèn)題的效率
參與互動(dòng)
147.如何測(cè)試前端代碼? 知道 BDD, TDD, Unit Test 么? 知道怎么測(cè)試你的前端工程么(mocha, sinon, jasmin, qUnit..)?
參考答案:了解 BDD 行為驅(qū)動(dòng)開(kāi)發(fā)與 TDD 測(cè)試驅(qū)動(dòng)開(kāi)發(fā)已經(jīng)單元測(cè)試相關(guān)概念
參與互動(dòng)
148.JavaScript 的循環(huán)語(yǔ)句有哪些?
參考答案:while for do while forEach
參與互動(dòng)
149.作用域-編譯期執(zhí)行期以及全局局部作用域問(wèn)題
參考答案:js 執(zhí)行主要的兩個(gè)階段:預(yù)解析和執(zhí)行期
參與互動(dòng)
150.如何添加 html 元素的事件,有幾種方法?請(qǐng)列舉
參考答案:直接在標(biāo)簽里添加;在元素上添加、使用事件注冊(cè)函數(shù)添加
參與互動(dòng)
151.列舉瀏覽器對(duì)象模型 BOM 里常用的至少 4 個(gè)對(duì)象,并列舉 window 對(duì)象的常用方法至少 5 個(gè)
參考答案:
對(duì)象:Window document location screen history navigator
方法:Alert() confirm() prompt() open() close()
參與互動(dòng)
152.事件綁定的方式
參考答案:
參與互動(dòng)
153.事件循環(huán)
參考答案:事件循環(huán)是一個(gè)單線程循環(huán),用于監(jiān)視調(diào)用堆棧并檢查是否有工作即將在任務(wù)隊(duì)列中完成。如果調(diào)用堆棧為空并且任務(wù)隊(duì)列中有回調(diào)函數(shù),則將回調(diào)函數(shù)出隊(duì)并推送到調(diào)用堆棧中執(zhí)行。
參與互動(dòng)
154.事件模型
參考答案:
解析:參考
參與互動(dòng)
155.如何自定義事件
參考答案:
1.原生提供了 3 個(gè)方法實(shí)現(xiàn)自定義事件 2.createEvent,設(shè)置事件類(lèi)型,是 html 事件還是 鼠標(biāo)事件 3.initEvent 初始化事件,事件名稱(chēng),是否允許冒泡,是否阻止自定義事件 4.dispatchEvent 觸發(fā)事件
MDN
參與互動(dòng)
156.target 和 currentTarget 區(qū)別
參考答案:
參與互動(dòng)
157.prototype 和__proto__的關(guān)系是什么
參考答案:
所有的對(duì)象都擁有__proto__屬性,它指向?qū)ο髽?gòu)造函數(shù)的 prototype 屬性
所有的函數(shù)都同時(shí)擁有__proto__和 protytpe 屬性 函數(shù)的__proto__指向自己的函數(shù)實(shí)現(xiàn) 函數(shù)的 protytpe 是一個(gè)對(duì)象 所以函數(shù)的 prototype 也有__proto__屬性 指向 Object.prototype
Object.prototype.__proto__指向 null
參與互動(dòng)
158.什么是原型屬性?
參考答案:從構(gòu)造函數(shù)的prototype屬性出發(fā)找到原型,這時(shí)候就把原型稱(chēng)之為構(gòu)造函數(shù)的原型屬性
參與互動(dòng)
159.什么是原型對(duì)象?
參考答案:從實(shí)例的__proto__出發(fā),找到原型,這時(shí)候就把原型稱(chēng)之為實(shí)例的原型對(duì)象。
參與互動(dòng)
160.使用 let、var 和 const 創(chuàng)建變量有什么區(qū)別
參考答案:
let 和 const 的區(qū)別在于:let 允許多次賦值,而 const 只允許一次。
javascript面試題級(jí)答案
這個(gè)可以到網(wǎng)上找一下呀!
=========================================
1、談?wù)刯avascript數(shù)組排序方法sort()的使用,重點(diǎn)介紹sort()參數(shù)的使用及其內(nèi)部機(jī)制
2、簡(jiǎn)述DIV元素和SPAN元素的區(qū) 別。
3、結(jié)合text這段結(jié)構(gòu),談?wù)刬nnerHTML outerHTML innerText之間的區(qū)別。
4、說(shuō)幾條XHTML規(guī)范 的內(nèi)容(至少3條)
5、對(duì)Web標(biāo)準(zhǔn)化(或網(wǎng)站重構(gòu))知道哪些相關(guān)的知識(shí),簡(jiǎn)述幾條你知道的Web標(biāo)準(zhǔn)?
答案:
1、 sort的實(shí)現(xiàn)的功能類(lèi)似JAVA的比較器,數(shù)據(jù)排序從多維數(shù)組的第一維開(kāi)始排序,可以自己定義排序方法,很不多的函數(shù)
2、DIV有回 車(chē),SPAN沒(méi)有
3、 innerHTML對(duì)象里面的HTML
outerHTML包括對(duì)象和里面的HTML
innerText對(duì)象里面的文本
4、屬性加引號(hào),不能有不匹配的標(biāo)簽,加定義
5、W3C標(biāo)準(zhǔn)等
當(dāng)前題目:javascript面試題的簡(jiǎn)單介紹
網(wǎng)站鏈接:http://fisionsoft.com.cn/article/dssggcj.html