为了加深对解构赋值和扩展操作符概念的理解，今天随我来归纳总结一番

沉迷、沉迷。。。

解构赋值

解构赋值可以快速的取得数组或对象中的元素或属性,是ES6里面的新特性

1. 数组解构

1.1 基本变量赋值

let array = [1, 3, 4];
let [a, b, c] = array;
console.log(a); //1
console.log(b); //3
console.log(c); //4

再来看看传统方式赋值

let foo = [4, 8, 0];
let a = foo[0];
let b = foo[1];
let c = foo[2];

注意：两种方式相比之下，解构的方式代码量是不是少很多呢，看起来更简洁呢

1.2 交换变量

let foo = 4;
let bar = 9;
[foo, bar] = [bar, foo];
console.log(foo); //9
console.log(bar); //4

1.3 函数传参解构

let variable = [3, 6];

function test([a, b]){
  console.log(a + b); //9
}

test(variable);

2. 对象解构

2.1 赋值解构

let student = {
    name: 'Daisy',
    age: 23,
    sex: 'girl'
};

let {name, age, sex} = student;
console.log(name); //'Daisy'
console.log(age); //23
console.log(sex); //'girl'

//用新变量名赋值
let {name: a, age: b, sex: c} = student;
console.log(a); // 'Daisy'
console.log(b); //23
console.log(c); //'girl'

2.2 函数传参解构

let student = {
    name: 'Daisy',
    age: 23,
    sex: 'girl'
};

function foo({name, age, sex}){
  console.log(`${name} is ${age} years old`); //'Daisy is 23 years old'
}

foo(student);

3. 字符串解构

let str = 'hello';
let [a, b, c, d, e] = str;
console.log(a); //'h'
console.log(b); //'e'
console.log(c); //'l'
console.log(d); //'l'
console.log(e); //'o'

扩展操作符

在ES6之前想要实现用数组作为参数的情况，采用apply方法

let numArray = [3, 5, 1];
function add(a, b, c){
  console.log(a + b + c);
}

add.apply(null, numArray);

在ES6中有了扩展操作符之后，可以用...实现相同的功能，如下：

let numArray = [3, 5, 1];
function add(a, b, c){
  console.log(a + b + c);
}

add(...numArray);

简单来说就是把一个数组展开成一系列用逗号隔开的值

用于组装数组

let todos = ['todoword'];
let newTodos = [...todos, 'todoletter'] 
console.log(newTodos); //['todoword', 'todoletter']

在此可以引申到rest运算符，与扩展操作符一样是...

rest运算符

1.1 获取数组的部分项

let todos = [2, 4, 6, 8];
let [a, n, ...rest] = todos;
console.log(rest); //[6, 8]

1.2 收集函数参数作为数组

function add(first, ...rest){
  console.log(rest); //[5, 7]
}

add(3, 5, 7)

总结：

解构的原理就是等号的两边具有相同的结构,可以取出数组或对象中的元素或属性，减少了用下标逐个取值的麻烦
对于三点运算符，当出现在等号右边时或实参一方时，是扩展运算符，当出现在被赋值的一方或形参一方时，是rest运算符

让代码更优雅——解构赋值、扩展操作符