简介
ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。
ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。
变量声明
ES6中，新增了const和let命令，用于声明常量或变量
- const 声明常量
- let 声明变量
应用场景
与var不同的是，const、let声明的常量和变量，不具备变量的提升，并且具有块级作用域，通常声明一个不可变的常量时，会使用const，而let更加适用于声明在for循环中或声明一个可变的值
// 使用const定义常量
const API_URL = 'https://juejin.cn/user/2013961035461390/posts'
// for循环中使用let更加合适
for (let i = 0; i < 10; i++) {}
特征
具有块级作用域不具备变量提升不允许重复声明存在暂存性死区使用const声明，无法重新赋值，所以一开始声明时必须赋值
放弃复杂的字符串拼接
在ES6之前，对变量进行字符串拼接时通常使用的是 + ，必要的时候，还需要进行\n换行
const profile = {
name: 'James',
age: 36,
No: 23
}
document.body.innerText = '姓名：' + profile.name + '\n' + '年龄：' + profile.age + '\n' + '号码：' + profile.No
ES6的模板字符串是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中使用( ${} )嵌入变量，同时还可以进行运算
document.body.innerText = `
姓名：${profile.name}
年龄：${profile.age}
号码：${profile.No}
`
解构赋值
ES6之前，最常见的关于以下几种取值方式
// 对象成员的取值
const profile = {
name: 'James',
age: 36
}
const _name = profile.name
// 或者
const age = profile.age
// 数组成员的取值
const arr = [1, 2]
const result = arr[0] + arr[1]
// 函数参数的取值
function joint(data) {
const a = data.a
const b = data.b
const c = data.c
}
关于以上几种比较繁琐的取值方式，使用ES6的解构赋值，会更加的简便
对象的解构赋值
- 基本用法：
const {x, y} = {x: 10, y: 20} - 设置默认值：
const {x, y, z = 30} = {x: 10, y: 20} - 设置别名：
const {x: _x} = {x: 10, y: 20} - 应用
const {name: _name, age, checked = true} = {name: 'James', age: 36}
console.log(_name)
console.log(age)
console.log(checked)
数组的解构赋值
- 基本用法：
const [a, b] = [1, 2, 3, 4] - 设置默认值：
const [a, b, c = 10] = [1, 2, 3, 4] - 应用
// 交换两个变量的值
let x = 1
let y = 2
[x, y] = [y, x]
字符串的解构赋值
字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象
const [a, b, c, d, e] = 'hello'
a // 'h'
b // 'e'
c // 'l'
d // 'l'
e // 'o'
数值和布尔值的解构赋值
let {toString: s} = 123;
s === Number.prototype.toString // true
let {toString: s} = true;
s === Boolean.prototype.toString // true
上面代码中，数值和布尔值的包装对象都有toString属性，因此变量s都能取到值。
解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象。由于undefined和null无法转为对象，所以对它们进行解构赋值，都会报错
关于默认值
默认值生效的条件是，对象的属性值严格等于undefined
const {x = 3, y = 4, z = 5} = {x: undefined, z: null}
x // 3
y // 4
z // null
补充
事实上，只要某种数据结构具有 Iterator 接口，都可以采用数组形式的解构赋值。
// 报错
let [foo] = 1
let [foo] = false
let [foo] = NaN
let [foo] = undefined
let [foo] = null
let [foo] = {}
上面的语句都会报错，因为等号右边的值，要么转为对象以后不具备 Iterator 接口（前五个表达式），要么本身就不具备 Iterator 接口
Spread / Rest（扩展运算符与剩余参数）
Spread / Rest都是以 ... 表示
用户函数调用
// ES5之前
arr.push(a)
arr.push(b)
// ES6
arr.push(...[a, b])
例如类数组是无法直接使用数组的方法的，可以将类数组转换成数组
// 报错
document.querySelector('.ul-contailer').children.forEach(function(el) {
})
// 转换成数组
[...document.querySelector('.ul-contailer').children].forEach(function(el) {
})
用于函数参数
// ES5之前
function fn() {
for (let i = 0; i < arguments.length; i++){}
}
// ES6
function fn(...args) {
for(let i = 0; i < args.length; i++) {}
}
合并数据
ES6之前
// 合并数组
const arr1 = [1, 2, 3]
const arr2 = [4, 5, 6]
const arr3 = arr1.concat(arr2)
// 合并对象
const a = {
name: 'James'
}
const b = {
checked: true
}
const c = Object.assign({}, a, b)
ES6
// 合并数组
const arr1 = [1, 2, 3]
const arr2 = [4, 5, 6]
const arr3 = [...arr1, ...arr2]
// 合并对象
const a = {
name: 'James'
}
const b = {
checked: true
}
const c = {...a, ...b}
Spread / Rest都是以
...表示，至于是叫Spread还是Rest要结合当前使用情况区分，例如用于函数的可以称为剩余参数，用于方法调用的可以称为扩展运算符
对象成员简洁写法
属性简洁写法
const a = 1
const obj = {
a
}
// 等同于
const a = 1
const obj = {
a: a
}
方法简洁写法
const obj= {
sayHi() {}
}
// 等同于
const obj = {
sayHi: function() {}
}
箭头函数
ES6 允许使用 => 定义函数
用法
// ES6之前
function sum(a, b) {
return a + b
}
// ES6
const sum = (a, b) => a + b
默认值
ES6 之前，不能直接为函数的参数指定默认值，只能采用变通的方法
function fn(a) {
a = a || 0
return a
}
ES6
const fn = (a = 0) => a
默认值不仅仅可以使用在箭头函数中，普通函数也是可以的
function fn(a = 0) {
return a
}
注意
- 箭头函数没有自己的
this对象 - 不可以当作构造函数，也就是说，不可以对箭头函数使用
new命令，否则会抛出一个错误 - 不可以使用
arguments对象，该对象在函数体内不存在 - 不可以使用
yield命令，因此箭头函数不能用作 Generator 函数
最后
ES6中有非常多新特性，例如Promise、class、以及一些常用的方法等，这片文章只是罗列出最常用的一些特性，文章有些内容参考阮一峰老师的# ECMAScript 6 入门，大家不喜勿喷
