前端知識點總結
基礎類：
? 1、數據類型的轉換和比較。 （+2）?數據類型轉換
? +true; //1 ,一元加號會嘗試將?boolean?類型轉換為數字類型。?true?被轉換為?1?，?false?被轉換為?0?。
? !"Lydia"; //false
1、函數傳參
對象類型是引用傳遞
function person(per){
? ? ??per.name = 'haha';
? ? ? ?per.age = 3;
? ? ? ?console.log(per)
}
person({name:"www", age: 2})
// {name: "haha", age: 3}
2、Object.is()和==，===的區別
Object.is方法在===的基礎上增加了NaN和NaN是相等的；+0和-0是不相等的
延伸：==?隱式轉換?規則；?運算符的優先級?；?(+1)
+0 === -0 //true
+0 === -'0' //true
+1 === -'1' //false
Object.is(+0, -0) //false
2、閉包題。?https://segmentfault.com/a/11...
3、事件委托。?https://segmentfault.com/a/11...
3、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）**
4、js運行機制。?js運行機制?（+2）
5、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）
? ? ?變量的賦值可以分為三個階段：
1、創建變量，在內存中開辟空間
2、初始化變量，將變量初始化為undefined（let和const聲明的初始化時不會分配內存，所以會存在暫時性死區）
3、真正賦值
? let，const，var的區別?（+1）
作用域概念不同；?變量提升（+1）
es6數組常用的api?（+1）
set，map，剪頭函數和普通函數的區別?（+1）
map遍歷相對于其他遍歷方式的優點?（+1）
class
模板字符串：標簽模板
await和async的使用?（+1）
promise.all的實現?（+2）
6、isNaN和Number.isNaN的?區別?。
isNaN會有一個轉換，能夠轉換為數字類型的都返回false，
Number.isNaN是嚴格判斷是否為NaN
6、數組的flat扁平化方法。
返回一個新數組對原數組沒有影響，默認扁平化一級
6、正則（獲取url參數等）。
7、純函數 （+1）
7、數據類型的判斷?（+1）
7、instanceof的實現原理?（+1）
7、手寫new的實現?（+2）
7、手寫call和apply的實現（+1）
7、defer和async的區別?（+1）
7、js監聽對象屬性的改變具體是怎么實現的，它們各自有什么特點？?（+1）
7、移動端適配；sass，less的優點；移動端幾倍圖是根據什么來定義的?（+1）
7、css布局，flex布局方式?（+1）
7、實現正方形?（+2）
7、五種以上居中方式?居中?（+1）
7、瀏覽器如何解析css選擇器
7、css樣式沖突的解決方案，scoped的實現原理
7、css選擇器的優先級（+1）
框架應用類：
1、?防抖節流?；?（+3）
防抖可應用于阻止重復發送請求，一段時間內重復觸發的話則會重新計算時間，只會執行最后一次；
節流是只認第一次的操作，在某一時間段內不管觸發多少次，只執行第一次函數的回調；
2、vue雙向數據綁定的實現。（+2）
defineProperty——>
2、computed和watch的區別。（+2）
3、vue中key的作用是什么？?（+2）
——>diff算法——>重繪和回流（重排）
重繪回流（+1）
3、vue生命周期?（+1）
3、webpack相關。
優化（配置優化，代碼優化）?（+2）
webpack熱更新原理?（+1）
chunk和baundle的區別?（+1）
壓縮插件的弊端?（+1）
4、axios和ajax的區別，fetch的區別，優勢。
5、?跨域方法?。
思路：說到跨域先了解同源策略——>常見的跨域場景——>解決方案
6、組件化
7、設計模式；
常用的設計模式以及解決了什么問題
8、cdn
8、node的了解
9、vue和react的設計理念，react的簡單了解
9、輸入url到頁面渲染發生了什么（+1）
9、性能優化（+1）
9、性能監控（+1）
9、http協議相關（+1）
9、export和export default，moudle.export的區別（+1）
9、內存泄露（+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
2、尋找數組中第k大值。
2、判斷字符串同構。
3、排序，二叉樹遍歷（中序?（+1）?，后序，前序）。
3、微信紅包算法。
想持續了解更多，不妨點贊和關注唄。
Web前端技術交流q群：1137068794，
群里可以一起學習編程，進群能領到學習資料以及源代碼
