diff --git a/1-js/05-data-types/10-destructuring-assignment/article.md b/1-js/05-data-types/10-destructuring-assignment/article.md index 6773d3a889..ca2710a590 100644 --- a/1-js/05-data-types/10-destructuring-assignment/article.md +++ b/1-js/05-data-types/10-destructuring-assignment/article.md @@ -2,18 +2,18 @@ JavaScript 中最常用的两种数据结构是 `Object` 和 `Array`。 -- 对象让我们能够创建通过键来存储数据项的单个实体。 -- 数组则让我们能够将数据收集到一个有序的集合中。 +- 对象是一种根据键存储数据的实体。 +- 数组是一种直接存储数据的有序列表。 -但是,当我们把它们传递给函数时,函数可能不需要整个对象/数组。它可能只需要对象/数组的一部分。 +但是,当我们把它们传递给函数时,函数可能不需要整个对象/数组,而只需要其中一部分。 -**解构赋值** 是一种特殊的语法,它使我们可以将数组或对象“拆包”至一系列变量中,因为有时这样更方便。 +**解构赋值** 是一种特殊的语法,它使我们可以将数组或对象“拆包”至一系列变量中。有时这样做更方便。 -解构操作对那些具有很多参数和默认值等的函数也很奏效。我们马上会看到类似的例子。 +解构操作对那些具有很多参数和默认值等的函数也很奏效。下面有一些例子。 ## 数组解构 -下面是一个将数组解构到变量中的例子: +这是一个将数组解构到变量中的例子: ```js // 我们有一个存放了名字和姓氏的数组 @@ -30,9 +30,9 @@ alert(firstName); // John alert(surname); // Smith ``` -现在我们就可以针对这些变量进行操作,而不是针对原来的数组元素。 +我们可以使用这些变量而非原来的数组项了。 -当与 `split` 函数(或其他返回值是数组的函数)结合使用时,看起来就更优雅了: +当与 `split` 函数(或其他返回值为数组的函数)结合使用时,看起来更优雅: ```js run let [firstName, surname] = "John Smith".split(' '); @@ -43,9 +43,9 @@ alert(surname); // Smith 正如我们所看到的,语法很简单。但是有几个需要注意的细节。让我们通过更多的例子来加深理解。 ````smart header="“解构”并不意味着“破坏”" -这种语法叫做“解构赋值”,因为它通过将结构中的各元素复制到变量中来达到“解构”的目的。但数组本身是没有被修改的。 +这种语法被叫做“解构赋值”,是因为它“拆开”了数组或对象,将其中的各元素复制给一些变量。原来的数组或对象自身没有被修改。 -这只是下面这些代码的更精简的写法而已: +换句话说,解构赋值只是写起来简洁一点。以下两种写法是等价的: ```js // let [firstName, surname] = arr; let firstName = arr[0]; @@ -54,7 +54,7 @@ let surname = arr[1]; ```` ````smart header="忽略使用逗号的元素" -数组中不想要的元素也可以通过添加额外的逗号来把它丢弃: +可以通过添加额外的逗号来丢弃数组中不想要的元素: ```js run *!* @@ -65,7 +65,7 @@ let [firstName, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic alert( title ); // Consul ``` -在上面的代码中,数组的第二个元素被跳过了,第三个元素被赋值给了 `title` 变量,数组中剩下的元素也都被跳过了(因为在这没有对应给它们的变量)。 +在上面的代码中,数组的第二个元素被跳过了,第三个元素被赋值给了 `title` 变量。数组中剩下的元素也都被跳过了(因为在这没有对应给它们的变量)。 ```` ````smart header="等号右侧可以是任何可迭代对象" @@ -76,7 +76,7 @@ alert( title ); // Consul let [a, b, c] = "abc"; // ["a", "b", "c"] let [one, two, three] = new Set([1, 2, 3]); ``` -这行得通,因为在内部,解构赋值是通过迭代右侧的值来完成工作的。这是一种用于对在 `=` 右侧的值上调用 `for..of` 并进行赋值的操作的语法糖。 +这种情况下解构赋值是通过迭代右侧的值来完成工作的。这是一种用于对在 `=` 右侧的值上调用 `for..of` 并进行赋值的操作的语法糖。 ```` @@ -105,7 +105,7 @@ let user = { age: 30 }; -// 循环遍历键—值对 +// 使用循环遍历键—值对 *!* for (let [key, value] of Object.entries(user)) { */!* @@ -113,7 +113,7 @@ for (let [key, value] of Object.entries(user)) { } ``` -用于 `Map` 的类似的代码更简单,因为它是可迭代的: +用于 `Map` 的类似代码更简单,因为 Map 是可迭代的: ```js run let user = new Map(); @@ -130,7 +130,7 @@ for (let [key, value] of user) { ```` ````smart header="交换变量值的技巧" -有一个著名的使用解构赋值来交换两个变量的值的技巧: +使用解构赋值来交换两个变量的值是一个著名的技巧: ```js run let guest = "Jane"; @@ -144,9 +144,9 @@ let admin = "Pete"; alert(`${guest} ${admin}`); // Pete Jane(成功交换!) ``` -这里我们创建了一个由两个变量组成的临时数组,并且立即以交换了的顺序对其进行了解构。 +这里我们创建了一个由两个变量组成的临时数组,并且立即以颠倒的顺序对其进行了解构赋值。 -我们可以用这种方式交换两个以上的变量。 +我们也可以用这种方式交换两个以上的变量。 ```` ### 其余的 '...' @@ -163,7 +163,7 @@ alert(name2); // Caesar // 其余数组项未被分配到任何地方 ``` -如果我们还想收集其余的数组项 —— 我们可以使用三个点 `"..."` 来再加一个参数以获取“其余”数组项: +如果我们还想收集其余的数组项 —— 我们可以使用三个点 `"..."` 来再加一个参数以获取其余数组项: ```js run let [name1, name2, *!*...rest*/!*] = ["Julius", "Caesar", *!*"Consul", "of the Roman Republic"*/!*]; @@ -178,7 +178,7 @@ alert(rest.length); // 2 `rest` 的值就是数组中剩下的元素组成的数组。 -不一定要使用变量名 `rest`,我们也可以使用任何其他的变量名,只要确保它前面有三个点,并且在解构赋值的最后一个参数位置上就行了。 +不一定要使用变量名 `rest`,我们也可以使用任何其他的变量名。只要确保它前面有三个点,并且在解构赋值的最后一个参数位置上就行了: ```js run let [name1, name2, *!*...titles*/!*] = ["Julius", "Caesar", "Consul", "of the Roman Republic"]; @@ -187,7 +187,7 @@ let [name1, name2, *!*...titles*/!*] = ["Julius", "Caesar", "Consul", "of the Ro ### 默认值 -如果数组比左边的变量列表短,这里也不会出现报错。缺少的值被认为是 `undefined`: +如果数组比左边的变量列表短,这里不会出现报错。缺少对应值的变量都会被赋 `undefined`: ```js run *!* @@ -210,7 +210,7 @@ alert(name); // Julius(来自数组的值) alert(surname); // Anonymous(默认值被使用了) ``` -默认值可以是更加复杂的表达式甚至可以是函数调用,这些表达式或函数只会在这个变量未被赋值的时候才会被计算。 +默认值可以是更加复杂的表达式,甚至可以是函数调用。不过,这些表达式或函数只会在这个变量未被赋值的时候才会被计算。 举个例子,我们使用了 `prompt` 函数来提供两个默认值: @@ -234,9 +234,9 @@ alert(surname); // 你输入的值 let {var1, var2} = {var1:…, var2:…} ``` -在等号右侧应该有一个已经存在的对象,我们想把它拆分到变量中。等号左侧包含了对象相应属性的一个类对象“模式(pattern)”。在最简单的情况下,等号左侧的就是 `{...}` 中的变量名列表。 +在等号右侧是一个已经存在的对象,我们想把它拆分到变量中。等号左侧包含了对象相应属性的一个类对象“模式(pattern)”。在最简单的情况下,等号左侧的就是 `{...}` 中的变量名列表。 -举个例子: +如下所示: ```js run let options = { @@ -256,14 +256,14 @@ alert(height); // 200 属性 `options.title`、`options.width` 和 `options.height` 值被赋给了对应的变量。 -变量的顺序并不重要,下面这个代码也奏效: +变量的顺序并不重要,下面这个代码也是等价的: ```js // 改变 let {...} 中元素的顺序 let {height, width, title} = { title: "Menu", height: 200, width: 100 } ``` -等号左侧的模式(pattern)可以更加复杂,并且指定了属性和变量之间的映射关系。 +等号左侧的模式(pattern)可以更加复杂,指定属性和变量之间的映射关系。 如果我们想把一个属性赋值给另一个名字的变量,比如把 `options.width` 属性赋值给名为 `w` 的变量,那么我们可以使用冒号来设置变量名称: @@ -288,7 +288,7 @@ alert(w); // 100 alert(h); // 200 ``` -冒号表示“什么值:赋值给谁”。上面的例子中,属性 `width` 被赋值给了 `w`,属性 `height` 被赋值给了 `h`,属性 `title` 被赋值给了同名变量。 +冒号的语法是“从对象中什么属性的值:赋值给哪个变量”。上面的例子中,属性 `width` 被赋值给了 `w`,属性 `height` 被赋值给了 `h`,属性 `title` 被赋值给了同名变量。 对于可能缺失的属性,我们可以使用 `"="` 设置默认值,如下所示: @@ -358,7 +358,7 @@ alert(title); // Menu 如果对象拥有的属性数量比我们提供的变量数量还多,该怎么办?我们可以只取其中的某一些属性,然后把“剩余的”赋值到其他地方吗? -我们可以使用剩余模式(pattern),就像我们对数组那样。一些较旧的浏览器不支持此功能(例如 IE,可以使用 Babel 对其进行 polyfill),但可以在现代浏览器中使用。 +我们可以使用剩余模式(pattern),与数组类似。一些较旧的浏览器不支持此功能(例如 IE,可以使用 Babel 对其进行 polyfill),但可以在现代浏览器中使用。 看起来就像这样: @@ -469,9 +469,9 @@ function showMenu(title = "Untitled", width = 200, height = 100, items = []) { } ``` -在实际开发中存在一个问题就是你怎么记得住这么多参数的顺序。通常集成开发环境工具(IDE)会尽力帮助我们,特别是当代码有良好的文档注释的时候,但是…… 另一个问题就是,当大部分的参数采用默认值就好的情况下,怎么调用这个函数。 +在实际开发中,记忆如此多的参数的位置是一个很大的负担。通常集成开发环境(IDE)会尽力帮助我们,特别是当代码有良好的文档注释的时候,但是…… 另一个问题就是,在大部分的参数只需采用默认值的情况下,调用这个函数时会需要写大量的 undefined。 -难道像这样? +像这样: ```js // 在采用默认值就可以的位置设置 undefined @@ -480,9 +480,9 @@ showMenu("My Menu", undefined, undefined, ["Item1", "Item2"]) 这太难看了。而且,当我们处理更多参数的时候可读性会变得很差。 -解构赋值语法前来救援! +解构赋值可以解决这些问题。 -我们可以把所有参数当作一个对象来传递,然后函数马上把这个对象解构成多个变量: +我们可以用一个对象来传递所有参数,而函数负责把这个对象解构成各个参数: ```js run // 我们传递一个对象给函数 @@ -491,7 +491,7 @@ let options = { items: ["Item1", "Item2"] }; -// ……然后函数马上把对象展开成变量 +// ……然后函数马上把对象解构成变量 function showMenu(*!*{title = "Untitled", width = 200, height = 100, items = []}*/!*) { // title, items – 提取于 options, // width, height – 使用默认值 @@ -502,7 +502,7 @@ function showMenu(*!*{title = "Untitled", width = 200, height = 100, items = []} showMenu(options); ``` -我们同样可以使用带有嵌套对象和冒号映射的更加复杂的解构: +我们也可以使用带有嵌套对象和冒号映射的更加复杂的解构: ```js run let options = { @@ -558,7 +558,7 @@ showMenu(); // Menu 100 200 ## 总结 -- 解构赋值可以立即将一个对象或数组映射到多个变量上。 +- 解构赋值可以简洁地将一个对象或数组拆开赋值到多个变量上。 - 解构对象的完整语法: ```js let {prop : varName = default, ...rest} = object