es6易錯(cuò)點(diǎn)匯總

普通函數(shù)和箭頭函數(shù)的區(qū)別：

  • 箭頭函數(shù)沒有prototype(原型)，所以箭頭函數(shù)本身沒有this

  • 箭頭函數(shù)的this在定義的時(shí)候繼承自外層第一個(gè)普通函數(shù)的this。

  • 如果箭頭函數(shù)外層沒有普通函數(shù)，嚴(yán)格模式和非嚴(yán)格模式下它的this都會(huì)指向window(全局對(duì)象)

  • 箭頭函數(shù)本身的this指向不能改變，但可以修改它要繼承的對(duì)象的this。

  • 箭頭函數(shù)的this指向全局，使用arguments會(huì)報(bào)未聲明的錯(cuò)誤。

  • 箭頭函數(shù)的this指向普通函數(shù)時(shí),它的argumens繼承于該普通函數(shù)

  • 使用new調(diào)用箭頭函數(shù)會(huì)報(bào)錯(cuò)，因?yàn)榧^函數(shù)沒有constructor

  • 箭頭函數(shù)不支持new.target

  • 箭頭函數(shù)不支持重命名函數(shù)參數(shù),普通函數(shù)的函數(shù)參數(shù)支持重命名

  • 箭頭函數(shù)相對(duì)于普通函數(shù)語法更簡(jiǎn)潔優(yōu)雅.

箭頭函數(shù)的注意事項(xiàng)及不適用場(chǎng)景

箭頭函數(shù)的注意事項(xiàng)：

箭頭函數(shù)一條語句返回對(duì)象字面量，需要加括號(hào)

箭頭函數(shù)在參數(shù)和箭頭之間不能換行

箭頭函數(shù)的解析順序相對(duì)||靠前

不適用場(chǎng)景：箭頭函數(shù)的this意外指向和代碼的可讀性。

對(duì)象{fn: () => {this指向window}}

window.addEventListener('click', () => {this指向全局})

promise

  • 狀態(tài)

pending (等待態(tài))

fulfilled (完成態(tài))

rejected (拒絕態(tài))

  • then

then 方法返回一個(gè) promise 對(duì)象

若 onFulfilled 、onRejected 返回一個(gè)非promise對(duì)象、非thenable對(duì)象的值 x ，則 promise2 的狀態(tài)為 fulfilled ，終值為 x

若 onFulfilled 、onRejected 返回一個(gè) promise 對(duì)象的值 x ，promise2 的狀態(tài)、終值、拒因與 x 同步

若 onFulfilled 、onRejected 返回一個(gè) thenable 對(duì)象 ，會(huì)對(duì) thenable 對(duì)象進(jìn)行展開操作，promise2 的狀態(tài)、終值、拒因取決于 thenable 對(duì)象的 then 方法調(diào)用結(jié)果

若 onFulfilled 或者 onRejected 拋出一個(gè)異常 e ，則 promise2 的狀態(tài)為 rejected，拒因?yàn)?e

  • 終值和拒因的穿透特性

如果 promise 的狀態(tài)變?yōu)?fulfilled，then 方法沒有注冊(cè) onFulfilled

then 方法返回的 promise 對(duì)象的狀態(tài)變?yōu)?fulfilled

then 方法返回的 promise 對(duì)象的終值與原 promise 對(duì)象的終值相同

如果 promise 的狀態(tài)變?yōu)?rejected，then 方法沒有注冊(cè) onRejected

then 方法返回的 promise 對(duì)象的狀態(tài)變?yōu)?rejected

then 方法返回的 promise 對(duì)象的拒因與原 promise 對(duì)象的拒因相同

（1）

const promise = new Promise((resolve, reject) => {

resolve('success1')

reject('error')

resolve('success2')

})

promise

.then((data) => {

console.log(data)

})

.catch((err) => {

console.log(err)

})

結(jié)果：success1

（2）

new Promise((resolve,reject)=>{

console.log(3);

let p = new Promise((resolve, reject)=>{

    console.log(7);

    setTimeout(()=>{

      console.log(5);

      resolve(6);

    },0)

    resolve(1);

});

resolve(2);

p.then((arg)=>{

    console.log(arg);

});

}).then((arg)=>{

console.log(arg);

});

console.log(4);

結(jié)果：1

（3）

Promise.resolve(1)

.then(2)

.then(Promise.resolve(3))

.then(console.log)

結(jié)果：3 7 4 1 2 5

（4）

const promise = new Promise((resolve, reject) => {

console.log(1)

resolve()

console.log(2)

})

promise.then(() => {

console.log(3)

})

console.log(4)

結(jié)果：1 2 4 3

（5）

Promise.resolve(1)

.then((data) => {

console.log(data)

return 2

})

.catch((err) => {

return 3

})

.then((data) => {

console.log(data)

})

結(jié)果：1 2

https://juejin.im/post/5cf65860e51d4556be5b3a11#heading-0

es6各知識(shí)點(diǎn)匯總

const let

  • 存在暫時(shí)性死區(qū)

  • 不存在變量提升

  • 不允許重復(fù)定義

  • const是指定的地址不變，所以對(duì)于基本數(shù)據(jù)類型是不變的，對(duì)于引用類型是可以改變其中的key值的，如果需要可以O(shè)bject.freeze(obj)循環(huán)凍結(jié)

  • 在｛｝內(nèi)是塊級(jí)作用域范圍， 可以聲明函數(shù)，以前是只有在頂級(jí)作用域和函數(shù)中定義函數(shù)。

  • var和function定義會(huì)掛載到window上成為全局對(duì)象屬性，單let、const、class不會(huì)

解構(gòu)

  • 只要是iterator就可以解構(gòu)數(shù)組

  • 可以設(shè)置默認(rèn)值，只有嚴(yán)格等于undefined才會(huì)使用默認(rèn)值，同時(shí)要注意默認(rèn)值不要使用未定義的變量

  • 結(jié)構(gòu)的右側(cè)必須是數(shù)組和對(duì)象，數(shù)組按照index位置解構(gòu)，對(duì)象按照key、val解構(gòu)。如果右側(cè)不是數(shù)組和對(duì)象會(huì)轉(zhuǎn)化成對(duì)象，但是undefined和null轉(zhuǎn)化不了，所以會(huì)報(bào)錯(cuò)

  • 解構(gòu)不到返回undefined

  • 可以按照導(dǎo)出模塊來結(jié)構(gòu) import {a,b} from

字符串

str='123'

str.padStart(5, 'wer') // 從前重復(fù)補(bǔ)全1到str有5個(gè)長(zhǎng)度

str.padEnd(5, '1') // 從后重復(fù)補(bǔ)全1到str有5個(gè)長(zhǎng)度

str.startWidth('5', 1) // 從前index=1開始找5是否以它開頭

str.endWidth('5', 1) // 從后index=length - 1開始找5是否以它結(jié)尾

str.trim() // 消除兩頭空格

str.trimStart() // 消除頭部空格

str.trimEnd() // 消除尾部空格

str.includes('5', 1) // 從index=1開始找是否包含5

數(shù)值

  • Math.trunc(1.1111) // 1返回整數(shù)部分負(fù)數(shù)返回負(fù)整數(shù)部分

  • Math.sign(1.2) // 1返回正負(fù)1或者NAN

  • Number.isfinite(23) // true判斷是否有限

  • Number.isInteger(2.0) // true 是否是整數(shù)

  • Number.EPSILON // 最小常量，1到大于1的最小浮點(diǎn)數(shù)之差

函數(shù)

  • fn = (a=1, b=2) => {}，可以使用參數(shù)默認(rèn)值，但fn.length會(huì)失真

  • fn = (...args) => {} 可以使用rest結(jié)構(gòu)，但只能在參數(shù)的最后

數(shù)組

  • Array.from(類數(shù)組， mapFn) 轉(zhuǎn)化成數(shù)組

  • Array.of(1,2,3) 轉(zhuǎn)化成數(shù)組

  • Array.flat(展開層級(jí)) // 數(shù)組平鋪展開

  • Array.flatMap(x => {}) // 數(shù)組先map再平鋪展開

  • arr.keys() // key值組合

  • arr.values() // value的iterator需要for of遍歷

  • arr.entries

  • arr.copyWithin(覆蓋開始（含)， 拷貝開始（含），拷貝結(jié)束（不含）），負(fù)數(shù)是倒數(shù)

  • arr.find(mapFn， context) 回調(diào)函數(shù)的上下文

  • arr.findIndex()

  • arr.fill() 填充

對(duì)象

  • Object.assign(obj) 淺拷貝

  • 表達(dá)式作為屬性名{[a + 1]: 1111}

  • Object.is(0, -0) //false 判斷是否相等，NaN 和NaN是相等的

  • Object.getOwnPropertyNames(obj) // 獲取所有自己的屬性，除了Symbols

  • Object.keys(obj, str) // 獲取自己的所有可枚舉屬性，symbols除外 [k1, k2],如果參數(shù)是number, boolean,返回空數(shù)組，如果是null, undefined報(bào)錯(cuò)

  • Object.values(obj) // 沒有iterator說以返回?cái)?shù)組values的數(shù)組 [v1, v2]

  • Object.entries(obj) // [[k1, v1], [k2, v2]] 二維數(shù)組

  • for (let k in obj) // 獲取自己和繼承的所有屬性， symbols除外

  • Object.getOwnPropertySymbols(obj) // 獲取所有Symbols屬性

  • Reflect.ownKeys(obj) // 自身所有屬性

  • Object.getOwnPropertyDescriptor(obj, 'a') 獲取屬性描述信息

  • Object.getOwnPropertyDescriptors(obj) 獲取所有屬性的描述對(duì)象

  • Object.setPropertyOf(o1, o2) 把o1的原型設(shè)置為o2，等同于 o1.proto = o2

  • Object.getPropertyOf(o1) 讀取原型對(duì)象

  • Super 執(zhí)行對(duì)象的原型對(duì)象, 只能用在對(duì)象的方法中

{

chain () {return super.a}

}

Symbol

  • 唯一

  • 不能被for in，for of, Object.keys(), Object.getOwnPropertyNames(), JSON.stringify() 獲取

  • let s1 = Symbol('s1')

    s1.description // s1 獲取描述信息

    let s2 = Symbol.for('12') // 搜索有沒有這個(gè)symbol，有則返回，沒有則創(chuàng)建再返回

    let s1 = Symbol.for('12') // s1 === s2

    Fymbol.keyFor(s1) // 獲取被Symbol.for注冊(cè)過的描述信息,和description返回的值相同

  • istanceof判斷是否是一個(gè)對(duì)象的實(shí)例的時(shí)候調(diào)用該對(duì)象的內(nèi)置的方法[Symbol.hasInstance], 可以解決 ‘’ instanceof String 為false的問題

    Class MyClass {

      [Symbol.hasInstance] (arr) {

      return true

  }

    }

    [] instanceof new Myclass() // true

Set 和 Map

  • let s1 = new Set([k1,k2,k3]) 和 let m1 = new Map([[k1, k2], [k3,k4]]) // 接收的參數(shù)是iteable的對(duì)象，不能接類數(shù)組，因?yàn)闆]有iterator

  • s1.add(k) / m1.set(k, val)

  • s1.get(k) / m1.get(k)

  • s1.has(k) / m1.has(k) 返回boolean，表示是否含有k

  • s1.size / m1.size

  • s1.delete(k) / m1.delete 返回boolean標(biāo)識(shí)是否刪除成功

  • s1.clear() m1.clear()

  • s1.forEach(item => {}) / m1.forEach(item => {})

  • s1.keys() / m1.keys()

  • s1.values() / m1.values()

-s1.entries() / m1.entries // 這些方法是Object對(duì)象上的，如果是iterator的類型就有，如果不是只能調(diào)用Object.keys(canshu) 這種形式

  • Array.from(new Set([1,2, 1, 3])) // 去重之后轉(zhuǎn)成數(shù)組

Proxy

  • this指向proxy對(duì)象不指向代理對(duì)象

  • 可以作為原型對(duì)象 Object.create(new Proxy(target, handler)), new (new Proxy(fn, handler))

  • let {proxy, revoke} = Proxy.revocable(target,handler); revoke()可以回收攔截

let p = new Proxy({a: 2, b: 4}, {

get (target, key, proxySelf) {},

set (target, key, value, proxySelf) {},

has (target, key) {}, // 攔截 in 操作符，對(duì)for in 不起效

construct (target, args, proxySelf) {}, // 攔截new

deleteProperty (target, key) {}, // 攔截delete

defineProperty (target, key, proxySelf) {}, // 攔截Object.defineProperty操作

getOwnPropertyDescriptor (target, key, proxySelf) {}, // 攔截Object.getOwnPropertyDescriptor()

getPropertyOf (target) {}, // 攔截獲取對(duì)象原型 就是下面這些操作：

        Object.prototype.__proto__

        Object.prototype.isPropertyOf()

        Object.prototype.getPropertyOf()

        Object.prototype.setPropertyOf()

        instanceof

isExtensible (target) {}, // 攔截Object.isExtensible

ownKeys (target) {}, // 攔截獲取自身屬性

        Object.getOwnPropertyNames()

        Object.getOwnPropertySymbols()

        Object.keys()

        for in

preventExtensions (target) {}, // 攔截Object.preventExtensions()

setPropertyOf (target, proto) {}, // 攔截Object.setPrototypeOf()

})

Reflect

class 和 extend

  • this指向?qū)嵗?/p>

  • 如果沒有設(shè)置contructor，會(huì)自動(dòng)增加一個(gè)constructor，其中返回一個(gè)this

  • 可以用Object.getPropertyOf(child)

  • super作為對(duì)象使用時(shí)，在普通方法中指向父類原型，在靜態(tài)方法中指向父類

  • 通過super調(diào)用父類的方法時(shí)，this指向子類

Class Person () {

b = 123 // 在對(duì)象的實(shí)例上

constructor (a) {

  this.a = a

}

say () { // 在Person.prototype上

  console.log('say')

}

}

class child extends Person {

constructor (...args) {

  super(...args)

}

}

導(dǎo)入導(dǎo)出

  • export const a = 1

  • export {a,b,c}

  • export default {}

  • import {a as a1} from ''

  • import * as obj from ''

  • import whatever from ''

  • 多次導(dǎo)入一個(gè)文件，只會(huì)執(zhí)行一次

  • import在編譯時(shí)執(zhí)行，不是在運(yùn)行時(shí)執(zhí)行

  • import存在變量聲明提升，所以import不要和require時(shí)使用，還對(duì)其有依賴

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容