「这是我参与2022首次更文挑战的第7天，活动详情查看：2022首次更文挑战」。
ES6泛指下一代JS语言标准，包含ES2015、ES2016、ES2017、ES2018等
ES2015可以理解为ES5（泛指上一代）和ES6的时间分界线
babel
ES6代码 转化为 ES5代码,提高兼容性
var，let，const区别
区别：1、 var 能够变量提升，允许重复声明；
2、let，const 不能变量提升，不允许重复声明，有块作用域概念，块级作用域指 { } 内的范围；
3、const 声明的常量不能被修改，但对于引用类型的值是可以被修改
//1.定义数组
const arr = [100, 200, 300];
console.log(arr);
arr[0] = "hello";
console.log(arr); //['hello', 200, 300]
//2.定义对象
const obj = {
name: "Jack",
age: 22,
no: "001"
}
console.log(obj);
obj.age = 100;
console.log(obj); //{name: "Jack", age: 100, no: "001"}
对string的升级优化
模板字符串
新增方法
- includes()
- startsWith() 、 endsWith()
- repeat()
- padStart() 、padEnd()
对array的升级优化
数组解构赋值
扩展运算符 ...
arguments ------------>伪数组
... 返回真正数组
let a = [2,3,4]; let b = [...a]
function arr(a) {
console.log('a:' + a);
console.log(arguments);
let newa = [...arguments]
console.log(newa);
}
arr(1, 2, 3, 4, 5, 6, 7)
// a:1
// [Arguments] { '0': 1, '1': 2, '2': 3, '3': 4, '4': 5, '5': 6, '6': 7 }
// [ 1, 2, 3, 4, 5, 6, 7 ]
新增方法
- find()
- includes()
- copyWhitin()
- fill()
- falt()
对number的升级优化
Math对象新增方法
- cbrt()
- trunc()
- hypot()
Number原型新增方法
- inFinite()
- inNaN()
ES5的isFinite(), isNaN()方法都会先将非数值类型的参数转化为Number类型再做判断，这其实是不合理的，最造成isNaN('NaN') === true的奇怪行为--'NaN'是一个字符串，但是isNaN却说这就是NaN。而Number.isFinite()和Number.isNaN()则不会有此类问题(Number.isNaN('NaN') === false)。（isFinite()同上）
对object的升级优化
对象属性变量式声明
let [apple, orange] = ['red appe', 'yellow orange'];
let myFruits = {apple, orange};
console.log(myFruits) //{ apple: 'red appe', orange: 'yellow orange' }
对象的解构赋值
注意：按照属性名（键）
对象的扩展运算符(...)
let {apple, orange, ...otherFruits} = {apple: 'red apple', orange: 'yellow orange', grape: 'purple grape', peach: 'sweet peach'};
// otherFruits {grape: 'purple grape', peach: 'sweet peach'}
// 注意: 对象的扩展运算符用在解构赋值时，扩展运算符只能用在最后一个参数(otherFruits后面不能再跟其他参数)
let moreFruits = {watermelon: 'nice watermelon'};
let allFruits = {apple, orange, ...otherFruits, ...moreFruits};
super关键字
super关键字总是指向当前函数所在对象的原型对象
object新增方法
- is()
'==='方法中NaN === NaN //false
其实是不合理的，Object.is修复了这个小bug。(Object.is(NaN, NaN) // true)
- 对象合并 assign()
const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };
Object.assign(target, source1, source2);
// target {a:1, b:2, c:3}
// 注意: assign合并的对象target只能合并source1、source2中的自身属性，
// 并不会合并source1、source2中的继承属性，也不会合并不可枚举的属性，且无法正确复制get和set属性（会直接执行get/set函数，取return的值）
-
getOwnPropertyDescriptors()
可以获取指定对象所有自身属性的描述对象。结合defineProperties()方法，可以完美复制对象，包括复制get和set属性
-
getPrototypeOf() 、setPrototypeOf()
用来获取或设置当前对象的prototype对象
-
Object.keys()，Object.values()，Object.entries()
获取对象的所有键、所有值和所有键值对数组
Symbol
Symbol()生成的值都是唯一的，可以从根本上解决对象属性太多导致属性名冲突覆盖的问题。对象中Symbol()属性不能被for...in遍历，但是也不是私有属性。
Set
Set实例的成员都是唯一，不重复的。这个特性可以轻松地实现数组去重。
Map
打破了以传统键值对形式定义对象，对象的key不再局限于字符串，也可以是Object。可以更加全面的描述对象的属性
const m = new Map();
// o是一个对象
const o = {p: 'Hello world!'};
// 添加成员：对象o是m的一个键，值为'content'
m.set(o, 'content'); // "content"
console.log(m) //Map { { p: 'Hello world!' } => 'content' }
实例方法
size：获取成员的数量 set：设置成员 key 和 value get：获取成员属性值 has：判断成员是否存在 delete：删除成员 clear：清空所有
遍历方法
keys()：返回键名的遍历器。 values()：返回键值的遍历器。 entries()：返回所有成员的遍历器。 forEach()：遍历 Map 的所有成员。
Promise
Iterator（迭代器）for...of....
Generator（生成器）*
执行Generator函数会返回一个遍历器对象(Iterator)，每一次Generator函数里面的yield都相当一次遍历器对象的next()方法，并且可以通过next(value)方法传入自定义的value,来改变Generator函数的行为。 Generator函数可以通过配合Thunk 函数更轻松更优雅的实现异步编程和控制流管理。
async await
继承 - Class、extends
1、 类的内部定义的所有方法，都是不可枚举的
2、 class类必须用new命令操作
3、 必须先定义class之后才能实例化
4、 继承机制不同
ES5 的继承，实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面。
ES6 的继承机制完全不同，实质是先将父类实例对象的属性和方法，加到this上面（所以必须先调用super方法），然后再用子类的构造函数修改this。
模块化方案 module、export、import
传统的前端模块实现方案：AMD/CMD、requireJS、seaJS、commondJS
ES6规范
箭头函数
-
当函数没有参数时，（）不能省略
-
当函数只有一个参数，函数体是一句代码，且是返回语句时， 参数的（）可省略、函数体 {} 可省略、return 可省略， 中间使用 => 连接
-
若函数体只有一句，且不是return 语句， 不能省略 {}
-
若函数体有多条语句，不能省略 {}
-
若函数有多个参数，不能省略()
-
若函数的返回值为对象，此时不能省略return
箭头函数注意点：
- 箭头函数不适用于声明函数
- 箭头函数不适用于DOM事件
- 箭头函数不能作为构造函数（迭代器）
- 箭头函数内不能使用arguments
- 不能使用yield命令
- 箭头函数没有this，定义函数时就绑定，this是执行上下文中的this
