ES6更新的内容主要分为以下几点
- 表达式:声明、解构赋值
- 内置对象:字符串扩展、数值扩展、对象扩展、数组扩展、函数扩展、正则扩展、Symbol、Set、Map、Proxy、Reflect
- 语句与运算:Class、Module、Iterator
- 异步编程:Promise、Generator、Async
变量声明
- const声明常量、 let声明变量
- 作用范围
- var命令在全局代码中执行
- const命令和let命令只能在代码块中执行
- 赋值使用
- const命令声明常量后必须立马赋值
- let命令声明变量后可立马赋值或使用时赋值
- 作用范围
- 不存在变量提升:未定义就使用会报错,
- 存在暂时性死区:在代码块内使用const命令和let命令声明变量之前,该变量都不可用
- 不允许重复声明
解构赋值
-
字符串解构:const [a, b, c, d, e] = “hello”
-
数值解构:const { toString: s } =123
-
布尔解构:const { toString: b } = true
-
对象解构
形式:const { x, y } = { x: 1, y: 2 }
默认:const { x, y = 2 } = { x: 1 }
改名:const { x, y: z } = { x: 1, y: 2 } -
数组解构
规则:数据结构具有Iterator接口可采用数组形式的解构赋值
形式:const [x, y] = [1, 2]
默认:const [x,y = 2] = [1] -
函数参数解构
数组解构:function Func([x = 0, y = 1]) {}
对象解构:function Func({ x = 0, y =1 } = {}) {}
字符串扩展
- 字符串模板:可单行可多行可插入变量的增强版字符串 标签模板:函数参数的特殊调用
- Unicode表示法:大括号包含表示Unicode字符(\u{0xXX}或\u{0XXX})
- 字符串遍历:可通过for-of遍历字符串
- String.raw():返回把字符串所有变量替换且对斜杠进行转义的结果
- String.fromCodePoint():返回码点对应字符
- codePointAt():返回字符对应码点(String.fromCodePoint()的逆操作)
- normalize():把字符的不同表示方法统一为同样形式,返回新字符串(Unicode正规化)
- repeat():把字符串重复n次,返回新字符串
- matchAll():返回正则表达式在字符串的所有匹配
- includes():是否存在指定字符串
- startsWith():是否存在字符串头部指定字符串
- endsWith():是否存在字符串尾部指定字符串
对象扩展
- 简洁表示法:直接写入变量和函数作为对象的属性和方法({ prop, method() {} })
- 属性名表达式:字面量定义对象时使用[]定义键([prop],不能与上同时使用)
- 方法的name属性:返回方法函数名
取值函数(getter)和存值函数(setter):get/set 函数名(属性的描述对象在get和set上)
bind返回的函数:bound 函数名
Function构造函数返回的函数实例:anonymous - 属性的可枚举性和遍历:描述对象的enumerable
- super关键字:指向当前对象的原型对象(只能用在对象的简写方法中method() {})
- Object.is():对比两值是否相等
- Object.assign():合并对象(浅拷贝),返回原对象
- Object.getPrototypeOf():返回对象的原型对象
- Object.setPrototypeOf():设置对象的原型对象
- proto:返回或设置对象的原型对象
遍历
- for-in:遍历对象自身可继承可枚举属性(hasOwnProperty()确定某属性是否是对象本身的属性)
- Object.keys():返回对象自身可枚举属性键组成的数组
- Object.getOwnPropertyNames():返回对象自身非Symbol属性键组成的数组
- Object.getOwnPropertySymbols():返回对象自身Symbol属性键组成的数组
- Reflect.ownKeys():返回对象自身全部属性键组成的数组
数组扩展
- 扩展运算符(…):转换数组为用逗号分隔的参数序列([…arr],相当于rest/spread参数的逆运算)
- Array.from():转换具有Iterator接口的数据结构为真正数组,返回新数组
类数组对象:包含length的对象、Arguments对象、NodeList对象
可遍历对象:String、Set结构、Map结构、Generator函数 - Array.of():转换一组值为真正数组,返回新数组
- copyWithin():把指定位置的成员复制到其他位置,返回原数组
- find():返回第一个符合条件的成员
- findIndex():返回第一个符合条件的成员索引值
- fill():根据指定值填充整个数组,返回原数组
- keys():返回以索引值为遍历器的对象
- values():返回以属性值为遍历器的对象
- entries():返回以索引值和属性值为遍历器的对象
- 数组空位:ES6明确将数组空位转为undefined(空位处理规不一,建议避免出现)
函数扩展
- 参数默认值:为函数参数指定默认值
- rest参数(…):
代替了arguments,是一个数组对象
arguments对象不是数组,而是一个类似数组的对象。所以为了使用数组的方法,必须使用Array.from先将其转为数组 - 严格模式:在严格条件下运行JS
应用:只要函数参数使用默认值、解构赋值、扩展运算符,那么函数内部就不能显式设定为严格模式 - name属性:返回函数的函数名
- 箭头函数(=>):函数简写
this指向固定化
并非因为内部有绑定this的机制,而是根本没有自己的this,导致内部的this就是外层代码块的this
因为没有this,因此不能用作构造函数
箭头函数误区
函数体内的this是定义时所在的对象而不是使用时所在的对象
可让this指向固定化,这种特性很有利于封装回调函数
不可当作构造函数,因此箭头函数不可使用new命令
不可使用yield命令,因此箭头函数不能用作Generator函数
不可使用Arguments对象,此对象在函数体内不存在(可用rest/spread参数代替)
返回对象时必须在对象外面加上括号
Symbol
定义:独一无二的值
声明:const set = Symbol(str)
入参:字符串(可选)
Set
-
定义:类似于数组的数据结构,成员值都是唯一且没有重复的值
-
声明:const set = new Set(arr)
-
入参:具有Iterator接口的数据结构
-
属性
constructor:构造函数,返回Set
size:返回实例成员总数 -
方法
add():添加值,返回实例
delete():删除值,返回布尔
has():检查值,返回布尔
clear():清除所有成员
keys():返回以属性值为遍历器的对象
values():返回以属性值为遍历器的对象
entries():返回以属性值和属性值为遍历器的对象
forEach():使用回调函数遍历每个成员
Map
- 定义:类似于对象的数据结构,成员键是任何类型的值
- 声明:const set = new Map(arr)
- 入参:具有Iterator接口且每个成员都是一个双元素数组的数据结构
- 属性
constructor:构造函数,返回Map
size:返回实例成员总数 - 方法
get():返回键值对
set():添加键值对,返回实例
delete():删除键值对,返回布尔
has():检查键值对,返回布尔
clear():清除所有成员
keys():返回以键为遍历器的对象
values():返回以值为遍历器的对象
entries():返回以键和值为遍历器的对象
forEach():使用回调函数遍历每个成员
Proxy
-
定义:修改某些操作的默认行为
-
声明:const proxy = new Proxy(target, handler)
-
入参
target:拦截的目标对象
handler:定制拦截行为 -
方法
Proxy.revocable():返回可取消的Proxy实例(返回{ proxy, revoke },通过revoke()取消代理) -
拦截方式
get():拦截对象属性读取
set():拦截对象属性设置,返回布尔
has():拦截对象属性检查k in obj,返回布尔
deleteProperty():拦截对象属性删除delete obj[k],返回布尔
defineProperty():拦截对象属性定义Object.defineProperty()、Object.defineProperties(),返回布尔
ownKeys():拦截对象属性遍历for-in、Object.keys()、Object.getOwnPropertyNames()、Object.getOwnPropertySymbols(),返回数组
getOwnPropertyDescriptor():拦截对象属性描述读取Object.getOwnPropertyDescriptor(),返回对象
getPrototypeOf():拦截对象原型读取instanceof、Object.getPrototypeOf()、Object.prototype.proto、Object.prototype.isPrototypeOf()、Reflect.getPrototypeOf(),返回对象
setPrototypeOf():拦截对象原型设置Object.setPrototypeOf(),返回布尔
isExtensible():拦截对象是否可扩展读取Object.isExtensible(),返回布尔
preventExtensions():拦截对象不可扩展设置Object.preventExtensions(),返回布尔
apply():拦截Proxy实例作为函数调用proxy()、proxy.apply()、proxy.call()
construct():拦截Proxy实例作为构造函数调用new proxy()
Class
-
定义:对一类具有共同特征的事物的抽象(构造函数语法糖)
-
原理:类本身指向构造函数,所有方法定义在prototype上,可看作构造函数的另一种写法(Class === Class.prototype.constructor)
-
方法和关键字
constructor():构造函数,new命令生成实例时自动调用
extends:继承父类
super:新建父类的this
static:定义静态属性方法
get:取值函数,拦截属性的取值行为
set:存值函数,拦截属性的存值行为 -
属性
proto:构造函数的继承(总是指向父类)
proto.proto:子类的原型的原型,即父类的原型(总是指向父类的__proto__)
prototype.proto:属性方法的继承(总是指向父类的prototype) -
静态属性:定义类完成后赋值属性,该属性不会被实例继承,只能通过类来调用
-
静态方法:使用static定义方法,该方法不会被实例继承,只能通过类来调用(方法中的this指向类,而不是实例)
-
继承
实质
ES5实质:先创造子类实例的this,再将父类的属性方法添加到this上(Parent.apply(this))
ES6实质:先将父类实例的属性方法加到this上(调用super()),再用子类构造函数修改thissuper
作为函数调用:只能在构造函数中调用super(),内部this指向继承的当前子类(super()调用后才可在构造函数中使用this)
作为对象调用:在普通方法中指向父类的原型对象,在静态方法中指向父类显示定义:使用constructor() { super(); }定义继承父类,没有书写则显示定义
子类继承父类:子类使用父类的属性方法时,必须在构造函数中调用super(),否则得不到父类的this
父类静态属性方法可被子类继承
子类继承父类后,可从super上调用父类静态属性方法
作者:JowayYoung
链接:https://juejin.cn/post/6844903959283367950
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
显示定义:使用constructor() { super(); }定义继承父类,没有书写则显示定义
子类继承父类:子类使用父类的属性方法时,必须在构造函数中调用super(),否则得不到父类的this
父类静态属性方法可被子类继承
子类继承父类后,可从super上调用父类静态属性方法
Module
-
export:规定模块对外接口
默认导出:export default Person(导入时可指定模块任意名称,无需知晓内部真实名称)
单独导出:export const name = “Bruce”
按需导出:export { age, name, sex }(推荐)
改名导出:export { name as newName } -
import:导入模块内部功能
默认导入:import Person from “person”
整体导入:import * as Person from “person”
按需导入:import { age, name, sex } from “person”
改名导入:import { name as newName } from “person”
自执导入:import “person”
复合导入:import Person, { name } from “person” -
复合模式:export命令和import命令结合在一起写成一行,变量实质没有被导入当前模块,相当于对外转发接口,导致当前模块无法直接使用其导入变量
默认导入导出:export { default } from “person”
整体导入导出:export * from “person”
按需导入导出:export { age, name, sex } from “person”
改名导入导出:export { name as newName } from “person”
具名改默认导入导出:export { name as default } from “person”
默认改具名导入导出:export { default as name } from “person”
Iterator
定义:为各种不同的数据结构提供统一的访问机制
原理:创建一个指针指向首个成员,按照次序使用next()指向下一个成员,直接到结束位置(数据结构只要部署Iterator接口就可完成遍历操作)