ES6学习（二） 解构赋值

概述

解构赋值是对赋值运算符的扩展。

他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。

在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。

解构：（ES6）

可以在一个类似对象字面量的结构中，声明多个变量，同时执行多个赋值操作。和封装相反。

凡是有迭代器接口的数据，就都可以解构，常见的有迭代器接口的数据就是数组、对象

对象的解构 ：

const person = {
  name: '张三',
  attribute: '法外狂徒',
  dosth(){ console.log("王者峡谷"); }
}
let {name,attribute,dosth} = person; //对象赋值解构
console.log(name); //‘张三’
dosth(); //'王者峡谷'，意味着可以直接使用，不必使用  对象.方法 

解构赋值的本质

可以简单理解为：等号左右两边，由数组符号[]和对象符号{}组成的架构，必须是匹配的，元素可以多一点少一点没关系，未匹配到默认的为undefined，但是模式不匹配，会直接报错。

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


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


let [a,b] = [1];  //轮不到赋值的变量，值为undefined
console.log(b);


let [a, [b,c]] = [1,2,3];  //模式不匹配，直接报错
a; // Uncaught TypeError: undefined is not a funct

剩余运算符 

let [a, ...b] = [1, 2, 3]; //a = 1 //b = [2, 3]

函数参数的解构赋值

之前只能这么传参，这种传参的缺陷是，你需要传5个参数，往往这5个参数来自于一个数组，于是你必须事先把这个数组拆开成5个变量，然后分别传进去：

function f(a,b,c,d,e) {
  return a + b + c + d + e;
}
f(19, 19, 19, 19, 19); // 95

 如果你强行想要一次性传入一个数组[19,19,19,19,19]，那就有点小麻烦，只能这样，这样的缺陷就是用下标表示变量，不够直观：

function f(arr) {
  return arr[0] + arr[1] + arr[2] + arr[3] + arr[4];
}
f([19, 19, 19, 19, 19]); // 95

现在ES6之后，你就可以传入一个数组作为一套参数，js帮你自动解构： 

function f([a,b,c,d,e]) {
  return a + b + c + d + e;
}
f([19, 19, 19, 19, 19]); // 95

参考文章： 

ES6-变量解构赋值详解 - 知乎

菜鸟教程-ES6解构赋值