diff --git a/files/es/_redirects.txt b/files/es/_redirects.txt index 3d1771fbdb2dd5..a33be45ebd35dc 100644 --- a/files/es/_redirects.txt +++ b/files/es/_redirects.txt @@ -2318,12 +2318,15 @@ /es/docs/Web/JavaScript/Primeros_Pasos /es/docs/Learn/Getting_started_with_the_web/JavaScript_basics /es/docs/Web/JavaScript/Reference/About /es/docs/conflicting/Web/JavaScript/Reference /es/docs/Web/JavaScript/Reference/Classes/Private_class_fields /es/docs/Web/JavaScript/Reference/Classes/Private_properties -/es/docs/Web/JavaScript/Reference/Errors/Bad_octal /es/docs/Web/JavaScript/Reference/Errors/Deprecated_octal -/es/docs/Web/JavaScript/Reference/Errors/Falta_puntoycoma_antes_de_declaracion /es/docs/Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement +/es/docs/Web/JavaScript/Reference/Errors/Bad_octal /es/docs/Web/JavaScript/Reference/Errors/Deprecated_octal_literal +/es/docs/Web/JavaScript/Reference/Errors/Deprecated_octal /es/docs/Web/JavaScript/Reference/Errors/Deprecated_octal_literal +/es/docs/Web/JavaScript/Reference/Errors/Falta_puntoycoma_antes_de_declaracion /es/docs/conflicting/Web/JavaScript/Reference/Errors/Unexpected_token /es/docs/Web/JavaScript/Reference/Errors/Indicador_regexp_no-val /es/docs/Web/JavaScript/Reference/Errors/Bad_regexp_flag /es/docs/Web/JavaScript/Reference/Errors/Malformed_formal_parameter /es/docs/conflicting/Web/JavaScript/Reference/Errors/Missing_formal_parameter +/es/docs/Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement /es/docs/conflicting/Web/JavaScript/Reference/Errors/Unexpected_token /es/docs/Web/JavaScript/Reference/Errors/Not_a_codepoint /es/docs/Web/JavaScript/Reference/Errors/Not_a_valid_code_point /es/docs/Web/JavaScript/Reference/Errors/Strict_y_parámetros_complejos /es/docs/Web/JavaScript/Reference/Errors/Strict_non_simple_params +/es/docs/Web/JavaScript/Reference/Errors/Undefined_prop /es/docs/orphaned/Web/JavaScript/Reference/Errors/Undefined_prop /es/docs/Web/JavaScript/Reference/Errors/caracter_ilegal /es/docs/Web/JavaScript/Reference/Errors/Illegal_character /es/docs/Web/JavaScript/Reference/Global_Objects/Array/toSource /es/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Array/toString /es/docs/Web/JavaScript/Reference/Global_Objects/Boolean/toSource /es/docs/Web/JavaScript/Reference/Global_Objects/Boolean/toString diff --git a/files/es/_wikihistory.json b/files/es/_wikihistory.json index 42b3a9faf91bd3..d0500f15b67518 100644 --- a/files/es/_wikihistory.json +++ b/files/es/_wikihistory.json @@ -10532,7 +10532,7 @@ "modified": "2020-09-01T13:12:41.234Z", "contributors": ["Nachec"] }, - "Web/JavaScript/Reference/Errors/Deprecated_octal": { + "Web/JavaScript/Reference/Errors/Deprecated_octal_literal": { "modified": "2020-03-12T19:45:41.442Z", "contributors": ["HaroldV"] }, @@ -10569,10 +10569,6 @@ "modified": "2020-03-12T19:46:54.683Z", "contributors": ["hiuxmaycry", "ivandevp"] }, - "Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement": { - "modified": "2020-03-12T19:46:13.102Z", - "contributors": ["jonatanroot", "Lunacye"] - }, "Web/JavaScript/Reference/Errors/More_arguments_needed": { "modified": "2020-03-12T19:49:21.407Z", "contributors": ["dragonmenorka"] @@ -10617,10 +10613,6 @@ "modified": "2020-03-12T19:45:04.878Z", "contributors": ["josegarciaclm95"] }, - "Web/JavaScript/Reference/Errors/Undefined_prop": { - "modified": "2020-03-12T19:47:46.684Z", - "contributors": ["antixsuperstar"] - }, "Web/JavaScript/Reference/Errors/Unexpected_token": { "modified": "2020-03-12T19:46:40.968Z", "contributors": ["dariomaim"] @@ -14378,6 +14370,10 @@ "modified": "2019-10-12T12:26:22.919Z", "contributors": ["JGmr5"] }, + "conflicting/Web/JavaScript/Reference/Errors/Unexpected_token": { + "modified": "2020-03-12T19:46:13.102Z", + "contributors": ["jonatanroot", "Lunacye"] + }, "conflicting/Web/JavaScript/Reference/Global_Objects/Array/toString": { "modified": "2019-03-23T22:08:25.338Z", "contributors": ["teoli", "pedro-otero"] @@ -15334,6 +15330,10 @@ "modified": "2019-03-23T22:46:15.359Z", "contributors": ["juanbrujo", "raecillacastellana", "vltamara"] }, + "orphaned/Web/JavaScript/Reference/Errors/Undefined_prop": { + "modified": "2020-03-12T19:47:46.684Z", + "contributors": ["antixsuperstar"] + }, "orphaned/Web/JavaScript/Reference/Global_Objects/Array/prototype": { "modified": "2020-10-15T21:35:31.913Z", "contributors": ["lajaso", "humbertaco"] diff --git a/files/es/web/javascript/reference/errors/missing_semicolon_before_statement/index.md b/files/es/conflicting/web/javascript/reference/errors/unexpected_token/index.md similarity index 93% rename from files/es/web/javascript/reference/errors/missing_semicolon_before_statement/index.md rename to files/es/conflicting/web/javascript/reference/errors/unexpected_token/index.md index 967151d0c9ff97..74e78030a53090 100644 --- a/files/es/web/javascript/reference/errors/missing_semicolon_before_statement/index.md +++ b/files/es/conflicting/web/javascript/reference/errors/unexpected_token/index.md @@ -1,6 +1,7 @@ --- title: "SyntaxError: missing ; before statement" -slug: Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement +slug: conflicting/Web/JavaScript/Reference/Errors/Unexpected_token +original_slug: Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement --- {{jsSidebar("Errores")}} diff --git a/files/es/web/javascript/reference/errors/undefined_prop/index.md b/files/es/orphaned/web/javascript/reference/errors/undefined_prop/index.md similarity index 93% rename from files/es/web/javascript/reference/errors/undefined_prop/index.md rename to files/es/orphaned/web/javascript/reference/errors/undefined_prop/index.md index edea22c6c2d42d..a9c1177d902878 100644 --- a/files/es/web/javascript/reference/errors/undefined_prop/index.md +++ b/files/es/orphaned/web/javascript/reference/errors/undefined_prop/index.md @@ -1,6 +1,7 @@ --- title: 'ReferenceError: reference to undefined property "x"' -slug: Web/JavaScript/Reference/Errors/Undefined_prop +slug: orphaned/Web/JavaScript/Reference/Errors/Undefined_prop +original_slug: Web/JavaScript/Reference/Errors/Undefined_prop --- {{jsSidebar("Errors")}} diff --git a/files/es/web/javascript/reference/errors/deprecated_octal/index.md b/files/es/web/javascript/reference/errors/deprecated_octal_literal/index.md similarity index 92% rename from files/es/web/javascript/reference/errors/deprecated_octal/index.md rename to files/es/web/javascript/reference/errors/deprecated_octal_literal/index.md index 53528701fbde0a..073e13d99b9595 100644 --- a/files/es/web/javascript/reference/errors/deprecated_octal/index.md +++ b/files/es/web/javascript/reference/errors/deprecated_octal_literal/index.md @@ -1,6 +1,7 @@ --- title: 'SyntaxError: "x" is not a legal ECMA-262 octal constant' -slug: Web/JavaScript/Reference/Errors/Deprecated_octal +slug: Web/JavaScript/Reference/Errors/Deprecated_octal_literal +original_slug: Web/JavaScript/Reference/Errors/Deprecated_octal --- {{jsSidebar("Errors")}} diff --git a/files/zh-cn/_redirects.txt b/files/zh-cn/_redirects.txt index 10880690a5d6aa..9b26dc2a3b426f 100644 --- a/files/zh-cn/_redirects.txt +++ b/files/zh-cn/_redirects.txt @@ -2525,14 +2525,17 @@ /zh-CN/docs/Web/JavaScript/Reference/Date/toJSON /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date/toJSON /zh-CN/docs/Web/JavaScript/Reference/Date/valueOf /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date/valueOf /zh-CN/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features/The_legacy_Iterator_protocol /zh-CN/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features -/zh-CN/docs/Web/JavaScript/Reference/Errors/Bad_octal /zh-CN/docs/Web/JavaScript/Reference/Errors/Deprecated_octal +/zh-CN/docs/Web/JavaScript/Reference/Errors/Bad_octal /zh-CN/docs/Web/JavaScript/Reference/Errors/Deprecated_octal_literal /zh-CN/docs/Web/JavaScript/Reference/Errors/Bad_return_or_yield /zh-CN/docs/Web/JavaScript/Reference/Errors/Bad_return /zh-CN/docs/Web/JavaScript/Reference/Errors/Cant_access_property /zh-CN/docs/Web/JavaScript/Reference/Errors/Unexpected_type /zh-CN/docs/Web/JavaScript/Reference/Errors/Deprecated_String_generics /zh-CN/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features /zh-CN/docs/Web/JavaScript/Reference/Errors/Deprecated_expression_closures /zh-CN/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features +/zh-CN/docs/Web/JavaScript/Reference/Errors/Deprecated_octal /zh-CN/docs/Web/JavaScript/Reference/Errors/Deprecated_octal_literal /zh-CN/docs/Web/JavaScript/Reference/Errors/Deprecated_toLocaleFormat /zh-CN/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features /zh-CN/docs/Web/JavaScript/Reference/Errors/Malformed_formal_parameter /zh-CN/docs/Web/JavaScript/Reference/Errors/Missing_formal_parameter +/zh-CN/docs/Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement /zh-CN/docs/Web/JavaScript/Reference/Errors/Unexpected_token /zh-CN/docs/Web/JavaScript/Reference/Errors/Not_a_codepoint /zh-CN/docs/Web/JavaScript/Reference/Errors/Not_a_valid_code_point +/zh-CN/docs/Web/JavaScript/Reference/Errors/Unterminated_string_literal /zh-CN/docs/Web/JavaScript/Reference/Errors/String_literal_EOL /zh-CN/docs/Web/JavaScript/Reference/Errors/不能添加属性 /zh-CN/docs/Web/JavaScript/Reference/Errors/Cant_assign_to_property /zh-CN/docs/Web/JavaScript/Reference/Function /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function /zh-CN/docs/Web/JavaScript/Reference/Function/apply /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/apply diff --git a/files/zh-cn/_wikihistory.json b/files/zh-cn/_wikihistory.json index 6ef710dc7aeca6..b24619f86166a3 100644 --- a/files/zh-cn/_wikihistory.json +++ b/files/zh-cn/_wikihistory.json @@ -23067,10 +23067,6 @@ "modified": "2020-10-15T21:55:00.550Z", "contributors": ["zhangchen", "WayneCui"] }, - "Web/HTTP/Headers/Large-Allocation": { - "modified": "2020-10-15T21:56:09.177Z", - "contributors": ["wyapx", "crper", "shevacjs"] - }, "Web/HTTP/Headers/Last-Modified": { "modified": "2020-10-15T21:55:00.234Z", "contributors": ["WayneCui"] @@ -24991,7 +24987,7 @@ "modified": "2020-03-12T19:45:21.241Z", "contributors": ["Ende93"] }, - "Web/JavaScript/Reference/Errors/Deprecated_octal": { + "Web/JavaScript/Reference/Errors/Deprecated_octal_literal": { "modified": "2020-03-12T19:46:39.086Z", "contributors": ["WayneCui"] }, @@ -24999,10 +24995,6 @@ "modified": "2020-03-12T19:45:31.617Z", "contributors": ["Kaede_Shinoda", "Ende93"] }, - "Web/JavaScript/Reference/Errors/Equal_as_assign": { - "modified": "2020-03-12T19:44:21.268Z", - "contributors": ["niaodan2b"] - }, "Web/JavaScript/Reference/Errors/Getter_only": { "modified": "2020-03-12T19:46:35.397Z", "contributors": ["WayneCui"] @@ -25083,10 +25075,6 @@ "modified": "2020-03-12T19:46:25.852Z", "contributors": ["WayneCui"] }, - "Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement": { - "modified": "2020-03-12T19:44:58.615Z", - "contributors": ["Davont", "jitingsun"] - }, "Web/JavaScript/Reference/Errors/More_arguments_needed": { "modified": "2020-03-12T19:45:18.099Z", "contributors": ["Ende93"] @@ -25163,6 +25151,10 @@ "modified": "2020-03-12T19:45:16.824Z", "contributors": ["xgqfrms-GitHub", "Ende93"] }, + "Web/JavaScript/Reference/Errors/String_literal_EOL": { + "modified": "2020-03-12T19:45:03.493Z", + "contributors": ["Ende93", "luckyG0429"] + }, "Web/JavaScript/Reference/Errors/Too_much_recursion": { "modified": "2020-03-12T19:43:57.558Z", "contributors": ["Jack-Q"] @@ -25171,10 +25163,6 @@ "modified": "2020-03-12T19:45:21.644Z", "contributors": ["Ende93"] }, - "Web/JavaScript/Reference/Errors/Undefined_prop": { - "modified": "2020-03-12T19:45:16.927Z", - "contributors": ["Ende93"] - }, "Web/JavaScript/Reference/Errors/Unexpected_token": { "modified": "2020-03-12T19:45:18.592Z", "contributors": ["Ende93"] @@ -25187,10 +25175,6 @@ "modified": "2020-03-12T19:46:23.117Z", "contributors": ["Lxio", "WayneCui"] }, - "Web/JavaScript/Reference/Errors/Unterminated_string_literal": { - "modified": "2020-03-12T19:45:03.493Z", - "contributors": ["Ende93", "luckyG0429"] - }, "Web/JavaScript/Reference/Errors/in_operator_no_object": { "modified": "2020-03-12T19:46:27.485Z", "contributors": ["WayneCui"] diff --git a/files/zh-cn/glossary/sticky_activation/index.md b/files/zh-cn/glossary/sticky_activation/index.md new file mode 100644 index 00000000000000..d24a38c9766c48 --- /dev/null +++ b/files/zh-cn/glossary/sticky_activation/index.md @@ -0,0 +1,22 @@ +--- +title: 粘性激活 +slug: Glossary/Sticky_activation +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**粘性激活**（或“粘性用户激活”）是一种表示用户按下了按钮、移动了鼠标、使用了菜单或执行了其他用户交互窗口状态。 + +如果用户当前正在与页面交互或自页面加载以来完成了触摸、指针或键盘交互，则该页面被视为“用户已激活”。如果某个页面被设置了黏性激活状态，则在会话期间不会该状态被重置（与{{Glossary("Transient activation", "瞬态激活")}}不同）。 + +参见[由用户激活控制的特性](/zh-CN/docs/Web/Security/User_activation)以查看需要*粘性激活*的 API 示例。 + +参见 {{domxref("UserActivation.hasBeenActive")}} 属性以通过编程方式获取当前窗口的粘性激活状态。 + +## 参见 + +- [HTML 动态标准 > 黏性激活](https://html.spec.whatwg.org/multipage/interaction.html#sticky-activation) +- {{Glossary("Transient activation", "瞬态激活")}} +- {{domxref("UserActivation.hasBeenActive")}} diff --git a/files/zh-cn/glossary/string/index.md b/files/zh-cn/glossary/string/index.md index 4ecff7c9e3f5e6..645b1eb1a6101d 100644 --- a/files/zh-cn/glossary/string/index.md +++ b/files/zh-cn/glossary/string/index.md @@ -1,13 +1,15 @@ --- -title: String +title: 字符串 slug: Glossary/String +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 --- {{GlossarySidebar}} 在任何计算机编程语言中，字符串都是用于表示文本的{{Glossary("character", "字符")}}序列。 -在 {{Glossary("JavaScript")}} 中，字符串是{{Glossary("Primitive", "基本类型")}}的其中一个，而 {{jsxref("String")}} 是 {{Glossary("wrapper")}} 围绕字符串的基本形式。 +在 {{Glossary("JavaScript")}} 中，字符串是一种{{Glossary("Primitive", "原始值")}}，而 {{jsxref("String")}} 是字符串原始值的{{Glossary("wrapper", "包装器")}}。 ## 参见 diff --git a/files/zh-cn/glossary/stylesheet/index.md b/files/zh-cn/glossary/stylesheet/index.md new file mode 100644 index 00000000000000..ed0c80685ad9ee --- /dev/null +++ b/files/zh-cn/glossary/stylesheet/index.md @@ -0,0 +1,17 @@ +--- +title: 样式表 +slug: Glossary/Stylesheet +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**样式表**是一组用于控制网页或文档布局和设计的 CSS 规则。*内部*样式表放置在网页文档的 {{htmlelement("head")}} 中的 {{htmlelement("style")}} 元素内，而*外部*样式表则放置在单独的 `.css` 文件中，并通过在文档头部的 {{htmlelement("link")}} 元素引用外部样式表文件的方法来将其应用于文档。 + +通常推荐使用外部样式表，因为这允许你在一个地方控制多个页面的样式，而无需在每个页面上重复 CSS。 + +## 参见 + +- [CSS 入门](/zh-CN/docs/Learn/CSS/First_steps) +- 维基百科上的[样式表](https://zh.wikipedia.org/wiki/样式表) diff --git a/files/zh-cn/glossary/submit_button/index.md b/files/zh-cn/glossary/submit_button/index.md new file mode 100644 index 00000000000000..89874230b14e73 --- /dev/null +++ b/files/zh-cn/glossary/submit_button/index.md @@ -0,0 +1,37 @@ +--- +title: 提交按钮 +slug: Glossary/Submit_button +l10n: + sourceCommit: c9a87fc4010cef73c21c5f46662431f3c8ad2d28 +--- + +{{GlossarySidebar}} + +**提交按钮**是一种可用于提交{{HTMLElement("form", "表单")}}的 HTML {{Glossary("element", "元素")}}。原生的提交按钮元素包括： + +- {{HtmlElement("button")}}（其默认 `type` 为 `"submit"`） +- {{HtmlElement('input/submit', '<input type="submit">')}} +- {{HtmlElement('input/image', '<input type="image">')}} + +除了提交表单，提交按钮还可以影响表单的行为和发送的数据。 + +## 重写表单的行为 + +提交按钮可以通过各种属性重写表单的提交行为： + +- `{{HtmlElement("button#formaction", "formaction")}}`：覆盖表单的 [`action`](/zh-CN/docs/Web/HTML/Element/form#action) 属性。 +- `{{HtmlElement("button#formenctype", "formenctype")}}`：覆盖表单的 [`enctype`](/zh-CN/docs/Web/HTML/Element/form#enctype) 属性。 +- `{{HtmlElement("button#formmethod", "formmethod")}}`：覆盖表单的 [`method`](/zh-CN/docs/Web/HTML/Element/form#method) 属性。 +- `{{HtmlElement("button#formnovalidate", "formnovalidate")}}`：覆盖表单的 [`novalidate`](/zh-CN/docs/Web/HTML/Element/form#novalidate) 属性。 +- `{{HtmlElement("button#formtarget", "formtarget")}}`：覆盖表单的 [`target`](/zh-CN/docs/Web/HTML/Element/form#target) 属性。 + +## 表单数据条目 + +如果提交按钮是 {{HtmlElement("button")}} 或 {{HtmlElement('input/submit', '<input type="submit">')}} 并且具有 `name` 属性，表单数据集将包括其 `name` 和 `value` 的条目。 + +如果提交按钮是 {{HtmlElement('input/image', '<input type="image">')}}，表单数据集将包括用户点击的 X、Y 坐标的条目（如 `x=100&y=200` 或 `buttonName.x=123&buttonName.y=234`）。 + +## 参见 + +- [基本的原生表单控件](/zh-CN/docs/Learn/Forms/Basic_native_form_controls) +- [发送表单数据](/zh-CN/docs/Learn/Forms/Sending_and_retrieving_form_data) diff --git a/files/zh-cn/glossary/synchronous/index.md b/files/zh-cn/glossary/synchronous/index.md index 7140c2d3b0c587..81e0cd6e7a59c4 100644 --- a/files/zh-cn/glossary/synchronous/index.md +++ b/files/zh-cn/glossary/synchronous/index.md @@ -1,17 +1,20 @@ --- -title: Synchronous（同步） +title: 同步 slug: Glossary/Synchronous +l10n: + sourceCommit: 50e5e8a9b8a6b7d0dd9877610c9639d8b90f329f --- {{GlossarySidebar}} -各方都实时（或者尽可能实时）地收取（而且必要的话也处理或者回复）信息的即时沟通方式，即为**同步**。 +**同步**指的是各方都实时（或者尽可能实时）地收取（而且必要的话也处理或者回复）信息的即时沟通方式。 -电话即为一个日常的例子：人们都倾向于在使用电话时即时地作出回应。 +比较常见的一个例子是电话：人们都倾向于在使用电话时即时地作出回应。 -许多程序指令也是实时的：例如当输入一个算式时，除非编程人员有意为止，否则环境都会**立即**将结果反馈回来。 +许多程序指令也是实时的：例如当输入一个算式时，除非编程人员有意为止，否则环境都会立即将结果反馈回来。 ## 参见 -- {{glossary("Asynchronous")}} -- 使用了 [XMLHttpRequest()](/zh-CN/docs/Web/API/XMLHttpRequest) {{glossary("API")}} 的[同步和异步请求](/zh-CN/docs/Web/API/XMLHttpRequest_API/Synchronous_and_Asynchronous_Requests) +- 相关术语： + - {{glossary("Asynchronous", "异步")}} +- [异步 JavaScript](/zh-CN/docs/Learn/JavaScript/Asynchronous) diff --git a/files/zh-cn/glossary/syntax/index.md b/files/zh-cn/glossary/syntax/index.md new file mode 100644 index 00000000000000..ce05ba34cdff2b --- /dev/null +++ b/files/zh-cn/glossary/syntax/index.md @@ -0,0 +1,24 @@ +--- +title: 语法 +slug: Glossary/Syntax +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +语法指定了组成正确结构代码所需的{{Glossary("character", "字符")}}的组合和顺序。语法通常包括语法规则和适用于书写的规则，例如 Python 中的缩进要求。 + +语法因语言而异（例如，{{Glossary("HTML")}} 和 {{Glossary("JavaScript")}} 的语法不同）。尽管语言在语法方面可能有一些相似之处，比如 JavaScript 和 Python 语言都有一条“操作数 运算符 操作数”语法规则，但这并不意味着两种语言的语法相似。 + +语法既适用于编程语言（对计算机的命令），也适用于标记语言（文档结构信息）。 + +语法只管顺序和结构；指令还必须*有意义*，这就是{{Glossary("semantics", "语义")}}的范畴。 + +代码必须符合正确的语法才能正确{{Glossary("compile", "编译")}}，否则会出现{{Glossary("syntax error", "语法错误")}}。即使是小错误，比如缺少一个括号，也会导致源代码无法成功编译。 + +如果框架具有“干净”的语法，则表示它们生成简单、可读、简洁的结果。如果代码库使用“很多语法”，则意味着它需要更多字符来实现相同的功能。 + +## 参见 + +- 维基百科上的[语法]() diff --git a/files/zh-cn/glossary/tld/index.md b/files/zh-cn/glossary/tld/index.md new file mode 100644 index 00000000000000..c1f51564b1682d --- /dev/null +++ b/files/zh-cn/glossary/tld/index.md @@ -0,0 +1,34 @@ +--- +title: TLD +slug: Glossary/TLD +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +TLD（_顶级域_）是在互联网的层次结构 DNS（域名系统）中最通用的 {{Glossary("domain", "域名")}}。TLD 是{{Glossary("domain name", "域名")}}的最后一个组成部分，例如，`developer.mozilla.org` 中的 `org`。 + +{{Glossary("ICANN")}}（互联网名称与数字地址分配机构）指定组织来管理每个 TLD。根据管理组织可能有多严格，TLD 通常作为网站的用途、所有权或国籍的线索。 + +考虑一个示例的互联网地址：`https://developer.mozilla.org`。这里的 org 是 TLD；mozilla.org 是二级域名；developer 是子域名。所有这些组成了一个完全限定域名；添加 https\:// 使其成为一个完整的 URL。 + +{{Glossary("IANA")}} 今天区分以下顶级域组： + +- 国家代码顶级域（ccTLD） + - : 为国家或地区建立的两个字符域。例如：美国的 _.us_。 +- 国际化国家代码顶级域（IDN ccTLD） + - : 非拉丁字符集（例如阿拉伯语或中文）的 ccTLD。 +- 通用顶级域（gTLD） + - : 具有三个或更多字符的顶级域。 +- 无赞助顶级域 + - : 直接根据 ICANN 为全球互联网社区建立的政策运作的域，例如“com”和“：edu”。 +- 赞助顶级域（sTLD） + - : 这些域由私人组织提出并赞助，根据社区主题概念决定申请者是否有资格使用 TLD。 +- 基础设施顶级域 + - : 这个组由单个域——{{Glossary("ARPA", "地址和路由参数区")}}（ARPA）——组成。 + +## 参见 + +- 维基百科上的 [TLD](https://zh.wikipedia.org/wiki/頂級域) +- [顶级域的列表](https://www.iana.org/domains/root/db) diff --git a/files/zh-cn/glossary/tls/index.md b/files/zh-cn/glossary/tls/index.md index 0d822bfcf87c20..9545cc22f752ae 100644 --- a/files/zh-cn/glossary/tls/index.md +++ b/files/zh-cn/glossary/tls/index.md @@ -1,20 +1,25 @@ --- title: TLS slug: Glossary/TLS +l10n: + sourceCommit: 50e5e8a9b8a6b7d0dd9877610c9639d8b90f329f --- {{GlossarySidebar}} -传输层安全性协议 (Transport Layer Security，缩写作 TLS)，它的前身是安全套接层 (Secure Sockets Layer，缩写作 SSL)，是一个被应用程序用来在网络中安全通信的 {{Glossary("protocol")}} （通讯协议），防止电子邮件、网页、消息以及其他协议被篡改或是窃听。 +**传输层安全性协议**（Transport Layer Security，缩写作 TLS），前身安全套接层（Secure Sockets Layer，缩写作 SSL），是一个被应用程序用来在网络中安全通信的{{Glossary("protocol", "协议")}}，防止电子邮件、网页、消息以及其他协议被篡改或是窃听。TLS 和 SSL 都是客户端/服务器协议，通过使用加密协议来提供网络安全。当服务器和客户端使用 TLS 通信时，它确保没有第三方可以窃听或篡改任何消息。 -所有现代浏览器都支持 TLS 协议，它们都要求服务器提供一个有效的{{Glossary("Digital certificate", "digital certificate")}}（数字证书）来确认身份以建立安全连接。如果客户端和服务器都能提供自己的数字证书，则它们可以互相认证。 +所有现代浏览器都支持 TLS 协议，它们都要求服务器提供一个有效的{{Glossary("Digital certificate", "数字证书")}}来确认身份以建立安全连接。如果客户端和服务器都能提供自己的数字证书，则它们可以互相认证。 -### 基本知识 +> **备注：** 从 2020 年初开始，所有主流浏览器都开始移除对 TLS 1.0 和 1.1 的支持；你需要确保你的 Web 服务器支持 TLS 1.2 或 1.3。从 Firefox 74 开始，当连接到使用较旧 TLS 版本的服务器时，Firefox 将返回一个 [Secure Connection Failed](https://support.mozilla.org/zh-CN/kb/secure-connection-failed-firefox-did-not-connect) 错误（[Firefox bug 1606734](https://bugzil.la/1606734)）。 -- [传输层安全性协议](/zh-CN/docs/Web/Security/Transport_Layer_Security) -- [OWASP: 传输层保护备忘单](https://www.owasp.org/index.php/Transport_Layer_Protection_Cheat_Sheet) -- 维基百科上的[Transport Layer Security](https://zh.wikipedia.org/wiki/Transport_Layer_Security) +## 参见 -### 协议规范 - -- [RFC 5246](https://tools.ietf.org/html/rfc5246) (传输层安全性协议，版本：1.2) +- 维基百科上的[传输层安全性协议](https://zh.wikipedia.org/wiki/傳輸層安全性協定) +- [RFC 8446](https://tools.ietf.org/html/rfc8446)（传输层安全性协议，版本 1.3） +- [RFC 8446](https://tools.ietf.org/html/rfc5246)（传输层安全性协议，版本 1.2） +- [传输层安全性](/zh-CN/docs/Web/Security/Transport_Layer_Security) +- [传输层安全性备忘单](https://www.owasp.org/index.php/Transport_Layer_Protection_Cheat_Sheet)（OWASP） +- 相关术语： + - {{Glossary("HTTPS")}} + - {{Glossary("SSL")}} diff --git a/files/zh-cn/glossary/transient_activation/index.md b/files/zh-cn/glossary/transient_activation/index.md new file mode 100644 index 00000000000000..d89330ab99db32 --- /dev/null +++ b/files/zh-cn/glossary/transient_activation/index.md @@ -0,0 +1,25 @@ +--- +title: 瞬态激活 +slug: Glossary/Transient_activation +l10n: + sourceCommit: 50e5e8a9b8a6b7d0dd9877610c9639d8b90f329f +--- + +{{GlossarySidebar}} + +**瞬态激活**（或“瞬态用户激活”）是一个表示用户最近按下了按钮、移动了鼠标、使用了菜单或执行了其他用户交互的窗口状态。 + +有时，此状态用作确保 Web API 只能在用户交互触发时才能运行的机制。比如，脚本不能随意启动需要*瞬态激活*的弹出窗口——它必须从 UI 元素的事件处理器中触发。 + +参见[由用户激活限制的特性](/zh-CN/docs/Web/Security/User_activation)以查看需要*瞬态激活*的 API 示例。 + +参见 {{domxref("UserActivation.isActive")}} 属性，以通过编程方式访问当前窗口的瞬态激活状态。 + +> **备注：** 瞬态激活在超时后会过期（如果没有通过进一步的交互进行更新），并且有些 API 也可能“消耗”它。请参阅{{Glossary("Sticky activation", "粘性激活")}}以了解在初始设置后不会重置的用户激活。 + +## 参见 + +- [HTML 动态标准 > 瞬态激活](https://html.spec.whatwg.org/multipage/interaction.html#transient-activation) +- 相关术语： + - {{Glossary("Sticky activation", "粘性激活")}} +- {{domxref("UserActivation.isActive")}} diff --git a/files/zh-cn/glossary/validator/index.md b/files/zh-cn/glossary/validator/index.md new file mode 100644 index 00000000000000..301bcb6349020f --- /dev/null +++ b/files/zh-cn/glossary/validator/index.md @@ -0,0 +1,15 @@ +--- +title: 验证器 +slug: Glossary/Validator +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +验证器是检查代码中的语法错误的程序。验证器可以为任何格式或语言创建，但在我们的上下文中，指的是检查 {{Glossary("HTML")}}、{{Glossary("CSS")}} 和 {{Glossary("XML")}} 的工具。 + +## 参见 + +- 维基百科上的[验证器](https://zh.wikipedia.org/wiki/验证器) +- [验证器的简短列表](https://firefox-source-docs.mozilla.org/devtools-user/validators/index.html) diff --git a/files/zh-cn/glossary/value/index.md b/files/zh-cn/glossary/value/index.md index 57100d7152c9b1..fb622e883cb1f2 100644 --- a/files/zh-cn/glossary/value/index.md +++ b/files/zh-cn/glossary/value/index.md @@ -1,11 +1,13 @@ --- title: 值 slug: Glossary/Value +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 --- {{GlossarySidebar}} -在数据或对象{{Glossary("Wrapper", "包装器")}}的概念下，值是对象包装器包含的{{Glossary("Primitive", "原始值")}}。在{{Glossary("Variable", "变量")}}或{{Glossary("Property", "属性")}}的概念下，值可以是原始类型或{{Glossary("Object reference", "对象引用")}}。 +在数据或对象[**包装器**](/zh-CN/docs/Glossary/Wrapper)的概念下，值是对象包装器包含的[**原始值**](/zh-CN/docs/Glossary/Primitive)。在[**变量**](/zh-CN/docs/Glossary/Variable)或[**属性**](/zh-CN/docs/Glossary/Property)的概念下，值可以是原始类型或[**对象引用**](/zh-CN/docs/Glossary/Object_reference)。 在 CSS 属性值的概念下，存在指定值、计算值和实际值，应用于每个元素和伪元素的每个 CSS 属性的最终值是一个四步计算的结果：值由定义决定（[指定值](/zh-CN/docs/Web/CSS/specified_value)），然后解析成一个用于继承的值（[计算值](/zh-CN/docs/Web/CSS/computed_value)），然后在必要时转换为绝对的值（[应用值](/zh-CN/docs/Web/CSS/used_value)），最终根据本地环境的限制进行转化（[实际值](/zh-CN/docs/Web/CSS/actual_value)）。 @@ -13,4 +15,4 @@ slug: Glossary/Value ## 参见 -- 维基百科上的[原始值包装类](https://en.wikipedia.org/wiki/Primitive_wrapper_class)词条 +- 维基百科上的[原始值包装类](https://en.wikipedia.org/wiki/Primitive_wrapper_class) diff --git a/files/zh-cn/glossary/web_server/index.md b/files/zh-cn/glossary/web_server/index.md new file mode 100644 index 00000000000000..cfad14bdfa957c --- /dev/null +++ b/files/zh-cn/glossary/web_server/index.md @@ -0,0 +1,15 @@ +--- +title: Web 服务器 +slug: Glossary/Web_server +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +Web 服务器是一种通常运行在硬件服务器上的软件，为用户（通常称为客户端）提供服务。服务器则是指位于一个全是计算机的房间（通常称为数据中心）内的其中一台计算机。 + +## 参见 + +- [介绍服务器](/zh-CN/docs/Learn/Common_questions/Web_mechanics/What_is_a_web_server) +- 维基百科上的[服务器](https://zh.wikipedia.org/wiki/服务器) diff --git a/files/zh-cn/glossary/websockets/index.md b/files/zh-cn/glossary/websockets/index.md index 2e72a256873fbe..6a5b81dc6ea820 100644 --- a/files/zh-cn/glossary/websockets/index.md +++ b/files/zh-cn/glossary/websockets/index.md @@ -1,17 +1,19 @@ --- -title: WebSockets +title: WebSocket slug: Glossary/WebSockets +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 --- {{GlossarySidebar}} -WebSocket 是一种在客户端与{{Glossary("Server", "服务器")}}之间保持{{Glossary("TCP")}}长连接的{{Glossary("protocol","网络协议")}}，这样它们就可以随时进行信息交换。 +_WebSocket_ 是一种在客户端与{{Glossary("Server", "服务器")}}之间保持 {{Glossary("TCP")}} 长连接的{{Glossary("protocol", "协议")}}，这样它们就可以随时进行信息交换。 -虽然任何客户端或服务器上的应用都可以使用 WebSocket，但原则上还是指{{Glossary("Browser", "浏览器")}}与服务器之间使用。通过 WebSocket，服务器可以直接向客户端发送数据，而无须客户端周期性的请求服务器，以动态更新数据内容。 +虽然任何客户端或服务器上的应用都可以使用 WebSocket，但原则上还是指{{Glossary("Browser", "浏览器")}}与服务器之间使用。通过 WebSocket，服务器无需客户端预先请求就可以直接向客户端发送数据，从而能动态地更新数据内容。 ## 参见 -- [Websocket](https://zh.wikipedia.org/wiki/Websocket) 维基百科 -- [WebSocket 的 MDN 参考](/zh-CN/docs/Web/API/WebSocket) +- 维基百科上的 [Websocket](https://zh.wikipedia.org/wiki/WebSocket) +- [MDN 上的 WebSocket 参考](/zh-CN/docs/Web/API/WebSocket) - [编写 WebSocket 客户端应用](/zh-CN/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications) - [编写 WebSocket 服务器应用](/zh-CN/docs/Web/API/WebSockets_API/Writing_WebSocket_servers) diff --git a/files/zh-cn/glossary/xinclude/index.md b/files/zh-cn/glossary/xinclude/index.md new file mode 100644 index 00000000000000..727aa87880626d --- /dev/null +++ b/files/zh-cn/glossary/xinclude/index.md @@ -0,0 +1,17 @@ +--- +title: XInclude +slug: Glossary/XInclude +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +XInclude 是 W3C 推荐标准之一，它定义了包含标签，使文档能够包含其他文档或其他文档的部分。内容可以从其他 XML 文件或文本文件中包含。 + +XInclude 机制在任何主流浏览器中都不受支持。 + +## 参见 + +- [XInclude 标准](https://www.w3.org/TR/xinclude-11/) +- [`XPath`](/zh-CN/docs/Web/XPath) diff --git a/files/zh-cn/learn/javascript/client-side_web_apis/fetching_data/index.md b/files/zh-cn/learn/javascript/client-side_web_apis/fetching_data/index.md index 12138f55cf021a..b74390951896f1 100644 --- a/files/zh-cn/learn/javascript/client-side_web_apis/fetching_data/index.md +++ b/files/zh-cn/learn/javascript/client-side_web_apis/fetching_data/index.md @@ -1,11 +1,13 @@ --- title: 从服务器获取数据 slug: Learn/JavaScript/Client-side_web_APIs/Fetching_data +l10n: + sourceCommit: c215109b90da51435eaa2c94a8f6764909f628e0 --- {{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "Learn/JavaScript/Client-side_web_APIs")}} -现代网站和应用中另一个常见的任务是从服务端获取个别数据来更新部分网页而不用加载整个页面。这看起来是小细节却对网站性能和行为产生巨大的影响。所以我们将在这篇文章介绍概念和技术使它成为可能，例如：[Fetch API](/zh-CN/docs/Web/API/Fetch_API)。 +现代网站和应用中另一个常见的任务是从服务端获取个别数据来更新部分网页而不用加载整个页面。这看起来是小细节却对网站性能和行为产生巨大的影响。所以我们将在这篇文章介绍概念和技术使它成为可能，尤其是 [Fetch API](/zh-CN/docs/Web/API/Fetch_API)。 @@ -38,13 +40,13 @@ slug: Learn/JavaScript/Client-side_web_APIs/Fetching_data ![传统页面加载流程](traditional-loading.svg) -这个模型适用于许多站点。但请考虑一个几乎是以数据驱动的网站。例如，[温哥华图书馆](https://www.vpl.ca/)这样的图书馆网站。你可以将此类网站视作数据库的用户界面。它可能会允许你搜索特定类型的书籍，或者根据你之前借过的书籍向你推荐你可能喜欢的书籍。在你这样操作时，它需要使用新的书集来更新用于显示的页面。但请注意，大部分的页面内容（包括页眉、侧边栏和页脚等元素）将保持不变。 +这个模型适用于许多站点。但请考虑一个几乎是以数据驱动的网站，例如[温哥华图书馆](https://www.vpl.ca/)这样的图书馆网站。你可以将此类网站视作数据库的用户界面。它可能会允许你搜索特定类型的书籍，或者根据你之前借过的书籍向你推荐你可能喜欢的书籍。在你这样操作时，它需要使用新的书集来更新用于显示的页面。但请注意，大部分的页面内容（包括页眉、侧边栏和页脚等元素）将保持不变。 传统模型的问题在于我们必须获取并加载整个页面，即使我们只需要更新页面的一部分也是如此。这是低效的，而且会带来糟糕的用户体验。 因此，与传统模型不同，许多网站使用 JavaScript API 从服务器请求数据，并在不重新加载页面的情况下更新页面。因此，当用户搜索新产品时，浏览器仅请求更新页面所需的数据——例如要显示的新书集。 -![使用 fetch 来更新页面](fetch-update.svg) +![使用 Fetch 来更新页面](fetch-update.svg) 这里主要的 API 是 [Fetch API](/zh-CN/docs/Web/API/Fetch_API)。它允许页面中运行的 JavaScript 向服务器发起 [HTTP](/zh-CN/docs/Web/HTTP) 请求来获取特定的资源。当服务器提供了这些资源时，JavaScript 可以使用这些数据更新页面（通常是通过使用 [DOM 操作 API](/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents)）。请求的数据通常是 [JSON](/zh-CN/docs/Learn/JavaScript/Objects/JSON)，这是一种很好的传输结构化的格式，但也可以是 HTML 或纯文本。 @@ -53,7 +55,7 @@ slug: Learn/JavaScript/Client-side_web_APIs/Fetching_data - 页面更新更加迅速，你不必等待页面刷新，这意味这网站的体验更加流畅、响应更加迅速。 - 每次更新时下载的数据更少，这意味着浪费的带宽更少。这在使用宽带连接的台式机上可能不是什么问题，但在移动设备或没有高速互联网连接的国家/地区则是一个主要问题。 -> **备注：** 在早期，这种通用技术被称为[异步](/zh-CN/docs/Glossary/Asynchronous)的 JavaScript 与 XML 技术（[Ajax](/zh-CN/docs/Glossary/AJAX)），因为倾向于请求 XML 数据。但现在通常不是这种情况（你更有可能请求 JSON），但结果依然相同，并通常依旧使用术语“Ajax”来描述该技术。 +> **备注：** 在早期，这种通用技术被称为[异步](/zh-CN/docs/Glossary/Asynchronous)的 JavaScript 与 XML（[Ajax](/zh-CN/docs/Glossary/AJAX)）。但现在通常不是这种情况，相反你更有可能请求 JSON，不过由于结果依然相同，我们通常依旧使用术语“Ajax”来描述该技术。 为了进一步加快速度，某些网站还会在首次请求时将资源和数据存储在用户的计算机上，这意味这在后续的访问中，会使用这些内容的本地版本，而不是在每次重新加载页面时都下载新的副本。内容仅在更新后才会从服务器重新加载。 @@ -83,8 +85,10 @@ verseChoose.addEventListener("change", () => { 下面让我们定义 `updateDisplay()` 函数。首先，将以下内容放在你之前的代码块下方——这是该函数的空壳。 -```js -function updateDisplay(verse) {} +```js-nolint +function updateDisplay(verse) { + +} ``` 让我们将通过构造一个指向我们要加载的文本文件的相对 URL 来开始编写函数，因为我们稍后需要它。任何时候 {{htmlelement("select")}} 元素的值都与所选的 {{htmlelement("option")}} 内的文本相同（除非在值属性中指定了不同的值）——例如“Verse 1”。相应的诗歌文本文件是“verse1.txt”，并与 HTML 文件位于同一目录中，因此只需要文件名即可。 @@ -127,9 +131,9 @@ fetch(url) 接下来，`fetch()` 是一个异步 API，会返回一个 {{jsxref("Promise")}}。如果你不知道什么是 Promise，请参阅[异步 JavaScript](/zh-CN/docs/Learn/JavaScript/Asynchronous) 章节，然后再回到这里。你会发现那篇文章也介绍了 `fetch()` API！ -因为 `fetch()` 返回一个 promise，所以我们将一个函数传递给它返回的 promise 的 {{jsxref("Promise/then", "then()")}} 方法。此方法会在 HTTP 请求收到服务器的响应时被调用。在它的处理器中，我们检查请求是否成功，并在请求失败时抛出一个错误。否则，我们调用 {{domxref("Response/text", "response.text()")}} 以获取文本形式的响应正文。 +因为 `fetch()` 返回一个 Promise，所以我们将一个函数传递给它返回的 Promise 的 {{jsxref("Promise/then", "then()")}} 方法。此方法会在 HTTP 请求收到服务器的响应时被调用。在它的处理器中，我们检查请求是否成功，并在请求失败时抛出一个错误。否则，我们调用 {{domxref("Response/text", "response.text()")}} 以获取文本形式的响应正文。 -`response.text()` *也*是异步的，所以我们返回它返回的 promise，并向新的 promise 的 `then()` 方法传递一个函数。这个函数会在响应文本可用时被调用，在这个函数中，我们会使用该文本更新 `
` 块。
+`response.text()` *也*是异步的，所以我们返回它返回的 Promise，并向新的 Promise 的 `then()` 方法传递一个函数。这个函数会在响应文本可用时被调用，在这个函数中，我们会使用该文本更新 `
` 块。
 
 最后，我们在最后链式调用 {{jsxref("Promise/catch", "catch()")}} 处理器，以捕获我们调用的异步函数或其他处理器中抛出的任何错误。
 
@@ -142,9 +146,9 @@ verseChoose.value = "Verse 1";
 
 ### 在服务端运行示例
 
-如果只是使用本地文件运行示例，现代浏览器将不会执行 HTTP 请求。这是因为安全限制（更多关于 web 安全性的限制，请参阅[网站安全](/zh-CN/docs/Learn/Server-side/First_steps/Website_security)）。
+如果只是使用本地文件运行示例，现代浏览器将不会执行 HTTP 请求。这是因为安全限制（更多关于 Web 安全性的限制，请参阅[网站安全](/zh-CN/docs/Learn/Server-side/First_steps/Website_security)）。
 
-为了解决这个问题，我们需要通过在本地 web 服务器上运行它来测试这个示例。要了解如何实现这一点，请阅读[我们的设置本地测试服务器指南](/zh-CN/docs/Learn/Common_questions/set_up_a_local_testing_server)。
+为了解决这个问题，我们需要通过在本地 Web 服务器上运行它来测试这个示例。要了解如何实现这一点，请阅读[我们的设置本地测试服务器指南](/zh-CN/docs/Learn/Common_questions/set_up_a_local_testing_server)。
 
 ### 罐头商店
 
@@ -172,23 +176,23 @@ fetch("products.json")
   .catch((err) => console.error(`Fetch 错误：${err.message}`));
 ```
 
-`fetch()` 函数返回一个 promise。如果成功完成，第一个 `.then()` 代码块中的函数包含通过网络返回的响应（`response`）。
+`fetch()` 函数返回一个 Promise。如果成功完成，第一个 `.then()` 代码块中的函数包含通过网络返回的响应（`response`）。
 
 在此函数中，我们：
 
 - 检查服务器是否返回错误（例如 [`404 Not Found`](/zh-CN/docs/Web/HTTP/Status/404)）。如果返回了错误，我们抛出一个错误。
 - 对响应调用 {{domxref("Response.json","json()")}}。它会将数据检索为 [JSON 对象](/zh-CN/docs/Learn/JavaScript/Objects/JSON)。然后我们返回 `response.json()` 返回的 promise。
 
-接着，我们将一个函数传递给返回的 promise 的 `then()` 方法。该函数会被传入一个包含 JSON 格式的响应数据的对象，我们将这个对象传递给 `initialize()` 函数。该函数会开始在用户界面中显示所有产品的过程。
+接着，我们将一个函数传递给返回的 Promise 的 `then()` 方法。该函数会被传入一个包含 JSON 格式的响应数据的对象，我们将这个对象传递给 `initialize()` 函数。该函数会开始在用户界面中显示所有产品的过程。
 
-为了处理错误，我们将一个 `.catch()` 代码块串联到 promise 链的末尾。如果 promise 由于某种原因失败了，它就会被运行。在该代码块中，我们包含一个接收 `err` 对象的函数。该 `err` 对象可用于报告已发生错误的性质，在本例中，我们仅使用了 `console.log()`。
+为了处理错误，我们将一个 `.catch()` 代码块串联到 Promise 链的末尾。如果 Promise 由于某种原因失败了，它就会被运行。在该代码块中，我们包含一个接收 `err` 对象的函数。该 `err` 对象可用于报告已发生错误的性质，在本例中，我们仅使用了 `console.log()`。
 
 然而，一个完整的网站会通过在用户屏幕上显示一条消息，可能还会提供这种情况的补救选项来更优雅地处理此类错误，但我们在这里不需要比 `console.error()` 更复杂的东西。
 
 你可以自己测试失败的情况：
 
 1. 创建示例文件的本地副本。
-2. 通过 web 服务器运行代码（如上所述，[在服务端运行示例](#在服务端运行示例)）。
+2. 通过 Web 服务器运行代码（如上所述，[在服务端运行示例](#在服务端运行示例)）。
 3. 修改要获取的文件的路径，比如“produc.json”（确保你拼写的是错误的）。
 4. 现在在你的浏览器上加载索引文件（通过 `localhost:8000`）然后查看你浏览器的开发者控制台。你将看到一条类似于“Fetch 错误：HTTP 错误：404”的消息。
 
diff --git a/files/zh-cn/learn/javascript/client-side_web_apis/index.md b/files/zh-cn/learn/javascript/client-side_web_apis/index.md
index 51ddff5158209c..6e2e830ceb5068 100644
--- a/files/zh-cn/learn/javascript/client-side_web_apis/index.md
+++ b/files/zh-cn/learn/javascript/client-side_web_apis/index.md
@@ -1,33 +1,35 @@
 ---
 title: 客户端 Web API
 slug: Learn/JavaScript/Client-side_web_APIs
+l10n:
+  sourceCommit: 26e2f9883e0e73def04c0e86fec6da3ec42e66b3
 ---
 
 {{LearnSidebar}}
 
-当你给网页或者网页应用编写客户端的 JavaScript 时，你很快会遇上应用程序接口（API）——这些编程特性可用来操控网站所基于的浏览器与操作系统的不同方面，或是操控由其他网站或服务端传来的数据。在这个单元里，我们将一同探索什么是 API，以及如何使用一些在你开发中将经常遇见的 API。
+当你给网页或者应用编写客户端的 JavaScript 时，你很快会碰上**应用程序接口**（**API**）。API 是一些用于操控网站所基于的浏览器与操作系统的不同方面，或是操控由其他网站或服务端传来的数据的编程特性。在这个单元里，我们将一同探索什么是 API，以及如何使用一些在你开发中将经常遇见的 API。
 
 ## 预备知识
 
-若想深入理解这个单元的内容，你必须能够以自己的能力较好地学完之前的几个章节 ([JavaScript 第一步](/zh-CN/docs/Learn/JavaScript/First_steps), [JavaScript](/zh-CN/docs/Learn/JavaScript/First_steps)[基础要件](/zh-CN/docs/Learn/JavaScript/Building_blocks), 和[JavaScript](/zh-CN/docs/Learn/JavaScript/First_steps)[对象介绍](/zh-CN/docs/Learn/JavaScript/Objects)). 这几部分涉及到了许多简单的 API 的使用，如果没有它们我们将很难做一些实际的事情。在这个教程中，我们会认为你懂得 JavaScript 的核心知识，而且我们将更深入地探索常见的网页 API。
+若想深入理解这个单元的内容，你必须能够以自己的能力较好地学完之前的几个章节（[JavaScript 第一步](/zh-CN/docs/Learn/JavaScript/First_steps)、[创建 JavaScript 代码块](/zh-CN/docs/Learn/JavaScript/Building_blocks) 和 [JavaScript 对象介绍](/zh-CN/docs/Learn/JavaScript/Objects)）。这几部分涉及到了许多简单的 API 的使用，如果没有它们我们将很难做一些实际的事情。在这个教程中，我们默认你已经掌握了 JavaScript 的核心知识，然后我们将更深入地探索常见的 Web API。
 
-若你知道 [HTML](/zh-CN/docs/Learn/HTML) 和 [CSS](/zh-CN/docs/Learn/CSS) 的基本知识，也会对理解这个单元的内容大有裨益。
+了解 [HTML](/zh-CN/docs/Learn/HTML) 和 [CSS](/zh-CN/docs/Learn/CSS) 的基本知识，也会对理解这个单元的内容大有裨益。
 
-> **备注：** 如果你正在使用一台无法创建你自身文件的电脑、平板或其他设备，你可以尝试使用一些在线网页编辑器如[JSBin](https://jsbin.com/)或者[Glitch](https://glitch.com/)，来尝试编辑一些代码示例。
+> **备注：** 如果你正在使用一台无法创建你自己的文件的电脑、平板或其他设备，你可以尝试使用一些在线网页编辑器如 [JSBin](https://jsbin.com/) 或者 [Glitch](https://glitch.com/) 来尝试编辑一些代码示例。
 
-## 向导
+## 指南
 
 - [Web API 简介](/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Introduction)
-  - : 首先，我们将从一个更高的角度来看这些 API —它们是什么，它们怎么起作用的，你该怎么在自己的代码中使用它们以及他们是怎么构成的？我们依旧会再来看一看这些 API 有哪些主要的种类和他们会有哪些用处。
+  - : 首先，我们将从一个更高的角度来看这些 API：它们是什么，它们怎么起作用的，你该怎么在自己的代码中使用它们以及他们是怎么构成的？我们也会看看不同的主要 API 类别是什么，以及它们有什么样的用途。
 - [操作文档](/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents)
-  - : 当你在制作 WEB 页面和 APP 时，一个你最经常想要做的事就是通过一些方法来操作 WEB 文档。这其中最常见的方法就是使用文档对象模型 Document Object Model (DOM)，它是一系列大量使用了 {{domxref("Document")}} object 的 API 来控制 HTML 和样式信息。通过这篇文章，我们来看看使用 DOM 方面的一些细节，以及其他一些有趣的 API 能够通过一些有趣的方式改变你的环境。
+  - : 当你编写网页和应用时，你最常见的任务之一就是以某种方式操作网页中的文档。这通常是通过使用文档对象模型（DOM）来完成的——DOM 是一组用于控制 HTML 和样式信息的 API，其使用了大量的 {{domxref("Document")}} 对象。在这篇文章中，我们将详细讨论如何使用 DOM 以及一些其他有趣的 API。它们可以以有趣的方式改变你的环境。
 - [从服务器获取数据](/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data)
-  - : 在现代网页及其 APP 中另外一个很常见的任务就是与服务器进行数据交互时不再刷新整个页面，这看起来微不足道，但却对一个网页的展现和交互上起到了很大的作用，在这篇文章里，我们将阐述这个概念，然后来了解实现这个功能的技术，例如 {{domxref("XMLHttpRequest")}} 和 [Fetch API](/zh-CN/docs/Web/API/Fetch_API).（抓取 API）。
+  - : 在现代网页及其 APP 中另外一个很常见的任务就是与服务器进行数据交互时不再刷新整个页面，这看起来微不足道，但却对一个网页的展现和交互上起到了很大的作用，在这篇文章里，我们将阐述这个概念，然后来了解实现这个功能的技术，例如 {{domxref("XMLHttpRequest")}} 和 [Fetch API](/zh-CN/docs/Web/API/Fetch_API)。
 - [第三方 API](/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs)
-  - : 到目前为止我们所涉及的 API 都是浏览器内置的，但并不代表所有。许多大网站如 Google Maps, Twitter, Facebook, PayPal 等，都提供他们的 API 给开发者们去使用他们的数据（比如在你的博客里展示你分享的推特内容）或者服务（如在你的网页里展示定制的谷歌地图或接入 Facebook 登录功能）。这篇文章介绍了浏览器 API 和第三方 API 的差别以及一些最新的典型应用。
+  - : 到目前为止我们所涉及的 API 都是浏览器内置的，但并不代表所有。许多大网站如 Google Maps、Facebook、PayPal 等，都提供它们的 API 给开发者们去使用他们的数据（比如在你的博客里展示你分享的推特内容）或者服务（如在你的网页里展示定制的谷歌地图或接入 Facebook 登录功能）。这篇文章介绍了浏览器 API 和第三方 API 的差别以及一些最新的典型应用。
 - [绘制图形](/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics)
-  - : 浏览器包含多种强大的图形编程工具，从可缩放矢量图形语言 Scalable Vector Graphics ([SVG](/zh-CN/docs/Web/SVG)) language，到 HTML 绘制元素 {{htmlelement("canvas")}} 元素 ([The Canvas API](/zh-CN/docs/Web/API/Canvas_API) and [WebGL](/zh-CN/docs/Web/API/WebGL_API)). 这篇文章提供了部分 canvas 的简介，以及让你更深入学习的资源。
+  - : 浏览器包含多种强大的图形编程工具，从可缩放矢量图形语言 [SVG](/zh-CN/docs/Web/SVG)，到 HTML 绘制元素 {{htmlelement("canvas")}} 元素（[Canvas API](/zh-CN/docs/Web/API/Canvas_API) 以及 [WebGL](/zh-CN/docs/Web/API/WebGL_API)）。这篇文章提供了部分 Canvas 的简介，以及让你更深入学习的资源。
 - [视频和音频 API](/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs)
-  - : HTML5 能够通过元素标签嵌入富媒体——{{htmlelement("video")}} and {{htmlelement("audio")}}——而将有自己的 API 来控制回放，搜索等功能。本文向你展示了如何创建自定义播放控制等常见的任务。
+  - : HTML5 能够通过元素标签嵌入富媒体：{{htmlelement("video")}}、{{htmlelement("audio")}}。这些元素同时带来了它们的一些 API 用于控制回放，搜索等功能。本文向你展示了如何创建自定义播放控制等常见的任务。
 - [客户端存储](/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage)
-  - : 现代 web 浏览器拥有很多不同的技术，能够让你存储与网站相关的数据，并在需要时调用它们，能够让你长期保存数据、保存离线网站及其他实现其他功能。本文解释了这些功能的基本原理。
+  - : 现代 Web 浏览器拥有很多不同的技术，能够让你存储与网站相关的数据，并在需要时调用它们，能够让你长期保存数据、保存离线网站及其他实现其他功能。本文解释了这些功能的基本原理。
diff --git a/files/zh-cn/learn/javascript/first_steps/what_went_wrong/index.md b/files/zh-cn/learn/javascript/first_steps/what_went_wrong/index.md
index 183b2ba3a31810..ded0c71ba65456 100644
--- a/files/zh-cn/learn/javascript/first_steps/what_went_wrong/index.md
+++ b/files/zh-cn/learn/javascript/first_steps/what_went_wrong/index.md
@@ -173,24 +173,6 @@ Math.floor(Math.random() * 100) + 1;
 
 代码中还会遇到其他常见错误。本节将指出其中的大部分。
 
-### SyntaxError: missing ; before statement
（语法错误：语句缺少分号）
-
-这个错误通常意味着你漏写了一行代码最后的分号，但是此类错误有时候会更加隐蔽。例如如果我们把 `checkGuess()` 函数中的这一行 :
-
-```js
-let userGuess = Number(guessField.value);
-```
-
-改成
-
-```js
-let userGuess === Number(guessField.value);
-```
-
-将抛出一个错误。因为系统认为你在做其他事情。请不要把赋值运算符（`=`，为一个变量赋值）和严格等于运算符（`===`，比较两个值是否相等，返回 `true`/`false`）弄混淆。
-
-> **备注：** 此错误的更多详细信息请参考 [SyntaxError: missing ; before statement](/zh-CN/docs/Web/JavaScript/Reference/Statements) 。
-
 ### 不管输入什么程序总说“你猜对了！”
 
 这是混淆赋值和严格等于运算符的又一症状。例如我们把 `checkGuess()` 里的：
@@ -207,13 +189,13 @@ if (userGuess = randomNumber) {
 
 因为条件永远返回 `true`，使得程序报告你猜对了。小心哦！
 
-### SyntaxError: missing ) after argument list
（语法错误：参数表末尾缺少括号）
+### SyntaxError: missing ) after argument list
 
 这个很简单。通常意味着函数/方法调用后的结束括号忘写了。
 
 > **备注：** 有关此错误的更多详细信息请参考： [SyntaxError: missing ) after argument list](/zh-CN/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list)。
 
-### SyntaxError: missing : after property id
（语法错误：属性 ID 后缺少冒号）
+### SyntaxError: missing : after property id
 
 JavaScript 对象的形式有错时通常会导致此类错误，如果把
 
@@ -229,21 +211,17 @@ function checkGuess( {
 
 浏览器会认为我们试图将函数的内容当作参数传回函数。写圆括号时要小心！
 
-### SystaxError: missing } after function body
（语法错误：函数体末尾缺少花括号）
+### SystaxError: missing } after function body
 
 这个简单。通常意味着函数或条件结构中丢失了一个花括号。如果我们将 `checkGuess()` 函数末尾的花括号删除，就会得到这个错误。
 
-### SyntaxError: expected expression, got '_string_'
（语法错误：得到一个 '_string_' 而非表达式）
-
-或者
-
-### SyntaxError: unterminated string literal
（语法错误：字符串字面量未正常结束）
+### SyntaxError: expected expression, got '_string_' 或 SyntaxError: string literal contains an unescaped line break
 
 这个错误通常意味着字符串两端的引号漏写了一个。如果你漏写了字符串开始的引号，将得到第一条出错信息，这里的 '_string'_ 将被替换为浏览器发现的意外字符。如果漏写了末尾的引号将得到第二条。
 
 对于所有的这些错误，想想我们在实例中是如何逐步解决的。错误出现时，转到错误所在的行观察是否能发现问题所在。记住，错误不一定在那一行，错误的原因也可能和我们在上面所说的不同！
 
-> **备注：** 有关这些错误的更多详细信息请参考：[SyntaxError: Unexpected token](/zh-CN/docs/Web/JavaScript/Reference/Errors/Unexpected_token) 以及 [SyntaxError: unterminated string literal](/zh-CN/docs/Web/JavaScript/Reference/Errors/Unterminated_string_literal)。
+> **备注：** 有关这些错误的更多详细信息请参考：[SyntaxError: Unexpected token](/zh-CN/docs/Web/JavaScript/Reference/Errors/Unexpected_token) 以及 [SyntaxError: string literal contains an unescaped line break](/zh-CN/docs/Web/JavaScript/Reference/Errors/String_literal_EOL)。
 
 ## 小结
 
diff --git a/files/zh-cn/web/api/baseaudiocontext/audioworklet/index.md b/files/zh-cn/web/api/baseaudiocontext/audioworklet/index.md
new file mode 100644
index 00000000000000..0b05f142af07e4
--- /dev/null
+++ b/files/zh-cn/web/api/baseaudiocontext/audioworklet/index.md
@@ -0,0 +1,31 @@
+---
+title: BaseAudioContext：audioWorklet 属性
+slug: Web/API/BaseAudioContext/audioWorklet
+l10n:
+  sourceCommit: 135b8311a5e3d12789e8421845be3ce026ef72b8
+---
+
+{{ APIRef("Web Audio API") }}{{securecontext_header}}
+
+{{domxref("BaseAudioContext")}} 接口的只读属性 `audioWorklet` 返回一个 {{domxref("AudioWorklet")}} 实例，该实例可用于添加实现自定义音频处理的 {{domxref("AudioWorkletProcessor")}} 的派生类。
+
+## 值
+
+{{domxref("AudioWorklet")}} 实例。
+
+## 示例
+
+_参见 {{domxref("AudioWorkletNode")}} 页面，以获取完整的用户自定义音频处理示例。_
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- [使用 Web 音频 API](/zh-CN/docs/Web/API/Web_Audio_API/Using_Web_Audio_API)
+- {{domxref("AudioWorkletNode")}}
diff --git a/files/zh-cn/web/api/canvaspattern/settransform/index.md b/files/zh-cn/web/api/canvaspattern/settransform/index.md
index bd8e8d3be192eb..fb2e9bfa6d9d65 100644
--- a/files/zh-cn/web/api/canvaspattern/settransform/index.md
+++ b/files/zh-cn/web/api/canvaspattern/settransform/index.md
@@ -1,11 +1,13 @@
 ---
-title: CanvasPattern.setTransform()
+title: CanvasPattern：setTransform() 方法
 slug: Web/API/CanvasPattern/setTransform
+l10n:
+  sourceCommit: daeff1a2efaae366bcc8b6d911d86985646e665e
 ---
 
-{{APIRef("Canvas API")}} {{SeeCompatTable}}
+{{APIRef("Canvas API")}}{{AvailableInWorkers}}
 
-**`CanvasPattern.setTransform()`** 方法使用 {{domxref("DOMMatrix")}} 对象作为图案的变换矩阵，并在此图案上调用它。
+**`CanvasPattern.setTransform()`** 方法使用 {{domxref("DOMMatrix")}} 对象作为图案的变换矩阵，并在当前图案上调用它。
 
 ## 语法
 
@@ -18,81 +20,84 @@ setTransform(matrix)
 - `matrix`
   - : {{domxref("DOMMatrix")}}，被用作图案的变换矩阵。
 
+### 返回值
+
+无（{{jsxref("undefined")}}）。
+
 ## 示例
 
 ### 使用 `setTransform` 方法
 
-这是一段简单的代码片段，使用 `setTransform` 方法创建一个来自 {{domxref("DOMMatrix")}} 具有指定图案变化的{{domxref("CanvasPattern")}}。如例子所示，如果你把图案赋值给当前的 {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}}，当你使用 {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} 方法时，图案会被应用到 canvas 上绘制出效果。
+这是一段简单的代码片段，使用 `setTransform` 方法创建一个来自 {{domxref("DOMMatrix")}} 具有指定图案变化的 {{domxref("CanvasPattern")}}。如例子所示，图案会在其被设置为当前的 {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} 时应用；并在使用 {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} 方法时会被绘制到 canvas 上。
 
 #### HTML
 
 ```html
- 
+
 ```
 
 #### JavaScript
 
 ```js
-var canvas = document.getElementById("canvas");
-var ctx = canvas.getContext("2d");
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
 
-var svg1 = document.getElementById("svg1");
-var matrix = svg1.createSVGMatrix();
+const matrix = new DOMMatrix([1, 0.2, 0.8, 1, 0, 0]);
 
-var img = new Image();
+const img = new Image();
 img.src = "canvas_createpattern.png";
 
-img.onload = function () {
-  var pattern = ctx.createPattern(img, "repeat");
+img.onload = () => {
+  const pattern = ctx.createPattern(img, "repeat");
   pattern.setTransform(matrix.rotate(-45).scale(1.5));
   ctx.fillStyle = pattern;
   ctx.fillRect(0, 0, 400, 400);
 };
 ```
 
-修改下面的代码并在线查看 canvas 的变化：
+#### 可编辑演示
+
+以下是上述代码片段的可编辑演示。尝试更改 `SetTransform()` 的参数，看看它产生的效果。
 
 ```html hidden
 
-
 

   
   
 

 
+  ctx.fillRect(0, 0, 400, 400);
+};
+
 ```
 
 ```js hidden
-var canvas = document.getElementById("canvas");
-var ctx = canvas.getContext("2d");
-var textarea = document.getElementById("code");
-var reset = document.getElementById("reset");
-var edit = document.getElementById("edit");
-var code = textarea.value;
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
+const textarea = document.getElementById("code");
+const reset = document.getElementById("reset");
+const edit = document.getElementById("edit");
+const code = textarea.value;
 
-var svg1 = document.getElementById("svg1");
-var matrix = svg1.createSVGMatrix();
+const matrix = new DOMMatrix([1, 0.2, 0.8, 1, 0, 0]);
 
 function drawCanvas() {
   ctx.clearRect(0, 0, canvas.width, canvas.height);
   eval(textarea.value);
 }
 
-reset.addEventListener("click", function () {
+reset.addEventListener("click", () => {
   textarea.value = code;
   drawCanvas();
 });
 
-edit.addEventListener("click", function () {
+edit.addEventListener("click", () => {
   textarea.focus();
 });
 
@@ -100,7 +105,7 @@ textarea.addEventListener("input", drawCanvas);
 window.addEventListener("load", drawCanvas);
 ```
 
-{{ EmbedLiveSample('使用 setTransform 方法', 700, 380) }}
+{{ EmbedLiveSample('可编辑演示', 700, 400) }}
 
 ## 规范
 
@@ -112,5 +117,5 @@ window.addEventListener("load", drawCanvas);
 
 ## 参见
 
-- 接口定义，{{domxref("CanvasPattern")}}
+- 定义此方法的接口：{{domxref("CanvasPattern")}}
 - {{domxref("DOMMatrix")}}
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/clearrect/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/clearrect/index.md
index 4112c73825e960..6b328692efa0c3 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/clearrect/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/clearrect/index.md
@@ -1,21 +1,23 @@
 ---
-title: CanvasRenderingContext2D.clearRect()
+title: CanvasRenderingContext2D：clearRect() 方法
 slug: Web/API/CanvasRenderingContext2D/clearRect
+l10n:
+  sourceCommit: 005cc1fd55aadcdcbd9aabbed7d648a275f8f23a
 ---
 
 {{APIRef}}
 
-**`CanvasRenderingContext2D.clearRect()`** 是 Canvas 2D API 的方法，这个方法通过把像素设置为透明以达到擦除一个矩形区域的目的。
+Canvas 2D API 的 **`CanvasRenderingContext2D.clearRect()`** 方法用于通过把像素设置为透明黑色以达到擦除一个矩形区域的目的。
 
-> **备注：** 如果没有依照 [绘制路径](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes#%E7%BB%98%E5%88%B6%E8%B7%AF%E5%BE%84) 的步骤，使用 `clearRect()` 会导致意想之外的结果。请确保在调用 `clearRect()`之后绘制新内容前调用{{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} 。
+> **备注：** 如果没有[正确使用路径](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes#绘制路径)，`clearRect()` 可能会导致意想之外的结果。请确保在调用 `clearRect()` 之后开始绘制新内容前调用 {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} 。
 
 ## 语法
 
-```
-void ctx.clearRect(x, y, width, height);
+```js-nolint
+clearRect(x, y, width, height)
 ```
 
-`clearRect()` 方法在一个矩形区域内设置所有像素都是透明的 (`rgba(0,0,0,0)`)。这个矩形范围的左上角在 `(x, y)`，宽度和高度分别由 `width` 和`height`确定。
+`clearRect()` 方法在一个矩形区域内将所有像素都设置成透明黑色（`rgba(0,0,0,0)`）。矩形区域的左上角在 `(x, y)`，其大小由 `width` 和`height` 指定。
 
 ### 参数
 
@@ -24,15 +26,19 @@ void ctx.clearRect(x, y, width, height);
 - `y`
   - : 矩形起点的 y 轴坐标。
 - `width`
-  - : 矩形的宽度。
+  - : 矩形的宽度。正值向右，负值向左。
 - `height`
-  - : 矩形的高度。
+  - : 矩形的高度。正值向下，负值向上。
+
+### 返回值
+
+无（{{jsxref("undefined")}}）。
 
 ## 示例
 
-### 清除整个画布
+### 擦除整个画布
 
-这段代码清除整个画布。这段代码通常在动画的每一帧开始被执行。清除的范围涵覆盖了整个 {{HtmlElement("canvas")}} 元素。
+这段代码片段用于擦除整个画布。这通常在动画的每一帧开始时需要执行。清除的区域尺寸设置为与 `` 元素的 `width` 和 `height` 属性相等。
 
 ```js
 const canvas = document.getElementById("canvas");
@@ -40,9 +46,9 @@ const ctx = canvas.getContext("2d");
 ctx.clearRect(0, 0, canvas.width, canvas.height);
 ```
 
-### 清除一部分画布
+### 擦除一部分画布
 
-这仅是一段简单地使用 `clearRect` 方法的代码片段。
+此示例在黄色背景上绘制了一个蓝色三角形，然后使用 `clearRect()` 方法擦除了画布的部分内容。
 
 #### HTML
 
@@ -52,11 +58,11 @@ ctx.clearRect(0, 0, canvas.width, canvas.height);
 
 #### JavaScript
 
-下面代码中被清除的区域是一个矩形，它的左上点坐标在 (10, 10)，宽度和高度分别是 120 和 100 像素。
+被清除的区域是一个矩形，它的左上点坐标在 (10, 10)。清除区域的宽度为 120，高度为 100。
 
 ```js
-var canvas = document.getElementById("canvas");
-var ctx = canvas.getContext("2d");
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
 
 // 绘制黄色背景
 ctx.beginPath();
@@ -78,7 +84,7 @@ ctx.clearRect(10, 10, 120, 100);
 
 #### 结果
 
-{{EmbedLiveSample('清除一部分画布', 700, 180)}}
+{{EmbedLiveSample('擦除一部分画布', 700, 180)}}
 
 ## 规范
 
@@ -90,6 +96,6 @@ ctx.clearRect(10, 10, 120, 100);
 
 ## 参见
 
-- 接口定义， {{domxref("CanvasRenderingContext2D")}}
+- 定义此方法的接口：{{domxref("CanvasRenderingContext2D")}}
 - {{domxref("CanvasRenderingContext2D.fillRect()")}}
 - {{domxref("CanvasRenderingContext2D.strokeRect()")}}
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/createpattern/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/createpattern/index.md
index 55847c2918df8f..fac31453a714d2 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/createpattern/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/createpattern/index.md
@@ -1,53 +1,63 @@
 ---
-title: CanvasRenderingContext2D.createPattern()
+title: CanvasRenderingContext2D：createPattern() 方法
 slug: Web/API/CanvasRenderingContext2D/createPattern
+l10n:
+  sourceCommit: 4656260748aea78929639c4bf776d643d9911a82
 ---
 
 {{APIRef}}
 
-**`CanvasRenderingContext2D.createPattern()`** 是 Canvas 2D API 使用指定的图像 ({{domxref("CanvasImageSource")}}) 创建模式的方法。它通过 repetition 参数在指定的方向上重复元图像。此方法返回一个{{domxref("CanvasPattern")}}对象。
+Canvas 2D API 的 **`CanvasRenderingContext2D.createPattern()`** 方法用于使用指定的图像或重复创建图案。此方法返回一个 {{domxref("CanvasPattern")}} 对象。
+
+这个方法并不直接在画布上绘制任何内容。它所创建的图案必须赋值给 {{domxref("CanvasRenderingContext2D.fillStyle")}} 或 {{domxref("CanvasRenderingContext2D.strokeStyle")}}，之后才会应用于接下来的绘制操作。
 
 ## 语法
 
-```
-CanvasPattern ctx.createPattern(image, repetition);
+```js-nolint
+createPattern(image, repetition)
 ```
 
 ### 参数
 
 - `image`
 
-  - : 作为重复图像源的 {{domxref("CanvasImageSource")}} 对象。可以是下列之一：
+  - : 用作图案图像的图像。可以是下列之一：
 
-    - {{domxref("HTMLImageElement")}} ({{HTMLElement("img")}}),
-    - {{domxref("HTMLVideoElement")}} ({{HTMLElement("video")}}),
-    - {{domxref("HTMLCanvasElement")}} ({{HTMLElement("canvas")}}),
-    - {{domxref("CanvasRenderingContext2D")}},
-    - {{domxref("ImageBitmap")}},
-    - {{domxref("ImageData")}},
-    - {{domxref("Blob")}}.
+    - {{domxref("HTMLImageElement")}}（{{HTMLElement("img")}}）
+    - {{domxref("SVGImageElement")}}（{{SVGElement("image")}}）
+    - {{domxref("HTMLVideoElement")}}（{{HTMLElement("video")}}，通过使用视频捕获）
+    - {{domxref("HTMLCanvasElement")}}（{{HTMLElement("canvas")}}）
+    - {{domxref("ImageBitmap")}}
+    - {{domxref("OffscreenCanvas")}}
+    - {{domxref("VideoFrame")}}
 
 - `repetition`
 
-  - : {{domxref("DOMString")}}，指定如何重复图像。允许的值有：
+  - : 一个指示如何重复图案图像的字符串。可能的值包括：
 
-    - `"repeat"` (both directions),
-    - `"repeat-x"` (horizontal only),
-    - `"repeat-y"` (vertical only),
-    - `"no-repeat"` (neither).
+    - `"repeat"`（两个方向都重复）
+    - `"repeat-x"`（仅水平方向重复）
+    - `"repeat-y"`（仅垂直方向重复）
+    - `"no-repeat"`（两个方向都不重复）
 
-    如果为空字符串 (`''`) 或 {{jsxref("null")}} (但不是 {{jsxref("undefined")}})，repetition 将被当作"repeat"。
+    [`null`](/zh-CN/docs/Web/JavaScript/Reference/Operators/null) 值与空字符串（`""`）的处理方式相同：两者都是 `"repeat"` 的同义词。
 
 ### 返回值
 
 - {{domxref("CanvasPattern")}}
-  - : 描述模式的不透明对象
+  - : 描述图案的不透明对象
+
+如果 `image` 没有完全加载（即 {{domxref("HTMLImageElement.complete")}} 是 `false`），则返回 [`null`](/zh-CN/docs/Web/JavaScript/Reference/Operators/null)。
 
 ## 示例
 
 ### 从图像创建图案
 
-这是一段简单的代码片段，使用 createPattern 方法创建一个指定图像和重复的{{domxref("CanvasPattern")}} 对象。创建完成后，可以使用{{domxref("CanvasPattern.setTransform()")}}方法对图案进行变形。如示例所示，你可以把此模式赋值给当前的{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}}，当你使用{{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} 方法时，会在 canvas 上绘制出效果。
+这个例子使用 `createPattern()` 方法来创建一个带有重复源图像的 {{domxref("CanvasPattern")}}。创建完成后，将这个图案赋值给画布上下文的填充样式，并应用于一个矩形。
+
+原始图像如下所示：
+
+![一个花纹图案](canvas_createpattern.png)
 
 #### HTML
 
@@ -63,8 +73,8 @@ const ctx = canvas.getContext("2d");
 
 const img = new Image();
 img.src = "canvas_createpattern.png";
+// 请确保在图像加载完成后再使用
 img.onload = () => {
-  // Only use the image after it's loaded
   const pattern = ctx.createPattern(img, "repeat");
   ctx.fillStyle = pattern;
   ctx.fillRect(0, 0, 300, 300);
@@ -73,6 +83,42 @@ img.onload = () => {
 
 {{ EmbedLiveSample('从图像创建图案', 700, 310) }}
 
+### 从画布创建图案
+
+在这个例子中，我们从一个离屏画布的内容创建了一个图案。然后将这个图案应用到主画布的填充样式上，并用该图案填充主画布。
+
+#### JavaScript
+
+```js
+// 创建一个离屏画布作为图案的源
+const patternCanvas = document.createElement("canvas");
+const patternContext = patternCanvas.getContext("2d");
+
+// 设置图案的宽度和高度为 50
+patternCanvas.width = 50;
+patternCanvas.height = 50;
+
+// 设置图案的背景颜色并绘制一个圆弧
+patternContext.fillStyle = "#fec";
+patternContext.fillRect(0, 0, patternCanvas.width, patternCanvas.height);
+patternContext.arc(0, 0, 50, 0, 0.5 * Math.PI);
+patternContext.stroke();
+
+// 创建我们的主画布并用图案填充
+const canvas = document.createElement("canvas");
+const ctx = canvas.getContext("2d");
+const pattern = ctx.createPattern(patternCanvas, "repeat");
+ctx.fillStyle = pattern;
+ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+// 将主画布添加到网页中
+document.body.appendChild(canvas);
+```
+
+#### 结果
+
+{{ EmbedLiveSample('从画布创建图案', 700, 160) }}
+
 ## 规范
 
 {{Specifications}}
@@ -83,5 +129,5 @@ img.onload = () => {
 
 ## 参见
 
-- 接口定义， {{domxref("CanvasRenderingContext2D")}}
+- 定义此方法的接口：{{domxref("CanvasRenderingContext2D")}}
 - {{domxref("CanvasPattern")}}
diff --git a/files/zh-cn/web/api/document/exitfullscreen/index.md b/files/zh-cn/web/api/document/exitfullscreen/index.md
index c84ec5edd4c18b..58980b9ff60eb1 100644
--- a/files/zh-cn/web/api/document/exitfullscreen/index.md
+++ b/files/zh-cn/web/api/document/exitfullscreen/index.md
@@ -1,33 +1,47 @@
 ---
-title: Document.exitFullscreen()
+title: Document：exitFullscreen() 方法
 slug: Web/API/Document/exitFullscreen
+l10n:
+  sourceCommit: 41a8b9c9832359d445d136b6d7a8a28737badc6b
 ---
 
 {{ApiRef("Fullscreen API")}}
 
-**`Document.exitFullscreen()`** 方法用于让当前文档退出全屏模式（原文表述不准确，详见备注）。调用这个方法会让文档回退到上一个调用{{domxref("Element.requestFullscreen()")}}方法进入全屏模式之前的状态。
-
-> **备注：** 如果一个元素 A 在请求进去全屏模式之前，已经存在其他元素处于全屏状态，当这个元素 A 退出全屏模式之后，之前的元素仍然处于全屏状态。浏览器内部维护了一个全屏元素栈用于实现这个目的。
+{{domxref("Document")}} 的 **`exitFullscreen()`** 方法请求将当前在全屏模式下呈现的文档元素退出全屏模式，恢复屏幕的先前状态。这通常会逆转先前调用 {{domxref("Element.requestFullscreen()")}} 的效果。
 
 ## 语法
 
+```js-nolint
+exitFullscreen()
 ```
-document.exitFullscreen();
-```
+
+### 参数
+
+无。
+
+### 返回值
+
+一个 {{jsxref("Promise")}}，在{{Glossary("user agent", "用户代理")}}完成退出全屏模式后被兑现。如果在尝试退出全屏模式时发生错误，promise 的 `catch()` 处理器将被调用。
 
 ## 示例
 
+此示例使当前文档在鼠标按钮点击其内部时切换进出全屏显示模式。
+
 ```js
-// 点击切换全屏模式
-document.onclick = function (event) {
+document.onclick = (event) => {
   if (document.fullscreenElement) {
-    document.exitFullscreen();
+    document
+      .exitFullscreen()
+      .then(() => console.log("文档已退出全屏模式"))
+      .catch((err) => console.error(err));
   } else {
     document.documentElement.requestFullscreen();
   }
 };
 ```
 
+> **备注：** 有关更完整的示例，请参阅 [`Element.requestFullscreen()` 示例](/zh-CN/docs/Web/API/Element/requestFullscreen#示例)。
+
 ## 规范
 
 {{Specifications}}
@@ -36,12 +50,11 @@ document.onclick = function (event) {
 
 {{Compat}}
 
-## 参阅
+## 参见
 
-- [Using full-screen mode](/zh-CN/DOM/Using_full-screen_mode)
+- [全屏 API](/zh-CN/docs/Web/API/Fullscreen_API)
+- [全屏 API 指南](/zh-CN/docs/Web/API/Fullscreen_API/Guide)
 - {{ domxref("Element.requestFullscreen()") }}
-- {{ domxref("Document.exitFullscreen()") }}
-- {{ domxref("Document.fullscreen") }}
 - {{ domxref("Document.fullscreenElement") }}
-- {{ cssxref(":fullscreen") }}
-- [`allowfullscreen`](/zh-CN/docs/Web/HTML/Element/iframe#allowfullscreen)
+- {{ cssxref(":fullscreen") }} 和 {{cssxref("::backdrop")}}
+- {{HTMLElement("iframe")}} [`allowfullscreen`](/zh-CN/docs/Web/HTML/Element/iframe#allowfullscreen) 属性
diff --git a/files/zh-cn/web/api/htmlmediaelement/defaultmuted/index.md b/files/zh-cn/web/api/htmlmediaelement/defaultmuted/index.md
new file mode 100644
index 00000000000000..85af6630e37bfb
--- /dev/null
+++ b/files/zh-cn/web/api/htmlmediaelement/defaultmuted/index.md
@@ -0,0 +1,36 @@
+---
+title: HTMLMediaElement：defaultMuted 属性
+slug: Web/API/HTMLMediaElement/defaultMuted
+l10n:
+  sourceCommit: 595cba0e07c70eda7f08a12890e00ea0281933d3
+---
+
+{{APIRef("HTML DOM")}}
+
+**`HTMLMediaElement.defaultMuted`** 属性反映了 HTML 属性 [`muted`](/zh-CN/docs/Web/HTML/Element/video#muted)。该属性用于表明媒体元素的音频输出是否默认为静音。此属性没有动态效果，使用 {{domxref("HTMLMediaElement.muted", "muted")}} 属性来静音和取消静音。
+
+## 返回值
+
+布尔值。`true` 值表明音频输出默认为静音。
+
+## 示例
+
+```js
+const videoEle = document.createElement("video");
+videoEle.defaultMuted = true;
+console.log(videoEle.outerHTML); // 
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{domxref("HTMLMediaElement")}}：用于定义 `HTMLMediaElement.defaultMuted` 属性的接口
+- {{domxref("HTMLMediaElement.muted")}}
+- {{domxref("HTMLMediaElement.volume")}}
diff --git a/files/zh-cn/web/api/htmlmediaelement/readystate/index.md b/files/zh-cn/web/api/htmlmediaelement/readystate/index.md
index 3e8490dc12cc87..aa478aad004faa 100644
--- a/files/zh-cn/web/api/htmlmediaelement/readystate/index.md
+++ b/files/zh-cn/web/api/htmlmediaelement/readystate/index.md
@@ -1,33 +1,32 @@
 ---
-title: HTMLMediaElement.readyState
+title: HTMLMediaElement：readyState 属性
 slug: Web/API/HTMLMediaElement/readyState
+l10n:
+  sourceCommit: e932acf254c5dd06e26798b9d8fe01ce8dab1fb7
 ---
 
 {{APIRef("HTML DOM")}}
 
-**`HTMLMediaElement.readyState`** 属性返回音频/视频的当前就绪状态。
+**`HTMLMediaElement.readyState`** 属性返回媒体的就绪状态。
 
-## 语法
+## 返回值
 
-```plain
-var readyState = audioOrVideo.readyState;
-```
-
-### 返回值
-
-无符号整型 An `unsigned short`.
+一个数字，为 {{domxref("HTMLMediaElement")}} 接口上定义的五个可能的状态常量之一：
 
-| Constant          | Value | Description                                                      |
-| ----------------- | ----- | ---------------------------------------------------------------- |
-| HAVE_NOTHING      | 0     | 没有关于音频/视频是否就绪的信息                                  |
-| HAVE_METADATA     | 1     | 音频/视频已初始化                                                |
-| HAVE_CURRENT_DATA | 2     | 数据已经可以播放 (当前位置已经加载) 但没有数据能播放下一帧的内容 |
-| HAVE_FUTURE_DATA  | 3     | 当前及至少下一帧的数据是可用的 (换句话来说至少有两帧的数据)      |
-| HAVE_ENOUGH_DATA  | 4     | 可用数据足以开始播放 - 如果网速得到保障 那么视频可以一直播放到底 |
+- `HTMLMediaElement.HAVE_NOTHING`（0）
+  - : 没有可用的关于媒体资源的信息。
+- `HTMLMediaElement.HAVE_METADATA`（1）
+  - : 已检索到足够的媒体资源，元数据属性已经初始化。查询操作将不再引发异常。
+- `HTMLMediaElement.HAVE_CURRENT_DATA`（2）
+  - : 当前播放位置的数据已经可用，但不足以实际播放多个帧。
+- `HTMLMediaElement.HAVE_FUTURE_DATA`（3）
+  - : 当前播放位置和提供至少一小段时间的数据已经可用（换句话说，至少有两个视频帧）。
+- `HTMLMediaElement.HAVE_ENOUGH_DATA`（4）
+  - : 有足够的数据可用，并且下载速度足够高，因此媒体可以不间断地播放到最后。
 
-## 实例
+## 示例
 
-这个例子会监听 id 为 example 的 audio 的数据。他会检查当前位置是否可以播放，会的话执行播放。
+这个示例将会监听一个 id 为 `example` 的音频数据的加载。它会检查当前播放位置是否已加载。如果是，则会播放音频。
 
 ```html
- - - - - - - - - - -
标头类型{{Glossary("Response header", "响应标头")}}
{{Glossary("Forbidden header name", "禁止修改的标头")}}否
- -## 语法 - -```http -Large-Allocation: 0 -Large-Allocation: -``` - -## 指令 - -- `0` - - : 0 是一个特殊的值，代表分配的大小是不确定的。 -- `` - - : 预期需要申请的内存大小，以兆字节为单位。 - -## 示例 - -```http -Large-Allocation: 0 -Large-Allocation: 500 -``` - -## 排除错误 - -如果使用不当，`Large-Allocation` 标头会抛出警告或者错误信息，你可以在 [web 控制台](https://firefox-source-docs.mozilla.org/devtools-user/web_console/index.html)中查看它们。 - -- 由于存在 `Large-Allocation` 标头，当前页面会在一个新的进程加载。 - - : 该消息意味着浏览器遇到了 `Large-Allocation` 标头，并且能够在一个新的进程中重新加载页面，这个进程应该有更多的可用连续内存。 -- `Large-Allocation` 标头由非 GET 请求触发而被直接忽略。 - - : 当使用 {{HTTPMethod("POST")}} 请求加载文档时，加载目前无法被重定向到新的进程中。这个错误会在使用非 GET HTTP 方法加载带有 `Large-Allocation` 标头的文档时显示。例如，这可能是由于当前文档是通过表单提交加载的。 -- 由于存在通过框架层级或者 {{domxref("window.opener")}} 引用当前浏览上下文的窗口，`Large-Allocation` 标头被直接忽略。 - - - : 该错误意味着文档不是在用户打开的或者 noopener 打开的标签或窗口的顶层加载的。它可能在以下情况下出现： - - - 带有 `Large-Allocation` 标头的文档是在 {{HTMLElement("iframe")}} 中加载的。Firefox 目前无法将 iframe 移动到新的进程中，所以文档必须在当前进程中加载。 - - 带有 `Large-Allocation` 标头的文档是在由 {{domxref("window.open()")}}、`` 或者其他类似方法在没有设置 `rel="noopener"` 或者 `"noopener"` 特性的情况下打开的窗口中加载的。这些窗口必须与其打开的窗口保持在同一进程中，因为它们可以相互通信，这意味着我们不能允许它们切换进程。 - - 带有 `Large-Allocation` 标头的文档已经使用 {{domxref("window.open()")}}、`` 或其他类似方法在没有设置 `rel="noopener"` 或者 `"noopener"` 特性的情况下打开了另一个窗口。这与上面的原因相同，即它们可以相互通信，因此我们不能允许它们切换进程。 - -- 由于存在 `Large-Allocation` 标头，当前页面会在一个新的进程加载，然而 `Large-Allocation` 进程创建在非 Win32 平台上被禁用了。 - - : Firefox 目前仅在 32 位 Windows 构建中支持 `Large-Allocation` 标头，因为内存碎片化在 64 位构建中不是问题。如果你正在运行非 win32 版本的 Firefox，这个错误会出现。你可以在 about:config 中使用 `dom.largeAllocation.forceEnable` 布尔首选项来禁用该检查。 - -## 规范 - -现还不属于任何规范，可以通过[这篇文档](https://gist.github.com/mystor/5739e222e398efc6c29108be55eb6fe3)了解该标头的背后思想。 - -## 浏览器兼容性 - -{{Compat}} - -## 参见 - -- [WebAssembly](/zh-CN/docs/WebAssembly) diff --git a/files/zh-cn/web/http/methods/trace/index.md b/files/zh-cn/web/http/methods/trace/index.md index 56d6a8de516196..c7842dc0815bad 100644 --- a/files/zh-cn/web/http/methods/trace/index.md +++ b/files/zh-cn/web/http/methods/trace/index.md @@ -17,7 +17,7 @@ slug: Web/HTTP/Methods/TRACE 成功的响应是否有主体 - 否 + 是 {{Glossary("Safe/HTTP", "安全")}} diff --git a/files/zh-cn/web/javascript/reference/errors/deprecated_octal/index.md b/files/zh-cn/web/javascript/reference/errors/deprecated_octal/index.md deleted file mode 100644 index 072c2019f823a0..00000000000000 --- a/files/zh-cn/web/javascript/reference/errors/deprecated_octal/index.md +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: 'SyntaxError: "0"-prefixed octal literals and octal escape seq. are deprecated' -slug: Web/JavaScript/Reference/Errors/Deprecated_octal ---- - -{{jsSidebar("Errors")}} - -## 错误提示 - -```plain -SyntaxError: -"0"-prefixed octal literals and octal escape sequences are deprecated; -for octal literals use the \"0o\" prefix instead -``` - -## 错误类型 - -语法错误（{{jsxref("SyntaxError")}} ），只出现于[严格模式](/zh-CN/docs/Web/JavaScript/Reference/Strict_mode)下。 - -## 哪里出错了？ - -八进制字面量与八进制转义序列语法已经被废弃，在严格模式下会报语法错误（{{jsxref("SyntaxError")}}）。在 ECMAScript 2015 及以后的规范中，标准语法是前导 0 后面跟一个大写或小写的拉丁文字母 "O" (`0o` 或 `0O)`。 - -## 示例 - -### 前导"0"形式的八进制字面量 - -```js example-bad -"use strict"; - -03; - -// SyntaxError: "0"-prefixed octal literals and octal escape sequences -// are deprecated -``` - -### 八进制转义序列 - -```js example-bad -"use strict"; - -"\251"; - -// SyntaxError: "0"-prefixed octal literals and octal escape sequences -// are deprecated -``` - -### 合法的八进制数字 - -使用前导 0 后面跟字母 "o" 或 "O" 的形式： - -```js example-good -0o3; -``` - -至于八进制转义序列，你可以使用十六进制转义序列来代替： - -```js example-good -"\xA9"; -``` - -## 参见 - -- [Lexical grammar](/zh-CN/docs/Web/JavaScript/Reference/Lexical_grammar#Octal) diff --git a/files/zh-cn/web/javascript/reference/errors/deprecated_octal_literal/index.md b/files/zh-cn/web/javascript/reference/errors/deprecated_octal_literal/index.md new file mode 100644 index 00000000000000..577d6093efaecf --- /dev/null +++ b/files/zh-cn/web/javascript/reference/errors/deprecated_octal_literal/index.md @@ -0,0 +1,54 @@ +--- +title: 'SyntaxError: "0"-prefixed octal literals are deprecated' +slug: Web/JavaScript/Reference/Errors/Deprecated_octal_literal +l10n: + sourceCommit: 4e0349ec31c38bebd56e56782170666e11ae5ad3 +--- + +{{jsSidebar("Errors")}} + +仅在 JavaScript [严格模式](/zh-CN/docs/Web/JavaScript/Reference/Strict_mode)下出现的异常“0-prefixed octal literals are deprecated; use the "0o" prefix instead”在使用了已被弃用的八进制字面量（`0` 后跟数字）时出现。 + +## 错误提示 + +```plain +SyntaxError: Octal literals are not allowed in strict mode. (V8-based) +SyntaxError: Decimals with leading zeros are not allowed in strict mode. (V8-based) +SyntaxError: Unexpected number (V8-based) +SyntaxError: "0"-prefixed octal literals are deprecated; use the "0o" prefix instead (Firefox) +SyntaxError: Decimal integer literals with a leading zero are forbidden in strict mode (Safari) +``` + +## 错误类型 + +语法错误（{{jsxref("SyntaxError")}}），只出现于[严格模式](/zh-CN/docs/Web/JavaScript/Reference/Strict_mode)下。 + +## 哪里出错了？ + +八进制字面量已被弃用。在十进制整数前加上 `0` 时，实际上会将其转换为八进制字面量，这可能会令人感到惊讶。标准化的语法使用前导零后跟一个小写或大写的拉丁字母“O”（`0o` 或 `0O`）。 + +前导零总是被禁止的，即使字面量不是有效的八进制字面量语法（例如字面量包含数字 `8` 或 `9`，或者有小数点）。数字字面量仅在其值为 0 时才能以 `0` 开头。 + +## 示例 + +### 前导“0”形式的八进制字面量 + +```js example-bad +"use strict"; + +03; + +// SyntaxError: "0"-prefixed octal literals are deprecated; use the "0o" prefix instead +``` + +### 有效的八进制数字 + +使用前导零后跟字母“o”或“O”： + +```js example-good +0o3; +``` + +## 参见 + +- [词法文法](/zh-CN/docs/Web/JavaScript/Reference/Lexical_grammar#八进制) diff --git a/files/zh-cn/web/javascript/reference/errors/equal_as_assign/index.md b/files/zh-cn/web/javascript/reference/errors/equal_as_assign/index.md deleted file mode 100644 index 20d07acaf719bf..00000000000000 --- a/files/zh-cn/web/javascript/reference/errors/equal_as_assign/index.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: "SyntaxError: test for equality (==) mistyped as assignment (=)?" -slug: Web/JavaScript/Reference/Errors/Equal_as_assign ---- - -{{jsSidebar("Errors")}} - -## 消息 - -```plain -Warning: SyntaxError: test for equality (==) mistyped as assignment (=)? -``` - -## 错误类型 - -{{jsxref("SyntaxError")}} 只在[严格模式](/zh-CN/docs/Web/JavaScript/Reference/Strict_mode)下会出现的警告。 - -## 什么地方出错了？ - -在通常期望进行相等判定（`==`）的地方出现了赋值`（=`）。为了帮助调试，JavaScript（在开启严格模式的情况下）会对这种情况进行警告。 - -## 示例 - -### 条件表达式内的赋值 - -不建议在条件表达式中（例如 [`if...else`](/zh-CN/docs/Web/JavaScript/Reference/Statements/if...else)）使用简单赋值语句，因为在扫视代码的时候赋值操作与相等判定容易产生混淆。例如，不要使用以下写法： - -```js-nolint example-bad -if (x = y) { - // do the right thing -} -``` - -如果你需要在条件表达式中使用赋值语句，通常的做法是用一对括号把赋值语句包起来。例如： - -```js -if ((x = y)) { - // do the right thing -} -``` - -否则，你的本意可能是想用比较操作符（如 `==` 或 `===`）： - -```js -if (x == y) { - // do the right thing -} -``` - -## 相关页面 - -- [Strict mode](/zh-CN/docs/Web/JavaScript/Reference/Strict_mode) -- [`if...else`](/zh-CN/docs/Web/JavaScript/Reference/Statements/if...else) -- [Comparison operators](/zh-CN/docs/Web/JavaScript/Reference/Operators/Comparison_Operators) diff --git a/files/zh-cn/web/javascript/reference/errors/missing_semicolon_before_statement/index.md b/files/zh-cn/web/javascript/reference/errors/missing_semicolon_before_statement/index.md deleted file mode 100644 index 1b93d2eb9b3e17..00000000000000 --- a/files/zh-cn/web/javascript/reference/errors/missing_semicolon_before_statement/index.md +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: "SyntaxError: missing ; before statement" -slug: Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement ---- - -{{jsSidebar("Errors")}} - -## 信息 - -```plain -SyntaxError: Expected ';' (Edge) -``` - -```plain - SyntaxError: missing ; before statement (Firefox) -``` - -## 错误类型 - -{{jsxref("SyntaxError")}}. - -## 哪里出错了？ - -某个地方丢失了一个 (`;`)。 [JavaScript 语句](/zh-CN/docs/Web/JavaScript/Reference/Statements)必须以分号结束。有一些是由 [自动分号插入 (ASI)](/zh-CN/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion) 的使用所影响到的，但在这种情况下，你需要提供一个分号，以便于 JavaScript 可以将源代码解析正确。然而，通常情况下，这个错误只是另一个错误一个导致的，如不正确转义字符串，使用 var 的错误。你也可能有太多的括号的地方。当出现此错误时，仔细检查语法。 - -## 示例 - -转义字符串 - -这个错误可能发生不正确时容易转义字符串 JavaScript 引擎是希望你的字符串的末尾已经。例如： - -```js example-bad -var foo = 'Tom's bar'; -// SyntaxError: missing ; before statement -``` - -你可以用双引号，或者用\转义： - -```js-nolint example-good -var foo = "Tom's bar"; -var foo = 'Tom\'s bar'; -``` - -### 用 var 声明属性 - -你不能将带有变量声明的对象或数组的属性用`var`来声明。 - -```js example-bad -var obj = {}; -var obj.foo = "hi"; // SyntaxError missing ; before statement - -var array = []; -var array[0] = "there"; // SyntaxError missing ; before statement -``` - -而是省略掉`var`关键词： - -```js example-good -var obj = {}; -obj.foo = "hi"; - -var array = []; -array[0] = "there"; -``` - -### 不推荐使用的关键字 - -如果你用的是另一种编程语言，那么在 javaScript 中使用不具有相同或完全没有意义的关键字也是很常见的： - -```js example-bad -def print(info){ - console.log(info); -}; // SyntaxError missing ; before statement -``` - -因此，建议使用`function`而不是`def`： - -```js example-good -function print(info) { - console.log(info); -} -``` - -## 参考 - -- [自动分号插入 (ASI)](/zh-CN/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion) -- [JavaScript 语句](/zh-CN/docs/Web/JavaScript/Reference/Statements) diff --git a/files/zh-cn/web/javascript/reference/errors/unterminated_string_literal/index.md b/files/zh-cn/web/javascript/reference/errors/string_literal_eol/index.md similarity index 88% rename from files/zh-cn/web/javascript/reference/errors/unterminated_string_literal/index.md rename to files/zh-cn/web/javascript/reference/errors/string_literal_eol/index.md index 6eeaf33fecba4f..6871229a49b915 100644 --- a/files/zh-cn/web/javascript/reference/errors/unterminated_string_literal/index.md +++ b/files/zh-cn/web/javascript/reference/errors/string_literal_eol/index.md @@ -1,6 +1,6 @@ --- -title: "SyntaxError: unterminated string literal" -slug: Web/JavaScript/Reference/Errors/Unterminated_string_literal +title: "SyntaxError: string literal contains an unescaped line break" +slug: Web/JavaScript/Reference/Errors/String_literal_EOL --- {{jsSidebar("Errors")}} @@ -8,7 +8,9 @@ slug: Web/JavaScript/Reference/Errors/Unterminated_string_literal ## 信息 ```plain -SyntaxError: unterminated string literal +SyntaxError: Invalid or unexpected token (V8-based) +SyntaxError: '' string literal contains an unescaped line break (Firefox) +SyntaxError: Unexpected EOF (Safari) ``` ## 错误类型 diff --git a/files/zh-cn/web/javascript/reference/errors/undefined_prop/index.md b/files/zh-cn/web/javascript/reference/errors/undefined_prop/index.md deleted file mode 100644 index 68dd5317d442a9..00000000000000 --- a/files/zh-cn/web/javascript/reference/errors/undefined_prop/index.md +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: 'ReferenceError: reference to undefined property "x"' -slug: Web/JavaScript/Reference/Errors/Undefined_prop -l10n: - sourceCommit: 6d606174faaedaa5dee7b7ebd87602cd51e5dd7e ---- - -{{jsSidebar("Errors")}} - -当脚本尝试去访问一个不存在的对象属性时，就会出现 JavaScript 警告“reference to undefined property”。 - -## 消息 - -```plain -ReferenceError: reference to undefined property "x" (Firefox) -``` - -## 错误类型 - -（仅限 Firefox）仅在 `javascript.options.strict` 首选项设置为 `true` 的情况下会出现 {{jsxref("ReferenceError")}} 警告。 - -## 哪里出错了？ - -脚本尝试去访问一个不存在的对象属性。有两种方法可以访问属性，请参阅[属性访问器](/zh-CN/docs/Web/JavaScript/Reference/Operators/Property_accessors)参考页以获取更多信息。 - -## 示例 - -### 无效的 - -本例中，`bar` 属性是未定义的，因此会出现 `ReferenceError`。 - -```js example-bad -const foo = {}; -foo.bar; // ReferenceError: reference to undefined property "bar" -``` - -### 有效的 - -为了避免错误，你需要向对象添加 `bar` 的定义或在尝试访问 `bar` 属性之前检查 `bar` 属性是否存在；可以使用 {{jsxref("Operators/in", "in")}} 运算符或 {{jsxref("Object.hasOwn()")}} 方法来实现，如下所示： - -```js example-good -const foo = {}; - -// 定义 bar 属性 - -foo.bar = "moon"; -console.log(foo.bar); // "moon" - -// 在访问 bar 属性之前测试其是否存在 - -if (Object.hasOwn(foo, "bar")) { - console.log(foo.bar); -} -``` - -## 参见 - -- [属性访问器](/zh-CN/docs/Web/JavaScript/Reference/Operators/Property_accessors) diff --git a/files/zh-cn/web/javascript/reference/errors/unexpected_token/index.md b/files/zh-cn/web/javascript/reference/errors/unexpected_token/index.md index 674baa6a92a3e0..3ec6b4275a4382 100644 --- a/files/zh-cn/web/javascript/reference/errors/unexpected_token/index.md +++ b/files/zh-cn/web/javascript/reference/errors/unexpected_token/index.md @@ -5,15 +5,24 @@ slug: Web/JavaScript/Reference/Errors/Unexpected_token {{jsSidebar("Errors")}} +JavaScript 异常“unexpected token”会在解析器在给定位置没有识别到它可以理解的标记（而无法理解程序的结构）时发生。这可能只是一个简单的拼写错误。 + ## 信息 ```plain -SyntaxError: expected expression, got "x" -SyntaxError: expected property name, got "x" -SyntaxError: expected target, got "x" -SyntaxError: expected rest argument name, got "x" -SyntaxError: expected closing parenthesis, got "x" -SyntaxError: expected '=>' after argument list, got "x" +SyntaxError: Unexpected token ';' (V8-based) +SyntaxError: Unexpected identifier 'x' (V8-based) +SyntaxError: Unexpected number (V8-based) +SyntaxError: Unexpected string (V8-based) +SyntaxError: Unexpected regular expression (V8-based) +SyntaxError: Unexpected template string (V8-based) +SyntaxError: unexpected token: identifier (Firefox) +SyntaxError: expected expression, got "x" (Firefox) +SyntaxError: expected property name, got "x" (Firefox) +SyntaxError: expected target, got "x" (Firefox) +SyntaxError: expected meta, got "x" (Firefox) +SyntaxError: expected rest argument name, got "x" (Firefox) +SyntaxError: expected closing parenthesis, got "x" (Firefox) ``` ## 错误类型 @@ -42,6 +51,6 @@ Math.max(2, 42); Math.max(2, 42, 13 + 37); ``` -## 相关 +## 参见 -- {{jsxref("Math.max()")}} +- {{jsxref("SyntaxError")}} diff --git a/files/zh-cn/web/javascript/reference/global_objects/array/index.md b/files/zh-cn/web/javascript/reference/global_objects/array/index.md index c98d00c947be1e..10bc1837f93f54 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/array/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/array/index.md @@ -1,6 +1,8 @@ --- title: Array slug: Web/JavaScript/Reference/Global_Objects/Array +l10n: + sourceCommit: c4a47058862708136e2818a5d3d21c4a1645d89a --- {{JSRef}} @@ -9,24 +11,24 @@ slug: Web/JavaScript/Reference/Global_Objects/Array ## 描述 -在 JavaScript 中，数组不是[基本类型](/zh-CN/docs/Glossary/Primitive)，而是具有以下核心特征的 `Array` 对象： +在 JavaScript 中，数组不是[原始类型](/zh-CN/docs/Glossary/Primitive)，而是具有以下核心特征的 `Array` 对象： - **JavaScript 数组是可调整大小的，并且可以包含不同的[数据类型](/zh-CN/docs/Web/JavaScript/Data_structures)**。（当不需要这些特征时，可以使用[类型化数组](/zh-CN/docs/Web/JavaScript/Guide/Typed_arrays)。） - **JavaScript 数组不是关联数组**，因此，不能使用任意字符串作为索引访问数组元素，但必须使用非负整数（或它们各自的字符串形式）作为索引访问。 - **JavaScript 数组的[索引从 0 开始](https://zh.wikipedia.org/zh-cn/從零開始的編號)**：数组的第一个元素在索引 `0` 处，第二个在索引 `1` 处，以此类推，最后一个元素是数组的 {{jsxref("Array/length", "length")}} 属性减去 `1` 的值。 - **JavaScript [数组复制操作](#复制数组)创建[浅拷贝](/zh-CN/docs/Glossary/Shallow_copy)**。（_所有_ JavaScript 对象的标准内置复制操作都会创建浅拷贝，而不是[深拷贝](/zh-CN/docs/Glossary/Deep_copy)）。 -### 数组下标 +### 数组索引 -`Array` 对象不能使用任意字符串作为元素索引（如[关联数组](https://zh.wikipedia.org/wiki/关联数组)），必须使用非负整数（或它们的字符串形式）。通过非整数设置或访问不会设置或从数组列表本身检索元素，但会设置或访问与该数组的[对象属性集合](/zh-CN/docs/Web/JavaScript/Data_structures#属性)相关的变量。数组的对象属性和数组元素列表是分开的，数组的[遍历和修改操作](/zh-CN/docs/Web/JavaScript/Guide/Indexed_collections#数组方法)不能应用于这些命名属性。 +`Array` 对象不能使用任意字符串作为元素索引（如[关联数组](https://zh.wikipedia.org/wiki/关联数组)），必须使用非负整数（或它们的字符串形式）。通过非整数设置或访问不会设置或从数组列表本身检索元素，但会设置或访问与该数组的[对象属性集合](/zh-CN/docs/Web/JavaScript/Data_structures#属性)相关的变量。数组的对象属性和数组元素列表是分开的，数组的[遍历和修改操作](/zh-CN/docs/Web/JavaScript/Guide/Indexed_collections#数组方法)不能应用于这些具名属性。 数组元素是对象属性，就像 `toString` 是属性一样（具体来说，`toString()` 是一种方法）。然而，尝试按以下方式访问数组的元素会抛出语法错误，因为属性名无效： ```js example-bad -console.log(arr.0); // 语法错误 +arr.0; // 语法错误 ``` -JavaScript 语法要求使用[方括号表示法](/zh-CN/docs/Web/JavaScript/Guide/Working_with_objects#对象和属性)而不是[点号表示法](/zh-CN/docs/Web/JavaScript/Reference/Operators/Property_accessors)来访问以数字开头的属性。也可以用引号包裹数组下标（例如，`years['2']` 而不是 `years[2]`），尽管通常没有必要。 +JavaScript 语法要求使用[方括号表示法](/zh-CN/docs/Web/JavaScript/Guide/Working_with_objects#对象和属性)而不是[点号表示法](/zh-CN/docs/Web/JavaScript/Reference/Operators/Property_accessors)来访问以数字开头的属性。也可以用引号包裹数组索引（例如，`years['2']` 而不是 `years[2]`），尽管通常没有必要。 JavaScript 引擎通过隐式的 `toString`，将 `years[2]` 中的 `2` 强制转换为字符串。因此，`'2'` 和 `'02'` 将指向 `years` 对象上的两个不同的槽位，下面的例子可能是 `true`： @@ -59,7 +61,7 @@ console.log(Object.keys(fruits)); // ['0', '1', '2', '5'] console.log(fruits.length); // 6 ``` -增加 {{jsxref("Array/length", "length")}}。 +增加 {{jsxref("Array/length", "length")}} 会通过添加空槽来扩展数组，而不是创建任何新元素——甚至不会是 `undefined`。 ```js fruits.length = 10; @@ -77,73 +79,61 @@ console.log(Object.keys(fruits)); // ['0', '1'] console.log(fruits.length); // 2 ``` -这将在 {{jsxref("Array/length")}} 页中进一步解释。 +这将在 {{jsxref("Array/length", "length")}} 页中进一步解释。 ### 数组方法和空槽 -[稀疏数组](/zh-CN/docs/Web/JavaScript/Guide/Indexed_collections#稀疏数组)中的空槽在数组方法之间的行为不一致。通常，旧方法会跳过空槽，而新方法将它们视为 `undefined`。 - -在遍历多个元素的方法中，下面的方法在访问索引之前执行 [`in`](/zh-CN/docs/Web/JavaScript/Reference/Operators/in) 检查，并且不将空槽与 `undefined` 合并： - -- {{jsxref("Array/concat", "concat()")}} -- {{jsxref("Array/copyWithin", "copyWithin()")}} -- {{jsxref("Array/every", "every()")}} -- {{jsxref("Array/filter", "filter()")}} -- {{jsxref("Array/flat", "flat()")}} -- {{jsxref("Array/flatMap", "flatMap()")}} -- {{jsxref("Array/forEach", "forEach()")}} -- {{jsxref("Array/indexOf", "indexOf()")}} -- {{jsxref("Array/lastIndexOf", "lastIndexOf()")}} -- {{jsxref("Array/map", "map()")}} -- {{jsxref("Array/reduce", "reduce()")}} -- {{jsxref("Array/reduceRight", "reduceRight()")}} -- {{jsxref("Array/reverse", "reverse()")}} -- {{jsxref("Array/slice", "slice()")}} -- {{jsxref("Array/some", "some()")}} -- {{jsxref("Array/sort", "sort()")}} -- {{jsxref("Array/splice", "splice()")}} - -关于它们是如何处理空槽的，请参阅每个方法的页面。 - -这些方法将空槽视为 `undefined`： - -- {{jsxref("Array/entries", "entries()")}} -- {{jsxref("Array/fill", "fill()")}} -- {{jsxref("Array/find", "find()")}} -- {{jsxref("Array/findIndex", "findIndex()")}} -- {{jsxref("Array/findLast", "findLast()")}} -- {{jsxref("Array/findLastIndex", "findLastIndex()")}} -- {{jsxref("Array/includes", "includes()")}} -- {{jsxref("Array/join", "join()")}} -- {{jsxref("Array/keys", "keys()")}} -- {{jsxref("Array/toLocaleString", "toLocaleString()")}} -- {{jsxref("Array/values", "values()")}} +数组方法在遇到空槽时有不同的行为，在[稀疏数组](/zh-CN/docs/Web/JavaScript/Guide/Indexed_collections#稀疏数组)中数组方法遇到空槽时有不同的行为。通常，较旧的方法（例如 `forEach`）处理空槽的方式与处理包含 `undefined` 索引的方式不同。 + +对空槽进行特殊处理的方法包括：{{jsxref("Array/concat", "concat()")}}、{{jsxref("Array/copyWithin", "copyWithin()")}}、{{jsxref("Array/every", "every()")}}、{{jsxref("Array/filter", "filter()")}}、{{jsxref("Array/flat", "flat()")}}、{{jsxref("Array/flatMap", "flatMap()")}}、{{jsxref("Array/forEach", "forEach()")}}、{{jsxref("Array/indexOf", "indexOf()")}}、{{jsxref("Array/lastIndexOf", "lastIndexOf()")}}、{{jsxref("Array/map", "map()")}}、{{jsxref("Array/reduce", "reduce()")}}、{{jsxref("Array/reduceRight", "reduceRight()")}}、{{jsxref("Array/reverse", "reverse()")}}、{{jsxref("Array/slice", "slice()")}}、{{jsxref("Array/some", "some()")}}、{{jsxref("Array/sort", "sort()")}} 和 {{jsxref("Array/splice", "splice()")}}。诸如 `forEach` 之类的迭代方法根本不会访问空槽。其他方法，如 `concat`、`copyWithin` 等，在进行复制时会保留空槽，因此最终数组依然是稀疏的。 + +```js +const colors = ["红", "黄", "蓝"]; +colors[5] = "紫"; +colors.forEach((item, index) => { + console.log(`${index}：${item}`); +}); +// 输出： +// 0：红 +// 1：黄 +// 2：蓝 +// 5：蓝 + +colors.reverse(); // ['紫', 空槽 × 2, '蓝', '黄', '红'] +``` + +较新的方法（例如 `keys`）不会对空槽进行特殊处理，而是将它们视为包含 `undefined`。将空槽合并为 `undefined` 元素方法有：{{jsxref("Array/entries", "entries()")}}、{{jsxref("Array/fill", "fill()")}}、{{jsxref("Array/find", "find()")}}、{{jsxref("Array/findIndex", "findIndex()")}}、{{jsxref("Array/findLast", "findLast()")}}、{{jsxref("Array/findLastIndex", "findLastIndex()")}}、{{jsxref("Array/includes", "includes()")}}、{{jsxref("Array/join", "join()")}}、{{jsxref("Array/keys", "keys()")}}、{{jsxref("Array/toLocaleString", "toLocaleString()")}}、{{jsxref("Array/values", "values()")}} 和 {{jsxref("Array/with", "with()")}}。 + +```js +const colors = ["红", "黄", "蓝"]; +colors[5] = "紫"; +const iterator = colors.keys(); +for (const key of iterator) { + console.log(`${key}：${colors[key]}`); +} +// 输出 +// 0：红 +// 1：黄 +// 2：蓝 +// 3：undefined +// 4：undefined +// 5：紫 + +const newColors = colors.toReversed(); // ['紫', undefined, undefined, '蓝', '黄', '红'] +``` ### 复制方法和修改方法 有些方法不会修改调用该方法的现有数组，而是返回一个新的数组。它们通过首先构造一个新数组，然后填充元素来实现。复制始终是[_浅层次的_](/zh-CN/docs/Glossary/Shallow_copy)——该方法从不复制一开始创建的数组之外的任何内容。原始数组的元素将按以下方式复制到新数组中： - 对象：对象引用被复制到新数组中。原数组和新数组都引用同一个对象。也就是说，如果一个被引用的对象被修改，新数组和原数组都可以看到更改。 -- 基本类型，如字符串、数字和布尔值（不是 {{jsxref("Global_Objects/String", "String")}}、{{jsxref("Global_Objects/Number", "Number")}} 和 {{jsxref("Global_Objects/Boolean", "Boolean")}} 对象）：它们的值被复制到新数组中。 +- 原始类型，如字符串、数字和布尔值（不是 {{jsxref("String")}}、{{jsxref("Number")}} 和 {{jsxref("Boolean")}} 对象）：它们的值被复制到新数组中。 其他方法会改变调用该方法的数组，在这种情况下，它们的返回值根据方法的不同而不同：有时是对相同数组的引用，有时是新数组的长度。 -以下方法通过访问 [`this.constructor[Symbol.species]`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/@@species) 来创建新数组，以确定要使用的构造函数： - -- {{jsxref("Array/concat", "concat()")}} -- {{jsxref("Array/filter", "filter()")}} -- {{jsxref("Array/flat", "flat()")}} -- {{jsxref("Array/flatMap", "flatMap()")}} -- {{jsxref("Array/map", "map()")}} -- {{jsxref("Array/slice", "slice()")}} -- {{jsxref("Array/splice", "splice()")}}（构造返回的已删除元素数组） - -以下方法总是使用 `Array` 基础构造函数创建新数组： +以下方法通过访问 [`this.constructor[Symbol.species]`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/@@species) 来创建新数组，以确定要使用的构造函数：{{jsxref("Array/concat", "concat()")}}、{{jsxref("Array/filter", "filter()")}}、{{jsxref("Array/flat", "flat()")}}、{{jsxref("Array/flatMap", "flatMap()")}}、{{jsxref("Array/map", "map()")}}、{{jsxref("Array/slice", "slice()")}} 和 {{jsxref("Array/splice", "splice()")}}（返回构造的已删除元素数组） -- {{jsxref("Array/toReversed", "toReversed()")}} -- {{jsxref("Array/toSorted", "toSorted()")}} -- {{jsxref("Array/toSpliced", "toSpliced()")}} -- {{jsxref("Array/with", "with()")}} +以下方法总是使用 `Array` 基础构造函数创建新数组：{{jsxref("Array/toReversed", "toReversed()")}}、{{jsxref("Array/toSorted", "toSorted()")}}、{{jsxref("Array/toSpliced", "toSpliced()")}} 和 {{jsxref("Array/with", "with()")}}。 下表列出了会修改原始数组的方法，以及相应的非修改方法： @@ -186,32 +176,42 @@ method(callbackFn, thisArg) `callbackFn` 的返回值取决于调用的数组方法。 -`thisArg` 参数（默认为 `undefined`）将在调用 `callbackFn` 时用作 `this` 值。最终由 `callbackFn` 观察到的 `this` 值根据[通常的规则](/zh-CN/docs/Web/JavaScript/Reference/Operators/this) 确定：如果 `callbackFn` 是[非严格模式](/zh-CN/docs/Web/JavaScript/Reference/Strict_mode)（译注：[正常模式/马虎模式](/zh-CN/docs/Glossary/Sloppy_mode)），原始 `this` 值将被包装为对象，并将 `undefined`/`null` 替换为 [`globalThis`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/globalThis)。对于使用 [箭头函数](/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions) 定义的任何 `callbackFn` 来说，`thisArg` 参数都是无关紧要的，因为箭头函数没有自己的 `this` 绑定。 +`thisArg` 参数（默认为 `undefined`）将在调用 `callbackFn` 时用作 `this` 值。最终由 `callbackFn` 观察到的 `this` 值根据[通常的规则](/zh-CN/docs/Web/JavaScript/Reference/Operators/this)确定：如果 `callbackFn` 是[非严格模式](/zh-CN/docs/Web/JavaScript/Reference/Strict_mode)，原始 `this` 值将被包装为对象，并将 `undefined`/`null` 替换为 [`globalThis`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/globalThis)。对于使用[箭头函数](/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions) 定义的任何 `callbackFn` 来说，`thisArg` 参数都是无关紧要的，因为箭头函数没有自己的 `this` {{Glossary("binding", "绑定")}}。 -所有迭代方法都是[复制方法](#复制方法和修改方法)和[通用方法](#通用数组方法)，尽管它们在处理[空槽](#数组方法和空槽)时的行为不同。 +如果想要在迭代期间读取另一个索引值的话，传递给 `callbackFn` 的 `array` 参数是有用的，因为可能并不总是有一个引用当前数据的现有变量。在迭代过程中，通常不应更改数组（参见 [迭代方法中的改变初始数组](#迭代方法中的改变初始数组)），但可以使用这个参数这样做。`array` 参数*不是*正在构建的数组，在类似 `map()`、`filter()` 和 `flatMap()` 方法的情况下——无法通过回调函数访问正在构建的数组。 -以下方法是迭代方法： +所有迭代方法都是[复制方法](#复制方法和修改方法)和[通用方法](#通用数组方法)，尽管它们在处理[空槽](#数组方法和空槽)时的行为不同。 -- {{jsxref("Array/every", "every()")}} -- {{jsxref("Array/filter", "filter()")}} -- {{jsxref("Array/find", "find()")}} -- {{jsxref("Array/findIndex", "findIndex()")}} -- {{jsxref("Array/findLast", "findLast()")}} -- {{jsxref("Array/findLastIndex", "findLastIndex()")}} -- {{jsxref("Array/flatMap", "flatMap()")}} -- {{jsxref("Array/forEach", "forEach()")}} -- {{jsxref("Array/map", "map()")}} -- {{jsxref("Array/some", "some()")}} +以下方法是迭代方法：{{jsxref("Array/every", "every()")}}、{{jsxref("Array/filter", "filter()")}}、{{jsxref("Array/find", "find()")}}、{{jsxref("Array/findIndex", "findIndex()")}}、{{jsxref("Array/findLast", "findLast()")}}、{{jsxref("Array/findLastIndex", "findLastIndex()")}}、{{jsxref("Array/flatMap", "flatMap()")}}、{{jsxref("Array/forEach", "forEach()")}}、{{jsxref("Array/map", "map()")}} 和 {{jsxref("Array/some", "some()")}}。 特别地，{{jsxref("Array/every", "every()")}}、{{jsxref("Array/find", "find()")}}、{{jsxref("Array/findIndex", "findIndex()")}}、{{jsxref("Array/findLast", "findLast()")}}、{{jsxref("Array/findLastIndex", "findLastIndex()")}} 和 {{jsxref("Array/some", "some()")}} 并不总是在每个元素上调用 `callbackFn`——它们在确定返回值后立即停止迭代。 -还有两个方法接受一个回调函数，并对数组中的每个元素最多运行一次，但它们的方法签名与典型的迭代方法略有不同（例如，它们不接受 `thisArg`）： - -- {{jsxref("Array/reduce", "reduce()")}} -- {{jsxref("Array/reduceRight", "reduceRight()")}} +{{jsxref("Array/reduce", "reduce()")}} 和 {{jsxref("Array/reduceRight", "reduceRight()")}} 方法也接受一个回调函数，并对数组中的每个元素最多运行一次，但它们的方法签名与典型的迭代方法略有不同（例如，它们不接受 `thisArg`）。 {{jsxref("Array/sort", "sort()")}} 方法也接受一个回调函数，但它不是一个迭代方法。它会就地修改数组，不接受 `thisArg`，并且可能在索引上多次调用回调函数。 +迭代方法迭代数组，如下所示（省略许多技术细节）： + +```js +function method(callbackFn, thisArg) { + const length = this.length; + for (let i = 0; i < length; i++) { + if (i in this) { + const result = callbackFn.call(thisArg, this[i], i, this); + // 使用 result 做一些事，也许更早地返回 + } + } +} +``` + +备注如下内容： + +1. 不是所有的方法都执行 `i in this` 验证，`find`、`findIndex`、`findLast` 和 `findLastIndex` 方法不执行，其他的会。 +2. `length` 变量在循环开始前存储。这会影响迭代过程中插入和删除的处理方式（参见[迭代方法中的改变初始数组](#迭代方法中的改变初始数组)）。 +3. `method` 方法不会存储数组内容，因此如果迭代期间，有任何索引发生更改，可以观察到新的值。 +4. 上面的代码按索引的升序迭代数组，有一些方法按索引降序迭代（`for (let i = length - 1; i >= 0; i--)`）：`reduceRight()`、`findLast()` 和 `findLastIndex()`。 +5. `reduce` 和 `reduceRight` 具有略微不同的签名，并不总是从第一个/最后一个元素开始。 + ### 通用数组方法 数组方法总是通用的——它们不访问数组对象的任何内部数据。它们只通过 `length` 属性和索引访问数组元素。这意味着它们也可以在类数组对象上调用。 @@ -271,8 +271,8 @@ f("a", "b"); // 'a+b' - {{jsxref("Array.from()")}} - : 从数组类对象或可迭代对象创建一个新的 `Array` 实例。 -- {{jsxref("Array.fromAsync()")}} {{Experimental_Inline}} - - 从异步可迭代、可迭代或类数组对象创建新的 `Array` 实例。 +- {{jsxref("Array.fromAsync()")}} + - : 从异步可迭代、可迭代或类数组对象创建新的 `Array` 实例。 - {{jsxref("Array.isArray()")}} - : 如果参数是数组则返回 `true` ，否则返回 `false` 。 - {{jsxref("Array.of()")}} @@ -786,6 +786,143 @@ console.log(execResult); // [ "dbBd", "bB", "d" ] 有关匹配结果的更多信息，请参见 {{jsxref("RegExp.prototype.exec()")}} 和 {{jsxref("String.prototype.match()")}} 页。 +### 迭代方法中的改变初始数组 + +[迭代方法](#迭代方法)不会改变调用它的数组，但作为 `callbackFn` 提供的函数可以。要记住关键原则是只有 0 和 `arrayLength - 1` 之间的索引可访问，`arrayLength` 是数组方法第一次被调用时的长度值，但传递给回调的元素是访问索引时的值。因此： + +- `callbackFn` 不会访问任何添加到超出数组的初始化长度之外的元素，当开始调用迭代方法时。 +- 对已访问索引的变更不会导致再次对其调用 `callbackFn`。 +- 如果数组中存在但未访问的元素被 `callbackFn` 更改，则传递给 `callbackFn` 的值将是访问该元素时的值。删除的元素不会被访问。 + +> **警告：** 上述类型的并发修改通常会导致代码难以理解，需要避免（特殊情况除外）。 + +下面的示例使用 `forEach` 方法作为一个例子，但以升序访问索引的其他的方法以相同的方式工作。我们将先定义一个帮助函数： + +```js +function testSideEffect(effect) { + const arr = ["e1", "e2", "e3", "e4"]; + arr.forEach((elem, index, arr) => { + console.log(`数组：[${arr.join(", ")}]，索引：${index}，元素：${elem}`); + effect(arr, index); + }); + console.log(`最终数组：[${arr.join(", ")}]`); +} +``` + +一旦达到索引，对尚未访问索引的修改将可见： + +```js +testSideEffect((arr, index) => { + if (index + 1 < arr.length) arr[index + 1] += "*"; +}); +// 数组：[e1, e2, e3, e4]，索引：0，元素：e1 +// 数组：[e1, e2*, e3, e4]，索引：1，元素：e2* +// 数组：[e1, e2*, e3*, e4]，索引：2，元素：e3* +// 数组：[e1, e2*, e3*, e4*]，索引：3，元素：e4* +// 最终数组：[e1, e2*, e3*, e4*] +``` + +对已访问索引的修改不会改变迭代行为，尽管之后数据会有所不同： + +```js +testSideEffect((arr, index) => { + if (index > 0) arr[index - 1] += "*"; +}); +// 数组：[e1, e2, e3, e4]，索引：0，元素：e1 +// 数组：[e1, e2, e3, e4]，索引：1，元素：e2 +// 数组：[e1*, e2, e3, e4]，索引：2，元素：e3 +// 数组：[e1*, e2*, e3, e4]，索引：3，元素：e4 +// 最终数组：[e1*, e2*, e3*, e4] +``` + +在小于初始数组长度的未访问索引处插入 _n_ 元素将使它们被访问。原始数组中大于初始长度的最后 _n_ 元素将不会被访问： + +```js +testSideEffect((arr, index) => { + if (index === 1) arr.splice(2, 0, "new"); +}); +// 数组：[e1, e2, e3, e4]，索引：0，元素：e1 +// 数组：[e1, e2, e3, e4]，索引：1，元素：e2 +// 数组：[e1, e2, new, e3, e4]，索引：2，元素：new +// 数组：[e1, e2, new, e3, e4]，索引：3，元素：e3 +// 最终数组：[e1, e2, new, e3, e4] +// e4 不会被访问因为它的索引是 4 +``` + +在大于初始数组长度处插入 _n_ 元素将不会使它们被访问： + +```js +testSideEffect((arr) => arr.push("new")); +// 数组：[e1, e2, e3, e4]，索引：0，元素：e1 +// 数组：[e1, e2, e3, e4, new]，索引：1，元素：e2 +// 数组：[e1, e2, e3, e4, new, new]，索引：2，元素：e3 +// 数组：[e1, e2, e3, e4, new, new, new]，索引：3，元素：e4 +// 最终数组：[e1, e2, e3, e4, new, new, new, new] +``` + +对已经访问过的索引插入 _n_ 元素将不会使它们被访问，但它会将剩余元素向后移动 _n_，因此当前索引和它之前的 _n - 1_ 元素会再次被访问。 + +```js +testSideEffect((arr, index) => arr.splice(index, 0, "new")); +// 数组：[e1, e2, e3, e4]，索引：0，元素：e1 +// 数组：[new, e1, e2, e3, e4]，索引：1，元素：e1 +// 数组：[new, new, e1, e2, e3, e4]，索引：2，元素：e1 +// 数组：[new, new, new, e1, e2, e3, e4]，索引：3，元素：e1 +// 最终数组：[new, new, new, new, e1, e2, e3, e4] +// e1 不断被访问，因为它不断被移回 +``` + +删除未访问索引处的 _n_ 元素将使它们不再被访问。因为数组已经缩小，最后 _n_ 迭代将访问越界索引。如果此方法忽略不存在的索引（参见[数组方法和空槽](#数组方法和空槽)），最后的 _n_ 次迭代将会被跳过；否则，它们将收到 `undefined`： + +```js +testSideEffect((arr, index) => { + if (index === 1) arr.splice(2, 1); +}); +// 数组：[e1, e2, e3, e4]，索引：0，元素：e1 +// 数组：[e1, e2, e3, e4]，索引：1，元素：e2 +// 数组：[e1, e2, e4]，索引：2，元素：e4 +// 最终数组：[e1, e2, e4] +// 不会访问索引 3 因为它越界 + +// 与 find() 比较，后者将不存在的索引视为未定义： +const arr2 = ["e1", "e2", "e3", "e4"]; +arr2.find((elem, index, arr) => { + console.log(`数组：[${arr.join(", ")}]，索引：${index}，元素：${elem}`); + if (index === 1) arr.splice(2, 1); + return false; +}); +// 数组：[e1, e2, e3, e4]，索引：0，元素：e1 +// 数组：[e1, e2, e3, e4]，索引：1，元素：e2 +// 数组：[e1, e2, e4]，索引：2，元素：e4 +// 数组：[e1, e2, e4]，索引：3，元素：undefined +``` + +删除已访问索引处的 _n_ 元素不会改变它们在删除之前被访问的事实。因为数据已经缩小，在当前索引后的下 _n_ 元素被跳过。如果此方法忽略不存在索引，最后的 _n_ 次迭代将会被跳过；否则，它们将收到 `undefined`： + +```js +testSideEffect((arr, index) => arr.splice(index, 1)); +// 数组：[e1, e2, e3, e4]，索引：0，元素：e1 +// 不会范围内 e2 因为 e2 现在的索引是 0，索引 0 已经被访问过 +// 数组：[e2, e3, e4]，索引：1，元素：e3 +// 不会范围内 e4 因为 e4 现在的索引是 1，索引 1 已经被访问过 +// 最终数组：[e2, e4] +// 索引 2 越界，索引它不会被访问 + +// 与 find() 比较，后者将不存在的索引视为未定义： +const arr2 = ["e1", "e2", "e3", "e4"]; +arr2.find((elem, index, arr) => { + console.log(`数组：[${arr.join(", ")}]，索引：${index}，元素：${elem}`); + arr.splice(index, 1); + return false; +}); +// 数组：[e1, e2, e3, e4]，索引：0，元素：e1 +// 数组：[e2, e3, e4]，索引：1，元素：e3 +// 数组：[e2, e4]，索引：2，元素：undefined +// 数组：[e2, e4]，索引：3，元素：undefined +``` + +对于按索引降序迭代的方法，插入会导致元素被跳过，删除会导致元素被多次访问，调整上面的代码以查看效果。 + ## 规范 {{Specifications}} @@ -796,6 +933,6 @@ console.log(execResult); // [ "dbBd", "bB", "d" ] ## 参见 -- [索引集合类](/zh-CN/docs/Web/JavaScript/Guide/Indexed_collections) +- [索引集合类](/zh-CN/docs/Web/JavaScript/Guide/Indexed_collections)指南 - {{jsxref("TypedArray")}} - {{jsxref("ArrayBuffer")}}