数组的解构赋值和扩展运算符

在es6中 按照一定的模式 从数组中提取数值 对对应的变量进行赋值的操作 就叫做解构赋值

本质上来讲 解构赋值 就是模式匹配

1数组的解构赋值

基本用法

var [a,b,c] = [1,2,3];

本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予 对应的值

(1) 如果想要解构赋值成功 那么就必须保证两边的模式完全一样

var [a,b,c] = [1,[2],{name : "lucy"}];
     console.log(a,b,c);//1 [2] {name: "lucy"}
     

(2).如果解构不成功 那么变量的值就等于undefined

 let[s,t] = [3];   
  // console.log(s,t);
  //3 , undefined 这个就像var 声明了变量之后 不进行赋值   
  // let [s,t] = [3];   
   // console.log(s,t);
   //3,undefined  这个也是属于解构不成功  因为数值不够

(3) 不完全解购的情况下 也可以进行解构赋值 只是后面放到数值里的数组都有多的数字

   let [x,y] = [1,2,3];
     console.log(x,y);//1,2

(4) 左边可以为数组 只要等号两边的模式相同就可以解析成功,可以用逗号隔开

let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

let [ , , third] = ["foo", "bar", "baz"];
third // "baz"

(5) 可以用…链接，默认将左边剩余的全部赋值给带有…的

let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

2扩展运算符

使用扩展运算符 就是一个一个的加到新数组里面去 所以即使原数组发生变化 也不会影响新数组

var arr=[1,2,3];
var arr2=[...arr]//[1,2,3]
arr[0] = 10;
 console.log(arr2);//[10,2,3]

扩展运算符的作用

​ 1.数组合并 类似concat方法 都是浅拷贝

​ 2 如果修改了原数组的指向 就会同步反应到新数组 就是浅拷贝

​ 3.与解构赋值相结合

（1）与解构赋值相结合 给变量和数组赋值

 var [s,...t] = [1,2,3,4,5];
       console.log(s,t);//1 (4) [2, 3, 4, 5]
       var [s,...t] = [];//undefined  []

(2).如果将运算符用于数组赋值 只能放在参数的最后一位 否则会报错

let [a,...b,c] = [1,2,3,2,9];//报错
let [...b,a,c] = [1,2,3,2,9];//报错

(3)扩展运算符可以将字符串转成真正的数组

console.log([..."hello"]);//["h", "e", "l", "l", "o"]
        var str = "hello";
        console.log(str.split(""));["h", "e", "l", "l", "o"]

(4)只有函数调用时 扩展运算符才可以放到圆括号里 否则这种写法就会直接报错

(...arr1);//报错
console.log([...arr1]);
    console.log((...arr1));//报错