ES6、ES7、ES8、ES9、ES10.png
看最近這麼多人看這個，大致更新下，不太全，詳細的自己可以去查
另外付一下自己大廠面試的簡單記錄，給需要小夥伴
大廠面試記錄
ES6
ES6中的Map 和Object的區別
-
由於
對象只接受字符串作爲鍵名，所以element被自動轉爲字符串[object HTMLDivElement] -
ES6 提供了 Map 數據結構。它類似於對象，也是鍵值對的集合，
但是“鍵”的範圍不限於字符串，各種類型的值（包括對象）都可以當作鍵。
也就是說，Object 結構提供了“字符串—值”的對應，Map 結構提供了“值—值”的對應，是一種更完善的 Hash 結構實現。
image.png
最常遇到的就是箭頭函數面試的時候問的最多
箭頭函數和this 指向
https://es6.ruanyifeng.com/
https://www.cnblogs.com/theblogs/p/10575845.html
ES7
ES7在ES6的基礎上添加三項內容：求冪運算符（**）、Array.prototype.includes()方法、函數作用域中嚴格模式的變更。
冪運算：
3**2 // 9
includes:
[1, 2, 3].indexOf(3) > -1 // true
等同於：
[1, 2, 3].includes(3) // true
兩者這都是通過===進行數據處理，但是對NaN數值的處理行爲不同。includes對NaN的處理不會遵循嚴格模式去處理，所以返回true。indexOf會按照嚴格模式去處理，返回-1。
[1, 2, NaN].includes(NaN) // true
[1, 2, NaN].indexOf(NaN) // -1
如果僅僅查找數據是否在數組中，建議使用includes，如果是查找數據的索引位置，建議使用indexOf更好一些
ES8
async、await異步解決方案
在ES6中爲了解決回調的書寫方式，引入了Promise的then函數，業務邏輯很多的時候，需要鏈式多個then函數，語義會變得很不清楚。
new Promise((resolve, reject) => {this.login(resolve)})
.then(() => this.getInfo())
.then(() => {// do something})
.catch(() => { console.log("Error") })
ES8中把async和await變得更加方便，它其實就是Generator的語法糖。async/await是寫異步代碼的新方式，以前的方法有回調函數和Promise。相比於Promise，它更加簡潔，並且處理錯誤、條件語句、獲取中間值都更加方便。
ruanyifeng async
Object.entries():
該方法會將某個對象的可枚舉屬性與值按照二維數組的方式返回。（如果目標對象是數組，則會將數組的下標作爲鍵值返回）
Object.values():
它的工作原理和Object.entries()方法很像，但是它只返回鍵值對中的值，結果是一維數組
Object.values({one: 1, two: 2}) // [1, 2]
Object.values({3: 'a', 1: 'b', 2: 'c'}) // ['b', 'c', 'a']
Object.extries([1, 3]) //[1, 3]
字符串填充padStart()、padEnd():
ES8提供了新的字符串填充方法，該方法可以使得字符串達到固定長度。它有兩個參數，字符串目標長度和填充內容。
'react'.padStart(10, 'm') //'mmmmmreact'
'react'.padEnd(10, 'm') //' reactmmmmm'
'react'.padStart(3, 'm') // "react"
ES10
Array的flat()方法和flatMap()
flat() 方法會按照一個可指定的深度遞歸遍歷數組，並將所有元素與遍歷到的子數組中的元素合併爲一個新數組返回
- flat()方法最基本的作用就是數組降維;
- 還可以利用flat()方法的特性來去除數組的空項
扁平化多維數組：
image.png
image.png
var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]
//使用 Infinity 作爲深度，展開任意深度的嵌套數組
arr3.flat(Infinity);
// [1, 2, 3, 4, 5, 6]
//去除空項
var arr4 = [1, 2, , 4, 5];
arr4.flat();
// [1, 2, 4, 5]
flatMap() 方法首先使用映射函數映射每個元素，
然後將結果壓縮成一個新數組。它與 map 和 深度值1的 flat 幾乎相同，但 flatMap 通常在合併成一種方法的效率稍微高一些。 這裏我們拿map方法與flatMap方法做一個比較
var arr1 = [1, 2, 3, 4];
arr1.map(x => [x * 2]);
// [[2], [4], [6], [8]]
arr1.flatMap(x => [x * 2]);
// [2, 4, 6, 8]
// 只會將 flatMap 中的函數返回的數組 “壓平” 一層
arr1.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]
String的trimStart()方法和trimEnd()方法
Object.fromEntries()
Symbol.prototype.description
String.prototype.matchAll
Function.prototype.toString()現在返回精確字符，包括空格和註釋
簡化try {} catch {},修改 catch 綁定
新的基本數據類型BigInt
globalThis
import()
Legacy RegEx
私有的實例方法和訪問器
掃碼體驗