1. JS爲什麼單線程
一個簡單的原因就是，js在設計之初只是進行一些簡單的表單校驗，這完全不需要多線程，單線程完全可以勝任這項工作。即便後來前端發展迅速，承載的能力越來越多，也沒有發展到非多線程不可的程度。
而且還有一個主要的原因，設想一下，如果js是多線程的，在運行時多個線程同時對DOM元素進行操作，那具體以哪個線程爲主就是個問題了，線程的調度問題是一個比較複雜的問題。
HTML5新的標準中允許使用new Worker的方式來開啓一個新的線程，去運行一段單獨的js文件腳本，但是在這個新線程中嚴格的要求了可以使用的功能，比如說他只能使用ECMAScript, 不能訪問DOM和BOM。這也就限制死了多個線程同時操作DOM元素的可能。
2.使用css寫出一個三角形角標
元素寬高設置爲0，通過border屬性來設置，讓其它三個方向的border顏色爲透明或者和背景色保持一致，剩餘一條border的顏色設置爲需要的顏色。
div{
width:0;
height:0;
border:5pxsolid #transparent;
border-top-color: red;
}
3.水平垂直居中
我一般只使用兩種方式定位或者flex，我覺得夠用了。
div{
width:100px;
height:100px;
position: absolute;
top:0;
right:0;
bottom:0;
left:0;
margin: auto;
}
父級控制子集居中
.parent{
display: flex;
justify-content: center;
align-items: center;
}
4. css一行文本超出...
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
5.多行文本超出顯示...
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp: 3;
overflow:hidden;
6.IOS手機容器滾動條滑動不流暢
overflow:auto;
-webkit-overflow-scrolling:touch;
7.修改滾動條樣式
隱藏div元素的滾動條
div::-webkit-scrollbar{
display: none;
}
div::-webkit-scrollbar 滾動條整體部分
div::-webkit-scrollbar-thumb 滾動條裏面的小方塊，能向上向下移動（或往左往右移動，取決於是垂直滾動條還是水平滾動條）
div::-webkit-scrollbar-track 滾動條的軌道
div::-webkit-scrollbar-button 滾動條的軌道的兩端按鈕，允許通過點擊微調小方塊的位置。
div::-webkit-scrollbar-track-piece 內層軌道，滾動條中間部分
div::-webkit-scrollbar-corner 邊角，即兩個滾動條的交匯處
div::-webkit-resizer 兩個滾動條的交匯處上用於通過拖動調整元素大小的小控件
注意此方案有兼容性問題，一般需要隱藏滾動條時我都是用一個色塊通過定位蓋上去，或者將子級元素調大，父級元素使用overflow-hidden截掉滾動條部分。暴力且直接。
8.解決ios audio無法自動播放、循環播放的問題
ios手機在使用audio或者video播放的時候，個別機型無法實現自動播放，可使用下面的代碼hack。
// 解決ios audio無法自動播放、循環播放的問題
varmusic =document.getElementById('video');
varstate =0;
document.addEventListener('touchstart',function(){
if(state==0){
music.play();
state=1;
}
},false);
document.addEventListener("WeixinJSBridgeReady",function(){
music.play();
},false);
//循環播放
music.onended =function(){
music.load();
music.play();
}
9.隱藏頁面元素
display-none: 元素不會佔用空間，在頁面中不顯示，子元素也不會顯示。
opacity-0: 元素透明度將爲0，但元素仍然存在，綁定的事件仍舊有效仍可觸發執行。
visibility-hidden：元素隱藏，但元素仍舊存在，佔用空間，頁面中無法觸發該元素的事件。
10.前端工程化
一提到前端工程化很多人想到的都是webpack，這是不對的，webpack僅僅是前端工程化中的一環。在整個工程化過程中他幫我們解決了絕大多數的問題，但並沒有解決所有問題。
前端工程化是通過工具提升效率，降低成本的一種手段。
近些年被廣泛的關注和探討，究其原因主要是因爲現代化前端應用功能要求不斷提高，業務邏輯日益複雜，作爲當下互聯網時代唯一不可或缺的技術，前端可以說是佔據了整個開發行業的半壁江山。從傳統的網站，到現在的H5,移動App,桌面應用，以及小程序。前端技術幾乎是無所不能的全面覆蓋。
在這些表象的背後呢，實際上是行業對開發人員的要求發生了天翻地覆的變化，以往前端寫demo，套模板，調頁面這種刀耕火種的方式已經完全不符合當下對開發效率的要求，前端工程化就是在這樣一個背景下被提上臺面，成爲前端工程師必備的手段之一。
一般來說前端工程包含，項目初始化，項目開發，提交，構建，部署，測試，監控等流程。工程化就是以工程的角度來解決這些問題。比如項目初始化我們一般使用npm init, 創建頁面模板使用plop，我們喜歡使用ES6+開發，但是需要通過babel編碼成ES5，持續集成的時候我們使用git/ci cd，但是爲了保持開發規範我們引入了ESLint，部署一般使用git/cd或者jenkins等等。
11.contenteditable
html中大部分標籤都是不可以編輯的，但是添加了contenteditable屬性之後，標籤會變成可編輯狀態。
不過通過這個屬性把標籤變爲可編輯狀態後只有input事件，沒有change事件。也不能像表單一樣通過maxlength控制最大長度。我也忘記我在什麼情況下用到過了，後面想起來再補吧。
12.calc
這是一個css屬性，我一般稱之爲css表達式。可以計算css的值。最有趣的是他可以計算不同單位的差值。很好用的一個功能，缺點是不容易閱讀。接盤俠沒辦法一眼看出20px是啥。
div{
width:calc(25%-20px);
}
13.Date對象
獲取當前時間毫秒值
// 方式一
Date.now();// 1606381881650
// 方式二
newDate() -0;// 1606381881650
// 方式三
newDate().getTime()// 1606381881650
創建Date對象的兼容性問題。
// window和安卓支持，ios和mac不支持
newDate('2020-11-26');
// window和安卓支持，ios和mac支持
newDate('2020/11/26');
14.Proxy和Object.defineProperty區別
Proxy的意思是代理，我一般叫他攔截器，可以攔截對象上的一個操作。用法如下，通過new的方式創建對象，第一個參數是被攔截的對象，第二個參數是對象操作的描述。實例化後返回一個新的對象，當我們對這個新的對象進行操作時就會調用我們描述中對應的方法。
newProxy(target, {
get(target, property) {
},
set(target, property) {
},
deleteProperty(target, property) {
}
})
Proxy區別於Object.definedProperty。
Object.defineProperty只能監聽到屬性的讀寫，而Proxy除讀寫外還可以監聽屬性的刪除，方法的調用等。
通常情況下我們想要監視數組的變化，基本要依靠重寫數組方法的方式實現，這也是Vue的實現方式，而Proxy可以直接監視數組的變化。
constlist = [1,2,3];
constlistproxy =newProxy(list, {
set(target, property, value) {
target[property] = value;
returntrue;// 標識設置成功
}
});
list.push(4);
Proxy是以非入侵的方式監管了對象的讀寫，而defineProperty需要按特定的方式定義對象的屬性。
15.Reflect
他是ES2015新增的對象，純靜態對象也就是不能被實例畫，只能通過靜態方法的方式調用，和Math對象類似，只能類似Math.random()的方式調用。
Reflect內部封裝了一系列對對象的底層操作，一共14個，其中1個被廢棄，還剩下13個。
Reflect的靜態方法和Proxy描述中的方法完全一致。也就是說Reflect成員方法就是Proxy處理對象的默認實現。
Proxy對象默認的方法就是調用了Reflect內部的處理邏輯，也就是如果我們調用get方法，那麼在內部，Reflect就是將get原封不動的交給了Reflect，如下。
constproxy =newProxy(obj, {
get(target, property) {
returnReflect.get(target, property);
}
})
Reflect和Proxy沒有絕對的關係，我們一般將他們兩個放在一起講是爲了方便對二者的理解。
那爲什麼會有Reflect對象呢，其實他最大的用處就是提供了一套統一操作Object的API。
判斷對象是否存在某一個屬性，可以使用in操作符，但是不夠優雅，還可以使用Reflect.has(obj, name); 刪除一個屬性可以使用delete，也可以使用Reflect.deleteProperty(obj, name); 獲取所有屬性名可以使用Object.keys, 也可以使用Reflect.ownKeys(obj); 我們更推薦使用Reflect的API來操作對象，因爲他纔是未來。
16.解析get參數
通過replace方法獲取url中的參數鍵值對，可以快速解析get參數。
constq = {};
location.search.replace(/([^?&=]+)=([^&]+)/g,(_,k,v)=>q[k]=v);
console.log(q);
17.解析連接url
可以通過創建a標籤，給a標籤賦值href屬性的方式，獲取到協議，pathname，origin等location對象上的屬性。
// 創建a標籤
constaEle =document.createElement('a');
// 給a標籤賦值href路徑
aEle.href ='/test.html';
// 訪問aEle中的屬性
aEle.protocol;// 獲取協議
aEle.pathname;// 獲取path
aEle.origin;
aEle.host;
aEle.search;
...
18.localStorage
localStorage是H5提供的永久存儲空間，一般最大可存儲5M數據，並且支持跨域隔離，他的出現極大提高了前端開發的可能性。localStorage的使用很多人都知道setItem，getItem,removeItem, 但他也可以直接以成員的方式操作。
// 存儲
localStorage.name ='yd';
// 獲取
localStorage.name;// yd
// 刪除
deletelocalStorage.name;
// 清除全部
localStorage.clear();
// 遍歷
for(leti =0; i < localStorage.length; i++) {
constkey = localStorage.key(i);// 獲取本地存儲的Key
localStorage[key];// 獲取本地存儲的value
}
localStorage滿了的情況下仍繼續存儲並不會覆蓋其他的值，而是直接報錯(QuotaExceededError)，並且當前存儲的值也會被清空。瀏覽器支持每個域名下存儲5M數據。
19.sessionStorage
sessionStorage和localStorage的區別是，存在當前會話，很多人理解的是瀏覽器關閉，這是不對的，假設你在A頁面存儲了sessionStorage，新開選項卡將A頁面的鏈接粘貼進去打開頁面，sessionStorage也是不存在的。
所以sessionStorage存在的條件是頁面間的跳轉，A頁面存儲了sessionStorage，他要通過超鏈接或者location.href或者window.open來打開另一個同域頁面才能訪問sessionStorage。
這一點在混合開發嵌套H5的開發模式中尤爲重要，如果以新開webview的方式打開頁面，很可能sessionStorage就沒有了。
20.會話cookie
cookie在設置的時候如果不設置過期時間，就表示是個會話cookie，以前我以爲關閉瀏覽器會話cookie就消失了，然而...喜提bug一個。
在多數情況下windows系統或者安卓系統確實是這樣的。但是在macOS系統或者ios系統中，關閉瀏覽器並不會清除掉會話cookie，結束瀏覽器進程纔行。
21.標籤模板字符串
模板字符串支持在前面添加一個函數，第一個參數是一個有固定內容組成的數組，後面參數依次爲傳入的變量，函數返回值爲模板字符串真正展示的值。不過這個功能個人感覺沒啥用。
consttag =(params, ...args) =>{
returnparams[0] + args[0];// 返回值爲模板字符串的真實值。
}
conststr = tag`hello${'world'}`;
22.字符串常用的幾個方法
1. includes();
字符串中是否包含某個字符串，這個不說了，其實就是indexOf的替代方案，用起來更優雅，
2. startsWith();
字符串是否爲某個字符串開始，我一般用它判斷url是否有http
3. endsWith();
字符串是否爲某個字符串結尾。判斷後綴名的時候尤其有效。
4. repeat(number);
得到一個重複number次的字符串。額...我也不知道什麼時候有用，一般我用它造測試數據。
5. 'abc'.padEnd(5, '1'); // abc11;
用給定的字符串在尾部拼接到指定長度，第一個參數爲長度，第二個參數爲用於拼接的值。
6. 'abc'.padStart(5, '1'); // 11abc;
用給定的字符串在首部拼接到指定長度第一個參數爲長度，第二個參數爲用於拼接的值。首部補0？
23.數組快速去重
應該很多人都知道這個，數組轉換成Set, 再轉換爲數組，不過這種去重方式只能去除基本數據類型組成的數組。
constarr = [1,2,3,4,5,6];
constarr2 =newSet(arr);
constarr3 = [...arr2];
24.Object.keys, values, entries
一般我們常用Object.keys，返回一個對象的鍵組成的數組，其實還有Object.values，返回對象值組成的數組，Object.entries將對象轉成數組，每個元素是鍵值對組成的數組，可以使用此功能快速將對象轉爲Map。
constobj = {name:'yd',age:18};
Object.keys(obj);// ['name', 'age'];
Object.values(obj);// ['yd', 18];
constl =Object.entries(obj);// [['name', 'yd'], ['age': 18]];
constm =newMap(l);
25.Object.getOwnPropertyDescriptors
獲取對象的描述信息
Object.assign複製時，將對象的屬性和方法當做普通屬性來複制，並不會複製完整的描述信息，比如this。
constp1 = {
a:'y',
b:'d',
getname() {
return`${this.a}${this.b}`;
}
}
constp2 =Object.assign({}, p1);
p2.a ='z';
p2.name;// y d; 發現並沒有修改p2.a的值，是因爲this仍舊指向p1
使用Object.getOwnPropertyDescriptors獲取完整描述信息
constdescription =Object.getOwnPropertyDescriptors(p1);
constp2 =Object.defineProperty({}, description);
p2.a ='z';
p2.name;// z d
26.BigInt
JavaScript可以處理的最大數字是2的53次方- 1，這一點我們可以在Number.MAX_SAFE_INTEGER中看到。
consoel.log(Number.MAX_SAFE_INTEGER);//9007199254740991
更大的數字則無法處理，ECMAScript2020引入BigInt數據類型來解決這個問題。通過把字母n放在末尾, 可以運算大數據。
BigInt可以使用算數運算符進行加、減、乘、除、餘數及冪等運算。它可以由數字和十六進制或二進制字符串構造。此外它還支持AND、OR、NOT和XOR之類的按位運算。唯一無效的位運算是零填充右移運算符。
constbigNum =100000000000000000000000000000n;
console.log(bigNum *2n);// 200000000000000000000000000000n
constbigInt = BigInt(1);
console.log(bigInt);// 1n;
constbigInt2 = BigInt('2222222222222222222');
console.log(bigInt2);// 2222222222222222222n;
BigInt是一個大整數，所以他不能用來存儲小數。
27.??合併空運算符
假設變量a不存在，我們希望給系統一個默認值，一般我們會使用||運算符。但是在javascript中空字符串，0，false都會執行||運算符，所以ECMAScript2020引入合併空運算符解決該問題，只允許在值爲null或未定義時使用默認值。
constname ='';
console.log(name ||'yd');// yd;
console.log(name ??'yd');// '';
28.?可選鏈運算符
業務代碼中經常會遇到這樣的情況，a對象有個屬性b,b也是一個對象有個屬性c,
我們需要訪問c，經常會寫成a.b.c，但是如果f不存在時，就會出錯。
consta = {
b: {
c:123,
}
}
console.log(a.b.c);// 123;
console.log(a.f.c);// f不存在所以會報錯
ECMAScript2020定義可選鏈運算符解決該問題，通過在.之前添加一個?將鍵名變成可選
letperson = {};
console.log(person?.profile?.age ??18);// 18
29.import
import是ECMAScript2015當中定義的一套ES Module模塊系統，語法特性絕大多數瀏覽器已經支持了，通過給script標籤添加type=module的屬性就可以使用ES Module的標準去執行javascript代碼了。
console.log('this is es module');
在ES Module規範下，會採用嚴格模式(use strict)運行javascript代碼。每個ES Module都運行在單獨的作用域中，也就意味着變量間不會互相干擾。外部js文件是通過CORS的方式請求的，所以要求我們外部的js文件地址要支持跨域請求，也就是文件服務器要支持CORS。我們可以在任意網站控制檯輸入下面代碼。
constscript =document.createElement('script');
script.type ='module';
script.innerHTML =`import React from 'https://cdn.bootcdn.net/ajax/libs/react/17.0.1/cjs/react-jsx-dev-runtime.development.js';`;
document.body.append(script);
可以發現在network中請求了https://cdn.bootcdn.net/ajax/libs/react/17.0.1/cjs/react-jsx-dev-runtime.development.js資源。
ES Module的script標籤會延遲腳本加載，等待網頁請求完資源之後才執行，和使用deffer的方式加載資源相同。
需要注意的是，import {} from 'xx'導入模塊的時候，並不是對象的解構，而是import的固定語法，這一點很多人容易弄錯。
並且ECMAScript2020中import開始支持動態導入功能，在此之前import只能寫在模塊代碼的頂部，一開始就要聲明模塊依賴的其它模塊。支持動態引入後就可以按需引入對應的模塊，這個功能我們早在SPA中就已經用到了。動態導入返回的是一個Promise。
a.js
consta =123;
export{ a };
b.js
import('./a.js').then(data=>{
console.log(data.a);// 123;
})
30. 0.1 + 0.2 === 0.3 // false
console.log(0.1+0.2);// 0.30000000000000004
在JS當中，Number類型實際上是double類型，運算小數時存在精度問題。因爲計算機只認識二進制，在進行運算時，需要將其他進制的數值轉換成二進制，然後再進行計算
小數用二進制表達時是無窮的。
// 將0.1轉換成二進制
console.log(0.1.toString(2));// 0.0001100110011001100110011001100110011001100110011001101
// 將0.2轉換成二進制
console.log(0.2.toString(2));// 0.001100110011001100110011001100110011001100110011001101
雙精度浮點數的小數部分最多支持53位二進制位，所以兩者相加後，因浮點數小數位的限制而截斷的二進制數字，再轉換爲十進制，就成了0.30000000000000004，這樣在進行算術計算時會產生誤差。
ES6 在Number對象上面，新增一個極小的常量Number.EPSILON。根據規格，它表示1與大於1的最小浮點數之間的差。對於64位浮點數來說，大於1的最小浮點數相當於二進制的1.00..001，小數點後面有連續51個零。這個值減去1之後，就等於2的-52次方。
Number.EPSILON ===Math.pow(2,-52)
// true
Number.EPSILON
// 2.220446049250313e-16
Number.EPSILON.toFixed(20)
// "0.00000000000000022204"
Number.EPSILON實際上是JavaScript能夠表示的最小精度。誤差如果小於這個值，就可以認爲已經沒有意義了，即不存在誤差了。
引入一個這麼小的量的目的，在於爲浮點數計算，設置一個誤差範圍。我們知道浮點數計算是不精確的。
Number.EPSILON可以用來設置能夠接受的誤差範圍。比如，誤差範圍設爲2的-50次方（即Number.EPSILON * Math.pow(2, 2)），即如果兩個浮點數的差小於這個值，我們就認爲這兩個浮點數相等。
(0.1+0.2-0.3)