面試總結(jié)JavaScript篇

Jensen 發(fā)布于2019-08-22 16:14 / 2180人閱讀

摘要：對(duì)象當(dāng)調(diào)用某種方法或查找某種屬性時(shí)，首先會(huì)在自身調(diào)用和查找，如果自身并沒(méi)有該屬性或方法，則會(huì)去它的屬性中調(diào)用查找，也就是它構(gòu)造函數(shù)的中調(diào)用查找，如果構(gòu)造函數(shù)中也沒(méi)有該屬性方法，則會(huì)去構(gòu)造函數(shù)的隱式原型中查找，一直到，就這樣形成原型鏈。

此文主旨是記錄面試中遇到的面試題，包括js中常見(jiàn)，易錯(cuò)，重要知識(shí)點(diǎn)

window.onload和$(document).ready()的區(qū)別

window.onload是在頁(yè)面中包含圖片在內(nèi)的所有元素全部加載完成再執(zhí)行；
$(document).ready()是DOM樹(shù)加載完成之后執(zhí)行，不包含圖片，其他媒體文件；
因此$(document).ready()快于window.onload執(zhí)行；

數(shù)組去重

const arr = ["a","bb","22","a","yuci","haha","22"];

1.es6數(shù)據(jù)結(jié)構(gòu)Set

let unique = new Set(arr);  
console.log(Array.from(unique));

2.使用push()

let arr2 = [];  
for(let i = 0; i < arr.length; i++) {  
    if(arr2.indexOf(arr[i]) == -1) { //不包含某個(gè)值則返回-1  
        arr2.push(arr[i]);  
    }  
}  
console.log(arr2);

//如果當(dāng)前數(shù)組的第i項(xiàng)在當(dāng)前數(shù)組中第一次出現(xiàn)的位置不是i，那么表示第i項(xiàng)是重復(fù)的，忽略掉。否則存入結(jié)果數(shù)組  
let arr3 = [arr[0]];  
for(let i = 1; i < arr.length; i++) {  
    if(arr.indexOf(arr[i]) == i) {  
        arr3.push(arr[i]);  
    }  
}  
console.log(arr3);

3.排序去除相鄰重復(fù)元素

let arrSort = arr.sort();  
let arr4 = [];  
for(let i = 0; i< arrSort.length; i++) {  
    if(arrSort[i] != arrSort[i+1]) {  
        arr4.push(arrSort[i]);  
    }  
}  
console.log(arr4);

4.使用splice()

let len = arr.length;  
for(let i = 0; i < len; i++) {  
    for(let j = i + 1; j < len; j++) {  
        if(arr[i] === arr[j]) {  
            arr.splice(i,1);  
            len--;  
            j--;  
        }  
    }  
}  
console.log(arr);

事件委托

得益于事件冒泡，當(dāng)多個(gè)元素有相同的事件，將事件綁定在父元素

var oUl = document.getElementById("oul");  
oUl.addEventListener("click", function(e) {  
    var e = e||window.event;  
    var tar = e.target;  
    if(tar.nodeName === "LI") {  
        alert(tar.innerHTML);  
    }  
})

更詳細(xì)請(qǐng)看：事件委托

判斷變量類型

typeof()用于判斷簡(jiǎn)單數(shù)據(jù)；

判斷一個(gè)變量是對(duì)象還是數(shù)組使用instanceof，constructor或Object.prototype.toString.call()；

更詳細(xì)請(qǐng)看：判斷數(shù)據(jù)類型

同步和異步（簡(jiǎn)要闡述）

同步：由于js單線程，同步任務(wù)都在主線程上排隊(duì)執(zhí)行，前面任務(wù)沒(méi)執(zhí)行完成，后面的任務(wù)會(huì)一直等待；

異步：不進(jìn)入主線程，進(jìn)入任務(wù)隊(duì)列，等待主線程任務(wù)執(zhí)行完成，開(kāi)始執(zhí)行。最基礎(chǔ)的異步操作setTimeout和setInterval，等待主線程任務(wù)執(zhí)行完，在開(kāi)始執(zhí)行里面的函數(shù)；

更詳細(xì)請(qǐng)看：js運(yùn)行機(jī)制

返回false的幾種情況

false，null，0，“”，undefined，NaN

js類型值的區(qū)別

存儲(chǔ)地：

簡(jiǎn)單數(shù)據(jù)類型：存儲(chǔ)在棧中；

引用數(shù)據(jù)類型：存儲(chǔ)在堆中，在棧中存儲(chǔ)了指針，指向存儲(chǔ)在堆中的地址，解釋器會(huì)先檢索在棧中的地址，從堆中獲得實(shí)體；

大小：

簡(jiǎn)單數(shù)據(jù)類型：大小固定，占用空間小，頻繁使用，所以存儲(chǔ)在棧中；

引用數(shù)據(jù)類型：大小不固定，占用空間大；

閉包

何為閉包：有權(quán)訪問(wèn)另一個(gè)作用域中變量的函數(shù)

閉包特性：可實(shí)現(xiàn)函數(shù)外訪問(wèn)函數(shù)內(nèi)變量，外層變量可以不被垃圾回收機(jī)制回收

為什么？怎么解決？

for(var i = 0; i < 10; i++) {  
    setTimeout(function() {  
        console.log(i);    
    }, 1000);  
}

輸出結(jié)果都為10，因?yàn)閒or()循環(huán)過(guò)程中每次傳值，匿名函數(shù)并沒(méi)有執(zhí)行，相當(dāng)于執(zhí)行10次function(){console.log(i);}，循環(huán)結(jié)束i變?yōu)?0，所以輸出全部為10；

使用閉包，自執(zhí)行匿名函數(shù)包裹:

for(var i = 0; i < 10; i++) {  
    (function(j) {  
        setTimeout(function() {  
            console.log(j);    
        }, 1000);  
    })(i);  
}

外部匿名函數(shù)立即執(zhí)行，把 i 作為參數(shù)，賦值給 j ，因?yàn)槭橇⒓磮?zhí)行，所以每次循環(huán)輸出不同值。

引用外層變量不被回收，會(huì)相比其他函數(shù)占用更高內(nèi)存，使用不當(dāng)容易造成內(nèi)存泄漏。

this的指向

全局范圍：指向window（嚴(yán)格模式下不存在全局變量，指向undefined）;

普通函數(shù)調(diào)用：指向window;

對(duì)象方法調(diào)用：指向最后調(diào)用它的對(duì)象；

構(gòu)造函數(shù)調(diào)用：指向new出來(lái)的對(duì)象；

顯示設(shè)置this：call，apply方法顯示將this指向第一個(gè)參數(shù)指明的對(duì)象

new具體做了些什么

創(chuàng)建一個(gè)新對(duì)象foo；

并將它的__proto__指向其構(gòu)造函數(shù)的prototype，foo.__proto__ = Foo.prototype;

動(dòng)態(tài)將this指向新對(duì)象，F(xiàn)oo.apply(foo，arguments);

執(zhí)行函數(shù)體中的代碼；

放回新對(duì)象foo;

原型和原型鏈

創(chuàng)建一個(gè)函數(shù)就會(huì)為其創(chuàng)建一個(gè)prototype屬性，指向這個(gè)函數(shù)的原型對(duì)象，原型對(duì)象會(huì)自動(dòng)獲得constructor屬性，指向prototype屬性所在函數(shù)。

Function.prototype.a = "a";    
Object.prototype.b = "b";    
function Person(){}    
console.log(Person);    //function Person()    
let p = new Person();    
console.log(p);         //Person {} 對(duì)象    
console.log(p.a);       //undefined    
console.log(p.b);       //b

p.__proto__ === Person.prototype；Person.prototype.constructor === Person

當(dāng)調(diào)用某種方法或查找某種屬性時(shí)，首先會(huì)在自身調(diào)用和查找，如果自身并沒(méi)有該屬性或方法，則會(huì)去它的__proto__屬性中調(diào)用查找，也就是它構(gòu)造函數(shù)的prototype中調(diào)用查找，如果構(gòu)造函數(shù)中也沒(méi)有該屬性方法，則會(huì)去構(gòu)造函數(shù)的隱式原型中查找，一直到null，就這樣形成原型鏈。

更多有關(guān)原型請(qǐng)看：原型和原型鏈

繼承方式

原型鏈繼承：

Child()的原型作為Parent()的實(shí)例來(lái)繼承Parent()的方法屬性

因?yàn)樗袑?shí)例都繼承原型方法屬性，其中一個(gè)實(shí)例對(duì)原型屬性值更改后，所有實(shí)例調(diào)用該屬性的值全部更改

function Parent() {}  
Parent.prototype.parentSay = function() {  
    return "i am parent";  
}  
function Child() {}  
Child.prototype.childSay = function() {  
    return "i am child";  
}  
Child.prototype = new Parent();  
var par = new Parent();  
var kid = new Child();  
  
console.log(kid.parentSay());           //i am parent

構(gòu)造函數(shù)繼承：

在子類的構(gòu)造函數(shù)內(nèi)部通過(guò)call或apply來(lái)調(diào)用父類構(gòu)造函數(shù)

無(wú)法實(shí)現(xiàn)函數(shù)的復(fù)用

function People() {  
    this.name = ["zhangsan","lisi","wangwu"];  
}  
function Person() {  
    People.call(this);  
}  
var per1 = new Person();  
per1.name.push("zhanliu");  
console.log(per1.name);     //["zhangsan", "lisi", "wangwu", "zhanliu"]  
  
var per2 = new Person();  
console.log(per2.name);     //["zhangsan", "lisi", "wangwu"]

組合繼承：

將原型鏈繼承和構(gòu)造函數(shù)繼承結(jié)合，最常用的繼承模式

原型鏈繼承共享的屬性和方法，構(gòu)造函數(shù)繼承實(shí)例屬性

function People(num) {  
    this.num = num;  
    this.name = ["zhangsan","lisi","wangwu"];  
}  
People.prototype.numCount = function() {  
    console.log(this.num);  
}  
function Person(num) {  
    People.call(this, num);  
}  
//繼承方式  
Person.prototype = new People();  
Person.prototype.constructor = Person;  
  
var per1 = new Person(10);  
per1.name.push("zhaoliu");  
console.log(per1.name);     //["zhangsan", "lisi", "wangwu", "zhanliu"]  
per1.numCount();            //10  
  
var per2 = new Person(20);  
console.log(per2.name);     //["zhangsan", "lisi", "wangwu"]  
per2.numCount();            //20

更多繼承方式請(qǐng)看：繼承方式

數(shù)組常用方法

改變?cè)瓟?shù)組：

尾部刪除pop()，尾部添加push()，頭部刪除shift()，頭部添加unshift()，排序sort()，顛倒數(shù)組元素reverse()，刪除或插入元素splice();

不會(huì)改變?cè)亟M：

合并數(shù)組concat()，拼接數(shù)組元素join()，截取元素slice()，indexOf()，lastIndexOf()，toString()

更詳細(xì)數(shù)組方法總結(jié)請(qǐng)看：Array數(shù)組方法總結(jié)

數(shù)據(jù)存儲(chǔ)

Cookie：用于客戶端與服務(wù)端通信，也具有本地存儲(chǔ)的功能

localStorage，sessionStorage：專門(mén)用于存儲(chǔ)

區(qū)別：

大小：Cookie容量為4K，因?yàn)橛糜诳蛻舳伺c服務(wù)端通信，所有http都攜帶，如果太大會(huì)降低效率； localStorage，sessionStorage大小為5M。

失效時(shí)間：Cookie會(huì)在瀏覽器關(guān)閉時(shí)刪除，除非主動(dòng)設(shè)置刪除時(shí)間；localStorage一直都在直到用戶主動(dòng)刪除或清除瀏覽器緩存；sessionStorage在瀏覽器關(guān)閉時(shí)刪除。

結(jié)束語(yǔ)：

如有錯(cuò)誤，歡迎指正