es6新增特性总结

定义

ES6是ECMA为JavaScript制定的第6个标准版本，标准委员会决定，标准在每年6月正式发布并作为当年的正式版本，接下来的时间里就在此版本的基础上进行改动，直到下一年6月草案就自然变成新一年的版本，这样一来就无需以前的版本号，只要用年份标记即可。ECMAscript 2015是在2015年6月发布ES6的第一个版本。以此类推，ECMAscript 2016是ES6的第二个版本、 ECMAscript 2017是ES6的第三个版本。

ES6既是一个历史名词也是一个泛指，含义是5.1版本以后的JavaScript下一代标准，目前涵盖了ES2015、ES2016、ES2017、ES2018、ES2019、ES2020。
所以很多文章提到的es7,es8等，实质上都是不规范的概念，从ES1到ES6，每个标准都是花了好几年甚至十多年才制定下来，你一个ES6到ES7，ES7到ES8，才用了一年，按照这样的定义下去，那不是很快就ES20了。用正确的概念来说ES6目前涵盖了ES2015、ES2016、ES2017、ES2018、ES2019、ES2020。

另外，ES6更新的内容主要分为以下几点

表达式：声明、解构赋值
内置对象：字符串扩展、数值扩展、对象扩展、数组扩展、函数扩展、正则扩展、Symbol、Set、Map、Proxy、Reflect
语句与运算：Class、Module、Iterator
异步编程：Promise、Generator、Async

更新内容

1.声明

ES2015

const：声明常量，必须立马赋值
let：声明变量，可立马赋值或使用时赋值

注意

不允许重复声明，未定义就使用会报错，出现暂时性死区，不存在变量提升
const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。
但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的（即总是指向另一个固定的地址），至于它指向的数据结构是不是可变的，就完全不能控制了。

const foo = {};

// 为 foo 添加一个属性，可以成功
foo.prop = 123;
foo.prop // 123

// 将 foo 指向另一个对象，就会报错
foo = {}; // TypeError: "foo" is read-only

ES2017

共享内存和原子操作：由全局对象SharedArrayBuffer和Atomics实现，将数据存储在一块共享内存空间中，这些数据可在JS主线程和web-worker线程之间共享

ES2020

globalThis：作为顶层对象，指向全局环境下的this

Browser：顶层对象是window
Node：顶层对象是global
WebWorker：顶层对象是self
以上三者：通用顶层对象是globalThis

ES提案

do表达式：封装块级作用域的操作，返回内部最后执行表达式的值(do{})
throw表达式：直接使用throw new Error()，无需()或{}包括
!#命令：指定脚本执行器(写在文件首行)

2.解构赋值

字符串解构：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 } = {}) {}

应用场景

交换变量值：[x, y] = [y, x]
返回函数多个值：const [x, y, z] = Func()
定义函数参数：Func([1, 2])
提取JSON数据：const { name, version } = packageJson
定义函数参数默认值：function Func({ x = 1, y = 2 } = {}) {}
遍历Map结构：for (let [k, v] of Map) {}
输入模块指定属性和方法：const { readFile, writeFile } = require("fs")

注意

匹配模式：只要等号两边的模式相同，左边的变量就会被赋予对应的值
解构赋值规则：如果等号右边的值不是对象或数组，就先将其转为对象
解构默认值生效条件：属性值严格等于undefined
解构遵循匹配模式
解构不成功时变量的值等于undefined
undefined和null无法转为对象，因此无法进行解构

let x;
{x} = {x: 1};
// SyntaxError: syntax error

这段代码会报错，因为JavaScript引擎会将{x}理解成一个代码块，从而发生语法错误。
只有不将大括号写在行首，避免JavaScript将其解释为代码块，才能解决这个问题。

3.字符串拓展

ES2015

Unicode表示法：大括号包含表示Unicode字符(\u{0xXX}或\u{0XXX}),有了这种表示法之后，JavaScript 共有 6 种方法可以表示一个字符。

'\z' === 'z'  // true
'\172' === 'z' // true
'\x7A' === 'z' // true
'\u007A' === 'z' // true
'\u{7A}' === 'z' // true

字符串遍历：可通过for-of遍历字符串

for (let codePoint of 'foo') {
  console.log(codePoint)
}
// "f"
// "o"
// "o"

//这个遍历器最大的优点是可以识别大于0xFFFF的码点，传统的for循环无法识别这样的码点。

let text = String.fromCodePoint(0x20BB7);

for (let i = 0; i < text.length; i++) {
  console.log(text[i]);
}
// " "
// " "

for (let i of text) {
  console.log(i);
}
// "𠮷"

字符串模板：可单行可多行可插入变量的增强版字符串
标签模板：函数参数的特殊调用,需要注意的是：模板字符串中变量必须是由非变量包含着的，如果变量在开始位置或者结束位置且没有非变量包含，那么该位置就是空字符串。

var a = 5;
var b = 10;
 
tag`Hello ${ a + b } world ${ a * b }`;
//等同于
tag(['Hello ', ' world ', ''], 15, 50);

String.raw()：返回把字符串所有变量替换且对斜杠进行转义的结果

let name = "Bob";
String.raw `Hi\n${name}!`;             
// "Hi\nBob!"，内插表达式还可以正常运行

String.fromCodePoint()：返回码点对应字符

String.fromCodePoint(42);       // "*"
String.fromCodePoint(65, 90);   // "AZ"
String.fromCodePoint(0x404);    // "\u0404"

codePointAt()：返回字符对应码点(String.fromCodePoint()的逆操作)
normalize()：把字符的不同表示方法统一为同样形式，返回新字符串(Unicode正规化)
repeat()：把字符串重复n次，返回新字符串
matchAll()：返回正则表达式在字符串的所有匹配
includes()：是否存在指定字符串
startsWith()：是否存在字符串头部指定字符串
endsWith()：是否存在字符串尾部指定字符串

ES2017

padStart()：把指定字符串填充到字符串头部，返回新字符串
padEnd()：把指定字符串填充到字符串尾部，返回新字符串

const str = '123'
str.padStart(str.length + 1, 'a') // => 'a123'

ES2019

直接输入U+2028和U+2029：字符串可直接输入行分隔符和段分隔符
JSON.stringify()改造：可返回不符合UTF-8标准的字符串
trimStart()：消除字符串头部空格，返回新字符串
trimEnd()：消除字符串尾部空格，返回新字符串

数值扩展

ES2015

二进制表示法：0b或0B开头表示二进制(0bXX或0BXX)
八进制表示法：0o或0O开头表示二进制(0oXX或0OXX)
Number.EPSILON：数值最小精度
Number.MIN_SAFE_INTEGER：最小安全数值(-2^53)
Number.MAX_SAFE_INTEGER：最大安全数值(2^53)
Number.parseInt()：返回转换值的整数部分
Number.parseFloat()：返回转换值的浮点数部分
Number.isFinite()：是否为有限数值
Number.isNaN()：是否为NaN
Number.isInteger()：是否为整数
Number.isSafeInteger()：是否在数值安全范围内
Math.trunc()：返回数值整数部分
Math.sign()：返回数值类型(正数1、负数-1、零0)
Math.cbrt()：返回数值立方根
Math.clz32()：返回数值的32位无符号整数形式
Math.imul()：返回两个数值相乘
Math.fround()：返回数值的32位单精度浮点数形式
Math.hypot()：返回所有数值平方和的平方根
Math.expm1()：返回e^n - 1
Math.log1p()：返回1 + n的自然对数(Math.log(1 + n))
Math.log10()：返回以10为底的n的对数
Math.log2()：返回以2为底的n的对数
Math.sinh()：返回n的双曲正弦
Math.cosh()：返回n的双曲余弦
Math.tanh()：返回n的双曲正切
Math.asinh()：返回n的反双曲正弦
Math.acosh()：返回n的反双曲余弦
Math.atanh()：返回n的反双曲正切

ES2016

指数运算符(**)：数值求幂(相当于Math.pow())

ES2020

BigInt：任何位数的整数(新增的数据类型，使用n结尾)

BigInt()：转换普通数值为BigInt类型
BigInt.asUintN()：转换BigInt为0到2n-1之间对应的值
BigInt.asIntN()：转换BigInt为-2n-1到2n-1-1
BigInt.parseInt()：近似于Number.parseInt()，将一个字符串转换成指定进制的BigInt类型

ES提案

数值分隔符(_)：使用_作为千分位分隔符(增加数值的可读性)
Math.signbit()：返回数值符号是否设置

let budget = 1_000_000_000_000;
budget === 10 ** 12 // true

对象扩展

ES2015

简洁表示法：直接写入变量和函数作为对象的属性和方法({ prop, method() {} })
属性名表达式：字面量定义对象时使用[]定义键([prop]，不能与上同时使用)
属性的可枚举性和遍历：描述对象的enumerable
super关键字：指向当前对象的原型对象(只能用在对象的简写方法中method() {})
Object.is()：对比两值是否相等
Object.assign()：合并对象(浅拷贝)，返回原对象
Object.getPrototypeOf()：返回对象的原型对象
Object.setPrototypeOf()：设置对象的原型对象
proto：返回或设置对象的原型对象

方法的name属性：返回方法函数名
- 取值函数(getter)和存值函数(setter)：get/set函数名(属性的描述对象在get和set上)
- bind返回的函数：bound函数名
- Function构造函数返回的函数实例：anonymous

ES2017

Object.getOwnPropertyDescriptors()：返回对象所有自身属性(非继承属性)的描述对象
Object.values()：返回以值组成的数组
Object.entries()：返回以键和值组成的数组

ES2018

扩展运算符(...)：转换对象为用逗号分隔的参数序列({ ...obj }，相当于rest/spread参数的逆运算)

ES2019

Object.fromEntries()：返回以键和值组成的对象(Object.entries()的逆操作)

ES2020

链判断操作符(?.)：是否存在对象属性(不存在返回undefined且不再往下执行)
- 对象属性：obj?.prop、obj?.[expr]
- 函数调用：func?.(...args)
空判断操作符(??)：是否值为undefined或null，是则使用默认值

数组扩展

ES2015

扩展运算符(...)：转换数组为用逗号分隔的参数序列([...arr]，相当于rest/spread参数的逆运算)

Array.from()：转换具有Iterator接口的数据结构为真正数组，返回新数组
- 类数组对象：包含length的对象、Arguments对象、NodeList对象
- 可遍历对象：String、Set结构、Map结构、Generator函数

Array.of()：转换一组值为真正数组，返回新数组
copyWithin()：把指定位置的成员复制到其他位置，返回原数组
find()：返回第一个符合条件的成员
findIndex()：返回第一个符合条件的成员索引值
fill()：根据指定值填充整个数组，返回原数组
keys()：返回以索引值为遍历器的对象
values()：返回以属性值为遍历器的对象
entries()：返回以索引值和属性值为遍历器的对象
数组空位：ES6明确将数组空位转为undefined(空位处理规不一，建议避免出现)

ES2016

includes()：是否存在指定成员

ES2019

sort()稳定性：排序关键字相同的项目其排序前后的顺序不变，默认为稳定
flat()：扁平化数组，返回新数组
flatMap()：映射且扁平化数组，返回新数组(只能展开一层数组)

函数扩展

ES2015

参数默认值：为函数参数指定默认值

function Func(x = 1, y = 2) {}

rest/spread参数(...)：返回函数多余参数,以数组的形式存在，之后不能再有其他参数
严格模式：在严格条件下运行JS,如果函数参数使用默认值、解构赋值、扩展运算符，那么函数内部就不能显式设定为严格模式
箭头函数(=>)：函数简写
尾调用优化：只保留内层函数的调用帧,不会发生栈溢出，相对节省内存

function f(x) { return g(x); }

ES2017

函数参数尾逗号：允许函数最后一个参数有尾逗号

ES2019

toString()改造：返回函数原始代码(与编码一致)
catch()参数可省略：catch()中的参数可省略

ES提案

函数部分执行：复用函数功能(?表示单个参数占位符，...表示多个参数占位符)

let obj = {
  f(x, y) { return x + y; },
};

const g = obj.f(?, 3);
g(1) // 4

管道操作符(|>)：把左边表达式的值传入右边的函数进行求值(f(x) => x |> f)
绑定运算符(:😃：函数绑定(左边是对象右边是函数，取代bind、apply、call调用)
- bind：bar.bind(foo) => foo::bar
- apply：bar.apply(foo, arguments) => foo::bar(...arguments)

正则扩展

ES2015

变更RegExp构造函数入参：允许首参数为正则对象，尾参数为正则修饰符(返回的正则表达式会忽略原正则表达式的修饰符)
正则方法调用变更：字符串对象的match()、replace()、search()、split()内部调用转为调用RegExp实例对应的RegExp.prototype[Symbol.方法]
u修饰符：Unicode模式修饰符，正确处理大于\uFFFF的Unicode字符
y修饰符：粘连修饰符，确保匹配必须从剩余的第一个位置开始全局匹配(与g修饰符作用类似)
unicode：是否设置u修饰符
sticky：是否设置y修饰符
flags：返回正则表达式的修饰符

ES2018

s修饰符：dotAll模式修饰符，使.匹配任意单个字符(dotAll模式)
dotAll：是否设置s修饰符
后行断言：x只有在y后才匹配
后行否定断言：x只有不在y后才匹配
Unicode属性转义：匹配符合Unicode某种属性的所有字符
- 正向匹配：\p{PropRule}
- 反向匹配：\P{PropRule}
- 限制：\p{...}和\P{...}只对Unicode字符有效，使用时需加上u修饰符
具名组匹配：为每组匹配指定名字(?<GroupName>)

ES2020

matchAll()：返回所有匹配的遍历器

Symbol

独一无二的值, symbol

Set

类似于数组的数据结构，成员值都是唯一且没有重复的值, set

Map

类似于对象的数据结构，成员键是任何类型的值, map

Proxy

修改某些操作的默认行为，proxy

const proxy = new Proxy(target, handler)

Reflect

保持Object方法的默认行为。reflect

设计目的

将Object属于语言内部的方法放到Reflect上
将某些Object方法报错情况改成返回false
让Object操作变成函数行为
Proxy与Reflect相辅相成

Class

对一类具有共同特征的事物的抽象(实质是基于原型的继承的语法糖), class

Module

export：规定模块对外接口

export default Person

import：导入模块内部功能

import Person from "person"

复合模式：export命令和import命令结合在一起写成一行，变量实质没有被导入当前模块，相当于对外转发接口，导致当前模块无法直接使用其导入变量

export { default } from "person"

其他模块方案

CommonJS：用于服务器(动态化依赖)

//CommonJS
// a.js
module.exports = {
    a: 1
}
// or 
exports.a = 1

// b.js
var module = require('./a.js')
module.a // -> log 1

AMD：用于浏览器(动态化依赖)

// AMD
define(['./a', './b'], function(a, b) {
  // 加载模块完毕可以使用
  a.do()
  b.do()
})

CMD：用于浏览器(动态化依赖)

// CMD
define(function(require, exports, module) {
  // 加载模块
  // 可以把 require 写在函数体的任意地方实现延迟加载
  var a = require('./a')
  a.doSomething()
})

UMD：用于浏览器和服务器(动态化依赖)

//UMD
(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        //AMD
        define(['jquery'], factory);
    } else if (typeof exports === 'object') {
        //Node, CommonJS之类的
        module.exports = factory(require('jquery'));
    } else {
        //浏览器全局变量(root 即 window)
        root.returnExports = factory(root.jQuery);
    }
}(this, function ($) {
    //方法
    function myFunc(){};
    //暴露公共方法
    return myFunc;
}));

Iterator

为各种不同的数据结构提供统一的访问机制, 主要使用for-of进行遍历, iterator

Promise

包含异步操作结果的对象, promise

Generator

封装多个内部状态的异步编程解决方案

function Wrapper(func) {
    return function(...args) {
        const generator = func(...args);
        generator.next();
        return generator;
    }
}
const print = Wrapper(function*() {
    console.log(`First Input: ${yield}`);
    return "done";
});
print().next("hello");

注意

每次调用next()，指针就从函数头部或上次停下的位置开始执行，直到遇到下一个yield命令或return语句为止
函数内部可不用yield命令，但会变成单纯的暂缓执行函数(还是需要next()触发)
yield命令是暂停执行的标记，next()是恢复执行的操作
yield命令用在另一个表达式中必须放在圆括号里
yield命令用作函数参数或放在赋值表达式的右边，可不加圆括号
yield命令本身没有返回值，可认为是返回undefined
yield命令表达式为惰性求值，等next()执行到此才求值
函数调用后生成遍历器对象，此对象的Symbol.iterator是此对象本身
在函数运行的不同阶段，通过next()从外部向内部注入不同的值，从而调整函数行为
首个next()用来启动遍历器对象，后续才可传递参数
想首次调用next()时就能输入值，可在函数外面再包一层
一旦next()返回对象的done为true，for-of遍历会中止且不包含该返回对象
函数内部部署try-finally且正在执行try，那么return()会导致立刻进入finally，执行完finally以后整个函数才会结束
函数内部没有部署try-catch，throw()抛错将被外部try-catch捕获
throw()抛错要被内部捕获，前提是必须至少执行过一次next()
throw()被捕获以后，会附带执行下一条yield命令
函数还未开始执行，这时throw()抛错只可能抛出在函数外部

Realm

提供沙箱功能，允许隔离代码，防止被隔离的代码拿到全局对象

new Realm().global

Async

异步迭代器(for-await-of)：循环等待每个Promise对象变为resolved状态才进入下一步, async

附图

ES2015

ES2016

ES2017

ES2018

ES2019

ES2020

ES提案

posted @ 2020-04-25 21:02 来亦何哀阅读(291) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

来亦何哀

es6新增特性总结

定义

更新内容

1.声明

ES2015

ES2017

ES2020

ES提案

2.解构赋值

3.字符串拓展

ES2015

ES2017

ES2019

数值扩展

ES2015

ES2016

ES2020

ES提案

对象扩展

ES2015

ES2017

ES2018

ES2019

ES2020

数组扩展

ES2015

ES2016

ES2019

函数扩展

ES2015

ES2017

ES2019

ES提案

正则扩展

ES2015

ES2018

ES2020

Symbol

Set

Map

Proxy

Reflect

Class

Module

Iterator

Promise

Generator

Realm

Async

附图

公告