资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/[译]JavaScript ES6解构赋值指南

[译]JavaScript ES6解构赋值指南

Jeff / 3028人阅读

摘要：解构赋值允许我们将右边的表达式看起来也像变量声明一般，然后在左边将值一一提取。数组的解构赋值现在假设我们有一个变量，其值为。通过，这会看上去更清晰简洁最后的解构赋值给的语法带来了更多的现代化。

前言

让我们来仔细地看看ES6所带来的更清晰的变量声明与赋值语法。现今的变量声明语法十分的直接：左边是一个变量名，右边可以是一个数组：[]的表达式或一个对象：{}的表达式，等等。解构赋值允许我们将右边的表达式看起来也像变量声明一般，然后在左边将值一一提取。听起来有点迷糊？让我们一起看看下面的例子就好。

数组的解构赋值

现在假设我们有一个value变量，其值为[1, 2, 3, 4, 5]。然后我们想给数组的前三个元素分别声明一个变量。传统的做法是多带带声明和赋值每一个变量：

jsvar value = [1, 2, 3, 4, 5];
var el1 = value[0];
var el2 = value[1];
var el3 = value[0];

有了这几个新变量，我们原本的value现在可以被表示为[el1, el2, el3, 4, 5]，因为我们现在并不关心后两个元素，所以也可以说被表示为[el1, el2, el3]。那么现在，ES6允许我们在左边使用这个表达式来达到和上一个代码块一样的效果：

jsvar value = [1, 2, 3, 4, 5];
var [el1, el2, el3] = value;

右边不必一定是变量名：

jsvar [el1, el2, el3] = [1, 2, 3, 4, 5];

左边也不必一定是声明：

jsvar el1, el2, el3;
[el1, el2, el3] = [1, 2, 3, 4, 5];

这使我们通过仅仅使用两个变量名，就可以交换两个变量的值，这是从前的JavaScript不可能办到的事情：

js[el1, el2] = [el2, el1];

解构赋值也是可嵌套的：

jsvar value = [1, 2, [3, 4, 5]];
var [el1, el2, [el3, el4]] = value;

ES6中，返回一个数组的函数更像一个头等公民了：

jsfunction tuple() {
  return [1, 2];
}

var [first, second] = tuple();

同样可以通过简单地在指定位置省略变量来忽略数组中的某个元素：

jsvar value = [1, 2, 3, 4, 5];
var [el1, , el3, , el5] = value;

这使得从正则表达式里取出匹配的分组的过程十分得简洁：

jsvar [, firstName, lastName] = "John Doe".match(/^(w+) (w+)$/);

更进一步，默认值同样也可以被指定：

jsvar [firstName = "John", lastName = "Doe"] = [];

需要注意的是默认值只会在对undefined值起作用，下面的例子中firstName和lastName都将是null：

jsvar [firstName = "John", lastName = "Doe"] = [null, null];

rest参数（...变量名）让事情变得更有趣，它使你可以得到数组中“剩余“的元素。下面这个例子中，tail变量将接收数组中”剩余“的元素，为[4, 5]：

jsvar value = [1, 2, 3, 4, 5];
var [el1, el2, el3, ...tail] = value;

不幸的是，ES6中rest参数的实现非常原始，rest参数之后不能再有其他参数（即只能是最后一个参数）。所以下面例子中的这些非常有用模式，在ES6中是不可能的（会报错）：

jsvar value = [1, 2, 3, 4, 5];
var [...rest, lastElement] = value;
var [firstElement, ...rest, lastElement] = value;
对象的解构赋值

现在，你已经对数组的解构赋值有了清晰的认识，让我们来看看对象的解构赋值。它们几乎以同样的方式工作，仅仅是从数组变成了对象：

jsvar person = {firstName: "John", lastName: "Doe"};
var {firstName, lastName} = person;

ES6允许变量名与对应的属性名不一致。下面的例子中，name变量将会被声明为person.firstName的值：

jsvar person = {firstName: "John", lastName: "Doe"};
var {firstName: name, lastName} = person;

深层嵌套的对象也不会有问题：

jsvar person = {name: {firstName: "John", lastName: "Doe"}};
var {name: {firstName, lastName}} = person;

你还可以嵌套些数组在里面：

jsvar person = {dateOfBirth: [1, 1, 1980]};
var {dateOfBirth: [day, month, year]} = person;

或者一些其他的：

jsvar person = [{dateOfBirth: [1, 1, 1980]}];
var [{dateOfBirth}] = person;

和数组解构赋值一样，对象解构赋值也可以使用默认值：

jsvar {firstName = "John", lastName: userLastName = "Doe"} = {};

默认值同样也只会在对undefined值起作用，下面的例子中firstName和lastName也都将是null：

jsvar {firstName = "John", lastName = "Doe"} = {firstName: null, lastName: null};
函数参数的解构赋值

ES6中，函数的参数也支持解构赋值。这对于有复杂配置参数的函数十分有用。你可以结合使用数组和对象的解构赋值。

jsfunction findUser(userId, options) {
  if (options.includeProfile) ...
  if (options.includeHistory) ...
}

通过ES6，这会看上去更清晰简洁：

jsfunction findUser(userId, {includeProfile, includeHistory}) {
  if (includeProfile) ...
  if (includeHistory) ...
}
最后

ES6的解构赋值给JavaScript的语法带来了更多的现代化。它在减少了代码量的同时，增加了代码的可读性和表现力。

原文地址

https://strongloop.com/strongblog/getting-started-with-javascript-es6-...

服务器托管 私有云 解构赋值 javascript指南 javascript连续赋值 javascript教程指南

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85757.html

相关文章

  • [译]JavaScript ES6迭代器指南

    摘要：前言又称提供一个全新的迭代器的概念，它允许我们在语言层面上定义一个有限或无限的序列。后者可以被用来帮助我们理解迭代器。但是当我们使用迭代器时，这个问题就迎刃而解了。是中的新语法，用来配合迭代器。这是因为数组的迭代器只返回其中预期的元素。 前言 EcmaScript 2015 （又称ES6）提供一个全新的迭代器的概念，它允许我们在语言层面上定义一个（有限或无限的）序列。 暂时先抛开它...

    daryl 评论0 收藏0

  • [译] 最深刻而易懂的ES6解构教程

    摘要：被解构的数据项位于赋值运算符的右侧，可以是任何数组和对象的组合，允许随意嵌套。数组模式位于赋值运算符的左侧，被结构的数组在其右侧。 解构是ES6的新特性，用于从JavaScript对象和数组中提取数据，语法上比ES5所提供的更加简洁、紧凑、清晰。它不仅能减少你的代码量，还能从根本上改变你的编码方式。用的越多，你就会发现越多塑造数据和函数的方式，这些实现方式在过去几乎是不可能的。本文将深...

    AlphaGooo 评论0 收藏0

  • [译] 在你学习 React 之前必备的 JavaScript 基础

    摘要：前言在理想的状态下，你可以在深入了解之前了解和开发的所有知识。继承另一个类的类，通常称为类或类，而正在扩展的类称为类或类。这种类型的组件称为无状态功能组件。在你有足够的信心构建用户界面之后，最好学习。 原文地址：JavaScript Basics Before You Learn React 原文作者： Nathan Sebhastian 写在前面 为了不浪费大家的宝贵时间，在开...

    Chaz 评论0 收藏0

  • [译] ES6 中 Arguments 和 Parameters 用法解析

    摘要：默认参数有了我们不需要再去检测哪些值为并且给它们设定默认值了。我们甚至可以使用函数去找回默认参数的值注意这个函数只有在第二个参数省略时才会被调用。浏览器对默认参数的支持情况桌面浏览器移动端浏览器解构赋值解构赋值是的新特性。 原文地址：https://www.smashingmagazine.com/2016/07/how-to-use-arguments-and-parameters...

    msup 评论0 收藏0

发表评论

登陆后可评论

0条评论

Jeff

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<