「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
复制代码

这段代码中 details.firstName 的值被存储在变量 firstName 中，details.age 的值被存储在变量 age 中。 这是对象解构的最基本形式。

用一张图来解释一下其中的解构过程：

非同名变量赋值

在这个例子中，咱们使用与对象属性名相同的变量名称，固然，咱们也能够定义与属性名不一样的变量名称：

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

console.log(fullname); // jsPool
console.log(place); // China
复制代码

在这里，咱们建立了两个局部变量：fullname , place，并将 fullname 映射到 name，place映射到 country。

默认值

使用解构赋值表达式时，若是指定的局部变量名称在对象中不存在，那么这个局部变量会被赋值为 undefined，就像这样：

const person = {
  name: 'jsPool',
  country: 'China'
};
let {age} = person;
console.log(age); // undefined
复制代码

这段代码额外定义了一个局部变量 age，而后尝试为它赋值，然而在 person 对象上，没有对应属性名称的属性值，因此它像预期中的那样赋值为 undefined。

当指定的属性不存在时，能够定义一个默认值，在属性名称后添加一个等号（=）和相应的默认值便可：

const person = {
  name: 'jsPool',
  country: 'China',
  sexual:undefined
};
let {age = 20,sexual:sex = 'male'} = person;
console.log(age); // 20
console.log(sex); // male
复制代码

在这个例子中，为变量 age 设置了默认值 20，为非同名变量 sex 设置了默认值 male。只有对象 person 上没有该属性或者属性值为 undefined 时该默认值才生效。

嵌套对象的解构赋值

解构嵌套对象仍然与对象字面量的语法类似，能够将对象拆解以获取你想要的信息。

再来看文中最开始的例子，咱们有一个学生数据，在学生数据中用一个对象表示三个学科（数学、语文、英语）的分数，咱们根据这些数据显示学生的分数信息。咱们能够经过解构赋值优雅的对其进行操做:

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)
复制代码

在这里，咱们定义了四个局部变量：name、math、chinese、english。此外咱们还为变量 math、chinese、english 分别指定了默认值。

数组的解构赋值

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

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

在上面的代码中，咱们从数组 list 中解构出数组索引 0 和 1 所对应的值并分别存储至变量 houseNo 和 street 中。

在数组的解构中，也能够直接省略元素，只为须要的元素提供变量名：

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

这段代码中使用解构语法从数组 list 中获取索引 0 和索引 2 所对应的元素，city 前的逗号是前方元素的占位符，不管数组中的元素有多少个，均可用这种方式来提取想要的元素。

用一张图来解释一下其中的解构过程：

默认值

在数组的解构赋值表达式中也能够为数组的任意位置添加默认值，当指定位置的属性不存在或其值为 undefined 时使用默认值：

let list = [221,'Baker Street'];
let [houseNo,street,city = 'BJ'] = list;
console.log(houseNo,street,city);// 221 , Baker Street , BJ
复制代码

上面代码中，数组 list 只有两个元素，变量 city 没有对应的匹配值，但有一个默认值 BJ，因此最终 city 的输出结果不是 undefined 而是默认值 BJ。

嵌套数组的解构赋值

就像对象同样，也能够对嵌套数组进行解构操做，在原有的数组解构模式中插入另外一个数组解构模式，便可将解构过程深刻到下一级：

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

在这个例子中，咱们经过数组的嵌套解构，为变量 firstColor 和 secondColor 分配对应的值。

不定元素

在数组中，能够经过...语法将数组中的其他元素赋值给一个特定的变量，就像这样：

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

这个例子中，数组 colors 的第一个元素被赋值给了 firstColor ，其余元素被赋值给了 otherColors 数组，因此 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
复制代码

当使用混合解构语法时，能够从 node 对象中提取任意想要的信息。

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

参考

• 深刻理解ES6
• 一个简单的解构指南
• ES6解构：完整指南
• ES6标准入门之变量的解构赋值

系列文章推荐

• ES6系列-let和const全解析
• ES6系列-箭头函数全解析
• ES6系列-Promise全解析

写在最后

• 文中若有错误，欢迎在评论区指正，若是这篇文章帮到了你，欢迎点赞和关注
• 本文同步首发与github，可在github中找到更多精品文章，欢迎Watch & Star ★
• 后续文章参见：计划

欢迎关注微信公众号【前端小黑屋】，每周1-3篇精品优质文章推送，助你走上进阶之旅