ES6——知识点记录(上)

简介: ES6——知识点记录

1.字符串支持

1.codePointAt——根据字符串码元的位置得到其码点
2.includes——判断字符串中是否包含指定的子字符串
3.startsWith——判断字符串中是否以指定的字符串开始
4.endsWith——判断字符串中是否以指定的字符串结尾
5.repeat——将字符串重复指定的次数,然后返回一个新字符串

 

6.模板字符串

ES6之前处理字符串繁琐的两个方面:

  1. 多行字符串
  2. 字符串拼接

ES6中,提供了模板字符串的书写,可以非常方便的换行和拼接,要做的,仅仅是将字符串的开始或结尾改为 ` 符号如果要在字符串中拼接js表达式,只需要在模板字符串中使用${JS表达式}

2.函数

2-1. 参数默认值
使用

在书写形参时,直接给形参赋值,附的值即为默认值

这样一来,当调用函数时,如果没有给对应的参数赋值(给它的值是undefined),则会自动使用默认值。

[扩展]对arguments的影响

只要给函数加上参数默认值,该函数会自动变量严格模式下的规则:arguments和形参脱离

[扩展]留意暂时性死区

形参和ES6中的let或const声明一样,具有作用域,并且根据参数的声明顺序,存在暂时性死区。

2-6. 箭头函数

回顾:this指向

  1. 通过对象调用函数,this指向对象
  2. 直接调用函数,this指向全局对象
  3. 如果通过new调用函数,this指向新创建的对象
  4. 如果通过apply、call、bind调用函数,this指向指定的数据
  5. 如果是DOM事件函数,this指向事件源
使用语法

箭头函数是一个函数表达式,理论上,任何使用函数表达式的场景都可以使用箭头函数

完整语法:
(参数1, 参数2, ...)=>{
    //函数体
}

如果参数只有一个,可以省略小括号

参数 => {
}

如果箭头函数只有一条返回语句,可以省略大括号,和return关键字

参数 => 返回值

注意细节

  • 箭头函数中,不存在this、arguments、new.target,如果使用了,则使用的是函数外层的对应的this、arguments、new.target
  • 箭头函数没有原型
  • 箭头函数不能作用构造函数使用

应用场景

  1. 临时性使用的函数,并不会可以调用它,比如:
  2. 事件处理函数
  3. 异步处理函数
  4. 其他临时性的函数
  5. 为了绑定外层this的函数
  6. 在不影响其他代码的情况下,保持代码的简洁,最常见的,数组方法中的回调函数

3.对象Object

3-1. Object的新增API
1. Object.is

用于判断两个数据是否相等,基本上跟严格相等(===)是一致的,除了以下两点:

  1. NaN和NaN相等
  2. +0和-0不相等
2. Object.assign

用于混合对象

3. Object.getOwnPropertyNames 的枚举顺序

Object.getOwnPropertyNames方法之前就存在,只不过,官方没有明确要求,对属性的顺序如何排序,如何排序,完全由浏览器厂商决定。

ES6规定了该方法返回的数组的排序方式如下:

  • 先排数字,并按照升序排序
  • 再排其他,按照书写顺序排序
4. Object.setPrototypeOf

该函数用于设置某个对象的隐式原型

比如: Object.setPrototypeOf(obj1, obj2),

相当于: obj1.__proto__ = obj2

3-2. 类:构造函数的语法糖
传统的构造函数的问题
  1. 属性和原型方法定义分离,降低了可读性
  2. 原型成员可以被枚举
  3. 默认情况下,构造函数仍然可以被当作普通函数使用
类的特点
  1. 类声明不会被提升,与 let 和 const 一样,存在暂时性死区
  2. 类中的所有代码均在严格模式下执行
  3. 类的所有方法都是不可枚举的
  4. 类的所有方法都无法被当作构造函数使用
  5. 类的构造器必须使用 new 来调用
3-3. 类的其他书写方式
1. 可计算的成员名
2. getter和setter

Object.defineProperty 可定义某个对象成员属性的读取和设置

使用getter和setter控制的属性,不在原型上

3. 静态成员

构造函数本身的成员

使用static关键字定义的成员即静态成员

4. 字段初始化器(ES7)

注意:

1). 使用static的字段初始化器,添加的是静态成员

2). 没有使用static的字段初始化器,添加的成员位于对象上

3). 箭头函数在字段初始化器位置上,指向当前对象

5. 类表达式
6. [扩展]装饰器(ES7)(Decorator)

横切关注点

装饰器的本质是一个函数

3-4. 类的继承

如果两个类A和B,如果可以描述为:B 是 A,则,A和B形成继承关系

如果B是A,则:

  1. B继承自A
  2. A派生B
  3. B是A的子类
  4. A是B的父类

如果A是B的父类,则B会自动拥有A中的所有实例成员。

新的关键字:

  • extends:继承,用于类的定义
  • super
  • 直接当作函数调用,表示父类构造函数
  • 如果当作对象使用,则表示父类的原型

注意:ES6要求,如果定义了constructor,并且该类是子类,则必须在constructor的第一行手动调用父类的构造函数

如果子类不写constructor,则会有默认的构造器,该构造器需要的参数和父类一致,并且自动调用父类构造器

目录
相关文章
|
7月前
|
存储 JavaScript 前端开发
【面试题】 ES6知识点详细解析(二)
【面试题】 ES6知识点详细解析(二)
|
7月前
|
前端开发 JavaScript 网络架构
【面试题】 ES6知识点详细解析(一)
【面试题】 ES6知识点详细解析(一)
264 0
|
7月前
|
前端开发 JavaScript
讲讲ES6中 对象合并
讲讲ES6中 对象合并
85 0
|
7月前
|
前端开发 JavaScript 开发者
ES6知识点
ES6知识点
52 0
|
缓存 移动开发 JSON
ES6——知识点记录(下)
ES6——知识点记录(上)
59 0
|
缓存 移动开发 前端开发
ES6——知识点记录
ES6——知识点记录
38 0
|
JSON 前端开发 JavaScript
前端实战【ES6】你会ES6,但是你真的会用吗?
前端实战【ES6】你会ES6,但是你真的会用吗?
143 0
前端实战【ES6】你会ES6,但是你真的会用吗?
|
JavaScript 前端开发 网络架构
每天3分钟,重学ES6-ES12(四)函数的补充 展开语法
每天3分钟,重学ES6-ES12(四)函数的补充 展开语法
84 0
每天3分钟,重学ES6-ES12(七)ES10 新增内容
每天3分钟,重学ES6-ES12(七)ES10 新增内容
92 0
ES文档写入原理
ES文档写入原理
99 0
ES文档写入原理