ES6、ES7、ES8、ES9、ES10.png
看最近這麼多人看這個，大緻更新下，不太全，詳細的自己可以去查
另外付一下自己大廠面試的簡單記錄，給需要小夥伴
大廠面試記錄
ES6
ES6中的Map 和Object的差別
- 由于
對象隻接受字元串作為鍵名
- ES6 提供了 Map 資料結構。它類似于對象，也是鍵值對的集合，
但是“鍵”的範圍不限于字元串，各種類型的值（包括對象）都可以當作鍵
。
也就是說，
Object 結構提供了“字元串—值”的對應
Map 結構提供了“值—值”的對應
image.png
最常遇到的就是箭頭函數
面試的時候問的最多
箭頭函數和this 指向
https://es6.ruanyifeng.com/
https://www.cnblogs.com/theblogs/p/10575845.html
ES6 相容問題
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() 方法首先使用映射函數映射每個元素， 然後将結果壓縮成一個新數組。
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
私有的執行個體方法和通路器
掃碼體驗