[译]JavaScript ES6解构赋值指南

2024年5月2日 183次阅读 来源: 菜菜蔡伟

媒介

让我们来细致地看看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-…

    原文作者：菜菜蔡伟
    原文地址: https://segmentfault.com/a/1190000002920859
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞