为了加深对解构赋值和扩展操作符概念的理解，今天随我来归纳总结一番
沉迷、沉迷。。。
解构赋值
解构赋值可以快速的取得数组或对象中的元素或属性,是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运算符
