ES6及ESNext規范

1、let 和 const

1. 而let引入了塊級作用域的概念, 創建setTimeout函數時，變量i在作用域內。對于循環的每個迭代，引用的i是i的不同實例。
1. 暫時性死區：不允許變量提升
1. const就很簡單了, 在let的基礎上, 不可被修改

代碼解讀

for(var i=0;i<=3;i++)
{ setTimeout(function(){ console.log(i) }, 10); } //4~4

原因:

var定義的變量是全局的, 所以全局只有一個變量i。
setTimeout是異步, 在下一輪事件循環, 等到執行的時候, 去找i變量的引用。所以函數找到了遍歷完后的i, 此時它已經變成了4。

代碼解讀

for(var i = 0; i <=3; i++) {

// 通過自執行函數滿足0,1,2,3

(function (i)

?{

? ?setTimeout(function () { console.log(i); }, 10);

?})(i);

} //0~3

for(let i=0;i<=3;i++)

{

? //通過作用域 let 滿足0,1,2,3

? setTimeout(function() { console.log(i) }, 10);

}

//0~3，let為塊級作用域

2、箭頭函數

1. 箭頭函數里的this是定義的時候決定的, 普通函數里的this是使用的時候決定的。

const teacher = {

? name: 'zhangsan',

? getName: function() { return `${this.name}` }

}

console.log(teacher.getName()); //zhangsan

const teacher = {

? name: 'zhangsan',

? getName: () => { return `${this.name}` }

}

console.log(teacher.getName()); //undefined

箭頭函數不能被用作構造函數

構造函數: 改變this指向到新實例出來的對象.

箭頭函數: this指向是定義的時候決定的.

const arrowFn = (value) => Number(value);

console.log(arrowFn('aaa'))

const arrowFn = () => {} console.log(arrowFn) //undefined

const arrowFn = () => ({}) //如果想得到對象，需要用括號包裹

console.log(arrowFn) //{}

3、Class

1. constructor：構造函數
1. 可以使用set和get函數
1. static為全局函數
1. 直接使用變量即為類變量，無需聲明

代碼解讀

復制代碼

class Test { _name = ''; constructor() { this.name = 'zhangsan'; } static getFormatName() { return `${this.name} - xixi`; } get name() { return this._name; } set name(val) { console.log('name setter'); this._name = val; } } console.log(new Test().name) //name setter zhangsan console.log(Test.getFormatName()) //name setter Test - xixi

4、模板字符串

支持變量和對象解析和換行

代碼解讀

復制代碼

const b = 'test' const a = `${b} - xxxx`; const c = `我是換行我換行了！ `;

面試題：編寫render函數, 實現template render功能.

代碼解讀

復制代碼

//要求 const year = '2021'; const month = '10'; const day = '01'; let template = '${year}-${month}-${day}'; let context = { year, month, day }; const str = render(template)({year,month,day}); console.log(str) // 2021-10-01 //實現：高階函數（函數返回函數） function render(template) { return function(context) { return template.replace(/${(.*?)}/g, (match, key) => context[key]); } } //.*表示：任意值 //?表示：匹配前面的表達式0或1個，或制定非貪婪限定符 //表達式 .* 就是單個字符匹配任意次，即貪婪匹配。 //表達式 .*? 是滿足條件的情況只匹配一次，即最小匹配. //match: ${year} ${month} ${day} //key: year month day

參考資料：replace的mdn資料

replace() 方法返回一個由替換值（replacement）替換部分或所有的模式（pattern）匹配項后的新字符串。模式可以是一個字符串或者一個正則表達式，替換值可以是一個字符串或者一個每次匹配都要調用的回調函數。如果pattern是字符串，則僅替換第一個匹配項。

代碼解讀

復制代碼

str.replace(regexp|substr, newSubStr|function)

替換字符串可以插入下面的特殊變量名：

變量名	代表的值
`$$`	插入一個 "$"。
`$&`	插入匹配的子串。
`'$`	插入當前匹配的子串左邊的內容。
`$'`	插入當前匹配的子串右邊的內容。
`$n`	假如第一個參數是 RegExp對象，并且 n 是個小于100的非負整數，那么插入第 n 個括號匹配的字符串。提示：索引是從1開始。如果不存在第 n個分組，那么將會把匹配到到內容替換為字面量。比如不存在第3個分組，就會用“$3”替換匹配到的內容。
`$<Name>`	這里Name 是一個分組名稱。如果在正則表達式中并不存在分組（或者沒有匹配），這個變量將被處理為空字符串。只有在支持命名分組捕獲的瀏覽器中才能使用。

函數的參數：

變量名	代表的值
`match`	匹配的子串。（對應于上述的$&。）
`p1,p2, ...`	假如replace()方法的第一個參數是一個RegExp對象，則代表第n個括號匹配的字符串。（對應于上述的1，1，1，2等。）例如，如果是用 `/(\a+)(\b+)/` 這個來匹配，`p1` 就是匹配的 `\a+`，`p2` 就是匹配的 `\b+`。

5、解構

1. 數組的解構

代碼解讀

復制代碼

// 基礎類型解構 let [a, b, c] = [1, 2, 3] console.log(a, b, c) // 1, 2, 3 // 對象數組解構 let [a, b, c] = [{name: '1'}, {name: '2'}, {name: '3'}] console.log(a, b, c) // {name: '1'}, {name: '2'}, {name: '3'} // ...解構 let [head, ...tail] = [1, 2, 3, 4] console.log(head, tail) // 1, [2, 3, 4] // 嵌套解構 let [a, [b], d] = [1, [2, 3], 4] console.log(a, b, d) // 1, 2, 4 // 解構不成功為undefined let [a, b, c] = [1] console.log(a, b, c) // 1, undefined, undefined // 解構默認賦值 let [a = 1, b = 2] = [3] console.log(a, b) // 3, 2

1. 對象的解構

代碼解讀

復制代碼

// 對象屬性解構 let { f1, f2 } = { f1: 'test1', f2: 'test2' } console.log(f1, f2) // test1, test2 // 可以不按照順序，這是數組解構和對象解構的區別之一 let { f2, f1 } = { f1: 'test1', f2: 'test2' } console.log(f1, f2) // test1, test2 // 解構對象重命名 let { f1: rename, f2 } = { f1: 'test1', f2: 'test2' } console.log(rename, f2) // test1, test2 // 嵌套解構 let { f1: {f11}} = { f1: { f11: 'test11', f12: 'test12' } } console.log(f11) // test11 // 默認值 let { f1 = 'test1', f2: rename = 'test2' } = { f1: 'current1', f2: 'current2'} console.log(f1, rename) // current1, current2

1. 解構的原理 針對可迭代對象的Iterator接口，通過遍歷器按順序獲取對應的值進行賦值。

1、什么是Iterator接口

Iterator是一種接口，為各種不一樣的數據解構提供統一的訪問機制。任何數據解構只要有Iterator接口，就能通過遍歷操作，依次按順序處理數據結構內所有的成員。使用for of的語法遍歷數據結構時，自動尋找Iterator接口。

可迭代對象是Iterator接口的實現，有兩個協議：可迭代協議和迭代器協議。

可迭代協議：對象必須實現iterator方法，即對象或其原型鏈上必須有一個名叫Symbol.iterator的屬性，該屬性的值為無參函數，函數返回迭代器協議。
迭代器協議：產生一個有限或無限序列值，必須實現next()方法，方法返回對象有done和value屬性。

2、Iterator有什么用

為各種不同的數據解構提供統一的訪問接口
使得數據解構能按次序排列處理
可以使用ES6最新命令 for of進行遍歷

代碼解讀

復制代碼

// 生成Iterator對象 function generateIterator(array) { let nextIndex = 0 return { next: () => nextIndex < array.length ? { value: array[nextIndex++], done: false } : { value: undefined, done: true } }; } const iterator = generateIterator([0, 1, 2]) console.log(iterator.next()) // {value: 0, done: false} console.log(iterator.next()) // {value: 1, done: false} console.log(iterator.next()) // {value: 2, done: false} console.log(iterator.next()) // {value: undefine, done: true}

6、遍歷

1、for-in

遍歷當前對象，還包括原型鏈上的非Symbol的可枚舉屬性
不適合遍歷數組，主要應用于遍歷對象
可與break，continue，return配合

缺點：

for in 不僅會遍歷當前對象，還包括原型鏈上的可枚舉屬性 Object.prototype
for in 不適合遍歷數組，主要應用為對象

代碼解讀

復制代碼

let obj = { 'a': 'test1', 'b': 'test2' } for (const key in obj){ console.log(key, obj[key]) //遍歷數組時，key為數值下標字符串；遍歷對象，key為對象字段名 }

2、for-of

可迭代對象（包括 Array，Map，Set，String，TypedArray，arguments對象，NodeList對象）上創建一個迭代循環,調用自定義迭代鉤子，并為每個不同屬性的值執行語句。
僅遍歷當前對象
可與break，continue，return配合

代碼解讀

復制代碼

let arr = [{age: 1}, {age: 5}, {age: 100}, {age: 34}] for(let {age} of arr) { if (age > 10) { break // for of 允許中斷 } console.log(age) }

7、Object

Object.keys

該方法返回一個給定對象的自身可枚舉屬性組成的數組。

代碼解讀

復制代碼

const obj = { a: 1, b: 2 }; const keys = Object.keys(obj); // [a, b]

Object.values 該方法返回一個給定對象自身的所有可枚舉屬性值的數組。

代碼解讀

復制代碼

const obj = { a: 1, b: 2 }; const keys = Object.keys(obj); // [1, 2]

Object.entries

該方法返回一個給定對象自身可枚舉屬性的鍵值對數組。

代碼解讀

復制代碼

const obj = { a: 1, b: 2 }; const keys = Object.entries(obj); // [ [ 'a', 1 ], [ 'b', 2 ] ]

Object.getOwnPropertyNames

該方法返回一個數組，該數組對元素是 obj自身擁有的枚舉或不可枚舉屬性名稱字符串。

代碼解讀

復制代碼

Object.prototype.aa = '1111'; const testData = { a: 1, b: 2 } for (const key in testData) { console.log(key); } console.log(Object.getOwnPropertyNames(testData)) // ['a','b']

Object.defineProperty和Object.defineProperties

object包括屬性和方法，其中屬性分為數據屬性和訪問器屬性

數據屬性
- configurable：通過delete刪除并重新定義屬性，是否可修改屬性的特性，已經是否可把它改為訪問器屬性。
- enumerable：是否可通過for-in循環。
- writable：屬性值是否可修改。
- value：屬性實際的值，默認為undefined
訪問器屬性
- configurable
- enumerable
- get：獲取函數，在讀取屬性時調用，默認undefined
- set：設置函數，在寫入屬性時調用，默認undefined
默認值：
- configurable、enumerable、writable：false
- get、set、value：undefined
- 定義屬性時，數據屬性和訪問器屬性不能同時存在，報錯

Object.defineProperty(obj, propertyName, descriptor) //用于對象的單個屬性定義，參數：對象，屬性名稱，描述符對象

Object.defineProperties(obj, descriptor)//用于對象多個屬性定義，參數：對象、描述符對象（屬性與添加或修改的屬性一一對應）

代碼解讀

復制代碼

let test = {}; Object.defineProperty(test, 'name', { configurable: true, enumerable: true, writable: true, value: "Jian" }) let t = 0; Object.defineProperties(test, { age: { configurable: true, enumerable: true, get(){ return t }, set(newVal){ t = newVal } }, sex: { configurable: true, enumerable: true, //writable: true, value: "male" }, }) test.sex = 2 console.log('test.name', test.name) //Jian console.log('test.age', test.age) //0 console.log('test.sex', test.sex) //male, test.sex不生效

Object.create

Object.create()方法創建一個新的對象，并以方法的第一個參數作為新對象的__proto__屬性的值(根據已有的對象作為原型，創建新的對象。)
Object.create()方法還有第二個可選參數，是一個對象，對象的每個屬性都會作為新對象的自身屬性，對象的屬性值以descriptor（Object.getOwnPropertyDescriptor(obj, 'key')）的形式出現，且enumerable默認為false

代碼解讀

復制代碼

傳入第二個參數是怎么操作的呢？

代碼解讀

復制代碼

function Person(name, sex) { this.name = name; this.sex = sex; } const b = Object.create(Person.prototype, { name: { value: 'coco', writable: true, configurable: true, enumerable: true, }, sex: { enumerable: true, get: function () { return 'hello sex' }, set: function (val) { console.log('set value:' + val) } } }) console.log(b.name) // coco console.log(b.sex) // hello sex

那么Object.create(null)的意義是什么呢? 平時創建一個對象Object.create({}) 或者直接聲明一個{} 不就夠了?

Object.create(null)創建一個對象，但這個對象的原型鏈為null，即Fn.prototype = null

代碼解讀

復制代碼

const b = Object.create(null) // 返回純{}對象，無prototype b // {} b.__proto__ // undefined b.toString() // throw error

所以當你要創建一個非常干凈的對象, 沒有任何原型鏈上的屬性, 那么就使用Object.create(null). for in 遍歷的時候也不需要考慮原型鏈屬性了.

Object.assign 合并對象，接收一個目標對象和一個或多個源對象作為參數，將每個源對象中可枚舉(Object.propertyIsEnumeralbe()返回true)和自有屬性(Object.hasOwnProperty()返回true)復制到目標對象。

以字符串和符合為鍵的屬性會被復制。
對每個符合條件的屬性，使用源對象上的[[get]]取得屬性的值，然后使用目標對象上的[[set]]設置屬性的值
淺拷貝，類似于{...a, ...b}，不能在兩個對象間轉移獲取函數和設置函數

代碼解讀

復制代碼

let dest = {} let src = {id: 'src', a: {}} let result = Object.assign(dest, src) console.log(dest === result) //true console.log(result) //{id: 'src'} console.log(dest.a === src.a) //true dest = { set a(val){ console.log(`Invoked dest setter with param ${val}`) } } src = { get a(){ console.log('Invoked src getter') return 'foo' } } Object.assign(dest, src) //Invoked src getter //Invoked dest setter with param foo console.log(dest) //{set a(val){}}

Object.is

代碼解讀

復制代碼

const a = { name: 1 }; const b = a; console.log(Object.is(a, b)) // true console.log(Object.is({}, {})) // false

Object.getOwnPropertyDescriptor和Object.getOwnPropertyDescriptors

返回指定對象的屬性描述符對象

代碼解讀

復制代碼

const obj1 = {} Object.defineProperty(obj1, 'p', { value: 'good', writable: false }) console.log(Object.getOwnPropertyDescriptor(obj1, 'p')) console.log(Object.getOwnPropertyDescriptors(obj1)) /* { value: 'good', writable: false, enumerable: false, configurable: false } { p: { value: 'good', writable: false, //可寫，修改屬性值 enumerable: false, //可被for in遍歷 configurable: false //刪除屬性或修改屬性特性 } } */

8、數組

Array.flat

flat() 方法會按照一個可指定的深度遞歸遍歷數組，并將所有元素與遍歷到的子數組中的元素合并為一個新數組返回

代碼解讀

復制代碼

const arr1 = [1, 2, [3, 4]]; arr1.flat(); // [1, 2, 3, 4] const arr2 = [1, 2, [3, 4, [5, 6]]]; arr2.flat(); // [1, 2, 3, 4, [5, 6]] const arr3 = [1, 2, [3, 4, [5, 6]]]; arr3.flat(2); // [1, 2, 3, 4, 5, 6] //使用 Infinity，可展開任意深度的嵌套數組（無限大） const arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]]; arr4.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Array.includes includes() 方法用來判斷一個數組是否包含一個指定的值，根據情況，如果包含則返回 true，否則返回false。 Array.includes(valueToFind, fromIndex)

代碼解讀

復制代碼

const array1 = [1, 2, 3]; console.log(array1.includes(2)); const pets = ['cat', 'dog', 'bat']; console.log(pets.includes('cat'));

其實它有兩個參數, 只不過我們平時只使用一個.

valueToFind 需要查找的元素值。
fromIndex 可選從fromIndex 索引處開始查找 valueToFind。如果為負值，則按升序從 array.length + fromIndex 的索引開始搜（即使從末尾開始往前跳 fromIndex 的絕對值個索引，然后往后搜尋）。默認為 0。

代碼解讀

復制代碼

[1, 2, 3].includes(2); // true [1, 2, 3].includes(4); // false [1, 2, 3].includes(3, 3); // false [1, 2, 3].includes(3, -1); // true [1, 2, NaN].includes(NaN); // true // fromIndex 大于等于數組長度 var arr = ['a', 'b', 'c']; arr.includes('c', 3); // false arr.includes('c', 100); // false // 計算出的索引小于 0 var arr = ['a', 'b', 'c']; arr.includes('a', -100); // true arr.includes('b', -100); // true arr.includes('c', -100); // true

Array.find find() 方法返回數組中滿足提供的測試函數的第一個元素的值。否則返回 undefined。 Array.find(callback(element, index, array(數組本身)))

callback 在數組每一項上執行的函數，接收 3 個參數：

element 當前遍歷到的元素。
index可選當前遍歷到的索引。
array可選數組本身。

代碼解讀

復制代碼

const test = [ {name: 'lubai', age: 11 }, {name: 'xxx', age: 100 }, {name: 'nnn', age: 50} ]; function findLubai(teacher) { return teacher.name === 'lubai'; } console.log(test.find(findLubai));

Array.from

4.1 Array.from() 方法從一個類似數組或可迭代對象創建一個新的，淺拷貝的數組實例。
- arrayLike 想要轉換成數組的偽數組對象或可迭代對象。
- mapFn 可選如果指定了該參數，新數組中的每個元素會執行該回調函數。
4.2 Array.from() 可以通過以下方式來創建數組對象：

偽數組對象（擁有一個 length 屬性和若干索引屬性的任意對象）
可迭代對象（可以獲取對象中的元素,如 Map和 Set 等）

代碼解讀

復制代碼

console.log(Array.from('foo')); console.log(Array.from([1, 2, 3], x => x + x)); const set = new Set(['foo', 'bar', 'baz', 'foo']); Array.from(set); // [ "foo", "bar", "baz" ] const map = new Map([[1, 2], [2, 4], [4, 8]]); Array.from(map); // [[1, 2], [2, 4], [4, 8]] const mapper = new Map([['1', 'a'], ['2', 'b']]); Array.from(mapper.values()); // ['a', 'b']; Array.from(mapper.keys()); // ['1', '2'];

所以數組去重我們可以怎么做?

代碼解讀

復制代碼

Array.of

Array.of() 方法創建一個具有可變數量參數的新數組實例，而不考慮參數的數量或類型。

代碼解讀

復制代碼

Array.of(7); // [7] Array.of(1, 2, 3); // [1, 2, 3]

那怎么去模擬實現它呢?

代碼解讀

復制代碼

Array.of = function() { return Array.prototype.slice.call(arguments); };

9、反射Reflect和代理Proxy

反射Reflect
- 將Object對象上的明顯屬于語言內部的方法，放在Reflect對象上
- 讓Object操作變為函數行為，eg：name in obj和delete，變為Reflect.has(obj,name)和Reflect.deleteProperty(obj,name)
- Reflect對象的方法與Proxy對象的方法一一對應。讓Proxy對象可以方便的調用對應的Reflect方法，完成默認行為。
- 通過defineProperty設置writable為false的對象，不能使用Proxy
代理Proxy
- 定義： const proxy = new Proxy(target, handler)，target代理對象，handle捕獲器
- handle參數get：trapTarget(目標對象)，property(代理屬性)，receiver(代理對象)
- handle參數set：trapTarget(目標對象)，property(代理屬性)，value(賦給屬性的值)，receiver(代理對象)

代碼解讀

復制代碼

const target = { foo: 'bar', baz: 'qux' } const handler = { get(trapTarget, property, receiver){ let decoration = '' if(property === 'foo'){ decoration = '!!!' } return Reflect.get(...arguments) + decoration }, set(trapTarget, property, value, receiver){ return Reflect.set(...arguments) + 'set' } } const proxy = new Proxy(target, handler) proxy.foo = 'good' console.log(proxy.foo) //good!!! console.log(target.foo)//good