前言

谈一谈ES6的新方法？面试最容易问到的问题之一。你还在傻傻的把所有ES6新方法背诵一遍吗？

最好的回答是，举个例子【解构赋值、promise...】，将他展开说清楚，讲解常用API并结合实际项目如何使用。

这样面试官不仅认可了你的基础知识，并且认可你的项目经验！

今天我们就深入的聊一聊 解构赋值。熟练的掌握解构赋值，能够在处理数组和对象的时候，给你带来不可思议的一面。

最简单的例子

const response = {
   status: 200,
   data: {}
}

// 我们可以用下面方法取代 response.data 
const {data} = response 


const objectList = [ { key: 'value' }, { key: 'value' }, { key: 'value' } ]

// 我们可以用下面方法取代 objectList[0], objectList[1] 
const [obj, obj1, obj2] = objectList

接下来，我将举5个例子带你了解一下解构赋值如此强大的语法。

嵌套结构
对象、数组内的混合嵌套结构
解构的别名
解构的默认值
解构的忽略值

1、嵌套解构

一般的开发人员只知道，解构数组或者对象的第一层，如果所需的数据在第二层，那仍然使用 obj.a或array[0] 的方式获取我们真正想要的东西。

解构可以进行嵌套。

以 HTTP 请求的对象响应为例。我们想要获取data数据对象内的user用户。

const response = {
  status: 200,
  data: { 
    user: {
       name: 'xiaoming', 
       title: 'Title' 
    }, 
    account: {},
    company: 'Juejin' 
  }
}

const {data: {user}} = response 
// user = { name: 'xiaoming', title: 'Title'}

嵌套的数组也可以这样做。在这种情况下，你需要知道的是你要找的字段的index位置。您需要为每个元素起一个名称（可以任意命名或用逗号占位符）。

const user = [['xiaoming', ['writer', 'editor', 'reader']], ['xiaohong', ['writer', 'reader']]]

const [[xiaoming, roles]] = user
// xiaoming = 'rachel'
// roles = [ 'writer', 'editor', 'reader' ]

请记住，应谨慎使用。应考虑代码的可读性和方便更改。例如，如果您只想访问一个子数组，使用 map 会更合适。

2、对象、数组混合的嵌套解构

事实上，我们的数据结构并没有这么简单，而是一个（对象或数组）经常出现在另一个（对象或数组）里面。除了嵌套解构之外，我们还可以嵌套的访问。

以对象内有数组为例。

const organization = { 
    users: ['xiaoming', 'xiaohong', 'xiaobai'],
    name: 'Juejin',
    site: 'https://www.juejin.cn/' 
}

const {users:[xiaoming]} = organization // xiaoming is 'xiaoming'

相反的数组内有对象也是有效的：

const users = [{name: 'xiaoming', title: 'editor'}, {name: 'xiaohong', title: 'contributor'}]

const [{name}] = users // name is 'xiaoming'

但是在这个例子中有一个问题。我们只能访问第一个用户xiongming的名字；

如果要解决这个问题，我们可以使用第三个方法。

3、别名

在上面的例子中（当我们在不同的对象中有重复的键时（name）），我们想要获取的话，就要使用别名。

const users = [{name: 'xiaoming', title: 'editor'}, {name: 'xiaohong', title: 'contributor'}]

const [{name: xiaoming}, {name: xiaohong}] = users 
// xiaoming = 'xiaoming' xiaohong = 'xiaohong'

别名仅适用于对象。因为开发人员可以对数组自定义变量名称，而不必匹配现有的对象键。

4、默认值

我们解构时默认它引用的值存在，但如果不存在怎么办谁都不想取到undefiend。这时候默认值就派上用场了。

const user = {name: 'Luke', organization: 'Acme Publishing'}
const {name='Brian', role='publisher'} = user
// name = Luke
// role = publisher

如果引用的对象已经有值，则忽略默认值。如果对象中不存在键，则使用默认值。

数组同样：

const roleCounts = [2]
const [editors = 1, contributors = 100] = roleCounts
// editors = 2
// contributors = 100

5、忽略值

上面的示例都是解构的元素多于数组中存在的元素。

只解构更少的元素怎么办？

在对象中，我们通过使用相同的键名来解构出我们想要的数据

对于数组，其实有两种方法可以忽略元素。当数组被解构时，变量名是按位置分配的。

第一种忽略数组末尾的元素

const roleCounts = [2, 100, 100000]
const [editors, contributors] = roleCounts
// editors = 2
// contributors = 100

第二种使用，来忽略元素

我们使用逗号来暗示这些元素的存在，但如果没有引用变量，它们将被忽略。

const roleCounts = [2, 100, 100000]
const [, contributors, readers] = roleCounts
// contributors = 100
// readers = 100000

使用逗号占位符在我们想要的任何地方跳过元素。

其他例子

解构的魅力和多功能性也意味着你可以做一些奇怪的事情。他们是否能用上很难说，但值得你知道！

使用解构来制作浅拷贝。

const obj = {key: 'value', arr: [1,2,3,4]}
const {arr, arr: copy} = obj
// arr 和 copy 都是等于 [1,2,3,4]

使用解构取消引用。

const obj = {node: {example: 'thing'}}
const {node, node: {example}} = obj
// node = { example: 'thing' }
// example = 'thing'

总结

使用解构赋值高效地访问处理来自 HTTP 请求的响应、静态数据集的数据是一个重要的方法。它不仅处理多级嵌套，而且允许提供默认值。

全文完

谢谢！

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 9 天

点击查看活动详情

ES6【解构赋值】的5种最常用方法

前言