前端知識點總結（自用）

基礎類：

一、數據類型的轉換和比較。 （+2）數據類型轉換

+true; //1 ,一元加號會嘗試將boolean類型轉換爲數字類型。 true被轉換爲1，false被轉換爲0。
!"Lydia"; //false

一、函數傳參

對象類型是引用傳遞

function person(per){
    per.name = 'haha';
    per.age = 3;
    console.log(per)
}
person({name:"www", age: 2})
// {name: "haha", age: 3}

二、Object.is()和==，===的區別

Object.is方法在===的基礎上增長了NaN和NaN是相等的；+0和-0是不相等的
延伸：==隱式轉換規則； 運算符的優先級；(+1)

+0 === -0   //true
+0 === -'0'   //true
+1 === -'1'   //false
Object.is(+0, -0) //false

二、閉包題。https://segmentfault.com/a/11...

三、事件委託。https://segmentfault.com/a/11...

三、http協議狀態碼，301和302的區別，304緩存類型，強緩存和協商緩存的區別。

常見的狀態碼有200，301,302，304，400,404,401,500,502
其中以2開頭的表明請求成功，
以3開頭的是重定向，其中301是永久重定向，302是臨時重定向，
強緩存和協商緩存[緩存](https://mp.weixin.qq.com/s/dnEbgNnu7rL9i2V_Zjjnyw)**（+3）**

四、js運行機制。js運行機制（+2）

五、es6用過哪些。promise的實現原理(+1)，all方法(+2)。

Promise.all = function(arr){
    let result = [], count = 0;
    return new Promise(function(resolve, reject){
        for(let item of arr){
            item.then(res=>{
                result[count] = res; 
                count++; 
                if(count === arr.length){
                    resolve(result);
                }
            })
        };  
    });
};
let promise1 = new Promise(function(resolve) {
  resolve(1);
});
let promise2 = new Promise(function(resolve) {
  resolve(2);
});
let promise3 = new Promise(function(resolve) {
  resolve(3);
});
let promiseAll = Promise.all([promise1, promise2, promise3]);
promiseAll.then(function(res) {
  console.log(res);
});

Promise.all = function(arr){
    let result = [], count = 0;
    return new Promise(function(resolve, reject){
        arr.map(item=>{ 
            item.then(res=>{
                result[count] = res;
                count++;
                (count === arr.length) && resolve(result);
            }).catch(err=>{
                result[count] = err;
                count++;
                (count === arr.length) && resolve(result);
            });
        });
    });
};
var p1 = new Promise(function(resolve, reject){reject(1)})
var p2 = new Promise(function(resolve, reject){resolve(2)})
Promise.all([p1, p2]).then(res=>{
    console.log(res)
})

let，const，var聲明變量的做用域不一樣；變量提高；（+1）

   變量的賦值能夠分爲三個階段：
 一、建立變量，在內存中開闢空間
 二、初始化變量，將變量初始化爲undefined（let和const聲明的初始化時不會分配內存，因此會存在暫時性死區）
 三、真正賦值

• let，const，var的區別（+1）

做用域概念不一樣；變量提高（+1）

• es6數組經常使用的api（+1）
• set，map，剪頭函數和普通函數的區別（+1）
• map遍歷相對於其餘遍歷方式的優勢（+1）
• class
• 模板字符串：標籤模板
• await和async的使用（+1）
• promise.all的實現（+2）

六、isNaN和Number.isNaN的區別。

isNaN會有一個轉換，可以轉換爲數字類型的都返回false，
Number.isNaN是嚴格判斷是否爲NaN

六、數組的flat扁平化方法。

返回一個新數組對原數組沒有影響，默認扁平化一級

六、正則（獲取url參數等）。

七、純函數 （+1）

七、數據類型的判斷（+1）

七、instanceof的實現原理（+1）

七、手寫new的實現（+2）

funtion myNew(fn, arg){
    var obj = {};
    obj.__proto__ = fn.prototype;
    fn.apply(obj, arg);
    return obj;
}

七、手寫call和apply的實現（+1）

七、defer和async的區別（+1）

七、js監聽對象屬性的改變具體是怎麼實現的，它們各自有什麼特色？（+1）

七、移動端適配；sass，less的優勢；移動端幾倍圖是根據什麼來定義的（+1）

七、css佈局，flex佈局方式（+1）

七、實現正方形（+2）

七、五種以上居中方式居中（+1）

七、瀏覽器如何解析css選擇器

七、css樣式衝突的解決方案，scoped的實現原理

七、css選擇器的優先級（+1）

框架應用類：

一、防抖節流；（+3）

防抖可應用於阻止重複發送請求，一段時間內重複觸發的話則會從新計算時間，只會執行最後一次；
節流是隻認第一次的操做，在某一時間段內無論觸發多少次，只執行第一次函數的回調；

二、vue雙向數據綁定的實現。（+2）

defineProperty——>

二、computed和watch的區別。（+2）

三、vue中key的做用是什麼？（+2）

——>diff算法——>重繪和迴流（重排）
重繪迴流（+1）

三、vue生命週期（+1）

三、webpack相關。

• 優化（配置優化，代碼優化）（+2）
• webpack熱更新原理（+1）
• chunk和baundle的區別（+1）
• 壓縮插件的弊端（+1）

四、axios和ajax的區別，fetch的區別，優點。

五、跨域方法。

思路：說到跨域先了解同源策略——>常見的跨域場景——>解決方案

六、組件化

組件可複用性

七、設計模式；

經常使用的設計模式以及解決了什麼問題

八、cdn

八、node的瞭解

九、vue和react的設計理念，react的簡單瞭解

九、輸入url到頁面渲染髮生了什麼（+1）

九、性能優化（+1）

九、性能監控（+1）

九、http協議相關（+1）

九、export和export default，moudle.export的區別（+1）

九、內存泄露（+1）

算法類：

一、數組去重，考慮優化，儘可能用最優的算法實現。數組去重方法

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

var obj = {};
for(var i = 0, len = arr.length; i < len; i++){
    if(!obj[arr[i]]){
        obj[arr[i]] = arr[i];
    } 
} 
console.log(Object.values(obj))

利用indexOf

二、尋找數組中第k大值。

二、判斷字符串同構。

三、排序，二叉樹遍歷（中序（+1），後序，前序）。

三、微信紅包算法。

https://github.com/mqyqingfeng/Blog
https://muyiy.cn/question/