Merge branch 'master' into update-part-1

Author: leviding

1-js/02-first-steps/16-function-expressions/article.md

@@ -36,7 +36,7 @@ alert( sayHi ); // 显示函数代码
 */!*
 ```
 
-注意，最后一行代码并不会运行函数，因为 `sayHi` 后没有括号。在其他编程语言中，只要提到函数的名称都会导致函数的调用执行，但 JavaScript 可不是这样。
+注意，最后一行代码并不会运行函数，因为 `sayHi` 后没有括号。在某些编程语言中，只要提到函数的名称都会导致函数的调用执行，但 JavaScript 可不是这样。
 
 在 JavaScript 中，函数是一个值，所以我们可以把它当成值对待。上面代码显示了一段字符串值，即函数的源码。
 

1-js/04-object-basics/06-constructor-new/article.md

@@ -64,10 +64,10 @@ let user = {
 
 这是构造器的主要目的 —— 实现可重用的对象创建代码。
 
-让我们再强调一遍 —— 从技术上讲，任何函数都可以用作构造器。即：任何函数都可以通过 `new` 来运行，它会执行上面的算法。“首字母大写”是一个共同的约定，以明确表示一个函数将被使用 `new` 来运行。
+让我们再强调一遍 —— 从技术上讲，任何函数（除了箭头函数，它没有自己的 `this`）都可以用作构造器。即可以通过 `new` 来运行，它会执行上面的算法。“首字母大写”是一个共同的约定，以明确表示一个函数将被使用 `new` 来运行。
 
 ````smart header="new function() { ... }"
-如果我们有许多行用于创建单个复杂对象的代码，我们可以将它们封装在构造函数中，像这样：
+如果我们有许多行用于创建单个复杂对象的代码，我们可以将它们封装在一个立即调用的构造函数中，像这样：
 
 ```js
 let user = new function() {
@@ -80,7 +80,7 @@ let user = new function() {
 };
 ```
 
-构造器不能被再次调用，因为它不保存在任何地方，只是被创建和调用。因此，这个技巧旨在封装构建单个对象的代码，而无需将来重用。
+这个构造函数不能被再次调用，因为它不保存在任何地方，只是被创建和调用。因此，这个技巧旨在封装构建单个对象的代码，而无需将来重用。
 ````
 
 ## 构造器模式测试：new.target

1-js/05-data-types/02-number/9-random-int-min-max/task.md

@@ -4,7 +4,7 @@ importance: 2
 
 # 从 min 到 max 的随机整数
 
-创建一个函数 `randomInteger(min，max)`，该函数会生成一个范围在 `min` 到 `max` 中的随机整数，包括 `min` 和 `max`。
+创建一个函数 `randomInteger(min, max)`，该函数会生成一个范围在 `min` 到 `max` 中的随机整数，包括 `min` 和 `max`。
 
 在 `min..max` 范围中的所有数字的出现概率必须相同。
 

1-js/05-data-types/10-destructuring-assignment/article.md

@@ -122,7 +122,7 @@ for (let [key, value] of user) {
 ```
 ````
 
-```smart header="交换变量值的技巧"
+````smart header="交换变量值的技巧"
 一个用于交换变量值的典型技巧：
 
 ```js run
@@ -138,6 +138,7 @@ alert(`${guest} ${admin}`); // Pete Jane（成功交换！）
 这里我们创建了一个由两个变量组成的临时数组，并且立即以交换了的顺序对其进行了解构。
 
 我们可以用这种方式交换两个以上的变量。
+````
 
 
 ### 剩余的 '...'

1-js/05-data-types/11-date/article.md

@@ -17,7 +17,7 @@
     ```
 
 `new Date(milliseconds)`
-: 创建一个 `Date` 对象，其时间等于 1970-01-01 00:00:00 UTC+0 再过一毫秒（1/1000 秒）。
+: 创建一个 `Date` 对象，其时间等于 1970 年 1 月 1 日 UTC+0 之后经过的毫秒数（1/1000 秒）。
 
     ```js run
     // 0 表示 01.01.1970 UTC+0

1-js/11-async/05-promise-api/article.md

@@ -100,7 +100,7 @@ Promise.all([
 ```
 
 ````smart header="`Promise.all(iterable)` 允许在 `iterable` 中使用 non-promise 的“常规”值"
-通常，`Promise.all(...)` 接受可迭代对象（iterable）的 promise（大多数情况下是数组）。但是，如果这些对象中的任意一个都不是 promise，那么它将被“按原样”传递给结果数组。
+通常，`Promise.all(...)` 接受含有 promise 项的可迭代对象（大多数情况下是数组）作为参数。但是，如果这些对象中的任何一个不是 promise，那么它将被“按原样”传递给结果数组。
 
 例如，这里的结果是 `[1, 2, 3]`：
 

2-ui/1-document/03-dom-navigation/3-navigation-links-which-null/solution.md

@@ -1,4 +1,4 @@
-1. 是的，这是真的。`elem.lastChild` 就是最后一个元素，它没有 `nextSibling`。
+1. 是的，这是真的。`elem.lastChild` 就是最后一个节点，它没有 `nextSibling`。
 2. 不，这是错的，因为  `elem.children[0]` 是元素中的第一个子元素。但是在它前面可能存在非元素的节点。所以 `previousSibling` 可能是一个文本节点。
 
 请注意，对于这两种情况，如果没有子节点，那么就会报错。

2-ui/1-document/04-searching-elements-dom/article.md

@@ -312,15 +312,15 @@ document.getElementsByTagName('input')[0].value = 5;
 
 ## 总结
 
-有 6 种主要的方法，可以在 DOM 中搜素节点：
+有 6 种主要的方法，可以在 DOM 中搜索元素节点：
 
 <table>
 <thead>
 <tr>
-<td>Method</td>
-<td>Searches by...</td>
-<td>Can call on an element?</td>
-<td>Live?</td>
+<td>方法名</td>
+<td>搜索方式</td>
+<td>可以在元素上调用？</td>
+<td>实时的？</td>
 </tr>
 </thead>
 <tbody>

2-ui/3-event-details/7-keyboard-events/article.md

@@ -122,7 +122,7 @@ document.addEventListener('keydown', function(event) {
 
 ## 默认行为
 
-默认行为各不相同，因为键盘可能会启动许多可能的东西。
+默认行为各不相同，因为键盘可能会触发很多可能的东西。
 
 例如：
 
@@ -139,12 +139,16 @@ document.addEventListener('keydown', function(event) {
 ```html autorun height=60 run
 <script>
 function checkPhoneKey(key) {
-  return (key >= '0' && key <= '9') || key == '+' || key == '(' || key == ')' || key == '-';
+  return (key >= '0' && key <= '9') || ['+','(',')','-'].includes(key);
 }
 </script>
-<input *!*onkeydown="return checkPhoneKey(event.key)"*/!* placeholder="Phone, please" type="tel">
+<input *!*onkeydown="return checkPhoneKey(event.key)"*/!* placeholder="请输入手机号" type="tel">
 ```
 
+这里 `onkeydown` 的处理程序使用 `checkPhoneKey` 来检查被按下的按键。如果它是有效的（`0..9` 或 `+-()` 之一），那么将返回 `true`，否则返回 `false`。
+
+我们都知道，像上面那样，从事件处理程序返回 `false` 会阻止事件的默认行为，所以如果按下的按键未通过案件检查，那么 `<input>` 中什么都不会出现（从事件处理程序返回 `true` 不会对任何行为产生影响，只有返回 `false` 会产生对应的影响）。
+
 请注意，像 `key:Backspace`，`key:Left`，`key:Right`，`key:Ctrl+V` 这样的特殊按键在输入中无效。这是严格过滤器 `checkPhoneKey` 的副作用。
 
 让我们将过滤条件放松一下：
@@ -153,8 +157,8 @@ function checkPhoneKey(key) {
 ```html autorun height=60 run
 <script>
 function checkPhoneKey(key) {
-  return (key >= '0' && key <= '9') || key == '+' || key == '(' || key == ')' || key == '-' ||
-    key == 'ArrowLeft' || key == 'ArrowRight' || key == 'Delete' || key == 'Backspace';
+  return (key >= '0' && key <= '9') ||
+    ['+','(',')','-','ArrowLeft','ArrowRight','Delete','Backspace'].includes(key);
 }
 </script>
 <input onkeydown="return checkPhoneKey(event.key)" placeholder="Phone, please" type="tel">

3-frames-and-windows/06-clickjacking/article.md

@@ -203,7 +203,7 @@ Set-Cookie: authorization=secret; samesite
 
 ……那么，当在另一个网站中的 iframe 中打开 Facebook 时，此类 cookie 将不会被发送。因此，攻击将失败。
 
-当不实用 cookie 时，`samesite` cookie 特性将不会有任何影响。这可以使其他网站能够轻松地在 iframe 中显示我们公开的、未进行身份验证的页面。
+当不使用 cookie 时，`samesite` cookie 特性将不会有任何影响。这可以使其他网站能够轻松地在 iframe 中显示我们公开的、未进行身份验证的页面。
 
 然而，这也可能会使得劫持攻击在少数情况下起作用。例如，通过检查 IP 地址来防止重复投票的匿名投票网站仍然会受到点击劫持的攻击，因为它不使用 cookie 对用户身份进行验证。
 

5-network/07-url/article.md

@@ -199,7 +199,7 @@ alert(url); // https://google.com/search?q=Rock&Roll
 因此，对于每个搜索参数，我们应该使用 `encodeURIComponent`，以将其正确地插入到 URL 字符串中。最安全的方式是对 name 和 value 都进行编码，除非我们能够绝对确保它只包含允许的字符。
 
 ````smart header="`encode*` 与 `URL` 之间的编码差异"
-类 [URL](https://url.spec.whatwg.org/#url-class) 和 [URLSearchParams](https://url.spec.whatwg.org/#interface-urlsearchparams) 基于最新的 URL 规范：[RFC3986](https://tools.ietf.org/html/rfc3986)，而 `encode*` 函数是基于过时的 [RFC2396](https://www.ietf.org/rfc/rfc2396.txt)。
+[URL](https://url.spec.whatwg.org/#url-class) 和 [URLSearchParams](https://url.spec.whatwg.org/#interface-urlsearchparams) 基于最新的 URL 规范：[RFC3986](https://tools.ietf.org/html/rfc3986)，而 `encode*` 函数是基于过时的 [RFC2396](https://www.ietf.org/rfc/rfc2396.txt)。
 
 它们之间有一些区别，例如对 IPv6 地址的编码方式不同：
 

5-network/11-websocket/article.md

@@ -117,7 +117,7 @@ WebSocket 可能还有其他 header，`Sec-WebSocket-Extensions` 和 `Sec-WebSoc
 
 例如：
 
-- `Sec-WebSocket-Extensions: deflate-frame` 表示浏览器支持数据压缩。扩展与传输数据有关，扩展了 WebSocket 协议的功能。`Sec-WebSocket-Extensions` header 有浏览器自动发送，其中包含其支持的所有扩展的列表。
+- `Sec-WebSocket-Extensions: deflate-frame` 表示浏览器支持数据压缩。扩展与传输数据有关，扩展了 WebSocket 协议的功能。`Sec-WebSocket-Extensions` header 由浏览器自动发送，其中包含其支持的所有扩展的列表。
 
 - `Sec-WebSocket-Protocol: soap, wamp` 表示我们不仅要传输任何数据，还要传输 [SOAP](http://en.wikipedia.org/wiki/SOAP) 或 WAMP（"The WebSocket Application Messaging Protocol"）协议中的数据。WebSocket 子协议已经在 [IANA catalogue](http://www.iana.org/assignments/websocket/websocket.xml) 中注册。
 

6-data-storage/03-indexeddb/article.md

@@ -538,7 +538,7 @@ objectStore.createIndex(name, keyPath, [options]);
 - **`keyPath`** —— 索引应该跟踪的对象字段的路径（我们将根据该字段进行搜索）。
 - **`option`** —— 具有以下属性的可选对象：
   - **`unique`** —— 如果为true，则存储中只有一个对象在 `keyPath` 上具有给定值。如果我们尝试添加重复项，索引将生成错误。
-  - **`multiEntry`** —— 只有 `keypath` 上的值是数组才时使用。这时，默认情况下，索引将默认把整个数组视为键。但是如果 `multiEntry` 为 true，那么索引将为该数组中的每个值保留一个存储对象的列表。所以数组成员成为了索引键。
+  - **`multiEntry`** —— 只有 `keypath` 上的值是数组时才使用。这时，默认情况下，索引将默认把整个数组视为键。但是如果 `multiEntry` 为 true，那么索引将为该数组中的每个值保留一个存储对象的列表。所以数组成员成为了索引键。
 
 在我们的示例中，是按照 `id` 键存储图书的。
 

8-web-components/5-slots-composition/article.md

@@ -110,7 +110,7 @@ customElements.define('user-card', class extends HTMLElement {
 alert( document.querySelector('user-card span').length ); // 2
 ```
 
-因此，扁平化 DOM 是通过插入插槽从 shadow DOM 派生出来的。浏览器渲染它并且用于样式继承、事件传播。但是 JavaScript 在展平前仍按原样看到文档。
+因此，扁平化 DOM 是通过插入插槽从 shadow DOM 派生出来的。浏览器渲染它并且用于样式继承、事件传播。但是 JavaScript 在扁平前仍按原样看到文档。
 
 ````warn header="仅顶层子元素可以设置 slot=\"...\" 特性"
 `slot="..."` 属性仅仅对 shadow host 的直接子代 (在我们的例子中的 `<user-card>` 元素) 有效。对于嵌套元素它将被忽略。

9-regular-expressions/02-regexp-character-classes/article.md

@@ -1,6 +1,6 @@
 # 字符类
 
-考虑一个实际的任务 - 我们有一个电话号码，例如 `"+7(903)-123-45-67"`，我们需要将其转换为纯数字：`79035419441`。
+考虑一个实际的任务 - 我们有一个电话号码，例如 `"+7(903)-123-45-67"`，我们需要将其转换为纯数字：`79031234567`。
 
 为此，我们可以查找并删除所有非数字的内容。字符类可以帮助解决这个问题。
 
@@ -30,7 +30,7 @@ let regexp = /\d/g;
 alert( str.match(regexp) ); // array of matches: 7,9,0,3,1,2,3,4,5,6,7
 
 // let's make the digits-only phone number of them:
-alert( str.match(regexp).join('') ); // 79035419441
+alert( str.match(regexp).join('') ); // 79031234567
 ```
 
 这是数字的字符类。还有其他字符类。