萬丈高樓平地起，鞏固你的基礎知識點，js知識點鞏固第一步，面試不在難（1）

前言

萬丈高樓平地起，爲了更好的工做咱們必須熟記這些知識點。雖然不必定用到，但記仍是要記得。這個只是我知識點整理的第一步後面會慢慢更新的，看的好能夠點個贊，謝啦!es6

1.JS

1.1 JS 數據類型

JS基本有5種簡單數據類型：Number,String,Bolean,Null,Underfined.引用數據類型：function,Object,Arrayajax

判斷數據類型的方法

經常使用的數據類型判斷方法有三種typeof,instanceof,Object.prototype.toString.call()下面介紹一下這幾種方法。數組

typeof

console.log(typeof 2);              //number
    console.log(typeof true)            //bolean;
    console.log(typeof 'str')           //string;
    console.log(typeof underfined)      //underfined;
    console.log(typeof [])              //object;
    console.log(typeof {})              //object;
    console.log(typeof function(){})    //function;
    console.log(typeof null)            //object
複製代碼

優勢：可以快速區分基本數據類型缺點：不能區分object array null 都返回object;bash

insranceof

有點：可以區分Array、Object和function,適合於判斷自定義的實例對象缺點：Number、Bolean、String基本數據類型不能判斷markdown

console.log(2 instanceof Number);  //false;
console.log(true instanceof Bolean); //false;
console.log('str' instanceof String) //false;
console.log([] instanceof Array);  //true;
console.log(function(){} instanceof Function) //true;
console.log({} instanceof Object);  //true

複製代碼

Object.prototype.toString.call()

優勢：精準判斷數據類型
缺點：寫法繁瑣不容易記，封裝後使用閉包

var toString = Object.prototype.toString;
console.log(toString.call(2))   //[Object Number];
console.log(toString.call(true))  //[Object Boolean];
console.log(toString.call('str')) //[Object String];
console.log(toString.call([]))    //[Object Array];
console.log(toString.call(function(){})) //[Object Function];
console.log(toString.call({}))  //[Object Object];
console.log(toString.call(underfined));   //[Object underfined];
console.log(toString.call(null)); //[Object Null]
複製代碼

1.2 var,let,const的區別

let 爲ES6新增的變量生命的命令，它相似於var,可是有如下不一樣：app

var聲明的變量，其做用域爲該語句所在的函數內，且存在變量提高現象。
let聲明的變量，其做用域爲該語句所在的代碼塊內，不存在變量提高。
const聲明的變量不容許修改。

null和undefined區別

Undefined類型只有一個值，即underfined.當變量聲明但未被初始化時，變量的默認值即爲underfined.
函數

用法：this

變量被聲明瞭，但沒有賦值時，就等於underfined。
調用函數時，應該提供的參數沒有提供，該參數等於underfined。
對象沒有賦值的屬性，該屬性的值爲underfined。
函數沒有返回值時，默認返回underfined.

Null類型也只有一個值，即null。null用來表示還沒有存在的對象，經常使用來表示函數企圖返回一個不存在的對象
用法：spa

做爲函數的參數，表示該函數的參數不是對象。
表示原型鏈的終點。

1.3 定義函數的方法

1.函數聲明

//ES5
function fntName(){};
function (){};//匿名函數
//es6
()=>{}

複製代碼

2.函數表達式

//ES5 
var fntName = function () {};
//ES6
let fntName =()=>{};
複製代碼

3.構造函數

const fntName = new Function()
複製代碼

1.4 原生ajax

//如何建立ajax
XMLHttpRequest對象的工做流程
<!---兼容性寫法----!>
var xmlHttp = null;
if(window.XMLHttpRequest){
    //IE7+,FireFox,Chrome,Safari,Opera
    xmlHttp = new XMLHttpRequest();
}else{
    //IE5 IE6
    xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
}
兼容性處理
事件的觸發條件
複製代碼

1.5 js做用域的理解

其實js做用域的內容仍是蠻多的，要單獨寫一篇長文才能講的清楚。因此這邊就簡單的總結一下。

js中做用域通常分爲全局做用域和局部做用域。一個變量是屬於全局做用域仍是屬於局部做用域主要看的是變量生命的位置。如果在函數內部生命的那麼這個變量就是該函數的局部變量。如果在外部生成的那麼這個變量就是全局變量。

全局做用域和局部做用域的區別

全局做用域：在任何地方都能訪問函數外定義的變量擁有全局做用域不使用var定義的變量擁有全局做用域全部window對象上的屬性擁有全局做用域沒有聲明在任何函數內部的函數擁有全局做用域

局部做用域：只能在函數內部訪問使用var在函數內部定義的變量,和使用function在函數內部聲明的函數,擁有局部做用域

1.6 閉包的簡單理解

簡單來講閉包就是在函數裏面聲明函數，本質上說就是在函數內部和函數外部搭建起一座橋樑，
子函數能夠訪問父函數中全部的局部變量，可是父函數不能訪問子函數的局部變量另外一個做用
就是保護變量不受外界環境污染，使其一直存在內存中。可是閉包對內存消耗比較大
不建議常用。
複製代碼

1.6 數組去重的幾種方法

####（一）利用ES6中的Set 方法去重####

//Set 是Es6新增的一個對象，容許存儲任何類型的（原始值或引用值）的惟一值。
    let arr = [1,0,0,2,8,8,7];
    function removal (arr){
        return [...new Set(arr)]    
    };
    console.log(removal(arr));
複製代碼

(二) 使用for循環加indexOf判斷去重

let arr = [1, 5, 6, 0, 7, 3, 0, 5, 9,5,5];
function removal (arr){
    let newArr=[];
    for(var i=0;i<arr.length;i++){
        if(newArr.indexOf(arr[i])===-1){
            newArr.push(arr[i])
        };
    };
    return newArr;
};
console.log(removal(arr));//[1, 5, 6, 0, 7, 3, 9]
複製代碼

(三) 雙重for循環去重####

let arr=[1,8,4,23,4,23,432,4,443,2,1,8];
function removal(arr){
    for(var i=0;i<arr.length;i++){
        
        for(var j=i+1,len=arr.length;j<len;j++){
           if(arr[i]===arr[j]){
               arr.splice(j,1);
               j--;
               len--;
           } 
        }
    };
    return arr;
};
console.log(removal(arr));//[1, 8, 4, 23, 432, 443, 2]
複製代碼

1.7 call，apply和bind的區別

在JS中這三者都是爲了改變函數中this的指向，下面我將介紹一下這三者的共同點和區別

（一）類似處

都是用來改變函數的this對象的指向
第一個參數都是this要指向的對象
均可以利用後續參數傳參

（二）區別

例：

var xiaoW={
    name:"小王"，
    gender:"男"，
    age:"24",
    fnc:function(){
        console.log(`${this.name}${this.gender}今年${this.age}歲`)
    }
}；
var xiaoH={
    name:"小紅",
    gender:'男',
    age:"24",
};
xiaoW.fnc();//小王男今年24
複製代碼

如上代碼，xiaoW.fnc 執行時打出的時'小王男今年24歲'，但咱們小執行xiaoW.fnc這個函數但輸出的確實xiaoH這個資料那該怎麼作呢？

//對於call:
xiaoW.fnc.call(xiaoH);
//
//對於apply:
xiaoW.fnc.apply(xiaoH);
//
//對於bind來講
xiaoW.fnc.bind(xiaoH)();
//
複製代碼

bind和apply call 的區別

如上所示，在代碼書寫中很明顯的bind的書寫形式和apply 和 call 是不同的。咱們寫xiaoW.fnc.bind(xiaoH)是不會有任何結果的。由於call 和 apply 是直接對函數進行調用，而bind方法返回的仍然是一個函數，所以後面還要()來進行調用。

call 和 apply 的區別

列

var xiaoW={
    name:"小王"，
    gender:"男"，
    age:"24",
    fnc:function(school,grade){
        console.log(`${this.name}${this.gender}今年${this.age}歲在${school}上${grade}`)
    }
}；
var xiaoH={
    name:"小紅",
    gender:'男',
    age:"24",
};
複製代碼

//如上能夠看到say方法多了兩個參數，咱們能夠經過call/apply的參數進行傳參
//對於call:
xiaoW.fnv.call(xiaoH,"小學"，"六年級")
//對於apply
xiaoW.fnv.apply(xiaoH,["小學"，"六年級"]);
//call後面的參數與say方法中是一一對應的，而apply的第二個參數是一個數組，數組中的元素是和say方法中一一對應的，這就是//二者最大的區別。

//那麼bind如何傳參呢
//bind有兩種傳參方法
xiaoW.fnv.bind(xiaoH,"小學"，"六年級")
xiaoW.fnv.bind(xiaoH)("小學"，"六年級")
複製代碼

for...in 和 for...of

for...in for...of會遍歷可遍歷對象的全部屬性 for...in

let arr = [1,2,3,4,5];
arr.name='name';
for(key in arr){
    console.log(key)//0,1,2,3,4,name;
    console.log(arr[key]//1,2,3,4,5,name;
};

複製代碼

從上面能夠看出來for...in中遍歷的是數組的索引（鍵名），咱們在arr數組中給它加了一個name的屬性也會被遍歷出來。因此for...通常用於遍歷對象，值是它的鍵值。 for...of

let arr=[1,2,3,4,5];
arr.name=name;
for(let key of arr){
    console.log(key);//1,2,3,4,5
}
複製代碼

從上面能夠看出for...of輸出的是數組裏面的每一個值，咱們新增的鍵值對並無被輸出。

總結

for..in循環出的是key值，for..of循環出的是value值。
推薦在循環對象屬性的時候，使用for...in,在遍歷數組的時候使用for...of
for..of不能循環普通對象，須要經過和object.keys()搭配使用。