解构
解构 ：是将一个数据结构分解为更小的部分的过程。ES6 中，从数组和对象中提取值，对变量进行赋值。
那么解构有什么用处呢？
-
可以大大的简化变量声明操作。
// ES5
var foo = 1
var bar = 2
var baz = 3
// ES6
let [foo, bar, baz] = [1, 2, 3]
-
变量交换：看起来如同镜像。赋值语句的左侧的解构模式，右侧是临时创建的数组字面量。x 被赋值为数组中的 y，y 被赋值为数组中的 x。
let x = 1
let y = 2
;[x, y] = [y, x]
// x = 2, y = 1
-
对象解构
var obj = { x: 1, y: 2, c: 1 }
let { x, y } = obj
// x = 1
// y = 2
-
字符串解构
const [a, b, c, d, e] = hello
// a => h
// b => e
// c => l
// d => l
// e => o
-
函数参数解构
const xueyue = {
name: 雪月 ,
age: 18,
}
function getAge({ name, age }) {
return `${name}今年${age}岁`
}
getAge(xueyue) // 雪月今年18岁
箭头函数
ES6 允许使用箭头 => 定义函数
var f = v => v
// 等同于 ES5 的
var f = function (v) {
return v
}
如果箭头函数不需要参数或需要多个参数，就使用圆括号代表参数部分。
var f = () => 5
// 等同于 ES5 的
var f = function () {
return 5
}
var sum = (numl, num2) => numl + num2
// 等同于 ES5 的
var sum = function (numl, num2) {
return numl + num2
}
箭头函数可以与解构结合使用。
const full = ({ first , last }) => first + + last;
// 等同于 ES5 的
function full(person) {
return person.first + + person.last;
}
箭头函数使得表达更加简洁
const isEven = n => n % 2 === 0
const square = n => n * n
var result = values.sort((a, b) => a - b)
// 等同于 ES5 的
var result = values.sort(function (a, b) {
return a - b
})
上面代码只用了两行，就定义了两个简单的工具函数。如果不用箭头函数，可能就要占用多行，而且还不如现在这样写醒目。
箭头函数使用注意点
-
函数体内的
this对象，就是定义时所在的对象，而不是使用时所在的对象。 -
不可以当作构造函数，也就是说，不可以使用
new命令，否则会抛出一个错误。 -
不可以使用
arguments对象，该对象在函数体内不存在。如果要用，可以用rest参数代替。 -
不可以使用
yield命令，因此箭头函数不能用作Generator函数。
上面四点中，第一点尤其值得注意。this 对象的指向是可变的，但是在箭头函数中，它是固定的。
// ES6
function foo() {
setTimeout(() => {
console.log( id: , this.id)
}, 100)
}
// 转换成ES5
function foo() {
var _this = this
setTimeout(function () {
console.log( id: , _this.id)
}, 100)
}
上面代码中，转换后的 ES5 版本清楚地说明了，箭头函数里面根本没有自己的 this，而是引用外层的 this。
模板字符串
模板字符串（ template string ）是增强版的字符串 ，用反引号
(``)标识 。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。
const { log } = console
const name = 雪月
const age = 18
// 普通字符串拼接
const result = name + 今年 + age + 岁
// 使用模板字符串
const result2 = `${name}今年${age}岁`
log(result) // 雪月今年18岁
log(result2) // 雪月今年18岁
// ${} 大括号可以放入任意的 JavaScript 表达式，可以进行运算
const result3 = `${name}今年${age * 2}岁`
log(result3) // 雪月今年36岁
剩余参数 / 展开语法
ES6 引入了 rest 参数（形式为...变量名），用于获取函数的多余参数，这样就不需要使用 arguments 对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入其中。
function sortNumbers() {
return Array.prototype.slice.call(arguments).sort()
}
// 使用 rest
const sortNumbers = (...numbers) => numbers.sort()
比较上面的两种写法可以发现， rest 参数的写法更自然也更简洁。
扩展运算符（ spread ）是三个点（...） 如同 rest 参数的逆运算 将一个数组转为用逗号分隔的参数序列
console.log(...[1, 2, 3])
// 1 2 3
console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5
下面是扩展运算符取代 apply 方法的一个实际例子 应用 Math.max 方法简化求出数组中的最大元素。
// ESS 的写法
Math.max.apply(null, [14, 3, 77])
// ES6 的写法
Math.max(...[14, 3, 77])
// 等同于
Math.max(14, 3, 77)
扩展运算符提供了数组合并的新写法。
// ESS
;[1, 2].concat(more)
// ES6
;[1, 2, ...more]
对象的扩展运算符（...）用于取出参数对象的所有可遍历属性，拷贝到当前对象之中。
let z = { a: 3, b: bb }
let n = { ...z }
n // { a: 3, b: bb }
n === z // false
特别注意： ...扩展对象，只能做到当对象属性是 基本数据类型 才是 深拷贝，如果是 引用数据类型，那就是浅拷贝。
let z = { a: 3, b: bb , c: { name: ccc } }
let n = { ...z }
n // { a: 3, b: bb , c: { name: ccc } }
n === z // false
n.c === z.c // true
// n.c 跟 z.c 是同一个引用地址
对象字面量简写语法
const name = 雪月
// ES5写法
const obj = {
name: name,
f: function () {
console.log(this.name)
},
}
// ES6简写
const obj2 = {
name,
f() {
console.log(this.name)
},
}
obj.f() // 雪月
obj2.f() // 雪月
使用 vue 的同学是不是感到很熟悉
new Vue({
el: #app ,
data() {
return {
list: [],
}
},
})
数组实例的 includes()
Array.prototype.includes 方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的 includes 方法类似。ES2016 引入了该方法。
;[1, 2, 3].includes(2) // true
;[1, 2, 3].includes(4) // false
;[1, 2, NaN].includes(NaN) // true
没有该方法之前，我们通常使用数组的 indexOf 方法，检查是否包含某个值。
// ES5
if (arr.indexOf(el) !== -1) {
// ...
}
// ES6
if (arr.includes(el)) {
// ...
}
// 那么 indexOf 能不能做到类似于 includes 的写法呢？ 我们可以利用 ~ 位运算符
if (~arr.indexOf(el)) {
// ...
}
indexOf 方法有两个缺点，一是不够语义化，它的含义是找到参数值的第一个出现位置，所以要去比较是否不等于-1，表达起来不够直观。二是，它内部使用严格相等运算符（===）进行判断，这会导致对 NaN 的误判。
;[NaN].indexOf(NaN)
// -1
includes 使用的是不一样的判断算法，就没有这个问题
;[NaN].includes(NaN)
// true