ES6 对象、数组解构和扩展运算符

• 解构运算符、扩展运算符和 rest 运算符可以通过减少赋值语句的使用，或者减少通过下标访问数组或对象的方式，使代码更加简洁优雅可读性更佳

---

解构赋值

• 作用：快速取得数组或者对象中的元素或属性，无需使用 arr[index] obj[key] 这种传统的方式进行赋值

数组解构

• 相对应位置的值 默认值写法同对象一样用 =

const numbers = [ 'one', 'two', 'three', 'four' ];
const [one, , three, , five = 'have no five'] = numbers; // 相对应位置的值 默认值写法同对象一样用=
console.log(one, three, five); // one three have no five
// for 循环解构
var arr = [[11, 12], [21, 22], [31, 32]];
for (let [a, b] of arr) {
    console.log(a);
    console.log(b);
}

• 最常用于交换变量的值：

let a = 10, b = 20;
[a, b] = [b, a];
console.log(a, b); // 20 10

• for 循环解构

var arr = [[11, 12], [21, 22], [31, 32]];
for (let [a, b] of arr) {
    console.log(a);
    console.log(b);
}

• 函数传参解构

var arr = ['this is a string', 2, 3];
function fn1([a, b, c]) {
    console.log(a);
    console.log(b);
    console.log(c);
}
fn1(arr);

对象解构

• 对应 key 值解构，可以用 = 设置默认值

const Tom = {
    name: 'Tom Jones',
    age: 25,
    work: null
}
const name = 'Deny'
const { name: n, age, hobby = 'play', work } = Tom;
console.log(name); // Deny
console.log(n); // Tom 由于提前声明name了所以要重命名
console.log(age); // 25
console.log(hobby); // play 属性不存在的默认值写法(null 0 false 视为存在)
console.log(work); // null

• 函数传参解构

var obj = {
    name: 'chris',
    sex: 'male',
    age: 26,
    son: {
        sonname: '大熊',
        sonsex: 'male',
        sonage: 1
    }
};
function fn2({sex, age, name}) {
    console.log(name + ' ' + sex + ' ' + age);
}
fn2(obj);

• 更改对象属性名的解构 :

var obj = {
    name: 'chris',
    sex: 'male',
    age: 26
};
var {name: nickname, age: howold} = obj;
console.log(nickname + ' ' + howold); //chris 26

• 嵌套对象的解构

var obj = {
    name: 'chris',
    sex: 'male',
    age: 26,
    son: {
        sonname: '大熊',
        sonsex: 'male',
        sonage: 1
    }
};
var {name, sex, age, son: {sonname, sonsex, sonage}} = obj;
console.log(sonname + ' ' + sonsex + ' ' + sonage);

• 循环解构对象

var arr = [{name: 'chris', age: 26}, {name: 'jack',    age: 27}, {name: 'peter',age: 28}];
for (let {age, name} of arr) {
    console.log(name + ' ' + age);
}

字符串解构

var str = 'love';
var [a, b, c, d] = str;
console.log(a);//l
console.log(b);//o
console.log(c);//v
console.log(d);//e

---

扩展运算符

• 用 ... 表示，功能是把数组或类数组对象展开成一系列的用逗号隔开的值
• 函数传参

var foo = function(a, b, c) {
    console.log(a);
    console.log(b);
    console.log(c);
}
var arr = [1, 2, 3];
//传统写法
foo(arr[0], arr[1], arr[2]);
//使用扩展运算符
foo(...arr);

• 数组深拷贝

var arr2 = arr;
var arr3 = [...arr];
console.log(arr===arr2); //true, 说明arr和arr2指向同一个数组
console.log(arr===arr3); //false, 说明arr3和arr指向不同数组

• 数组插入合并

var arr4 = [...arr, 4, 5, 6];
console.log(arr4);//[1, 2, 3, 4, 5, 6]

• 字符串转数组

var str = 'love';
var arr5 = [...str];
console.log(arr5);//[ 'l', 'o', 'v', 'e' ]

---

rest 运算符

• 也是 ... 来表示，不过功能与扩展运算符恰好相反，把逗号隔开的值序列组合成一个数组

var bar = function(...args) {
    for (let el of args) {
        console.log(el);
    }
}
bar(1, 2, 3, 4);
bar = function(a, ...args) {
    console.log(a);
    console.log(args);
}
bar(1, 2, 3, 4);

• rest 运算符配合解构使用

var [a, ...rest] = [1, 2, 3, 4];
console.log(a);//1
console.log(rest);//[2, 3, 4]

---

总结

• 等号表达式是典型的赋值形式，函数传参和 for 循环的变量是特殊形式的赋值
• 解构的原理是赋值的两边具有相同的结构，省去了下标逐个赋值的麻烦
• ... 放在形参或者等号的左边则为 rest 运算符，放在实参或者等号右边则为 spread 运算符。说白了就是放在被赋值一方为 rest 运算符，放在赋值一方则为 spread 运算符
• 在等号或者 for 循环中如果需要从数组或对象中取值，尽量使用解构赋值
• 在自定义函数的时候如果调用者传过来的参数是数组或者对象，形参我们尽量使用解构方式，优先对象解构其次数组解构，提高代码的可读性
• 在调用第三方函数的时候，如果函数接收多个参数并且要传入的为数组，则使用扩展运算符
• rest 运算符主要处理不定数量参数，可以避免 arguments 对象的使用