es6易错点汇总

普通函数和箭头函数的区别:

  • 箭头函数没有prototype(原型),所以箭头函数本身没有this

  • 箭头函数的this在定义的时候继承自外层第一个普通函数的this。

  • 如果箭头函数外层没有普通函数,严格模式和非严格模式下它的this都会指向window(全局对象)

  • 箭头函数本身的this指向不能改变,但可以修改它要继承的对象的this。

  • 箭头函数的this指向全局,使用arguments会报未声明的错误。

  • 箭头函数的this指向普通函数时,它的argumens继承于该普通函数

  • 使用new调用箭头函数会报错,因为箭头函数没有constructor

  • 箭头函数不支持new.target

  • 箭头函数不支持重命名函数参数,普通函数的函数参数支持重命名

  • 箭头函数相对于普通函数语法更简洁优雅.

箭头函数的注意事项及不适用场景

箭头函数的注意事项:

箭头函数一条语句返回对象字面量,需要加括号

箭头函数在参数和箭头之间不能换行

箭头函数的解析顺序相对||靠前

不适用场景:箭头函数的this意外指向和代码的可读性。

对象{fn: () => {this指向window}}

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

promise

  • 状态

pending (等待态)

fulfilled (完成态)

rejected (拒绝态)

  • then

then 方法返回一个 promise 对象

若 onFulfilled 、onRejected 返回一个非promise对象、非thenable对象的值 x ,则 promise2 的状态为 fulfilled ,终值为 x

若 onFulfilled 、onRejected 返回一个 promise 对象的值 x ,promise2 的状态、终值、拒因与 x 同步

若 onFulfilled 、onRejected 返回一个 thenable 对象 ,会对 thenable 对象进行展开操作,promise2 的状态、终值、拒因取决于 thenable 对象的 then 方法调用结果

若 onFulfilled 或者 onRejected 抛出一个异常 e ,则 promise2 的状态为 rejected,拒因为 e

  • 终值和拒因的穿透特性

如果 promise 的状态变为 fulfilled,then 方法没有注册 onFulfilled

then 方法返回的 promise 对象的状态变为 fulfilled

then 方法返回的 promise 对象的终值与原 promise 对象的终值相同

如果 promise 的状态变为 rejected,then 方法没有注册 onRejected

then 方法返回的 promise 对象的状态变为 rejected

then 方法返回的 promise 对象的拒因与原 promise 对象的拒因相同

(1)

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

resolve('success1')

reject('error')

resolve('success2')

})

promise

.then((data) => {

console.log(data)

})

.catch((err) => {

console.log(err)

})

结果: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);

结果:1

(3)

Promise.resolve(1)

.then(2)

.then(Promise.resolve(3))

.then(console.log)

结果: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)

结果:1 2 4 3

(5)

Promise.resolve(1)

.then((data) => {

console.log(data)

return 2

})

.catch((err) => {

return 3

})

.then((data) => {

console.log(data)

})

结果:1 2

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

es6各知识点汇总

const let

  • 存在暂时性死区

  • 不存在变量提升

  • 不允许重复定义

  • const是指定的地址不变,所以对于基本数据类型是不变的,对于引用类型是可以改变其中的key值的,如果需要可以Object.freeze(obj)循环冻结

  • 在{}内是块级作用域范围, 可以声明函数,以前是只有在顶级作用域和函数中定义函数。

  • var和function定义会挂载到window上成为全局对象属性,单let、const、class不会

解构

  • 只要是iterator就可以解构数组

  • 可以设置默认值,只有严格等于undefined才会使用默认值,同时要注意默认值不要使用未定义的变量

  • 结构的右侧必须是数组和对象,数组按照index位置解构,对象按照key、val解构。如果右侧不是数组和对象会转化成对象,但是undefined和null转化不了,所以会报错

  • 解构不到返回undefined

  • 可以按照导出模块来结构 import {a,b} from

字符串

str='123'

str.padStart(5, 'wer') // 从前重复补全1到str有5个长度

str.padEnd(5, '1') // 从后重复补全1到str有5个长度

str.startWidth('5', 1) // 从前index=1开始找5是否以它开头

str.endWidth('5', 1) // 从后index=length - 1开始找5是否以它结尾

str.trim() // 消除两头空格

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

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

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

数值

  • Math.trunc(1.1111) // 1返回整数部分负数返回负整数部分

  • Math.sign(1.2) // 1返回正负1或者NAN

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

  • Number.isInteger(2.0) // true 是否是整数

  • Number.EPSILON // 最小常量,1到大于1的最小浮点数之差

函数

  • fn = (a=1, b=2) => {},可以使用参数默认值,但fn.length会失真

  • fn = (...args) => {} 可以使用rest结构,但只能在参数的最后

数组

  • Array.from(类数组, mapFn) 转化成数组

  • Array.of(1,2,3) 转化成数组

  • Array.flat(展开层级) // 数组平铺展开

  • Array.flatMap(x => {}) // 数组先map再平铺展开

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

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

  • arr.entries

  • arr.copyWithin(覆盖开始(含), 拷贝开始(含),拷贝结束(不含)),负数是倒数

  • arr.find(mapFn, context) 回调函数的上下文

  • arr.findIndex()

  • arr.fill() 填充

对象

  • Object.assign(obj) 浅拷贝

  • 表达式作为属性名{[a + 1]: 1111}

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

  • Object.getOwnPropertyNames(obj) // 获取所有自己的属性,除了Symbols

  • Object.keys(obj, str) // 获取自己的所有可枚举属性,symbols除外 [k1, k2],如果参数是number, boolean,返回空数组,如果是null, undefined报错

  • Object.values(obj) // 没有iterator说以返回数组values的数组 [v1, v2]

  • Object.entries(obj) // [[k1, v1], [k2, v2]] 二维数组

  • for (let k in obj) // 获取自己和继承的所有属性, symbols除外

  • Object.getOwnPropertySymbols(obj) // 获取所有Symbols属性

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

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

  • Object.getOwnPropertyDescriptors(obj) 获取所有属性的描述对象

  • Object.setPropertyOf(o1, o2) 把o1的原型设置为o2,等同于 o1.proto = o2

  • Object.getPropertyOf(o1) 读取原型对象

  • Super 执行对象的原型对象, 只能用在对象的方法中

{

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') // 搜索有没有这个symbol,有则返回,没有则创建再返回

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

    Fymbol.keyFor(s1) // 获取被Symbol.for注册过的描述信息,和description返回的值相同

  • istanceof判断是否是一个对象的实例的时候调用该对象的内置的方法[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]]) // 接收的参数是iteable的对象,不能接类数组,因为没有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标识是否删除成功

  • s1.clear() m1.clear()

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

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

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

-s1.entries() / m1.entries // 这些方法是Object对象上的,如果是iterator的类型就有,如果不是只能调用Object.keys(canshu) 这种形式

  • Array.from(new Set([1,2, 1, 3])) // 去重之后转成数组

Proxy

  • this指向proxy对象不指向代理对象

  • 可以作为原型对象 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 操作符,对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) {}, // 拦截获取对象原型 就是下面这些操作:

        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指向实例

  • 如果没有设置contructor,会自动增加一个constructor,其中返回一个this

  • 可以用Object.getPropertyOf(child)

  • super作为对象使用时,在普通方法中指向父类原型,在静态方法中指向父类

  • 通过super调用父类的方法时,this指向子类

Class Person () {

b = 123 // 在对象的实例上

constructor (a) {

  this.a = a

}

say () { // 在Person.prototype上

  console.log('say')

}

}

class child extends Person {

constructor (...args) {

  super(...args)

}

}

导入导出

  • export const a = 1

  • export {a,b,c}

  • export default {}

  • import {a as a1} from ''

  • import * as obj from ''

  • import whatever from ''

  • 多次导入一个文件,只会执行一次

  • import在编译时执行,不是在运行时执行

  • import存在变量声明提升,所以import不要和require时使用,还对其有依赖

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,743评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,296评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,285评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,485评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,581评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,821评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,960评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,719评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,186评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,516评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,650评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,329评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,936评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,757评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,991评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,370评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,527评论 2 349

推荐阅读更多精彩内容