前端知識點總結(自用)

基礎類:

一、數據類型的轉換和比較。 (+2)數據類型轉換

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

一、函數傳參

對象類型是引用傳遞html

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)vue

+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)node

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

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

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

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

六、正則(獲取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選擇器

image

七、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的區別,優點。
五、跨域方法
思路:說到跨域先了解同源策略——>常見的跨域場景——>解決方案
六、組件化

組件可複用性ios

七、設計模式;
經常使用的設計模式以及解決了什麼問題
八、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/git

相關文章
相關標籤/搜索