ES6必知，变量的结构赋值。

对象和数组时 Javascript 中最常用的两种数据结构，由于 JSON 数据格式的普及，二者已经成为 Javascript 语言中特别重要的一部分。

在编码过程中，我们经常定义许多对象和数组，然后有组织地从中提取相关的信息片段。

ES6 中添加了可以简化这种任务的新特性：解构。解构是一种打破数据结构，将其拆分为更小部分的过程。

为什么需要解构 

我们考虑一个大多数人在使用 Javascript 进行编码时可能遇到过的情况。

假设，我们有一个学生数据，在学生数据中用一个对象表示三个学科（数学、语文、英语）的分数，我们根据这些数据显示学生的分数信息：

const student = {
    name:'jsPool',
    age:20,
    scores:{
        math:95,
        chinese:98,
        english:93
    }
}
function showScore(student){
    console.log('学生名:' + student.name);
    console.log('数学成绩:' + (student.scores.math || 0 ));
    console.log('语文成绩:' + (student.scores.chinese || 0 ));
    console.log('英语成绩:' + (student.scores.english || 0 ));
}
showScore(student)

使用上面的代码，我们将获得所需的结果。但是，以这种方式编写的代码需要有一些值得注意的地方。

由于我们访问的对象 scores 嵌套在另一个对象 student 中，所以，我们的访问链变得更长，这意味着更多的输入， 而由于更多的输入，也就更有可能造成拼写的错误。

当然，这并不是什么大问题，但是通过解构，我们可以用更具有表现力 和更紧凑的语法来做同样的事情。

对象的解构赋值 

对象解构的语法形式是在一个赋值操作符左边放置一个对象字面量，例如：

let details = {
    firstName:'Code',
    lastName:'Burst',
    age:22
}
const {firstName,age} = details;

console.log(firstName); // Code
console.log(age);       // 22

这是对象解构的最基本形式。

非同名变量赋值

在这个例子中，我们使用与对象属性名相同的变量名称，当然，我们也可以定义与属性名不同的变量名称：

const person = {
  name: 'jsPool',
  country: 'China'
};

const {name:fullname,country:place} = person;

console.log(fullname); // jsPool
console.log(place); // China

嵌套对象的解构赋值

我们可以通过解构赋值优雅的对其进行操作:

const student = {
    name:'jsPool',
    age:20,
    scores:{
        math:95,
        chinese:98,
        english:93
    }
}
function showScore(student){
    const { name,scores:{ math = 0,chinese = 0, english = 0}} = student;
    console.log('学生名:' + name);
    console.log('数学成绩:' + math);
    console.log('语文成绩:' + chinese);
    console.log('英语成绩:' + english);
}
showScore(student)

 

 

数组的解构赋值

与对象解构的语法相比，数组解构就简单多了，它使用的是数组字面量，且解构操作全部在数组内完成，而不是像对象字面量语法一样使用对象的命名属性。

let list = [221,'Baker Street','London'];
let [houseNo,street] = list;
console.log(houseNo,street);// 221 , Baker Street

let list = [221,'Baker Street','London'];
let [houseNo,,city] = list;
console.log(houseNo,city);// 221 , London

嵌套数组的解构赋值

就像对象一样，也可以对嵌套数组进行解构操作，在原有的数组解构模式中插入另一个数组解构模式，即可将解构过程深入到下一级：

let colors = [ 'red' , [ 'green' , 'yellow' ] , 'blue' ];
let [ firstColor , [ secondColor ] ] = colors;
console.log(firstColor,secondColor); // red , green

不定元素 

在数组中，可以通过...语法将数组中的其余元素赋值给一个特定的变量，就像这样：

let colors = ['red','green','blue'];
let [firstColor,...otherColors] = colors;
console.log(firstColor);  // red
console.log(otherColors); // ['green','blue']

 

 

混合解构

可以混合使用对象解构和数组解构来构建更多复杂的表达式，如此一来可以从任何混杂着对象和数组的数据结构中提取你想要的信息。

let node = {
    name:'foo',
    loc:{
        start:{
            line:1,
            column:1
        }
    },
    range:[0,3]
}
let {
    loc:{start:{line}},
    range:[startIndex]
} = node;
console.log(line);       // 1
console.log(startIndex); // 0

混合解构这种方式对于从 JSON 中提取数据时尤其有效，不再需要遍历整个解构了。