es6解构赋值和扩展运算符

971

解构赋值和扩展运算符其实不算新的功能吧,因为不用它,我们用“笨方法”也是可以做到的,

比如数组:

let arr = [1,2,3]
let a = arr[0];
let b = arr[1];
let c = arr[2];
console.log(a);
console.log(b);
console.log(b);

比如对象:

const obj = {name:'zhangsan',age:10,sex:'男'};
let name = obj.name;
let age = obj.age;
let sex = obj.sex;
console.log(name);
console.log(age);
console.log(sex);

这样代码太多了,很麻烦,那么,有没有简单一点的方式呢?来了,别急,请往下看

解构赋值:把他的解构给解开,然后再赋值

let [a.b,c] = [1,2,3];
// 这里的abc相当于用let声明了三个变量
// 那么现在打印出来的a b c 结果跟上面是一模一样的
 
以此类推:解构对象也是这样
 
let{name,age,sex}={name:'zhangsan',age:10,sex:'男'}
// 这里的name,age,sex相当于用let声明了三个变量

下面看个数组吧

let arr1  = [1,2,3];
let arr = [7,8,9];
 
// 我们现在想把arr1跟arr合并,直接
 
let arrALL = [...arr1,7,8,9];
console.log(arrALL) // 打印出来的值为[1,2,3,7,8,9]
 
// 多个数组也是可以的哦
// 比如再来个
 
let arr2 = [4,5,6]
let arrALLTWO = [...arr1,7,8,9,...arr2];
console.log(arrALLTWO ) // 打印出来的值为[1,2,3,7,8,9,4,5,6]

再来个方法

function show(a,b,c){
    console.log(a);
    console.log(b);
    console.log(c);
}
 
let arr = [1,2,3];
 
// 将arr当参数传入方法里面,调用的时候使用,他会将数组展开
show(...arr); // 打印出来的值分别就是 1,2,3
 
 
// 我们也可以当作参数,这个参数是可变的
function demo(...args){
  console.log(args);
}
demo(1,2,3,4,5) // 打印出来值就是 [1, 2, 3, 4, 5]