01、ES6总览

1.1、ES6发展

ECMAScript，是由ECMA 国际标准化组织制定的一套脚本语言的标准化规范，随着技术的发展，每年都会更新ECMAScript 的标准内容。

📅 2011年发布 ECMAScript5.1，成为 ISO 国际标准，从而推动所有浏览器都支持。
📅 2015年发布 ECMAScript 6，简称 ES6、ECMAScript 2015。从此以后每年都有更新，如ES2016、ES2017，都泛称为 ES2015+，或者 ES6。

从时间上也能看出来，ES2015 是一次重要更新，标志着现代化浏览器的进步，主流的浏览器基本都已原生支持ES6。只是一些古老的浏览器、老设备，如IE、老的Android机器还存在兼容性问题。于是出现了Babel（及Polyfill），在编译的时候把ES6语法转码到ES5，从而兼容更多浏览器。

1.2、ES6清单

💠新特性	说明	示例
let	定义局部变量，块级作用域	`let index =1`
const	定义不可修改常量，作用域同`let`	`const max =100`
解构赋值	从对象、数组分解数据，赋值给变量`let [a,b,c] = [1,2,3]`	`let { name, age, sex } = person;`
`...`展开运算符	把数组、对象的成员展开到当前环境，类似混入mixins	`let obj={...nobj,age:10};`
?. \|\|	可选链运算符，不为空（null 或 undefined）时才执行	page=res?.data?.size \|\|1;
`??=`空赋值运算符	(x ??= y) 仅在 x 是(null 或 undefined) 时对其赋值y	`x??="default";`
Symbol	一个新的数据类型，用于定义独一无二的（字符串）值
💠函数
默认参数值	在参数定上赋值默认值值	`function fn(param = 'hello')`
箭头函数=>{}	简化函数定义，函数体内无this（取决去定义的位置）	`(para)=>{ 函数体}`
name属性	函数新增`name`属性	`(function foo() {}).name //'foo'`
`...`剩余参数	将函数剩余的参数放到一个数组了，就可以支持无限个参数了	`function fn1(first, ...args)`
💠string 字符串扩展
includes(str)	判断是否包含指定的字符串	`"abc123".includes('12') //true`
startsWith(str)	判断是否以指定字符串开头	`"abc123".startsWith('abc') //true`
endsWith(str)	判断是否以指定字符串结尾
repeat(count)	返回重复指定次数的字符串	`"a1".repeat(3) //'a1a1a1'`
padStart()，padEnd()	补全字符串到指定长度	`"123".padStart(4,'0')` //0123
trimStart()、trimEnd()	消除字符串前后的空格
matchAll()	返回一个所有匹配正则表达式的结果及分组捕获组的迭代器	`[..."test1test2".matchAll(/te(st(\\d?))/g)]`
replaceAll(old, new)	替换所有匹配到的字符串，replace只替换第一个
`模板字符`	支持多行字符串+变量嵌入，符号``包裹，`${var}`嵌入变量
💠Number扩展/数学
Number.isNaN()	判断是否等于NaN，`window.isNaN`是判断是否非数值
Number.isInteger()	是否为整数
Number.parseFloat()	解析浮点数，从第一个非空字符解析获取数字，识别第一个小数点
Number.parseInt()	解析整数，从第一个非空字符解析获取数字，支持进制参数
Math.trunc(i)	去除小数部分
BigInt 数据类型	大整数，只表示整数，没有位数限制，`n`结尾	`const a = 2172141653n;`
指数运算符`**`	同`Math.pow(x,y)`	`Math.pow(2,3) == 2**3`
💠Array扩展
Array.from()	创建一个新的，浅拷贝的数组实例	`Array.from(arrayLike,mapFn?)`
Array.of()	根据可变参数创建数组：Array.of(v0,v1,...vN)
copyWithin(to,s,e)	浅复制数组中的内容，数组内部的复制、粘贴	`copyWithin(target,start=0,end=this.length)`
find(func)	查找符合条件的元素值，类似方法`findIndex()`只返回索引
includes(v)	判断是否包含指定的值	`[1,2,3].includes(2) //true`
💠Object扩展
简写属性	变量名作为属性名的简写方式	`address='chengdu';{name:'sam', address}`
keys()/values()	还有entries()，返回对象/数组的可遍历键、值、键值对
获取属性描述信息	Object.getOwnPropertyDescriptor(obj, pname)
Object.is(v1,v2)	判断两个值是否为同一个值，支持值类型、引用类型
Object.assign(t,...f)	合并多个obj对象到target并返回，复制一级属性的值，不能作为深拷贝	Object.assign(target , ...objs)
proto	对象的原型，官方推荐的是通过下面的方法来处理	`obj.__proto__ = new User()`
get/setPrototypeOf	返回指定对象的原型Object.getPrototypeOf(obj)，还有设置原型	Object.setPrototypeOf()
💠其他特性
Map{[key, value]}	键值对，键唯一，顺序插入，支持任何类型作为建、值	WeakMap为弱引用Map
Set{key} 、WeakSet	不重复值的集合，值的相等判断采用零值相等算法	基于===比较，NaN与自身相对，-0、+0相等
Proxy	对象代理器，拦截对象的get、set行为。Vue3的数据绑定机制	`new Proxy(target, handler);`
Reflect	提供了操作对象内部的各种静态方法，可配合Proxy使用	`Reflect.get(Math, "PI");`
Iterator 、for...of	迭代器，一种提供for...of遍历的机制，算是一种接口约定	`next()`依次遍历
生成器*generator	支持暂停、继续执行的可控函数，可迭代，可用于异步	`function* GeneratorN(s) { yield 2; }`
Promise	异步编程，以及他的语法糖async 、await
Class	类，终于有类了。IE：不认识！
Module	模块，模块化编程，export、import

02、...展开运算符

和剩余参数的语法形式相同，作用比较相似，只是顺序是相反的。

剩余参数是合并，将多个参数合并到一个数组中。
扩展运算符是拆分展开，把数组、对象的可遍历成员展开（拷贝）到当前环境。

//剩余参数args，add方法就可以支持无限参数了
function add(...args) {
    let sum = 0;
    args.forEach(v => sum += v);
    return sum;
}
const arr = [1, 2, 3, 4, 5];
const arr1 = [100, 200];
//展开为多个参数
console.log(add(...arr, ...arr1)); //315
console.log(...arr); //1 2 3 4 5
let arr2 = [1, 2, ...arr1, ...arr]; //[1, 2, 100, 200, 1, 2, 3, 4, 5]

展开为多个参数：console.log(...arr)
合并/复制数组：let arr3 =[...arr1, ...arr2]
展开为对象属性：可用于合并对象，把对象的属性、方法合并（拷贝）出来。算是一种代码混入，不过只能“混入”自己具备的属性、方法，不包括原型链上的。

let address = { country: 'china' };
address.sendExpress = function () { }
let family = { father: 'sam', mother: 'lisa' }
//合并对象，复用代码
let user = { age: 100, ...address, ...family }

参考资料

©️版权申明：版权所有@安木夕，本文内容仅供学习，欢迎指正、交流，转载请注明出处！原文编辑地址-语雀

JavaScript入门⑩-ES6归纳总结

01、ES6总览

1.1、ES6发展

1.2、ES6清单

02、...展开运算符

参考资料