From 5522b42d7188e0bd2280c33c834ee22f2ecce8ac Mon Sep 17 00:00:00 2001 From: LeviDing Date: Wed, 19 Feb 2020 23:03:21 +0800 Subject: [PATCH 1/9] Update article.md --- 1-js/05-data-types/10-destructuring-assignment/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 c069156541..d1982323d3 100644 --- a/1-js/05-data-types/10-destructuring-assignment/article.md +++ b/1-js/05-data-types/10-destructuring-assignment/article.md @@ -1,6 +1,6 @@ # 解构赋值 -JavaScript 中最常用的两种数据结构是 `Object`（对象）和 `Array`（数组）。 +JavaScript 中最常用的两种数据结构是 `Object` 和 `Array`。 对象让我们能够把许多信息打包到一个单一的实体中，数组则让我们能够存放有序的集合。所以我们可以创建一个对象或一个数组，把它当作一个实体进行处理，或者把它当作参数传递给一个函数调用。 From ff4ecb5a4e419e85e1c982dcf551b8e6f83979d3 Mon Sep 17 00:00:00 2001 From: LeviDing Date: Wed, 19 Feb 2020 23:05:22 +0800 Subject: [PATCH 2/9] Delete destructuring-complex.svg --- .../destructuring-complex.svg | 59 ------------------- 1 file changed, 59 deletions(-) delete mode 100644 1-js/05-data-types/10-destructuring-assignment/destructuring-complex.svg diff --git a/1-js/05-data-types/10-destructuring-assignment/destructuring-complex.svg b/1-js/05-data-types/10-destructuring-assignment/destructuring-complex.svg deleted file mode 100644 index c3e25b569a..0000000000 --- a/1-js/05-data-types/10-destructuring-assignment/destructuring-complex.svg +++ /dev/null @@ -1,59 +0,0 @@ - - - - destructuring-complex.svg - Created with sketchtool. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file From 08a6916e3fe543be17b6d38f3612472f11433855 Mon Sep 17 00:00:00 2001 From: LeviDing Date: Wed, 19 Feb 2020 23:05:51 +0800 Subject: [PATCH 3/9] Add files via upload --- .../10-destructuring-assignment/destructuring-complex.svg | 1 + 1 file changed, 1 insertion(+) create mode 100644 1-js/05-data-types/10-destructuring-assignment/destructuring-complex.svg diff --git a/1-js/05-data-types/10-destructuring-assignment/destructuring-complex.svg b/1-js/05-data-types/10-destructuring-assignment/destructuring-complex.svg new file mode 100644 index 0000000000..cb496bf669 --- /dev/null +++ b/1-js/05-data-types/10-destructuring-assignment/destructuring-complex.svg @@ -0,0 +1 @@ + \ No newline at end of file From fcaadbbb3ca051e24ef26dac9c7b16f51652b901 Mon Sep 17 00:00:00 2001 From: LeviDing Date: Thu, 20 Feb 2020 00:02:14 +0800 Subject: [PATCH 4/9] Update article.md --- .../10-destructuring-assignment/article.md | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) 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 d1982323d3..5b7bc87923 100644 --- a/1-js/05-data-types/10-destructuring-assignment/article.md +++ b/1-js/05-data-types/10-destructuring-assignment/article.md @@ -2,20 +2,24 @@ JavaScript 中最常用的两种数据结构是 `Object` 和 `Array`。 -对象让我们能够把许多信息打包到一个单一的实体中，数组则让我们能够存放有序的集合。所以我们可以创建一个对象或一个数组，把它当作一个实体进行处理，或者把它当作参数传递给一个函数调用。 +对象允许我们创建通过键来存储数据项的单个实体，数组允许我们将数据收集到一个有序的集合中。 -**解构赋值**是一种特殊的语法，它让我们可以将数组或对象进行“拆包”，存放到一系列的变量中，因为有时候使用变量更加方便。解构操作在那些具有很多参数和默认参数值的函数中也很奏效，很快我们就会看到这些都是怎么处理的。 +但是，当我们把它们传递给函数时，它可能不需要一个整体的对象/数组，而是需要单个块。 + +**解构赋值** 是一种特殊的语法，它使我们可以将数组或对象“拆包”为一堆变量，因为有时候使用变量更加方便。解构操作对那些具有很多参数和默认值等的函数也很奏效。 ## 数组解构 -以下是将数组解构到变量中的一个例子： +下面是一个将数组解构为变量的例子： ```js -// 有一个存放了名字和姓氏的数组 +// 我们有一个存放了名字和姓氏的数组 let arr = ["Ilya", "Kantor"] *!* // 解构赋值 +// sets firstName = arr[0] +// and surname = arr[1] let [firstName, surname] = arr; */!* From 2daf776434fee393b4c9eaad1ef6691a19eff2a3 Mon Sep 17 00:00:00 2001 From: LeviDing Date: Thu, 20 Feb 2020 13:53:01 +0800 Subject: [PATCH 5/9] Update article.md --- .../10-destructuring-assignment/article.md | 140 ++++++++++-------- 1 file changed, 76 insertions(+), 64 deletions(-) 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 5b7bc87923..625e4f996b 100644 --- a/1-js/05-data-types/10-destructuring-assignment/article.md +++ b/1-js/05-data-types/10-destructuring-assignment/article.md @@ -2,15 +2,15 @@ JavaScript 中最常用的两种数据结构是 `Object` 和 `Array`。 -对象允许我们创建通过键来存储数据项的单个实体，数组允许我们将数据收集到一个有序的集合中。 +对象让我们能够创建通过键来存储数据项的单个实体，数组则让我们能够将数据收集到一个有序的集合中。 但是，当我们把它们传递给函数时，它可能不需要一个整体的对象/数组，而是需要单个块。 -**解构赋值** 是一种特殊的语法，它使我们可以将数组或对象“拆包”为一堆变量，因为有时候使用变量更加方便。解构操作对那些具有很多参数和默认值等的函数也很奏效。 +**解构赋值** 是一种特殊的语法，它使我们可以将数组或对象“拆包”为到一系列变量中，因为有时候使用变量更加方便。解构操作对那些具有很多参数和默认值等的函数也很奏效。 ## 数组解构 -下面是一个将数组解构为变量的例子： +下面是一个将数组解构到变量中的例子： ```js // 我们有一个存放了名字和姓氏的数组 @@ -35,10 +35,10 @@ alert(surname); // Kantor let [firstName, surname] = "Ilya Kantor".split(' '); ``` -````smart header="\"解构\"并不意味着\"破坏\"" +````smart header="“解构”并不意味着“破坏”" 这种语法叫做“解构赋值”，因为它通过将结构中的各元素复制到变量中来达到“解构”的目的。但数组本身是没有被修改的。 -也就是以下代码的更精简写法而已： +这只是下面这些代码的更精简的写法而已： ```js // let [firstName, surname] = arr; let firstName = arr[0]; @@ -46,24 +46,24 @@ let surname = arr[1]; ``` ```` -````smart header="忽略第一个元素" +````smart header="忽略使用逗号的元素" 数组中不想要的元素也可以通过添加额外的逗号来把它丢弃： ```js run *!* -// 不需要第一个和第二个元素 -let [, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic"]; +// 不需要第二个元素 +let [firstName, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic"]; */!* alert( title ); // Consul ``` -在以上的代码中，数组的第一个和第二个元素被跳过，第三个元素被赋值给了 `title` 变量，剩下的元素也被跳过了。 +在上面的代码中，数组的第二个元素被跳过了，第三个元素被赋值给了 `title` 变量，数组中剩下的元素也都被跳过了（因为在这没有对应给它们的变量）。 ```` -````smart header="用于等号右侧的任何可迭代对象" +````smart header="等号右侧可以是任何可迭代对象" -...事实上我们也可以在任何可迭代对象中使用，不仅仅是数组： +……实际上，我们可以将其与任何可迭代的数组一起使用，而不仅限于数组： ```js let [a, b, c] = "abc"; // ["a", "b", "c"] @@ -73,9 +73,9 @@ let [one, two, three] = new Set([1, 2, 3]); ```` -````smart header="赋值给等号左侧的任何类型" +````smart header="赋值给等号左侧的任何内容" -我们可以在等号左侧使用任何“可以被赋值的”变量。 +我们可以在等号左侧使用任何“可以被赋值的”东西。 例如，一个对象的属性： ```js run @@ -87,11 +87,11 @@ alert(user.name); // Ilya ```` -````smart header="使用 .entries() 循环" +````smart header="与 .entries() 方法进行循环操作" 在前面的章节中我们已经见过了 [Object.entries(obj)](mdn:js/Object/entries) 方法。 -我们可以使用 .entries() 方法和解构语法来遍历一个对象的键-值对： +我们可以将 .entries() 方法与解构语法一同使用，来遍历一个对象的“键—值”对： ```js run let user = { @@ -99,7 +99,7 @@ let user = { age: 30 }; -// 循环遍历键-值对 +// 循环遍历键—值对 *!* for (let [key, value] of Object.entries(user)) { */!* @@ -107,7 +107,7 @@ for (let [key, value] of Object.entries(user)) { } ``` -...对于 map 对象也类似： +……对于 map 对象也类似： ```js run let user = new Map(); @@ -115,7 +115,7 @@ user.set("name", "John"); user.set("age", "30"); *!* -for (let [key, value] of user.entries()) { +for (let [key, value] of user) { */!* alert(`${key}:${value}`); // name:John, then age:30 } @@ -123,7 +123,7 @@ for (let [key, value] of user.entries()) { ```` ### 剩余的 '...' -如果我们不仅要获得第一个值，还要将后续的所有元素也收集起来——我们可以使用三个点 `"..."` 加一个参数来接收“剩余的”元素： +如果我们不只是要获得第一个值，还要将后续的所有元素都收集起来 — 我们可以使用三个点 `"..."` 来再加一个参数来接收“剩余的”元素： ```js run let [name1, name2, *!*...rest*/!*] = ["Julius", "Caesar", *!*"Consul", "of the Roman Republic"*/!*]; @@ -132,17 +132,18 @@ alert(name1); // Julius alert(name2); // Caesar *!* +// 请注意，`rest` 的类型是数组 alert(rest[0]); // Consul alert(rest[1]); // of the Roman Republic alert(rest.length); // 2 */!* ``` -`rest` 变量的值就是数组中剩下的元素组成的数组。不一定要使用变量名 `rest`，我们也可以使用其他的变量名，只要确保它前面有三个点，并且在解构赋值的最后一个参数位置上就行了。 +`rest` 的值就是数组中剩下的元素组成的数组。不一定要使用变量名 `rest`，我们也可以使用其他的变量名，只要确保它前面有三个点，并且在解构赋值的最后一个参数位置上就行了。 ### 默认值 -如果赋值语句中变量的数量多于数组中实际元素的数量，赋值不会报错。未赋值的变量被当作 `undefined`： +如果赋值语句中，变量的数量多于数组中实际元素的数量，赋值不会报错。未赋值的变量被认为是 `undefined`： ```js run *!* @@ -150,9 +151,10 @@ let [firstName, surname] = []; */!* alert(firstName); // undefined +alert(surname); // undefined ``` -如果我们想要提供一个“默认值”给未赋值的变量，我们可以使用 `=` 来提供： +如果我们想要一个“默认”值给未赋值的变量，我们可以使用 `=` 来提供： ```js run *!* @@ -160,8 +162,8 @@ alert(firstName); // undefined let [name = "Guest", surname = "Anonymous"] = ["Julius"]; */!* -alert(name); // Julius (来自数组的值) -alert(surname); // Anonymous (默认值被使用了) +alert(name); // Julius（来自数组的值） +alert(surname); // Anonymous（默认值被使用了） ``` 默认值可以是更加复杂的表达式甚至可以是函数调用，这些表达式或函数只会在这个变量未被赋值的时候才会被计算。 @@ -172,7 +174,7 @@ alert(surname); // Anonymous (默认值被使用了) // 只会提示输入姓氏 let [name = prompt('name?'), surname = prompt('surname?')] = ["Julius"]; -alert(name); // Julius (来自数组) +alert(name); // Julius（来自数组） alert(surname); // 你输入的值 ``` @@ -182,13 +184,13 @@ alert(surname); // 你输入的值 解构赋值同样适用于对象。 -基本的语法是： +基本语法是： ```js -let {var1, var2} = {var1:…, var2…} +let {var1, var2} = {var1:…, var2:…} ``` -在等号右侧有一个已经存在的对象，我们想把它拆开到变量中。等号左侧包含了对象相应属性的一个“模式”。以下简单例子中就是 `{...}` 中一系列变量。 +在等号右侧有一个已经存在的对象，我们想把它拆开到变量中。等号左侧包含了对象相应属性的一个“模式（pattern）”。在简单的情况下，等号左侧的就是 `{...}` 中的变量名列表。 举个例子： @@ -208,16 +210,16 @@ alert(width); // 100 alert(height); // 200 ``` -属性 `options.title`、`options.width` 和 `options.height` 的值被赋给了对应的变量。变量的顺序并不重要，以下的代码也奏效： +属性 `options.title`、`options.width` 和 `options.height` 值被赋给了对应的变量。变量的顺序并不重要，下面这个代码也奏效： ```js -// 改变 let {...} 中属性的顺序 +// 改变 let {...} 中元素的顺序 let {height, width, title} = { title: "Menu", height: 200, width: 100 } ``` -等号左侧的模式可以更加复杂，并给属性和变量之间指定一个映射关系。 +等号左侧的模式（pattern）可以更加复杂，并且指定了属性和变量之间的映射关系。 -如果我们想把一个属性赋值给不同名字的变量，比如把 `options.width` 属性赋值给变量 `w`，那可以使用冒号来指定： +如果我们想把一个属性赋值给另一个名字的变量，比如把 `options.width` 属性赋值给变量 `w`，那么我们可以使用冒号来指定： ```js run let options = { @@ -227,7 +229,7 @@ let options = { }; *!* -// { 原属性：目标变量 } +// { sourceProperty: targetVariable } let {width: w, height: h, title} = options; */!* @@ -240,9 +242,9 @@ alert(w); // 100 alert(h); // 200 ``` -冒号表示了“什么值：赋值给谁”。以上的例子中就是属性 `width` 赋值给 `w`，属性 `height` 赋值给 `h`，属性 `title` 赋值给同名变量。 +冒号表示“什么值：赋值给谁”。上面的例子中，属性 `width` 被赋值给了 `w`，属性 `height` 被赋值给了 `h`，属性 `title` 被赋值给了同名变量。 -对于可能缺失的属性，我们可以使用 `"="` 来指定默认值，如下： +对于可能缺失的属性，我们可以使用 `"="` 设置默认值，如下所示： ```js run let options = { @@ -258,9 +260,9 @@ alert(width); // 100 alert(height); // 200 ``` -就像数组或函数参数一样，默认值可以是表达式甚至是函数调用。只会在这个变量未被赋值的时候才会被计算/调用。 +就像数组或函数参数一样，默认值可以是任意表达式甚至可以是函数调用。它们只会在未提供对应的值时才会被计算/调用。 -以下的代码提示输入宽度 width，但不会提示输入标题 title。 +在下面的代码中，`prompt` 提示输入 `width` 值，但不会提示输入 `title` 值： ```js run let options = { @@ -272,10 +274,10 @@ let {width = prompt("width?"), title = prompt("title?")} = options; */!* alert(title); // Menu -alert(width); // 你输入的宽度值 +alert(width); //（无论 prompt 的结果是什么） ``` -我们也可以结合冒号和等号一起使用： +我们还可以将冒号和等号结合起来： ```js run let options = { @@ -291,11 +293,26 @@ alert(w); // 100 alert(h); // 200 ``` -### 剩余操作符 +如果我们有一个具有很多属性的复杂对象，那么我们可以只提取所需的内容： -如果对象拥有的属性数量比我们提供的变量数量还多怎么办？我们可以只取其中的某一些属性然后把“剩余的”赋值到其他地方吗？ +```js run +let options = { + title: "Menu", + width: 100, + height: 200 +}; + +// 仅提取 title 作为变量 +let { title } = options; + +alert(title); // Menu +``` -关于剩余操作符（即三个点）的文档几乎已经要被列为标准了，但大部分的浏览器还尚未支持。 +### 剩余模式（pattern）"..." + +如果对象拥有的属性数量比我们提供的变量数量还多，该怎么办？我们可以只取其中的某一些属性，然后把“剩余的”赋值到其他地方吗？ + +我们可以使用剩余模式（pattern），就像我们对数组那样。一些较旧的浏览器不支持此功能（例如，使用 Babel 对其进行填充），但可以在现代浏览器中使用。 看起来就像这样： @@ -307,28 +324,28 @@ let options = { }; *!* +// title = 名为 title 的属性 +// rest = 存有剩余属性的对象 let {title, ...rest} = options; */!* -// now title="Menu", rest={height: 200, width: 100} +// 现在 title="Menu", rest={height: 200, width: 100} alert(rest.height); // 200 alert(rest.width); // 100 ``` - - -````smart header="不使用 `let` 的疑难病症" -在以上的例子中，变量都是在赋值前才被声明的：`let {…} = {…}`。当然，我们也可以使用已有的变量。但这里有一个问题需要注意。 +````smart header="不使用 `let` 时的陷阱" +在上面的示例中，变量都是在赋值中通过正确方式声明的：`let {…} = {…}`。当然，我们也可以使用已有的变量，而不用 `let`，但这里有一个陷阱。 以下代码无法正常运行： ```js run let title, width, height; -// 这一行发生错误 +// 这一行发生了错误 {title, width, height} = {title: "Menu", width: 200, height: 100}; ``` -问题在于 JavaScript 把主代码流（即不在其他表达式中）的 `{...}` 当做一个代码块，这样的代码块可以被用来组织语句，如下： +问题在于 JavaScript 把主代码流（即不在其他表达式中）的 `{...}` 当做一个代码块。这样的代码块可以用于对语句分组，如下所示： ```js run { @@ -339,24 +356,25 @@ let title, width, height; } ``` +因此，这里 JavaScript 假定我们有一个代码块，这就是报错的原因。我们需要解构它。 + 为了告诉 JavaScript 这不是一个代码块，我们可以把整个赋值表达式用括号 `(...)` 包起来： ```js run let title, width, height; -// 现在就正确了 +// 现在就可以了 *!*(*/!*{title, width, height} = {title: "Menu", width: 200, height: 100}*!*)*/!*; alert( title ); // Menu ``` - ```` ## 嵌套解构 -如果一个对象或数组包含了其他的对象和数组，我们可以在等号左侧使用更复杂的模式来抽取深层的数据。 +如果一个对象或数组嵌套了其他的对象和数组，我们可以在等号左侧使用更复杂的模式（pattern）来提取更深层的数据。 -在以下代码中 `options` 的属性 `size` 是另一个对象，属性 `items` 是另一个数组。赋值语句中等号左侧的模式拥有相同的结构： +在下面的代码中，`options` 的属性 `size` 是另一个对象，属性 `items` 是另一个数组。赋值语句中等号左侧的模式（pattern）具有相同的结构以从中提取值： ```js run let options = { @@ -365,17 +383,17 @@ let options = { height: 200 }, items: ["Cake", "Donut"], - extra: true // 一些不会被解构的额外属性 + extra: true }; -// 为了清晰起见，解构赋值语句被写成多行 +// 为了清晰起见，解构赋值语句被写成多行的形式 let { size: { // 把 size 赋值到这里 width, height }, items: [item1, item2], // 把 items 赋值到这里 - title = "Menu" // 在对象中不存在的属性（会使用默认值） + title = "Menu" // 在对象中不存在（使用默认值） } = options; alert(title); // Menu @@ -385,19 +403,13 @@ alert(item1); // Cake alert(item2); // Donut ``` -除了 `extra` 属性的整个 `options` 对象都能被赋值给对应的变量。 +对象 `options` 的所有属性，除了 `extra` 属性在等号左侧不存在，都被赋值给了对应的变量： ![](destructuring-complex.svg) 最终，我们得到了 `width`、`height`、`item1`、`item2` 和具有默认值的 `title` 变量。 -有一个拥有很多属性的复杂对象，我们只想要抽取我们所需要的其中某些属性。这在解构赋值语句中是很常见的。 - -甚至还可能是这样的情况： -```js -// 将 size 作为一个整体取出赋值给一个变量，忽略剩下的所有 -let { size } = options; -``` +注意，`size` 和 `items` 没有对应的变量，因为我们取的是它们的内容。 ## 智能函数参数 From dcac290840e99f92160a6299b2559c6131318849 Mon Sep 17 00:00:00 2001 From: LeviDing Date: Thu, 20 Feb 2020 16:10:26 +0800 Subject: [PATCH 6/9] Update article.md --- .../10-destructuring-assignment/article.md | 57 ++++++++++--------- 1 file changed, 29 insertions(+), 28 deletions(-) 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 625e4f996b..cf5c972131 100644 --- a/1-js/05-data-types/10-destructuring-assignment/article.md +++ b/1-js/05-data-types/10-destructuring-assignment/article.md @@ -413,9 +413,9 @@ alert(item2); // Donut ## 智能函数参数 -有时候一个函数可能有很多参数，大部分的参数是可选的，对用户界面来说就尤其如此。想象一下这种情况：有一个创建菜单的函数，可能有宽度参数，高度参数，标题参数和菜单中的菜单项等等。 +有时，一个函数有很多参数，其中大部分的参数都是可选的。对用户界面来说更是如此。想象一个创建菜单的函数。它可能具有宽度参数，高度参数，标题参数和项目列表等。 -以下是这种函数的一个不好的写法： +下面是实现这种函数的一个很不好的写法： ```js function showMenu(title = "Untitled", width = 200, height = 100, items = []) { @@ -423,15 +423,16 @@ function showMenu(title = "Untitled", width = 200, height = 100, items = []) { } ``` -现实情况下的问题就是你怎么记得住这么多参数的顺序，通常集成开发环境工具（IDE）会尽力帮助我们，特别是当代码有良好的文档注释的时候，但… 另一个问题就是当大部分的参数采用默认值就好的情况下，怎么调用这个函数。 +在实际开发中存在一个问题就是你怎么记得住这么多参数的顺序。通常集成开发环境工具（IDE）会尽力帮助我们，特别是当代码有良好的文档注释的时候，但是…… 另一个问题就是，当大部分的参数采用默认值就好的情况下，怎么调用这个函数。 难道像这样？ ```js +// 在采用默认值就可以的位置设置 undefined showMenu("My Menu", undefined, undefined, ["Item1", "Item2"]) ``` -这太难看了。而且当我们处理更多参数的时候可读性还会变得更差。 +这太难看了。而且，当我们处理更多参数的时候可读性会变得很差。 解构赋值语法前来救援！ @@ -444,9 +445,9 @@ let options = { items: ["Item1", "Item2"] }; -// ...然后函数马上把对象展开成变量 +// ……然后函数马上把对象展开成变量 function showMenu(*!*{title = "Untitled", width = 200, height = 100, items = []}*/!*) { - // title, items – 从 options 参数提取出来, + // title, items – 提取于 options， // width, height – 使用默认值 alert( `${title} ${width} ${height}` ); // My Menu 200 100 alert( items ); // Item1, Item2 @@ -455,7 +456,7 @@ function showMenu(*!*{title = "Untitled", width = 200, height = 100, items = []} showMenu(options); ``` -我们同样可以对含有嵌套对象的对象使用更加复杂的结构语句和冒号映射： +我们同样可以使用带有嵌套对象和冒号映射的更加复杂的解构： ```js run let options = { @@ -466,9 +467,9 @@ let options = { *!* function showMenu({ title = "Untitled", - width: w = 100, // width 赋值给 w - height: h = 200, // height 赋值给 h - items: [item1, item2] // items 第一个元素赋值给 item1, 第二个元素赋值给 item2 + width: w = 100, // width goes to w + height: h = 200, // height goes to h + items: [item1, item2] // items first element goes to item1, second to item2 }) { */!* alert( `${title} ${w} ${h}` ); // My Menu 100 200 @@ -479,54 +480,54 @@ function showMenu({ showMenu(options); ``` -语法和解构赋值是一样的： +完整语法和解构赋值是一样的： ```js function({ - incomingProperty: parameterName = defaultValue + incomingProperty: varName = defaultValue ... }) ``` -请注意，这种解构假定了调用 `showMenu()` 函数时传递了一个参数，如果我们想让所有的参数都使用默认值，那我们应该传递一个空的对象： +对于参数对象，属性 `incomingProperty` 对应的变量是 `varName`，默认值是 `defaultValue`。 -```js -showMenu({}); +请注意，这种解构假定了 `showMenu()` 函数确实存在参数。如果我们想让所有的参数都使用默认值，那我们应该传递一个空对象： +```js +showMenu({}); // 不错，所有值都取默认值 showMenu(); // 这样会导致错误 ``` -我们可以通过指定空对象 `{}` 为整个函数参数的默认值： - +我们可以通过指定空对象 `{}` 为整个参数对象的默认值来解决这个问题： ```js run -// 清晰起见，精简了部分参数 -function showMenu(*!*{ title = "Menu", width = 100, height = 200 } = {}*/!*) { +function showMenu({ title = "Menu", width = 100, height = 200 }*!* = {}*/!*) { alert( `${title} ${width} ${height}` ); } showMenu(); // Menu 100 200 ``` -在以上的代码中，整个参数对象默认就是 `{}`，因此总会有对象可以用来解构。 +在上面的代码中，整个参数对象的默认是 `{}`，因此总会有内容可以用来解构。 ## 总结 -- 解构赋值允许将对象或数组立即映射到多个变量上。 -- 解构对象的语法： - +- 解构赋值可以立即将一个对象或数组映射到多个变量上。 +- 解构对象的完整语法： ```js - let {prop : varName = default, ...} = object + let {prop : varName = default, ...rest} = object ``` - 这表示属性 `prop` 会被赋值给变量 `varName`，如果没有这个属性的话，就会使用 `default` 的值。 + 这表示属性 `prop` 会被赋值给变量 `varName`，如果没有这个属性的话，就会使用默认值 `default`。 + + 没有对应映射饿对象属性被复制到 `rest` 对象。 -- 解构数组的语法： +- 解构数组的完整语法： ```js let [item1 = default, item2, ...rest] = array ``` - 数组的第一个元素赋值给 `item1`，第二个元素赋值给 `item2`，剩下的所有组成另一个数组 `rest`。 + 数组的第一个元素被赋值给 `item1`，第二个元素被赋值给 `item2`，剩下的所有元素被复制到另一个数组 `rest`。 -- 更多复杂的案例情况下，等号左侧必须和等号右侧有相同的结构。 +- 从嵌套数组/对象中提取数据也是可以的，此时等号左侧必须和等号右侧有相同的结构。 From 7363451bcf17ff1e868aa13184551969d2f66976 Mon Sep 17 00:00:00 2001 From: LeviDing Date: Thu, 20 Feb 2020 16:16:21 +0800 Subject: [PATCH 7/9] Update task.md --- .../10-destructuring-assignment/1-destruct-user/task.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/1-js/05-data-types/10-destructuring-assignment/1-destruct-user/task.md b/1-js/05-data-types/10-destructuring-assignment/1-destruct-user/task.md index f3e3704324..7da1ca67a7 100644 --- a/1-js/05-data-types/10-destructuring-assignment/1-destruct-user/task.md +++ b/1-js/05-data-types/10-destructuring-assignment/1-destruct-user/task.md @@ -4,7 +4,7 @@ importance: 5 # 解构赋值 -有以下对象： +我们有一个对象： ```js let user = { @@ -16,10 +16,10 @@ let user = { 写一个解构赋值语句使得： - `name` 属性赋值给变量 `name`。 -- `years` 属性赋值给 `age`。 -- `isAdmin` 属性赋值给变量 `isAdmin`（如果属性缺失则赋值为 false）。 +- `years` 属性赋值给变量 `age`。 +- `isAdmin` 属性赋值给变量 `isAdmin`（如果属性缺失则取默认值 false）。 -赋值语句后的值必须是： +下面是赋值完成后的值的情况： ```js let user = { name: "John", years: 30 }; From dfddfe4faa206890367d2feb70242bb436da6e8c Mon Sep 17 00:00:00 2001 From: LeviDing Date: Thu, 20 Feb 2020 16:19:38 +0800 Subject: [PATCH 8/9] Update solution.md --- .../10-destructuring-assignment/1-destruct-user/solution.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/05-data-types/10-destructuring-assignment/1-destruct-user/solution.md b/1-js/05-data-types/10-destructuring-assignment/1-destruct-user/solution.md index cc226e7c5f..5397b75057 100644 --- a/1-js/05-data-types/10-destructuring-assignment/1-destruct-user/solution.md +++ b/1-js/05-data-types/10-destructuring-assignment/1-destruct-user/solution.md @@ -10,4 +10,4 @@ let {name, years: age, isAdmin = false} = user; alert( name ); // John alert( age ); // 30 alert( isAdmin ); // false -``` \ No newline at end of file +``` From 5e82d670a9790765f93e7e1e934a721d6543f45a Mon Sep 17 00:00:00 2001 From: LeviDing Date: Thu, 20 Feb 2020 16:24:17 +0800 Subject: [PATCH 9/9] Update task.md --- .../10-destructuring-assignment/6-max-salary/task.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/1-js/05-data-types/10-destructuring-assignment/6-max-salary/task.md b/1-js/05-data-types/10-destructuring-assignment/6-max-salary/task.md index f52a7f19fb..eaf987bcc1 100644 --- a/1-js/05-data-types/10-destructuring-assignment/6-max-salary/task.md +++ b/1-js/05-data-types/10-destructuring-assignment/6-max-salary/task.md @@ -4,7 +4,7 @@ importance: 5 # 最高薪资 -以下是一个 `salaries` 对象： +这儿有一个 `salaries` 对象： ```js let salaries = { @@ -14,9 +14,9 @@ let salaries = { }; ``` -新建一个函数 `topSalary(salaries)`，返回拥有最高薪资的人。 +新建一个函数 `topSalary(salaries)`，返回收入最高的人的姓名。 - 如果 `salaries` 是空的，函数应该返回 `null`。 -- 如果有多个最高薪资的人，返回其中任意一个。 +- 如果有多个收入最高的人，返回其中任意一个即可。 -提示：使用 `Object.entries` 和解构语法来遍历键/值对。 +P.S. 使用 `Object.entries` 和解构语法来遍历键/值对。