From 963c45ca629a70d184a205dab436b47f1aa5cdad Mon Sep 17 00:00:00 2001 From: Jason Ren <40999116+jasonren0403@users.noreply.github.com> Date: Fri, 10 Nov 2023 13:12:40 +0800 Subject: [PATCH 001/141] [zh-cn]: init the translation of 'regular expressions' (#16884) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: A1lo --- .../reference/regular_expressions/index.md | 166 ++++++++++++++++++ 1 file changed, 166 insertions(+) create mode 100644 files/zh-cn/web/javascript/reference/regular_expressions/index.md diff --git a/files/zh-cn/web/javascript/reference/regular_expressions/index.md b/files/zh-cn/web/javascript/reference/regular_expressions/index.md new file mode 100644 index 00000000000000..47a4ec84e07a79 --- /dev/null +++ b/files/zh-cn/web/javascript/reference/regular_expressions/index.md @@ -0,0 +1,166 @@ +--- +title: 正则表达式 +slug: Web/JavaScript/Reference/Regular_expressions +l10n: + sourceCommit: 4f86aad2b0b66c0d2041354ec81400c574ab56ca +--- + +{{jsSidebar}} + +**正则表达式**（简称 _regex_）允许开发人员根据模式匹配字符串、提取子匹配信息，或简单地测试字符串是否符合该模式。正则表达式在许多编程语言中都有使用，JavaScript 的语法受 [Perl](https://www.perl.org/) 的启发。 + +我们建议你阅读[正则表达式指南](/zh-CN/docs/Web/JavaScript/Guide/Regular_expressions)，以全面了解可用的正则表达式语法及其工作原理。 + +## 描述 + +[_正则表达式_](https://zh.wikipedia.org/wiki/正则表达式)是形式语言理论中的一个重要概念。正则表达式是一种描述可能是无限的字符串集合（称为*语言*）的方法。正则表达式的核心需要具备以下特征： + +- 可在语言中使用的一系列*字符*，称为*字母表*。 +- _连接_：`ab` 表示“字符 `a` 后跟字符 `b`”。 +- _并集_：`a|b` 表示“`a` 或 `b`”。 +- _克莱尼星号_（Kleene star）：`a*` 表示“零个或多个 `a` 字符”。 + +假设有一个有限的字母表（如 26 个英文字母或整个 Unicode 字符集），那么所有正则表达式语言都可以通过上述特征生成。当然，许多模式用这种方式来表达非常繁琐（如“10 位数字”或“一个非空格的字符”），因此 JavaScript 正则表达式包含许多速记符号，下面将一一介绍。 + +> **备注：** 由于存在[反向引用](/zh-CN/docs/Web/JavaScript/Reference/Regular_expressions/Backreference)（正则表达式必须具有有限状态），JavaScript 正则表达式实际上并不“正则”。不过，反向引用仍然是一个非常有用的特性。 + +### 创建正则表达式 + +正则表达式通常是用正斜线（`/`）将模式括起来，以字面量形式创建的： + +```js +const regex1 = /ab+c/g; +``` + +也可以使用 {{jsxref("RegExp/RegExp", "RegExp()")}} 构造函数来创建正则表达式： + +```js +const regex2 = new RegExp("ab+c", "g"); +``` + +它们在运行时没有区别，但可能会对性能、静态分析性和编写转义字符时的人体工程学问题产生影响。有关详细信息，请参阅 [`RegExp`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp#字面量和构造函数) 参考资料。 + +### 正则表达式标志 + +标志（flag）是一种特殊参数，可以改变正则表达式的解释方式或与输入文本的交互方式。每个标志都与 `RegExp` 对象上的一个访问器属性相对应。 + +| 标志 | 描述 | 对应属性 | +| ---- | ---------------------------------------------------------- | ----------------------------------------------- | +| `d` | 生成子串匹配的索引。 | {{jsxref("RegExp/hasIndices", "hasIndices")}} | +| `g` | 全局查找。 | {{jsxref("RegExp/global", "global")}} | +| `i` | 忽略大小写查找。 | {{jsxref("RegExp/ignoreCase", "ignoreCase")}} | +| `m` | 允许 `^` 和 `$` 匹配换行符。 | {{jsxref("RegExp/multiline", "multiline")}} | +| `s` | 允许 `.` 匹配换行符。 | {{jsxref("RegExp/dotAll", "dotAll")}} | +| `u` | “Unicode”；将模式视为 Unicode 码位序列。 | {{jsxref("RegExp/unicode", "unicode")}} | +| `v` | 升级 `u` 模式，提供更多 Unicode 码特性。 | {{jsxref("RegExp/unicodeSets", "unicodeSets")}} | +| `y` | 执行“粘性（sticky）”搜索，从目标字符串的当前位置开始匹配。 | {{jsxref("RegExp/sticky", "sticky")}} | + +下面各节按语法性质列出了所有可用的正则表达式语法。 + +### 断言 + +断言（assertion）是一种结构，用于测试字符串在指定位置是否满足特定条件，但不消耗字符。断言不能[使用量词](/zh-CN/docs/Web/JavaScript/Reference/Regular_expressions/Quantifier)。 + +- [输入边界断言：`^`、`$`](/zh-CN/docs/Web/JavaScript/Reference/Regular_expressions/Input_boundary_assertion) + - : 断言当前位置是输入的开始或结束，如果设置了 `m` 标志，则断言当前位置是一行的开始或结束。 +- [前瞻断言：`(?=...)`、`(?!...)`](/zh-CN/docs/Web/JavaScript/Reference/Regular_expressions/Lookahead_assertion) + - : 断言当前位置是否被某个模式跟随。 +- [后瞻断言：`(?<=...)`、`(?`](/zh-CN/docs/Web/JavaScript/Reference/Regular_expressions/Named_backreference) + - : 匹配先前匹配的子模式，并使用已命名的捕获组进行捕获。 +- [具名捕获组：`(?...)`](/zh-CN/docs/Web/JavaScript/Reference/Regular_expressions/Named_capturing_group) + - : 匹配子模式并保存匹配信息。以后可以用自定义名称而不是模式中的索引来识别该组。 +- [非捕获分组：`(?:...)`](/zh-CN/docs/Web/JavaScript/Reference/Regular_expressions/Non-capturing_group) + - : 匹配子模式，但不记忆匹配信息。 +- [Unicode 字符类转义：`p{...}`、`\P{...}`](/zh-CN/docs/Web/JavaScript/Reference/Regular_expressions/Unicode_character_class_escape) + - : 匹配 Unicode 属性指定的字符集。启用 [`v`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/unicodeSets) 标志后，也可用于匹配长度有限的字符串。 +- [通配符：`.`](/zh-CN/docs/Web/JavaScript/Reference/Regular_expressions/Wildcard) + - : 匹配除行结束符外的任何字符，除非设置了 `s` 标志。 + +### 其他特性 + +这些特征本身不指定任何模式，但用于组成模式。 + +- [析取（逻辑或）：`|`](/zh-CN/docs/Web/JavaScript/Reference/Regular_expressions/Disjunction) + - : 匹配由 `|` 字符分隔的一组备选字符中的任意一个。 +- [量词：`*`、`+`、`?`、`{n}`、`{n,}`、`{n,m}`](/zh-CN/docs/Web/JavaScript/Reference/Regular_expressions/Quantifier) + - : 匹配原子序列一定次数。 + +### 转义序列 + +在正则表达式中，*转义序列*是指任何一种由 `\` 后跟一个或多个字符组成的语法。根据 `\` 后面的字符的不同，它们的作用也大相径庭。下面列出了所有有效的“转义序列”： + +| 转义序列 | 跟随 | 含义 | +| -------- | ---------------------------------------------------- | ---------------------------------------------------------------------- | +| `\B` | 无 | [非单词边界断言][WBA] | +| `\D` | 无 | 代表非数字字符的[字符类转义][CCE] | +| `\P` | `{`、Unicode 属性和/或值、`}` | 代表不具有指定 Unicode 类型的 [Unicode 字符类转义][UCCE] | +| `\S` | 无 | 代表非空白字符的[字符类转义][CCE] | +| `\W` | 无 | 代表非单词字符的[字符类转义][CCE] | +| `\b` | 无 | [单词边界断言][WBA]；属于[字符类][CC]，代表 U+0008（BACKSPACE） | +| `\c` | 从 `A` 到 `Z` 或从 `a` 到 `z` 的字母 | 代表控制字符的[字符转义][CE]，其值等于字母的字符值乘以 32 | +| `\d` | 无 | 表示数字字符（`0` 至`9`）的[字符类转义][CCE] | +| `\f` | 无 | 代表 U+000C（FORM FEED）字符的[字符转义][CE] | +| `\k` | `<`、量词、`>` | [具名反向引用][NBR] | +| `\n` | 无 | 代表 U+000A（LINE FEED）字符的[字符转义][CE] | +| `\p` | `{`、Unicode 属性和/或值、`}` | 代表具有指定 Unicode 属性的字符的[Unicode 字符类转义][UCCE] | +| `\q` | `{`、一个字符串、`}` | 仅在 [`v` 模式字符类][VCC]中有效；表示要按字面匹配的字符串 | +| `\r` | 无 | 代表 U+000D（CARRIAGE RETURN）字符的[字符转义][CE] | +| `\s` | 无 | 代表空白字符的[字符类转义][CCE] | +| `\t` | 无 | 代表 U+0009（CHARACTER TABULATION）字符的[字符转义][CE] | +| `\u` | 4 个十六进制数字；或 `{`、1 至 6 个十六进制数字、`}` | 代表具有给定码点的字符的[字符转义][CE] | +| `\v` | 无 | 代表 U+000B（LINE TABULATION）字符的[字符转义][CE] | +| `\w` | 无 | 代表单字（`A` 到 `Z`、`a` 到 `z`、`0` 到 `9`、`_`）的[字符类转义][CCE] | +| `\x` | 2 个十六进制数字 | 表示具有给定值的字符的[字符转义][CE] | +| `\0` | 无 | 代表 U+0000（NULL）字符的[字符转义][CE] | + +[CC]: /zh-CN/docs/Web/JavaScript/Reference/Regular_expressions/Character_class +[CCE]: /zh-CN/docs/Web/JavaScript/Reference/Regular_expressions/Character_class_escape +[CE]: /zh-CN/docs/Web/JavaScript/Reference/Regular_expressions/Character_escape +[NBR]: /zh-CN/docs/Web/JavaScript/Reference/Regular_expressions/Named_backreference +[UCCE]: /zh-CN/docs/Web/JavaScript/Reference/Regular_expressions/Unicode_character_class_escape +[VCC]: /zh-CN/docs/Web/JavaScript/Reference/Regular_expressions/Character_class#v_模式字符类 +[WBA]: /zh-CN/docs/Web/JavaScript/Reference/Regular_expressions/Word_boundary_assertion + +后跟任何其他数字字符的 `\` 变成[传统的八进制转义序列](/zh-CN/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features#escape_sequences)，在 [Unicode 感知模式](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/unicode#unicode-aware_模式)中是禁止的。 + +此外，`\` 后面还可以跟一些非字母或数字字符，在这种情况下，转义序列总是[字符转义](/zh-CN/docs/Web/JavaScript/Reference/Regular_expressions/Character_escape)，代表转义字符本身： + +- `\$`、`\(`、`\)`、`\*`、`\+`、`\.`、`\/`、`\?`、`\[`、`\\`、`\]`、`\^`、`\{`、`\|`、`\}`：在任何地方都有效 +- `\-`：仅在[字符类](/zh-CN/docs/Web/JavaScript/Reference/Regular_expressions/Character_class)中有效 +- `\!`、`\#`、`\%`、`\&`、`\,`、`\:`、`\;`、`\<`、`\=`、`\>`、`\@`、`` \` ``、`\~`：仅在 [v-模式字符类](/zh-CN/docs/Web/JavaScript/Reference/Regular_expressions/Character_class#v_模式字符类)中有效 + +其他 {{Glossary("ASCII")}} 字符，即空格字符、`"`、`'`、`_` 和上述未提及的任何字母字符，都不是有效的转义序列。在 [Unicode 非感知模式](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/unicode#unicode-aware_模式)下，不属于上述转义序列的转义序列称为*一致转义序列*（identity escape）：它们代表反斜杠后的字符。例如，`\a` 表示字符 `a`。这种行为限制了在不引起向后兼容性问题的情况下引入新转义序列的能力，因此在 Unicode 感知模式下是禁止的。 + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- [正则表达式](/zh-CN/docs/Web/JavaScript/Guide/Regular_expressions)指南 +- {{jsxref("RegExp")}} From 7b3523ff9c5dd348aca5ce9142925e94a2e9eefc Mon Sep 17 00:00:00 2001 From: Shane Date: Fri, 10 Nov 2023 21:15:44 +0800 Subject: [PATCH 002/141] zh-cn: update the content of the `Using Object.keys() on primitives` section (#16902) --- .../reference/global_objects/object/entries/index.md | 4 ++-- .../javascript/reference/global_objects/object/keys/index.md | 4 ++-- .../reference/global_objects/object/values/index.md | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/files/zh-cn/web/javascript/reference/global_objects/object/entries/index.md b/files/zh-cn/web/javascript/reference/global_objects/object/entries/index.md index 1cbe5bb0bd8b3e..5913388d67fe00 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/object/entries/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/object/entries/index.md @@ -63,13 +63,13 @@ console.log(Object.entries(myObj)); // [ ['foo', 'bar'] ] ### 在基本类型中使用 Object.entries() -非对象参数会[强制转换成对象](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object#对象强制转换)。只有字符串可以有自己的可枚举属性，所有其他基本类型均返回一个空数组。 +非对象参数会[强制转换成对象](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object#对象强制转换)。[`undefined`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/undefined) 和 [`null`](/zh-CN/docs/Web/JavaScript/Reference/Operators/null) 不能被强制转换为对象，会立即抛出 {{jsxref("TypeError")}}。只有字符串可以有自己的可枚举属性，所有其他基本类型均返回一个空数组。 ```js // 字符串具有索引作为可枚举的自有属性 console.log(Object.entries("foo")); // [ ['0', 'f'], ['1', 'o'], ['2', 'o'] ] -// 其他基本类型没有自有属性 +// 其他基本类型（除了 undefined 和 null）没有自有属性 console.log(Object.entries(100)); // [] ``` diff --git a/files/zh-cn/web/javascript/reference/global_objects/object/keys/index.md b/files/zh-cn/web/javascript/reference/global_objects/object/keys/index.md index 748dd75ead88eb..8b3b683ea2a9b1 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/object/keys/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/object/keys/index.md @@ -66,13 +66,13 @@ console.log(Object.keys(myObj)); // ['foo'] ### 在基本类型中使用 Object.keys() -非对象参数会[强制转换为对象](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object#对象强制转换)。只有字符串可以有自己的可枚举属性，而其他所有基本类型都返回一个空数组。 +非对象参数会[强制转换为对象](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object#对象强制转换)。[`undefined`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/undefined) 和 [`null`](/zh-CN/docs/Web/JavaScript/Reference/Operators/null) 不能被强制转换为对象，会立即抛出 {{jsxref("TypeError")}}。只有字符串可以有自己的可枚举属性，而其他所有基本类型都返回一个空数组。 ```js // 字符串具有索引作为可枚举的自有属性 console.log(Object.keys("foo")); // ['0', '1', '2'] -// 其他基本类型没有自有属性 +// 其他基本类型（除了 undefined 和 null）没有自有属性 console.log(Object.keys(100)); // [] ``` diff --git a/files/zh-cn/web/javascript/reference/global_objects/object/values/index.md b/files/zh-cn/web/javascript/reference/global_objects/object/values/index.md index 3fadee25f56909..2485260d489b4b 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/object/values/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/object/values/index.md @@ -64,13 +64,13 @@ console.log(Object.values(myObj)); // ['bar'] ### 在基本类型中使用 Object.values() -非对象参数会[强制转换为对象](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object#对象强制转换)。只有字符串可以有自己的可枚举属性，而其他所有基本类型都返回一个空数组。 +非对象参数会[强制转换为对象](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object#对象强制转换)。[`undefined`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/undefined) 和 [`null`](/zh-CN/docs/Web/JavaScript/Reference/Operators/null) 不能被强制转换为对象，会立即抛出 {{jsxref("TypeError")}}。只有字符串可以有自己的可枚举属性，而其他所有基本类型都返回一个空数组。 ```js // 字符串具有索引作为可枚举的自有属性 console.log(Object.values("foo")); // ['f', 'o', 'o'] -// 其他基本类型没有自有属性 +// 其他基本类型（除了 undefined 和 null）没有自有属性 console.log(Object.values(100)); // [] ``` From 4c596ab55531889dd075f12154e2e846dea0d577 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 3 Nov 2023 08:11:40 +0900 Subject: [PATCH 003/141] =?UTF-8?q?2023/09/07=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../global_objects/array/entries/index.md | 63 +++++++++++++++---- 1 file changed, 52 insertions(+), 11 deletions(-) diff --git a/files/ja/web/javascript/reference/global_objects/array/entries/index.md b/files/ja/web/javascript/reference/global_objects/array/entries/index.md index c96f54948f38da..91f9fb2c07387e 100644 --- a/files/ja/web/javascript/reference/global_objects/array/entries/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/entries/index.md @@ -2,28 +2,38 @@ title: Array.prototype.entries() slug: Web/JavaScript/Reference/Global_Objects/Array/entries l10n: - sourceCommit: c66bfef4fbe37744579bfed6dcecd7c7b73741c2 + sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de --- {{JSRef}} -**`entries()`** メソッドは、配列内の各要素に対するキー/値のペアを含む新しい **Array イテレーター**オブジェクトを返します。 +**`entries()`** は {{jsxref("Array")}} インスタンスのメソッドで、配列内の各要素に対するキー/値のペアを含む新しい[配列イテレーター](/ja/docs/Web/JavaScript/Reference/Global_Objects/Iterator)オブジェクトを返します。 {{EmbedInteractiveExample("pages/js/array-entries.html")}} ## 構文 -```js -entries(); +```js-nolint +entries() ``` +### 引数 + +なし。 + ### 返値 -新しい {{jsxref("Array")}} イテレーターオブジェクトを返します。 +新しい[反復可能イテレーターオブジェクト](/ja/docs/Web/JavaScript/Reference/Global_Objects/Iterator)です。 + +## 解説 + +[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#疎配列)で使用された場合、 `entries()` メソッドは空のスロットを `undefined` の値が設定されているかのように反復処理します。 + +`entries()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。このメソッドは `this` の値に `length` プロパティと整数のキーを持ったプロパティがあることだけを求めます。 ## 例 -### 添字と要素の反復処理 +### インデックスと要素の反復処理 ```js const a = ["a", "b", "c"]; @@ -52,6 +62,38 @@ for (const element of arrayEntries) { // [2, 'c'] ``` +### 疎配列を反復処理 + +`entries()` は空のスロットを `undefined` であるかのように処理します。 + +```js +for (const element of [, "a"].entries()) { + console.log(element); +} +// [0, undefined] +// [1, 'a'] +``` + +### 配列でないオブジェクトに対する entries() の呼び出し + +`entries()` メソッドは `this` の `length` プロパティを読み込み、そのキーが `length` よりも小さい非負の整数である各プロパティにアクセスします。 + +```js +const arrayLike = { + length: 3, + 0: "a", + 1: "b", + 2: "c", + 3: "d", // length が 3 なので entries() からは無視される +}; +for (const entry of Array.prototype.entries.call(arrayLike)) { + console.log(entry); +} +// [ 0, 'a' ] +// [ 1, 'b' ] +// [ 2, 'c' ] +``` + ## 仕様書 {{Specifications}} @@ -63,11 +105,10 @@ for (const element of arrayEntries) { ## 関連情報 - [`Array.prototype.entries` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array) +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)ガイド +- {{jsxref("Array")}} - {{jsxref("Array.prototype.keys()")}} - {{jsxref("Array.prototype.values()")}} -- {{jsxref("Array.prototype.forEach()")}} -- {{jsxref("Array.prototype.every()")}} -- {{jsxref("Array.prototype.some()")}} -- [for...of](/ja/docs/Web/JavaScript/Reference/Statements/for...of) +- [`Array.prototype[@@iterator]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/@@iterator) +- {{jsxref("TypedArray.prototype.entries()")}} - [反復処理プロトコル](/ja/docs/Web/JavaScript/Reference/Iteration_protocols) -- [ポリフィル](https://github.com/behnammodi/polyfill/blob/master/array.polyfill.js) From fabb15f61b1ae1c37c2a79ee08c510a51caba365 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 3 Nov 2023 09:20:09 +0900 Subject: [PATCH 004/141] =?UTF-8?q?2023/09/12=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../global_objects/array/every/index.md | 117 ++++++++---------- 1 file changed, 52 insertions(+), 65 deletions(-) diff --git a/files/ja/web/javascript/reference/global_objects/array/every/index.md b/files/ja/web/javascript/reference/global_objects/array/every/index.md index 174fec1ca638f7..ab75892991f916 100644 --- a/files/ja/web/javascript/reference/global_objects/array/every/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/every/index.md @@ -7,88 +7,57 @@ l10n: {{JSRef}} -**`every()`** メソッドは、列内のすべての要素が指定された関数で実装されたテストに合格するかどうかをテストします。これは論理値を返します。 +**`every()`** は {{jsxref("Array")}} インスタンスのメソッドは、列内のすべての要素が指定された関数で実装されたテストに合格するかどうかをテストします。これは論理値を返します。 -{{EmbedInteractiveExample("pages/js/array-every.html","shorter")}} +{{EmbedInteractiveExample("pages/js/array-every.html", "shorter")}} ## 構文 -```js -// アロー関数 -every((element) => { - /* … */ -}); -every((element, index) => { - /* … */ -}); -every((element, index, array) => { - /* … */ -}); - -// コールバック関数 -every(callbackFn); -every(callbackFn, thisArg); - -// インラインコールバック関数 -every(function (element) { - /* … */ -}); -every(function (element, index) { - /* … */ -}); -every(function (element, index, array) { - /* … */ -}); -every(function (element, index, array) { - /* … */ -}, thisArg); +```js-nolint +every(callbackFn) +every(callbackFn, thisArg) ``` ### 引数 - `callbackFn` - - - : 各要素に対してテストを実行する関数です。 - - この関数は、以下の引数を伴って呼び出されます。 - + - : 配列のそれぞれの要素に対して実行する関数です。要素がテストに合格した場合は[真値](/ja/docs/Glossary/Truthy)返し、そうでなければ[偽値](/ja/docs/Glossary/Falsy)を返す必要があります。この関数は以下の引数で呼び出されます。 - `element` - - : 現在処理されている要素です。 + - : 配列内で現在処理されている要素です。 - `index` - - : 現在処理されている要素の添字です。 + - : 配列内で現在処理されている要素のインデックスです。 - `array` - - : `every` が実行されている配列です。 - -- `thisArg` {{Optional_inline}} - - : `callbackFn` を実行するときに `this` として使用すされる値です。 + - : `every()` が実行されている配列です。 +- `thisArg` {{optional_inline}} + - : `callbackFn` を実行するときに `this` として使用される値です。[反復可能メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復可能メソッド)を参照してください。 ### 返値 -`callbackFn` 関数が配列のすべての要素について{{Glossary("truthy", "真値")}}を返した場合は **`true`**。それ以外は **`false`**。 +`callbackFn` 関数がいずれかの要素で{{Glossary("falsy", "偽値")}}を返した場合は、すぐに `false` を返します。それ以外は `true` です。 ## 解説 -`every` は、与えられた `callbackFn` 関数を、配列に含まれる各要素に対して一度ずつ、`callbackFn` が{{Glossary("falsy", "偽値")}}を返す要素が見つかるまで呼び出します。そのような要素が見つかると、`every` メソッドはただちに `false` を返します。`callbackFn` がすべての要素に対して{{Glossary("truthy", "真値")}}を返した場合、`every` は `true` を返します。 +`every()` メソッドは[反復可能メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#iterative_methods)です。配列のそれぞれの要素に対して、指定された `callbackFn` 関数が[偽値](/ja/docs/Glossary/Falsy)を返すまで一度ずつ呼び出します。 そのような要素が見つかった場合、 `every()` は直ちに `false` を返し、配列の反復処理を中止します。そうでない場合、 `callbackFn` がすべての要素に対して[真値](/ja/docs/Glossary/Truthy)を返すと、 `every()` は `true` を返します。 -> **メモ:** このメソッドを空の配列に対して呼び出すと、無条件に `true` を返します。 +`every` は数学における「∀ （すべての / for all）」記号と同様のふるまいをします。特に、空の配列に対しては `true` を返します。（[空集合](https://ja.wikipedia.org/wiki/空集合#性質)のすべての要素が与えられた任意の条件を満たすことは[空虚に真](https://en.wikipedia.org/wiki/Vacuous_truth)です。） -`callbackFn` は値が代入されている配列の要素に対してのみ呼び出されます。つまり、すでに削除された要素や、まだ値が代入されていない要素に対しては呼び出されません。 +`callbackFn` は値が代入されている配列の要素に対してのみ呼び出されます。[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#疎配列)の空のスロットに対しては呼び出されません。 -`callbackFn` は、要素の値、要素の添字、走査されている Array オブジェクトという 3 つの引数をともなって呼び出されます。 +`every()` は呼び出された配列を変更しませんが、 `callbackFn` として指定された関数は変更することができます。ただし、配列の長さは `callbackFn` を最初に呼び出す前に保存されることに注意してください。したがって、 -`thisArg` 引数が `every` に与えられると、それがコールバックの `this` として使用されます。それ以外の場合は `undefined` が `this` の値として使われます。`callbackFn` が最終的に監視できる `this` の値は、[関数から見た `this` の決定に関する一般的なルール](/ja/docs/Web/JavaScript/Reference/Operators/this)によって決定されます。 +- `callbackFn` は、 `every()` の呼び出しを始めたときの配列の長さを超えて追加された要素にはアクセスしません。 +- 既に処理したインデックスを変更しても、 `callbackFn` が再度呼び出されることはありません。 +- まだ処理していない既存の配列要素が `callbackFn` によって変更された場合、`callbackFn` に渡される値はその要素が取得された時点での値になります。[削除](/ja/docs/Web/JavaScript/Reference/Operators/delete)された要素は処理されません。 -`every` は呼び出された配列を変化させません。 +> **警告:** 上記のように進行中の配列に対して変更を行うと、理解しにくいコードになることが多いので、（特別な場合を除いて）避けるのが一般的です。 -`every` によって処理される要素の範囲は、`callbackFn` が最初に呼び出される前に設定されます。`callbackFn` は、`every` の呼び出しが開始された後に追加された要素に対しては、実行されません。既存の配列要素が変更されたり、削除された場合、`callbackFn` に渡される値は `every` がそれらを訪れた時点での値になり、`every` が削除された要素を訪問することはありません。 - -`every` は数学における「∀ （すべての / for all）」記号と同様のふるまいをします。具体的に言うと、空の配列に対しては `true` を返します。([空集合](https://ja.wikipedia.org/wiki/空集合#性質)のすべての要素が与えられた任意の条件を満たすことは[空虚に真](https://en.wikipedia.org/wiki/Vacuous_truth)です。) +`every()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。このメソッドは `this` の値に `length` プロパティと整数のキーを持ったプロパティがあることだけを求めます。 ## 例 ### すべての配列要素の大きさをテストする -次の例は、配列内のすべての要素が 10 よりも大きいかどうかテストします。 +次の例は、配列内のすべての要素が 10 以上であるかどうかテストします。 ```js function isBigEnough(element, index, array) { @@ -110,13 +79,13 @@ console.log(isSubset([1, 2, 3, 4, 5, 6, 7], [5, 7, 6])); // true console.log(isSubset([1, 2, 3, 4, 5, 6, 7], [5, 8, 7])); // false ``` -### アロー関数の使用 +### 疎配列に対する every() の使用 -[アロー関数](/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions)はより短い構文で同じテストを提供します。 +`every()` は空のスロットに対して関数を実行しません。 ```js -[12, 5, 8, 130, 44].every((x) => x >= 10); // false -[12, 54, 18, 130, 44].every((x) => x >= 10); // true +console.log([1, , 3].every((x) => x !== undefined)); // true +console.log([2, , 2].every((x) => x === 2)); // true ``` ### 初期配列への影響（変更、追加、削除） @@ -125,7 +94,7 @@ console.log(isSubset([1, 2, 3, 4, 5, 6, 7], [5, 8, 7])); // false ```js // --------------- -// Modifying items +// アイテムの変更 // --------------- let arr = [1, 2, 3, 4]; arr.every((elem, index, arr) => { @@ -134,15 +103,15 @@ arr.every((elem, index, arr) => { return elem < 2; }); -// Loop runs for 3 iterations, but would -// have run 2 iterations without any modification +// ループは 3 回反復処理されるが、 +// 何も変更しなければ 2 回実行される // // 1st iteration: [1,1,3,4][0] -> 1 // 2nd iteration: [1,1,2,4][1] -> 1 // 3rd iteration: [1,1,2,3][2] -> 2 // --------------- -// Appending items +// アイテムの追加 // --------------- arr = [1, 2, 3]; arr.every((elem, index, arr) => { @@ -151,14 +120,14 @@ arr.every((elem, index, arr) => { return elem < 4; }); -// Loop runs for 3 iterations, even after appending new items +// 新しい項目を追加しても、ループは 3 回反復処理する // // 1st iteration: [1, 2, 3, new][0] -> 1 // 2nd iteration: [1, 2, 3, new, new][1] -> 2 // 3rd iteration: [1, 2, 3, new, new, new][2] -> 3 // --------------- -// Deleting items +// アイテムの削除 // --------------- arr = [1, 2, 3, 4]; arr.every((elem, index, arr) => { @@ -167,13 +136,29 @@ arr.every((elem, index, arr) => { return elem < 4; }); -// Loop runs for 2 iterations only, as the remaining -// items are `pop()`ed off +// 残りのアイテムは `pop()` して取り除かれるため、ループは 2 回だけ反復処理される // // 1st iteration: [1,2,3][0] -> 1 // 2nd iteration: [1,2][1] -> 2 ``` +### 配列でないオブジェクトに対する every() の呼び出し + +`every()` メソッドは `this` の `length` プロパティを読み込み、すべてアクセスするか `callbackFn` が `false` を返すまで `length` より小さい非負の整数キーを持つ各プロパティにアクセスします。 + +```js +const arrayLike = { + length: 3, + 0: "a", + 1: "b", + 2: "c", + 3: 345, // length が 3 なので every() からは無視される +}; +console.log( + Array.prototype.every.call(arrayLike, (x) => typeof x === "string"), +); // true +``` + ## 仕様書 {{Specifications}} @@ -185,6 +170,8 @@ arr.every((elem, index, arr) => { ## 関連情報 - [`Array.prototype.every` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array) +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)ガイド +- {{jsxref("Array")}} - {{jsxref("Array.prototype.forEach()")}} - {{jsxref("Array.prototype.some()")}} - {{jsxref("Array.prototype.find()")}} From b64cecee99d9cd4aab9b56b5a4580b16571c1182 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 3 Nov 2023 10:39:33 +0900 Subject: [PATCH 005/141] =?UTF-8?q?2023/09/15=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../global_objects/array/filter/index.md | 91 ++++++++++--------- 1 file changed, 50 insertions(+), 41 deletions(-) diff --git a/files/ja/web/javascript/reference/global_objects/array/filter/index.md b/files/ja/web/javascript/reference/global_objects/array/filter/index.md index 143f1829c40006..9c11fb5a0f4496 100644 --- a/files/ja/web/javascript/reference/global_objects/array/filter/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/filter/index.md @@ -2,51 +2,35 @@ title: Array.prototype.filter() slug: Web/JavaScript/Reference/Global_Objects/Array/filter l10n: - sourceCommit: d0e961d9a7368356b5d26efaaa7191b4f56a425a + sourceCommit: d9e66eca59d82c65166c65e7946332650da8f48f --- {{JSRef}} -**`filter()`** メソッドは、この配列の中から、提供された関数で実装されたテストに合格した要素のみを抽出した[シャローコピー](/ja/docs/Glossary/Shallow_copy)を作成します。 +**`filter()`** は {{jsxref("Array")}} インスタンスのメソッドで、指定された配列の中から指定された関数で実装されているテストに合格した要素だけを抽出した[シャローコピー](/ja/docs/Glossary/Shallow_copy)を作成します。 -{{EmbedInteractiveExample("pages/js/array-filter.html","shorter")}} +{{EmbedInteractiveExample("pages/js/array-filter.html", "shorter")}} ## 構文 ```js-nolint -// アロー関数 -filter((element) => { /* … */ } ) -filter((element, index) => { /* … */ } ) -filter((element, index, array) => { /* … */ } ) - -// コールバック関数 filter(callbackFn) filter(callbackFn, thisArg) - -// インラインコールバック関数 -filter(function(element) { /* … */ }) -filter(function(element, index) { /* … */ }) -filter(function(element, index, array){ /* … */ }) -filter(function(element, index, array) { /* … */ }, thisArg) ``` ### 引数 - `callbackFn` - - - : 配列の各要素に対して実行するテスト関数です。この関数が `true` を返した要素は残され、`false` を返した要素は取り除かれます。 - - この関数は以下の引数と共に呼び出されます。 - + - : 配列のそれぞれの要素に対して実行する関数です。この関数は、配列の要素を保持する場合は[真値](/ja/docs/Glossary/Truthy)、保持しない場合は[偽値](/ja/docs/Glossary/Falsy)を返します。この関数は以下の引数で呼び出されます。 - `element` - : 配列内で処理中の現在の要素です。 - `index` - - : 配列内で処理中の現在の要素の位置です。 + - : 配列内で処理中の現在の要素のインデックスです。 - `array` - : `filter()` が呼び出された配列です。 - `thisArg` {{optional_inline}} - - : `callbackFn` を実行するときに `this` として使用する値です。 + - : `callbackFn` を実行する際に `this` として使用される値。[反復可能メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復可能メソッド)を参照してください。 ### 返値 @@ -54,27 +38,25 @@ filter(function(element, index, array) { /* … */ }, thisArg) ## 解説 -`filter()` は、与えられた `callbackFn` 関数を配列の各要素に対して一度ずつ呼び出し、`callbackFn` が [`true` に評価される値](/ja/docs/Glossary/Truthy)を返したすべての要素からなる新しい配列を生成します。 `callbackFn` は値が代入されている配列の添字に対してのみ呼び出されます。つまり、すでに削除された添字や、まだ値が代入されていない添字に対しては呼び出されません。`callbackFn` によるテストに合格しなかった配列要素は単純にスキップされ、新しい配列には含まれないだけです。 - -`callbackFn` は 3 つの引数と共に呼び出されます。 +`filter()` メソッドは[反復可能メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復可能メソッド)です。指定された `callbackFn` 関数を配列の各要素に対して一度ずつ呼び出し、 `callbackFn` が[真値](/ja/docs/Glossary/Truthy)を返したすべての要素からなる新しい配列を生成します。 `callbackFn` は値が代入されている配列の添字に対してのみ呼び出されます。 -1. 要素の値 -2. 要素の添字 -3. 走査されている配列オブジェクト +`callbackFn` は値が割り当てられている配列インデックスに対してのみ呼び出されます。[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#疎配列)の空のスロットに対しては呼び出されません。 -`filter` に引数 `thisArg` が与えられた場合、そのオブジェクトは `callbackFn` 関数内の `this` 値として使われます。そうでない場合、 `undefined` が `this` 値として使われます。`callbackFn` 関数内の最終的な `this` 値は[関数内の `this` を決定する一般的ルール](/ja/docs/Web/JavaScript/Reference/Operators/this)に従って決められます。 +`filter()` メソッドは[コピーメソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#コピーメソッドと変更メソッド)です。これは `this` を変更するのではなく、元の配列と同じ要素を格納した[シャローコピー](/ja/docs/Glossary/Shallow_copy)を返します。しかし、 `callbackFn` として指定された関数は配列を変更することができます。ただし、配列の長さは `callbackFn` を最初に呼び出す前に保存されることに注意してください。したがって、 -`filter()` は呼び出された配列を変化させません。 +- `callbackFn` は、 `every()` の呼び出しを始めたときの配列の長さを超えて追加された要素にはアクセスしません。 +- 既に処理したインデックスを変更しても、 `callbackFn` が再度呼び出されることはありません。 +- まだ処理していない既存の配列要素が `callbackFn` によって変更された場合、`callbackFn` に渡される値はその要素が取得された時点での値になります。[削除](/ja/docs/Web/JavaScript/Reference/Operators/delete)された要素は処理されません。 -`filter()` によって処理される配列要素の範囲は、`callbackFn` が最初に呼び出される前に設定されます。既に訪問した位置にある要素や範囲外のインデックスに割り当てられた要素に対しては、 `callbackFn` は実行されません。既存の配列要素が削除された場合は、同様にそれらの要素は処理されません。 +> **警告:** 上記のように進行中の配列に対して変更を行うと、理解しにくいコードになることが多いので、（特別な場合を除いて）避けるのが一般的です。 -> **警告:** 前項で説明したような、参照中の配列の同時進行での変更は（特殊な場合を除いて）普通は避けるべきです。多くの場合、理解しにくいコードになります。 +`filter()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。このメソッドは `this` の値に `length` プロパティと整数のキーを持ったプロパティがあることだけを求めます。 ## 例 ### 小さい値をすべて取り除く -次の例では、`filter()` を使って `10` 未満の値を持つ要素をすべて取り除いた配列を生成します。 +次の例では、`filter()` を使って 10 未満の値を持つ要素をすべて取り除いた配列を生成します。 ```js function isBigEnough(value) { @@ -137,7 +119,7 @@ console.log("Filtered Array\n", arrByID); // Filtered Array // [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }] -console.log("Number of Invalid Entries = ", invalidEntries); +console.log("Number of Invalid Entries =", invalidEntries); // Number of Invalid Entries = 5 ``` @@ -159,12 +141,37 @@ console.log(filterItems(fruits, "ap")); // ['apple', 'grapes'] console.log(filterItems(fruits, "an")); // ['banana', 'mango', 'orange'] ``` +### 疎配列に対する filter() の使用 + +`filter()` は空のスロットをスキップします。 + +```js +console.log([1, , undefined].filter((x) => x === undefined)); // [undefined] +console.log([1, , undefined].filter((x) => x !== 2)); // [1, undefined] +``` + +### 配列でないオブジェクトに対する filter() の呼び出し + +`filter()` メソッドは `this` の `length` プロパティを読み取り、 `length` 未満の非負の整数のキーを持つすべてのプロパティにアクセスします。 + +```js +const arrayLike = { + length: 3, + 0: "a", + 1: "b", + 2: "c", + 3: "a", // length が 3 であるため filter() は無視する +}; +console.log(Array.prototype.filter.call(arrayLike, (x) => x <= "b")); +// [ 'a', 'b' ] +``` + ### 初期の配列への影響（変更、追加、削除） 以下の例は、配列が変更された時の `filter` の動作をテストするものです。 ```js -// Modifying each word +// それぞれの単語を変更 let words = ["spray", "limit", "exuberant", "destruction", "elite", "present"]; const modifiedWords = words.filter((word, index, arr) => { @@ -173,10 +180,10 @@ const modifiedWords = words.filter((word, index, arr) => { }); console.log(modifiedWords); -// Notice there are three words below length 6, but since they've been modified one is returned +// 6 文字未満の語は 3 つあるが、変更されているので 1 つしか返されない // ["spray"] -// Appending new words +// new の単語を追加 words = ["spray", "limit", "exuberant", "destruction", "elite", "present"]; const appendedWords = words.filter((word, index, arr) => { arr.push("new"); @@ -184,10 +191,10 @@ const appendedWords = words.filter((word, index, arr) => { }); console.log(appendedWords); -// Only three fits the condition even though the `words` itself now has a lot more words with character length less than 6 +// `words` 自体には 6 文字未満の単語がたくさん増えたが、条件に合うのは 3 つだけ // ["spray" ,"limit" ,"elite"] -// Deleting words +// 単語の削除 words = ["spray", "limit", "exuberant", "destruction", "elite", "present"]; const deleteWords = words.filter((word, index, arr) => { arr.pop(); @@ -195,7 +202,7 @@ const deleteWords = words.filter((word, index, arr) => { }); console.log(deleteWords); -// Notice 'elite' is not even obtained as it's been popped off 'words' before filter can even get there +// 'elite' はフィルターが取得する前に 'words' から取り出されているので、取得されていないことに注意 // ["spray" ,"limit"] ``` @@ -210,8 +217,10 @@ console.log(deleteWords); ## 関連情報 - [`Array.prototype.filter` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array) +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)ガイド - {{jsxref("Array.prototype.forEach()")}} - {{jsxref("Array.prototype.every()")}} +- {{jsxref("Array.prototype.map()")}} - {{jsxref("Array.prototype.some()")}} - {{jsxref("Array.prototype.reduce()")}} -- {{jsxref("Array.prototype.find()")}} +- {{jsxref("TypedArray.prototype.filter()")}} From 0826100091d6929d4560ed571413d939ab316eb8 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 3 Nov 2023 11:10:41 +0900 Subject: [PATCH 006/141] =?UTF-8?q?=E6=96=87=E8=A8=80=E3=81=AE=E4=BF=AE?= =?UTF-8?q?=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../global_objects/array/find/index.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/files/ja/web/javascript/reference/global_objects/array/find/index.md b/files/ja/web/javascript/reference/global_objects/array/find/index.md index 063a6f4668a304..ada3b1ea3d1e44 100644 --- a/files/ja/web/javascript/reference/global_objects/array/find/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/find/index.md @@ -10,8 +10,8 @@ l10n: **`find()`** は {{jsxref("Array")}} インスタンスのメソッドで、提供されたテスト関数を満たす配列内の最初の要素を返します。 テスト関数を満たす値がない場合は、 {{jsxref("undefined")}} を返します。 -- 配列内で見つかった要素の**添字**が必要な場合は、{{jsxref("Array/findIndex", "findIndex()")}} を使用してください。 -- **値の添字**を検索する必要がある場合は、{{jsxref("Array/indexOf", "indexOf()")}} を使用してください。({{jsxref("Array/findIndex", "findIndex()")}} と似ていますが、それぞれの要素の等価性はテスト関数ではなく値でチェックします。) +- 配列内で見つかった要素の**インデックス**が必要な場合は、{{jsxref("Array/findIndex", "findIndex()")}} を使用してください。 +- **値のインデックス**を検索する必要がある場合は、{{jsxref("Array/indexOf", "indexOf()")}} を使用してください。({{jsxref("Array/findIndex", "findIndex()")}} と似ていますが、それぞれの要素の等価性はテスト関数ではなく値でチェックします。) - 配列内に値が**存在する**かどうかを調べる必要がある場合は、 {{jsxref("Array/includes", "includes()")}} を使用してください。 - 指定したテスト関数を満たす要素があるかどうかを調べる必要がある場合は、 {{jsxref("Array/some", "some()")}} を使用してください。 @@ -31,7 +31,7 @@ find(callbackFn, thisArg) - `element` - : 配列内で現在処理されている要素です。 - `index` - - : 配列内で現在処理されている要素の添字（位置）です。 + - : 配列内で現在処理されている要素のインデックス（位置）です。 - `array` - : `find()` を呼び出した元の配列です。 - `thisArg` {{optional_inline}} @@ -44,9 +44,9 @@ find(callbackFn, thisArg) ## 解説 -`find()` メソッドは[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)です。配列の要素のそれぞれに対して、添字の昇順に一度ずつ `callbackFn` 関数を実行し、`callbackFn` 関数が[真値](/ja/docs/Glossary/Truthy)を返すまで繰り返します。 `find()` はその要素を返し、配列の反復処理を停止します。もし `callbackFn` が真値を返さない場合、 `find()` は {{jsxref("undefined")}} を返します。 +`find()` メソッドは[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)です。配列の要素のそれぞれに対して、インデックスの昇順に一度ずつ `callbackFn` 関数を実行し、`callbackFn` 関数が[真値](/ja/docs/Glossary/Truthy)を返すまで繰り返します。 `find()` はその要素を返し、配列の反復処理を停止します。もし `callbackFn` が真値を返さない場合、 `find()` は {{jsxref("undefined")}} を返します。 -`callbackFn` は、値が割り当てられているものに限らず、配列中の*すべて*の添字に対して呼び出されます。[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#疎配列)では、空のスロットは `undefined` と同じ動作をします。 +`callbackFn` は、値が割り当てられているものに限らず、配列中の*すべて*のインデックスに対して呼び出されます。[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#疎配列)では、空のスロットは `undefined` と同じ動作をします。 `find()` は、呼び出した配列を変更 (mutate) しませんが、`callbackFn` で提供された関数は変更する可能性があります。しかし、配列の長さは最初に `callbackFn` が呼び出される*前に*設定されます。したがって、 @@ -56,7 +56,7 @@ find(callbackFn, thisArg) > **警告:** 上で説明したような同時進行の変更は、理解しにくいコードになることが多いので、（特別な場合を除いて）避けるのが一般的です。 -`find()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#generic_array_methods)です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。 +`find()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。 ## 例 @@ -115,10 +115,10 @@ console.log([4, 5, 8, 12].find(isPrime)); // 5 疎配列の空のスロットは処理され、 `undefined` と同じように扱われます。 ```js -// 添字が 2, 3, 4 の位置に要素がない配列を宣言 +// インデックスが 2, 3, 4 の位置に要素がない配列を宣言 const array = [0, 1, , , , 5, 6]; -// 値が割り当てられているものに限らず、すべての添字を表示 +// 値が割り当てられているものに限らず、すべてのインデックスを表示 array.find((value, index) => { console.log("Visited index", index, "with value", value); }); @@ -130,7 +130,7 @@ array.find((value, index) => { // Visited index 5 with value 5 // Visited index 6 with value 6 -// 削除されたものを含め、すべての添字を表示 +// 削除されたものを含め、すべてのインデックスを表示 array.find((value, index) => { // 最初の反復処理で要素 5 を削除 if (index === 0) { From 32ffadf3a79d00851d764e0cd2cb37a3ebd160aa Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 3 Nov 2023 09:59:29 +0900 Subject: [PATCH 007/141] =?UTF-8?q?2023/09/07=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../global_objects/array/fill/index.md | 46 +++++++++++++------ 1 file changed, 32 insertions(+), 14 deletions(-) diff --git a/files/ja/web/javascript/reference/global_objects/array/fill/index.md b/files/ja/web/javascript/reference/global_objects/array/fill/index.md index e56ca6611f7aa0..b6f0f51bec2e02 100644 --- a/files/ja/web/javascript/reference/global_objects/array/fill/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/fill/index.md @@ -7,26 +7,32 @@ l10n: {{JSRef}} -**`fill()`** メソッドは、開始位置（既定値は `0`）から終了位置（既定値は `array.length`）までのすべての要素を、静的な値に変更した配列を返します。 +**`fill()`** は {{jsxref("Array")}} インスタンスのメソッドで、インデックスの範囲内にある配列のすべての要素を一定の値に変更します。これは変更した配列を返します。 {{EmbedInteractiveExample("pages/js/array-fill.html")}} ## 構文 -```js -fill(value); -fill(value, start); -fill(value, start, end); +```js-nolint +fill(value) +fill(value, start) +fill(value, start, end) ``` ### 引数 - `value` - - : 配列に設定する値です。 + - : 配列を埋める値。もし `value` がオブジェクトであれば、配列のそれぞれの要素はそのオブジェクトを参照します。 - `start` {{optional_inline}} - - : 開始する位置です。既定値は `0` です。 + - : 埋め始める位置のゼロから始まるインデックスで、[整数に変換されます](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#整数への変換)。 + - インデックスが負の場合、配列の末尾からさかのぼって数えます。 `start < 0` の場合、 `start + array.length` が使用されます。 + - `start < -array.length` または `start` が省略された場合は `0` が使用されます。 + - `start >= array.length` の場合、埋められるインデックスはありません。 - `end` {{optional_inline}} - - : 終了する位置です。既定値は `arr.length` です。 + - : 埋め終える位置のゼロから始まるインデックスで、[整数に変換されます](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#整数への変換)。 `fill()` は `end` を含まず、その直前までを埋めます。 + - インデックスが負の場合、配列の末尾からさかのぼって数えます。 `end < 0` の場合、 `end + array.length` が使用されます。 + - `end < -array.length` の場合は `0` が使用されます。 + - `end >= array.length` または `end` が省略された場合、 ### 返値 @@ -34,11 +40,11 @@ fill(value, start, end); ## 解説 -- `start` が負の場合 `array.length + start` として扱われます。 -- `end` が負の場合 `array.length + end` として扱われます。 -- `fill` は意図的に一般化されています。 `this` が `Array` オブジェクトである必要はありません。 -- `fill` は変更を行うメソッドです。配列そのものを変更して返します。コピーを返すのではありません。 -- 最初の引数がオブジェクトの場合、配列の各スロットはそのオブジェクトを参照します。 +`fill()` メソッドは[変更メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#コピーメソッドと変更メソッド)です。これは `this` の長さは変更しませんが、 `this` のコンテンツは変更します。 + +`fill()` メソッドは[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#疎配列)の空のスロットを、 `value` で埋めます。 + +`every()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。このメソッドは `this` の値に `length` プロパティと整数のキーを持ったプロパティがあることだけを求めます。文字列も配列風のものですが、文字列は不変なので、このメソッドを適用するのは適していません。 > **メモ:** `Array.prototype.fill()` を空の配列に対して使用すると、配列に変更するものがないので何も変更されません。 > 配列を宣言する際に `Array.prototype.fill()` を使用する場合は、スロットを配列に割り当てるようにしてください。 @@ -58,7 +64,6 @@ console.log([1, 2, 3].fill(4, -3, -2)); // [4, 2, 3] console.log([1, 2, 3].fill(4, NaN, NaN)); // [1, 2, 3] console.log([1, 2, 3].fill(4, 3, 5)); // [1, 2, 3] console.log(Array(3).fill(4)); // [4, 4, 4] -console.log([].fill.call({ length: 3 }, 4)); // {0: 4, 1: 4, 2: 4, length: 3} // 配列の各スロットから参照される、単一のオブジェクト。 const arr = Array(3).fill({}); // [{}, {}, {}] @@ -89,6 +94,18 @@ console.log(arr[2][0]); // 1 const tempGirls = Array(5).fill("girl", 0); ``` +配列は最初はインデックスが割り当てられていない[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#疎配列)であることに注意してください。 `fill()` でこの配列を埋めることができます。 + +### 配列でないオブジェクトに対する fill() の呼び出し + +`fill()` メソッドは `this` の `length` プロパティを読み取り、 `start` から `end` までの各整数キーのプロパティの値を設定します。 + +```js +const arrayLike = { length: 2 }; +console.log(Array.prototype.fill.call(arrayLike, 1)); +// { '0': 1, '1': 1, length: 2 } +``` + ## 仕様書 {{Specifications}} @@ -100,5 +117,6 @@ const tempGirls = Array(5).fill("girl", 0); ## 関連情報 - [`Array.prototype.fill` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array) +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)ガイド - {{jsxref("Array")}} - {{jsxref("TypedArray.prototype.fill()")}} From cf90b3c9678c6fa874582372d0cb3b65fce642fc Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 3 Nov 2023 11:34:35 +0900 Subject: [PATCH 008/141] =?UTF-8?q?2023/09/15=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../global_objects/array/findlast/index.md | 165 ++++++++---------- 1 file changed, 72 insertions(+), 93 deletions(-) diff --git a/files/ja/web/javascript/reference/global_objects/array/findlast/index.md b/files/ja/web/javascript/reference/global_objects/array/findlast/index.md index 52252704522708..41a7a85b7628a5 100644 --- a/files/ja/web/javascript/reference/global_objects/array/findlast/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/findlast/index.md @@ -2,17 +2,15 @@ title: Array.prototype.findLast() slug: Web/JavaScript/Reference/Global_Objects/Array/findLast l10n: - sourceCommit: 968e6f1f3b6f977a09e116a0ac552459b741eac3 + sourceCommit: d9e66eca59d82c65166c65e7946332650da8f48f --- {{JSRef}} -**`findLast()`** メソッドは、指定されたテスト関数を満たす配列の最後の要素の値を返します。 +**`findLast()`** は {{jsxref("Array")}} インスタンスのメソッドで、配列を逆順に反復処理し、指定されたテスト関数を満たす最初の要素の値を返します。 テスト関数を満たす要素がない場合は {{jsxref("undefined")}} が返されます。 -{{EmbedInteractiveExample("pages/js/array-findlast.html","shorter")}} - -検索する必要がある場合、以下のメソッドがあります。 +検索を行う場合は以下のメソッドが必要です。 - 一致する最初の要素を得るには、 {{jsxref("Array/find", "find()")}} を使用してください。 - 配列内で一致する最後の位置を得るには、 {{jsxref("Array/findLastIndex", "findLastIndex()")}} を使用してください。 @@ -22,88 +20,48 @@ l10n: こちらも、テスト関数を使用する代わりに、各要素が値と等しいかどうかを調べます。 - 指定されたテスト関数を満たす要素を得るには {{jsxref("Array/some", "some()")}} を使用してください。 -## 構文 - -```js -// アロー関数 -findLast((element) => { - /* … */ -}); -findLast((element, index) => { - /* … */ -}); -findLast((element, index, array) => { - /* … */ -}); +{{EmbedInteractiveExample("pages/js/array-findlast.html", "shorter")}} -// コールバック関数 -findLast(callbackFn); -findLast(callbackFn, thisArg); +## 構文 -// インラインコールバック関数 -findLast(function (element) { - /* … */ -}); -findLast(function (element, index) { - /* … */ -}); -findLast(function (element, index, array) { - /* … */ -}); -findLast(function (element, index, array) { - /* … */ -}, thisArg); +```js-nolint +findLast(callbackFn) +findLast(callbackFn, thisArg) ``` ### 引数 - `callbackFn` - - - : 配列の要素をテストするために使用する関数です。 - - この関数は以下の引数で呼び出されます。 - + - : 配列のそれぞれの要素に対して実行する関数です。一致する要素が得られたことを示すには[真値](/ja/docs/Glossary/Truthy)を返し、そうでなければ[偽値](/ja/docs/Glossary/Falsy)を返してください。この関数は以下の引数で呼び出されます。 - `element` - - : 配列の現在の要素。 + - : 配列内で現在処理されている要素です。 - `index` - - : 配列内の現在の要素の添字（位置）。 + - : 配列内で現在処理されている要素のインデックス（位置）です。 - `array` - - : `findLast()` が呼び出された配列。 - - コールバックは適切な要素が得られたことを示すために、[真値](/ja/docs/Glossary/Truthy)を返さなければなりません。 - この要素の値が `findLast()` によって返されます。 - + - : `findLast()` を呼び出した元の配列です。 - `thisArg` {{optional_inline}} - - : `callbackFn` の実行時に {{jsxref("Operators/this", "this")}} として使用するオブジェクト。 + - : `callbackFn` 内で `this` として使われるオブジェクトです。[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)を参照してください。 ### 返値 -指定されたテスト関数を満たす、配列中の最も大きい添字の値を持つ要素の値。一致する要素が見つからない場合は {{jsxref("undefined")}} となります。 +指定されたテスト関数を満たす、配列中の最も大きいインデックス値を持つ要素の値。一致する要素が見つからない場合は {{jsxref("undefined")}} となります。 ## 解説 -`findLast()` メソッドは `callbackFn` が[真値](/ja/docs/Glossary/Truthy)を返すまで、配列のそれぞれの要素に対して、添字の降順で `callbackFn` 関数を一度ずつ実行します。 -その後、 `findLast()` はその要素の値を返し、配列の反復処理を停止します。 -もし `callbackFn` が真値を返さなかった場合、 `findLast()` は {{jsxref("undefined")}} を返します。 - -`callbackFn` は、値が割り当てられている添字だけでなく、配列のすべての添字に対して呼び出されます。 -これは、代入された値のみを参照するメソッドと比較して、不連続の配列では効率が悪くなることを意味しています。 +`findLast()` メソッドは[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)です。配列の要素のそれぞれに対して、インデックスの降順に一度ずつ `callbackFn` 関数を実行し、`callbackFn` 関数が[真値](/ja/docs/Glossary/Truthy)を返すまで繰り返します。 `findLast()` はその要素を返し、配列の反復処理を停止します。もし `callbackFn` が真値を返さない場合、 `find()` は {{jsxref("undefined")}} を返します。 -`findLast()` に `thisArg` 引数が指定された場合は、 `callbackFn` を呼び出すたびに `this` の値として使用されます。 -指定されなかった場合は、{{jsxref("undefined")}} が使用されます。 +`callbackFn` は、値が割り当てられているものに限らず、配列中の*すべて*のインデックスに対して呼び出されます。[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#疎配列)では、空のスロットは `undefined` と同じ動作をします。 -`findLast()` メソッドは呼び出された配列を変更しませんが、 `callbackFn` に指定された関数は変更することができます。 -`findLast()` が処理する要素は、 `callbackFn` の最初の呼び出しの前に設定されます。 -したがって、 +`findLast()` は、呼び出した配列を変更 (mutate) しませんが、`callbackFn` で提供された関数は変更する可能性があります。しかし、配列の長さは最初に `callbackFn` が呼び出される*前に*設定されます。したがって、 -- `callbackFn` は、 `findLast()` の呼び出しが始まった後に配列に追加された要素に対しては呼び出されません。 -- 既に呼び出されたことのある添字に割り当てられた要素に対して、再び `callbackFn` が呼び出されることはありません。 -- 範囲外の添字に割り当てられた要素に対しては、 `callbackFn` は呼び出されません。 -- 既存の、まだ呼び出されていない配列の要素が `callbackFn` によって変更された場合、 `callbackFn` に渡される値は、 `findLast()` がその要素の添字を呼び出したときの値になります。 -- {{jsxref("Operators/delete", "削除", "", 1)}}された要素に対しても呼び出されます。 +- `callbackFn` は `findLast()` の呼び出しを始めたときの配列の長さを超えて追加された要素にはアクセスしません。 +- 既に訪問した位置を変更しても、 `callbackFn` が再度呼び出されることはありません。 +- まだ訪問していない既存の配列要素が `callbackFn` によって変更された場合、 `callbackFn` に渡される値はその要素が取得される時点の値になります。[削除された](/ja/docs/Web/JavaScript/Reference/Operators/delete) 要素は `undefined` であるかのように処理されます。 > **警告:** 前項で説明したような、参照中の配列の同時進行での変更は（特殊な場合を除いて）普通は避けるべきです。多くの場合、理解しにくいコードになります。 +`findLast()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。 + ## 例 ### 要素のプロパティに一致する配列の最後のオブジェクトを探す @@ -147,7 +105,7 @@ console.log(result); ### 配列中の最後の素数を探す -以下の例では、配列の最後の要素で素数を探します（素数がない場合は {{jsxref("undefined")}} を返しています）。 +以下の例では、配列の最後の要素で素数の最後の要素を返します。素数がない場合は {{jsxref("undefined")}} を返しています。 ```js function isPrime(element) { @@ -168,43 +126,59 @@ console.log([4, 5, 7, 8, 9, 11, 12].findLast(isPrime)); // 11 ### 存在しない要素や削除された要素に対しても呼び出される -以下の例では、存在しない要素や削除された要素に対してもコールバックが呼び出され、渡された値が訪問時の値であることを示しています。 +疎配列の空のスロットは処理され、 `undefined` と同じように扱われます。 ```js -// Declare array with no elements at indexes 2, 3, and 4 +// インデックス 2、3、4 に要素がない配列の宣言 const array = [0, 1, , , , 5, 6]; -// Shows all indexes, not just those with assigned values +// 値が割り当てられているインデックスだけでなく、すべてのインデックスを表示 array.findLast((value, index) => { console.log(`Visited index ${index} with value ${value}`); }); - -// Shows all indexes, including deleted +// Visited index 6 with value 6 +// Visited index 5 with value 5 +// Visited index 4 with value undefined +// Visited index 3 with value undefined +// Visited index 2 with value undefined +// Visited index 1 with value 1 +// Visited index 0 with value 0 + +// 削除されたインデックスを含め、すべてのインデックスを表示 array.findLast((value, index) => { // Delete element 5 on first iteration if (index === 6) { console.log(`Deleting array[5] with value ${array[5]}`); delete array[5]; } - // Element 5 is still visited even though deleted + // 要素 5 は削除されたにもかかわらず、処理される console.log(`Visited index ${index} with value ${value}`); }); -// expected output: -// > "Visited index 6 with value 6" -// > "Visited index 5 with value 5" -// > "Visited index 4 with value undefined" -// > "Visited index 3 with value undefined" -// > "Visited index 2 with value undefined" -// > "Visited index 1 with value 1" -// > "Visited index 0 with value 0" -// > "Deleting array[5] with value 5" -// > "Visited index 6 with value 6" -// > "Visited index 5 with value undefined" -// > "Visited index 4 with value undefined" -// > "Visited index 3 with value undefined" -// > "Visited index 2 with value undefined" -// > "Visited index 1 with value 1" -// > "Visited index 0 with value 0" +// Deleting array[5] with value 5 +// Visited index 6 with value 6 +// Visited index 5 with value undefined +// Visited index 4 with value undefined +// Visited index 3 with value undefined +// Visited index 2 with value undefined +// Visited index 1 with value 1 +// Visited index 0 with value 0 +``` + +### 配列でないオブジェクトに対する findLast() の呼び出し + +`findLast()` メソッドは `this` の `length` プロパティを読み込み、次にキーが `length` より小さい非負の整数である各プロパティにアクセスします。 + +```js +const arrayLike = { + length: 3, + 0: 2, + 1: 7.3, + 2: 4, + 3: 3, // length が 3 なので findLast() は無視される +}; +console.log( + Array.prototype.findLast.call(arrayLike, (x) => Number.isInteger(x)), +); // 4 ``` ## 仕様書 @@ -217,9 +191,14 @@ array.findLast((value, index) => { ## 関連情報 -- [`Array.prototype.findLast` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array) -- {{jsxref("Array.prototype.findIndex()")}} – 最後の要素を見つけて位置を返す -- {{jsxref("Array.prototype.includes()")}} – 配列内に値が存在するかどうかをテストする -- {{jsxref("Array.prototype.filter()")}} – 一致しない要素をすべて除外する -- {{jsxref("Array.prototype.every()")}} – すべての要素をテストする -- {{jsxref("Array.prototype.some()")}} – 1 つの要素が一致するまでテストする +- [`Array.prototype.findLast` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#array-find-from-last) +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド +- {{jsxref("Array")}} +- {{jsxref("Array.prototype.find()")}} +- {{jsxref("Array.prototype.findIndex()")}} +- {{jsxref("Array.prototype.findLastIndex()")}} +- {{jsxref("Array.prototype.includes()")}} +- {{jsxref("Array.prototype.filter()")}} +- {{jsxref("Array.prototype.every()")}} +- {{jsxref("Array.prototype.some()")}} +- {{jsxref("TypedArray.prototype.findLast()")}} From fc66934913483ea288bf4f9b5185bfec2f8e10d4 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 3 Nov 2023 11:06:19 +0900 Subject: [PATCH 009/141] =?UTF-8?q?2023/09/12=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../global_objects/array/findindex/index.md | 109 ++++++++---------- 1 file changed, 45 insertions(+), 64 deletions(-) diff --git a/files/ja/web/javascript/reference/global_objects/array/findindex/index.md b/files/ja/web/javascript/reference/global_objects/array/findindex/index.md index c1cfab4f500bed..4e5edaca85a707 100644 --- a/files/ja/web/javascript/reference/global_objects/array/findindex/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/findindex/index.md @@ -2,70 +2,37 @@ title: Array.prototype.findIndex() slug: Web/JavaScript/Reference/Global_Objects/Array/findIndex l10n: - sourceCommit: 968e6f1f3b6f977a09e116a0ac552459b741eac3 + sourceCommit: 5c3c25fd4f2fbd7a5f01727a65c2f70d73f1880a --- {{JSRef}} -**`findIndex()`** メソッドは、配列内の**指定されたテスト関数に合格する**最初の要素の**位置**を返します。テスト関数に合格する要素がない場合を含め、それ以外の場合は `-1` を返します。 +**`findIndex()`** は {{jsxref("Array")}} インスタンスのメソッドで、配列内の指定されたテスト関数に合格する最初の要素のインデックスを返します。 +テスト関数に合格する要素がなかった場合は `-1` を返します。 -{{EmbedInteractiveExample("pages/js/array-findindex.html","shorter")}} +{{jsxref("Array/find", "find()")}} メソッドも参照してください。こちらのメソッドは、配列内で見つかった要素の位置ではなく、値を返します。 -{{jsxref("Array/find", "find()")}} メソッドも参照してください。このメソッドは、配列内で見つかった要素の位置ではなく、**値**を返します。 +{{EmbedInteractiveExample("pages/js/array-findindex.html", "shorter")}} ## 構文 -```js -// アロー関数 -findIndex((element) => { - /* … */ -}); -findIndex((element, index) => { - /* … */ -}); -findIndex((element, index, array) => { - /* … */ -}); - -// コールバック関数 -findIndex(callbackFn); -findIndex(callbackFn, thisArg); - -// インラインコールバック関数 -findIndex(function (element) { - /* … */ -}); -findIndex(function (element, index) { - /* … */ -}); -findIndex(function (element, index, array) { - /* … */ -}); -findIndex(function (element, index, array) { - /* … */ -}, thisArg); +```js-nolint +findIndex(callbackFn) +findIndex(callbackFn, thisArg) ``` ### 引数 - `callbackFn` - - - : 配列内のそれぞれの値に対して実行される関数で、条件を満たす要素が発見されたことを示す `true` が返るまで続けられます。 - - この関数は以下の引数と共に呼び出されます。 - + - : 配列のそれぞれの要素に対して実行する関数です。一致する要素が得られたことを示すには[真値](/ja/docs/Glossary/Truthy)を返し、そうでなければ[偽値](/ja/docs/Glossary/Falsy)を返してください。この関数は以下の引数で呼び出されます。 - `element` - - : 配列内で現在処理されている要素。 + - : 配列内で現在処理されている要素です。 - `index` - - : 配列内で現在処理されている要素の位置。 + - : 配列内で現在処理されている要素のインデックス（位置）です。 - `array` - - : `findIndex()` を呼び出した元の配列。 - - コールバックは適切な要素が見つかったときに、[真値](/ja/docs/Glossary/Truthy)を返す必要があります。 - この要素の位置が `findIndex()` から返されます。 - + - : `findIndex()` を呼び出した元の配列です。 - `thisArg` {{optional_inline}} - - : 任意で、 `callbackFn` を実行する時に `this` として使うオブジェクト。 + - : `callbackFn` 内で `this` として使われるオブジェクトです。[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)を参照してください。 ### 返値 @@ -73,23 +40,19 @@ findIndex(function (element, index, array) { ## 解説 -`findIndex()` メソッドは、配列のそれぞれの位置に対して `callbackFn` を 1 回ずつ呼び出し、 `callbackFn` が{{Glossary("truthy", "真値")}}を返すものを見つけるまで繰り返します。 +`findIndex()` メソッドは[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)です。配列の要素のそれぞれに対して、インデックスの昇順に一度ずつ `callbackFn` 関数を実行し、`callbackFn` 関数が[真値](/ja/docs/Glossary/Truthy)を返すまで繰り返します。 `findIndex()` はその要素を返し、配列の反復処理を停止します。もし `callbackFn` が真値を返さない場合、 `findIndex()` は `-1` を返します。 -そのような要素が見つかったら、 `findIndex()` はすぐにその要素の位置を返します。 `callbackFn` が真値を返すものがなかった場合（または配列の `length` が `0` であった場合）、 `findIndex()` は `-1` を返します。 +`callbackFn` は、値が割り当てられているものに限らず、配列中の*すべて*のインデックスに対して呼び出されます。[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#疎配列)では、空のスロットは `undefined` と同じ動作をします。 -> **メモ:** {{jsxref("Array/some", "some()")}} などの他の配列メソッドとは異なり、 `callbackFn` は値が割り当てられていない位置でも実行されます。 +`findIndex()` は、呼び出した配列を変更 (mutate) しませんが、`callbackFn` で提供された関数は変更する可能性があります。しかし、配列の長さは最初に `callbackFn` が呼び出される*前に*設定されます。したがって、 -`callbackFn` は 3 つの引数で呼び出されます。 +- `callbackFn` は `findIndex()` の呼び出しを始めたときの配列の長さを超えて追加された要素にはアクセスしません。 +- 既に訪問した位置を変更しても、 `callbackFn` が再度呼び出されることはありません。 +- まだ訪問していない既存の配列要素が `callbackFn` によって変更された場合、 `callbackFn` に渡される値はその要素が取得される時点の値になります。[削除された](/ja/docs/Web/JavaScript/Reference/Operators/delete) 要素は `undefined` であるかのように処理されます。 -1. その要素の値 -2. その要素の位置 -3. 走査されている配列オブジェクト +> **警告:** 上で説明したような同時進行の変更は、理解しにくいコードになることが多いので、（特別な場合を除いて）避けるのが一般的です。 -`thisArg` 引数を `findIndex()` に与えた場合、それぞれの `callbackFn` の呼び出し時に、その与えたオブジェクトが `this` として使用されます。この引数を省略した場合は {{jsxref("undefined")}} になります。 - -`findIndex()` で処理される要素の範囲は、 `callbackFn` が最初に呼び出される前に設定されます。既に処理済みの位置に割り当てられた要素や、その範囲を超えた要素に対しては、 `callbackFn` が実行されません。 `callbackFn` は最初の `findIndex()` の呼び出し以降に配列に追加された要素は処理しません。配列内で未処理の既存の要素が `callbackFn` によって変更された場合、 `callbackFn` へ渡される値は `findIndex()` がその要素の位置を処理する時点での値になります。{{jsxref("Operators/delete", "削除", "", 1)}}された値も処理対象になります。 - -> **警告:** 前項で説明したような、参照中の配列の同時進行での変更は（特殊な場合を除いて）普通は避けるべきです。多くの場合、理解しにくいコードになります。 +`findIndex()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。 ## 例 @@ -114,17 +77,29 @@ console.log([4, 6, 8, 9, 12].findIndex(isPrime)); // -1, not found console.log([4, 6, 7, 9, 12].findIndex(isPrime)); // 2 (array[2] is 7) ``` -### アロー関数を使用して位置を検索する +### 疎配列における find() の使用 -次の例では、アロー関数を使用してフルーツの位置を検索しています。 +疎配列で `undefined` を検索することで、空スロットのインデックスを取得することができます。 ```js -const fruits = ["apple", "banana", "cantaloupe", "blueberries", "grapefruit"]; +console.log([1, , 3].findIndex((x) => x === undefined)); // 1 +``` -const index = fruits.findIndex((fruit) => fruit === "blueberries"); +### 配列でないオブジェクトに対する find() の呼び出し -console.log(index); // 3 -console.log(fruits[index]); // blueberries +`findIndex()` メソッドは `this` の `length` プロパティを読み込み、そのキーが `length` よりも小さい非負の整数である各プロパティにアクセスします。 + +```js +const arrayLike = { + length: 3, + "-1": 0.1, // -1 < 0 なので findIndex() 空は無視される + 0: 2, + 1: 7.3, + 2: 4, +}; +console.log( + Array.prototype.findIndex.call(arrayLike, (x) => !Number.isInteger(x)), +); // 1 ``` ## 仕様書 @@ -138,5 +113,11 @@ console.log(fruits[index]); // blueberries ## 関連情報 - [`Array.prototype.findIndex` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array) +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド +- {{jsxref("Array")}} - {{jsxref("Array.prototype.find()")}} +- {{jsxref("Array.prototype.findLast()")}} +- {{jsxref("Array.prototype.findLastIndex()")}} - {{jsxref("Array.prototype.indexOf()")}} +- {{jsxref("Array.prototype.lastIndexOf()")}} +- {{jsxref("TypedArray.prototype.findIndex()")}} From 79ed480f70e32594719ccf086c499c76b3af4fd2 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 3 Nov 2023 22:17:27 +0900 Subject: [PATCH 010/141] =?UTF-8?q?2023/09/15=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../array/findlastindex/index.md | 126 +++++++----------- 1 file changed, 50 insertions(+), 76 deletions(-) diff --git a/files/ja/web/javascript/reference/global_objects/array/findlastindex/index.md b/files/ja/web/javascript/reference/global_objects/array/findlastindex/index.md index defff0d880322d..c9083b3f38ee32 100644 --- a/files/ja/web/javascript/reference/global_objects/array/findlastindex/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/findlastindex/index.md @@ -2,106 +2,64 @@ title: Array.prototype.findLastIndex() slug: Web/JavaScript/Reference/Global_Objects/Array/findLastIndex l10n: - sourceCommit: 968e6f1f3b6f977a09e116a0ac552459b741eac3 + sourceCommit: d9e66eca59d82c65166c65e7946332650da8f48f --- {{JSRef}} -**`findLastIndex()`** メソッドは、指定されたテスト関数を満たす配列の最後の要素の添字を返します。 +**`findLastIndex()`** は {{jsxref("Array")}} のメソッドで、この配列を逆順に反復処理し、指定されたテスト関数を満たす配列の最後の要素のインデックスを返します。 テスト関数を満たす要素がなかった場合は、 -1 を返します。 -{{EmbedInteractiveExample("pages/js/array-findlastindex.html","shorter")}} - {{jsxref("Array/findLast", "findLast()")}} メソッドも参照してください。こちらはテスト関数を満たす最後の要素の（位置ではなく）値を返します。 +{{EmbedInteractiveExample("pages/js/array-findlastindex.html", "shorter")}} + ## 構文 -```js -// アロー関数 -findLastIndex((element) => { - /* … */ -}); -findLastIndex((element, index) => { - /* … */ -}); -findLastIndex((element, index, array) => { - /* … */ -}); - -// コールバック関数 -findLastIndex(callbackFn); -findLastIndex(callbackFn, thisArg); - -// インラインコールバック関数 -findLastIndex(function (element) { - /* … */ -}); -findLastIndex(function (element, index) { - /* … */ -}); -findLastIndex(function (element, index, array) { - /* … */ -}); -findLastIndex(function (element, index, array) { - /* … */ -}, thisArg); +```js-nolint +findLastIndex(callbackFn) +findLastIndex(callbackFn, thisArg) ``` ### 引数 - `callbackFn` - - - : 配列内の要素をテストするのに使用される関数。 - - この関数は以下の引数で呼び出されます。 - + - : 配列のそれぞれの要素に対して実行する関数です。一致する要素が得られたことを示すには[真値](/ja/docs/Glossary/Truthy)を返し、そうでなければ[偽値](/ja/docs/Glossary/Falsy)を返してください。この関数は以下の引数で呼び出されます。 - `element` - - : 配列内で現在処理されている要素。 + - : 配列内で現在処理されている要素です。 - `index` - - : 配列内で現在処理されている要素の位置。 + - : 配列内で現在処理されている要素のインデックス（位置）です。 - `array` - - : `findLastIndex()` を呼び出した元の配列。 - - コールバックは適切な要素が見つかったときに、[真値](/ja/docs/Glossary/Truthy)を返す必要があります。 - この要素の位置が `findLastIndex()` から返されます。 - + - : `findLastIndex()` を呼び出した元の配列です。 - `thisArg` {{optional_inline}} - - : `callbackFn` の実行時に `this` として使用するオブジェクト。 + - : `callbackFn` 内で `this` として使われるオブジェクトです。[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)を参照してください。 ### 返値 -配列内で、テストを満たした最後の（最も大きな）要素の添字。 -それ以外の場合は，一致する要素が見つからなければ -1 となります。 +配列内で、テストを満たした最後の（最も大きな）要素のインデックス。 +それ以外の場合は，一致する要素が見つからなければ `-1` となります。 ## 解説 -`findLastIndex()` メソッドは、配列のそれぞれの要素に対して、添字の降順に一度ずつ `callbackFn` 関数を実行し、 `callbackFn` が[真値](/ja/docs/Glossary/Truthy)を返すまで続けます。 -そして、 `findLastIndex()` がその要素の添字を返し、配列のイテレーターを停止します。 -もし `callbackFn` が真値を返さなかった場合、 `findLastIndex()` は `-1` を返します。 +`findLastIndex()` メソッドは[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)です。配列のそれぞれの要素に対して、インデックスの降順に一度ずつ指定された `callbackFn` 関数を実行し、 `callbackFn` が[真値](/ja/docs/Glossary/Truthy)を返すまで続けます。そして、 `findLastIndex()` がその要素のインデックスを返し、配列のイテレーターを停止します。もし `callbackFn` が真値を返さなかった場合、 `findLastIndex()` は `-1` を返します。 -`callbackFn` は値が割り当てられている要素だけではなく、配列の「すべての」添字に対して呼び出されます。 -すなわち、不連続な配列では、割り当てられた値のみを参照するメソッドと比較して、効率が悪くなります。 +`callbackFn` は値が割り当てられている要素だけではなく、配列の「すべての」インデックスに対して呼び出されます。[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#sparse_arrays)で空のスロットは `undefined` と同じ動作をします。 -`thisArg` 引数が `findLastIndex()` に指定された場合、これを `this` の値として `callbackFn` のそれぞれの呼び出しが行われます。 -指定されなかった場合は、 {{jsxref("undefined")}} が使用されます。 +`findLastIndex()` メソッドは呼び出し元の配列を変更しませんが、 `callbackFn` に指定された関数は変更することがあります。ただし、配列の長さは `callbackFn` を最初に呼び出す前に保存されることに注意してください。したがって、 -`findLastIndex()` メソッドは呼び出し元の配列を変更しませんが、 `callbackFn` に指定された関数は変更することがあります。 -`findLastIndex()` が処理する要素は、 `callbackFn` の最初の呼び出しの「前」に設定されます。 -したがって、 - -- `callbackFn` は、 `findLastIndex()` の呼び出しが始まった後に配列に追加された要素に対しては呼び出されません。 -- 既に呼び出されたことのある添字に割り当てられた要素に対して、再び `callbackFn` が呼び出されることはありません。 -- 範囲外の添字に割り当てられた要素に対しては、 `callbackFn` は呼び出されません。 -- 既存の、まだ呼び出されていない配列の要素が `callbackFn` によって変更された場合、 `callbackFn` に渡される値は、 `findLastIndex()` がその要素の添字を呼び出したときの値になります。 -- {{jsxref("Operators/delete", "削除", "", 1)}}された要素に対しても呼び出されます。 +- `callbackFn` は `findLastIndex()` の呼び出しを始めたときの配列の長さを超えて追加された要素にはアクセスしません。 +- 既に訪問した位置を変更しても、 `callbackFn` が再度呼び出されることはありません。 +- まだ訪問していない既存の配列要素が `callbackFn` によって変更された場合、 `callbackFn` に渡される値はその要素が取得される時点の値になります。[削除された](/ja/docs/Web/JavaScript/Reference/Operators/delete) 要素は `undefined` であるかのように処理されます。 > **警告:** 前項で説明したような、参照中の配列の同時進行での変更は（特殊な場合を除いて）普通は避けるべきです。多くの場合、理解しにくいコードになります。 +`findLastIndex()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。 + ## 例 ### 配列内の最後の素数の位置を探す -以下の例では、配列の最後の要素が素数である場合の添字を返します。は素数が存在しない場合は `-1` を返します。 +以下の例では、配列の最後の要素が素数である場合のインデックスを返します。素数が存在しない場合は `-1` を返します。 ```js function isPrime(element) { @@ -116,22 +74,33 @@ function isPrime(element) { return true; } -console.log([4, 6, 8, 12].findLast(isPrime)); // undefined, not found -console.log([4, 5, 7, 8, 9, 11, 12].findLast(isPrime)); // 11 +console.log([4, 6, 8, 12].findLastIndex(isPrime)); // -1, not found +console.log([4, 5, 7, 8, 9, 11, 12].findLastIndex(isPrime)); // 5 ``` -### アロー関数を使用した添字の検索 +### 疎配列に対する findLastIndex() の使用 -以下の例では、アロー関数を使用して果物の添字を探します。 -結果は {{jsxref("Array/findIndex", "findIndex()")}} を使用した場合と同じになることに注意してください。 +疎配列から `undefined` を検索し、空のスロットのインデックスを取得することができます。 ```js -const fruits = ["apple", "banana", "cantaloupe", "blueberries", "grapefruit"]; +console.log([1, , 3].findLastIndex((x) => x === undefined)); // 1 +``` + +### 配列でないオブジェクトに対する findLastIndex() の呼び出し -const index = fruits.findLastIndex((fruit) => fruit === "blueberries"); +`findLastIndex()` メソッドは `this` の `length` プロパティを読み込み、次にキーが `length` より小さい非負の整数である各プロパティにアクセスします。 -console.log(index); // 3 -console.log(fruits[index]); // blueberries +```js +const arrayLike = { + length: 3, + 0: 2, + 1: 7.3, + 2: 4, + 3: 3, // length が 3 であるため findLastIndex() から無視される +}; +console.log( + Array.prototype.findLastIndex.call(arrayLike, (x) => Number.isInteger(x)), +); // 2 ``` ## 仕様書 @@ -144,7 +113,12 @@ console.log(fruits[index]); // blueberries ## 関連情報 -- [`Array.prototype.findIndex` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array) -- {{jsxref("Array.prototype.findLast()")}} +- [`Array.prototype.findLastIndex` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#array-find-from-last) +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド +- {{jsxref("Array")}} - {{jsxref("Array.prototype.find()")}} +- {{jsxref("Array.prototype.findIndex()")}} +- {{jsxref("Array.prototype.findLast()")}} - {{jsxref("Array.prototype.indexOf()")}} +- {{jsxref("Array.prototype.lastIndexOf()")}} +- {{jsxref("TypedArray.prototype.findLastIndex()")}} From 6ec61ae0988685d5e70fae3bbbc3d37f38c7d99a Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 3 Nov 2023 22:32:06 +0900 Subject: [PATCH 011/141] =?UTF-8?q?2023/09/07=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../global_objects/array/flat/index.md | 132 ++++++------------ 1 file changed, 40 insertions(+), 92 deletions(-) diff --git a/files/ja/web/javascript/reference/global_objects/array/flat/index.md b/files/ja/web/javascript/reference/global_objects/array/flat/index.md index bf2a732c540694..bf7d5037d317af 100644 --- a/files/ja/web/javascript/reference/global_objects/array/flat/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/flat/index.md @@ -2,115 +2,39 @@ title: Array.prototype.flat() slug: Web/JavaScript/Reference/Global_Objects/Array/flat l10n: - sourceCommit: 968e6f1f3b6f977a09e116a0ac552459b741eac3 + sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de --- {{JSRef}} -**`flat()`** メソッドは、すべてのサブ配列の要素を指定した深さで再帰的に結合した新しい配列を生成します。 +**`flat()`** は {{jsxref("Array")}} インスタンスのメソッドで、すべてのサブ配列の要素を指定した深さで再帰的に結合した新しい配列を生成します。 {{EmbedInteractiveExample("pages/js/array-flat.html")}} ## 構文 -``` -var newArray = arr.flat([depth]); +```js-nolint +flat() +flat(depth) ``` ### 引数 - `depth` {{optional_inline}} - - : ネストされた配列構造で、どの程度の深さをフラット化するか指定する深さレベルです。既定値は 1 です。 + - : ネストされた配列構造で、どの程度の深さをフラット化するか指定する深さレベルです。 + 既定値は 1 です。 ### 返値 サブ配列の要素を結合した新しい配列。 -## 代替手段 - -### reduce と concat - -```js -const arr = [1, 2, [3, 4]]; - -// 単一レベルの配列にする -arr.flat(); -// 次のものと同様 -arr.reduce((acc, val) => acc.concat(val), []); -// [1, 2, 3, 4] +## 解説 -// または、分割代入の構文を使用して -const flattened = (arr) => [].concat(...arr); -``` +`flat()` メソッドは[コピーメソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#コピーメソッドと変更メソッド)です。これは `this` を変更するのではなく、元の配列と同じ要素を格納した[シャローコピー](/ja/docs/Glossary/Shallow_copy)を返します。 -### reduce + concat + isArray + 再帰 +`flat()` メソッドは、フラット化される配列が[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#疎配列)の場合、空のスロットを無視します。例えば、 `depth` が 1 の場合、ルート配列と最初の入れ子配列の空のスロットは無視されますが、それ以上の入れ子配列の空のスロットは配列自体に保持されます。 -```js -const arr = [1, 2, [3, 4, [5, 6]]]; - -// reduce と concat の再帰によって深いレベルを平坦化することができる -function flatDeep(arr, d = 1) { - if (!Array.isArray(arr)) { - return arr; - } - return d > 0 - ? arr.reduce((acc, val) => acc.concat(flatDeep(val, d - 1)), []) - : arr.slice(); -} - -flatDeep(arr, Infinity); -// [1, 2, 3, 4, 5, 6] -``` - -### スタックの使用 - -```js -// 再帰を使わずにスタックを使用して平坦化 -// note that depth control is hard/inefficient as we will need to tag EACH value with its own depth -// also possible w/o reversing on shift/unshift, but array OPs on the end tends to be faster -function flatten(input) { - const stack = [...input]; - const res = []; - while (stack.length) { - // pop value from stack - const next = stack.pop(); - if (Array.isArray(next)) { - // push back array items, won't modify the original input - stack.push(...next); - } else { - res.push(next); - } - } - // reverse to restore input order - return res.reverse(); -} - -const arr = [1, 2, [3, 4, [5, 6]]]; -flatten(arr); -// [1, 2, 3, 4, 5, 6] -``` - -### Generator 関数の使用 - -```js -function* flatten(array, depth) { - if (depth === undefined) { - depth = 1; - } - - for (const item of array) { - if (Array.isArray(item) && depth > 0) { - yield* flatten(item, depth - 1); - } else { - yield item; - } - } -} - -const arr = [1, 2, [3, 4, [5, 6]]]; -const flattened = [...flatten(arr, Infinity)]; -// [1, 2, 3, 4, 5, 6] -``` +`flat()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。しかし、その要素を平坦化するには配列でなければなりません。 ## 例 @@ -136,12 +60,35 @@ arr4.flat(Infinity); ### 平坦化と配列の穴 -flat メソッドは配列内の空要素を削除します。 +`flat()` メソッドは配列内の空要素を削除します。 ```js const arr5 = [1, 2, , 4, 5]; -arr5.flat(); -// [1, 2, 4, 5] +console.log(arr5.flat()); // [1, 2, 4, 5] + +const array = [1, , 3, ["a", , "c"]]; +console.log(array.flat()); // [ 1, 3, "a", "c" ] + +const array2 = [1, , 3, ["a", , ["d", , "e"]]]; +console.log(array2.flat()); // [ 1, 3, "a", ["d", empty, "e"] ] +console.log(array2.flat(2)); // [ 1, 3, "a", "d", "e"] +``` + +### 配列でないオブジェクトに対する flat() の呼び出し + +`flat()` メソッドは `this` の `length` プロパティを読み込み、キーが `length` より小さい非負の整数である各プロパティにアクセスします。要素が配列でない場合は、結果に直接追加されます。要素が配列の場合は、引数 `depth` に従って平坦化されます。 + +```js +const arrayLike = { + length: 3, + 0: [1, 2], + // 配列風オブジェクトは平坦化されない + 1: { length: 2, 0: 3, 1: 4 }, + 2: 5, + 3: 3, // length が 3 なので flat() から無視される +}; +console.log(Array.prototype.flat.call(arrayLike)); +// [ 1, 2, { '0': 3, '1': 4, length: 2 }, 5 ] ``` ## 仕様書 @@ -155,8 +102,9 @@ arr5.flat(); ## 関連情報 - [`Array.prototype.flat` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array) +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド +- {{jsxref("Array")}} +- {{jsxref("Array.prototype.concat()")}} - {{jsxref("Array.prototype.flatMap()")}} - {{jsxref("Array.prototype.map()")}} - {{jsxref("Array.prototype.reduce()")}} -- {{jsxref("Array.prototype.concat()")}} -- [A polyfill](https://github.com/behnammodi/polyfill/blob/master/array.polyfill.js) From b3bb73685e7c45d86e2fd7a1538c33cc3f45c669 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 3 Nov 2023 23:10:21 +0900 Subject: [PATCH 012/141] =?UTF-8?q?2023/09/25=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../global_objects/array/flatmap/index.md | 110 ++++++++++-------- 1 file changed, 60 insertions(+), 50 deletions(-) diff --git a/files/ja/web/javascript/reference/global_objects/array/flatmap/index.md b/files/ja/web/javascript/reference/global_objects/array/flatmap/index.md index 53f4a0e5da450a..be82d9f7df5b84 100644 --- a/files/ja/web/javascript/reference/global_objects/array/flatmap/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/flatmap/index.md @@ -2,73 +2,45 @@ title: Array.prototype.flatMap() slug: Web/JavaScript/Reference/Global_Objects/Array/flatMap l10n: - sourceCommit: 968e6f1f3b6f977a09e116a0ac552459b741eac3 + sourceCommit: fb85334ffa4a2c88d209b1074909bee0e0abd57a --- {{JSRef}} -**`flatMap()`** メソッドは、最初にマッピング関数を使用してそれぞれの要素をマップした後、結果を新しい配列内にフラット化します。これは、{{jsxref("Array.prototype.map","map()")}} の後に深さ 1 の {{jsxref("Array.prototype.flat","flat()")}} を行うのと同じですが (`arr.map(...args).flat()`)、これら 2 つのメソッドを別々に呼び出すよりもわずかに効率的です。 +**`flatMap()`** は {{jsxref("Array")}} インスタンスのメソッドで、最初にマッピング関数を使用してそれぞれの要素をマップした後、結果を新しい配列内に平坦化します。これは、 {{jsxref("Array/map", "map()")}} の後に深さ 1 の {{jsxref("Array/flat","flat()")}} を行うのと同じですが (`arr.map(...args).flat()`)、これら 2 つのメソッドを別々に呼び出すよりもわずかに効率的です。 -{{EmbedInteractiveExample("pages/js/array-flatmap.html","shorter")}} +{{EmbedInteractiveExample("pages/js/array-flatmap.html", "shorter")}} ## 構文 -```js -// アロー関数 -flatMap((currentValue) => { - /* … */ -}); -flatMap((currentValue, index) => { - /* … */ -}); -flatMap((currentValue, index, array) => { - /* … */ -}); - -// コールバック関数 -flatMap(callbackFn); -flatMap(callbackFn, thisArg); - -// インラインコールバック関数 -flatMap(function (currentValue) { - /* … */ -}); -flatMap(function (currentValue, index) { - /* … */ -}); -flatMap(function (currentValue, index, array) { - /* … */ -}); -flatMap(function (currentValue, index, array) { - /* … */ -}, thisArg); +```js-nolint +flatMap(callbackFn) +flatMap(callbackFn, thisArg) ``` ### 引数 - `callbackFn` - - - : 新しい配列の要素を生成する関数。 - - この関数は以下の引数と共に呼び出されます。 - - - `currentValue` - - : 配列で現在処理されている要素です。 + - : 配列のそれぞれの要素に対して実行する関数。この関数は、新しい配列の要素を格納した配列を返すか、新しい配列に追加する 1 つの配列以外の値を返します。この関数は、以下の引数で呼び出されます。 + - `element` + - : 配列で現在処理中の要素です。 - `index` - - : 配列で現在処理されている要素の添字です。 + - : 配列で現在処理中の要素のインデックスです。 - `array` - - : `flatMap` が呼び出された配列です。 + - : `flatMap()` が呼び出された配列です。 - `thisArg` {{optional_inline}} - - : `callbackFn` を実行するときに `this` として使用する値です。 + - : `callbackFn` を実行するときに `this` として使用する値です。[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)を参照してください。 ### 返値 -各要素がコールバック関数の結果であり、深さが 1 にフラット化された新しい配列です。 +各要素がコールバック関数の結果であり、深さが 1 に平坦化された新しい配列です。 ## 解説 -コールバック関数の詳細な説明は {{jsxref("Array.prototype.map()")}} を参照してください。`flatMap` メソッドは、[`map`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map) の後に深さ 1 の [`flat`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/flat) を呼び出すのと同じです。 +`flatMap()` メソッドは[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)です。コールバック関数の詳細な説明は {{jsxref("Array.prototype.map()")}} を参照してください。`flatMap()` メソッドは、[`map(callbackFn, thisArg)`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map) の後にの [`flat(1)`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/flat) を呼び出すのと同じです。要素ごとに、新しい要素の配列を生成し、できた配列を連結して新しい配列を形成します。 + +`flatMap()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。ただし、 `callbackFn` から返される値は、平坦化する場合は配列でなければなりません。 ### 代替手段 @@ -109,7 +81,7 @@ arr1.flatMap((x) => [[x * 2]]); // [[2], [4], [6], [8]] ``` -上記は map を使用することでも実現できますが、ここでは `flatMap` の使用方法をよりよく示す例を紹介します。 +上記は map を使用することでも実現できますが、ここでは `flatMap()` の使用方法をよりよく示す例を紹介します。 文章のリストから単語のリストを生成してみましょう。 @@ -125,9 +97,12 @@ arr1.flatMap((x) => x.split(" ")); 出力リストの長さは入力リストの長さとは異なる場合があることに注意してください。 -### `map()` のアイテムの追加と削除 +### map() のアイテムの追加と削除 -`flatMap` は、`map` 中にアイテムの追加と削除（アイテムの数を変更）を行う方法として利用できます。つまり、常に*一対一*ではなく、_多くのアイテムを多くのアイテムに_（入力されたアイテムを個別に扱うことで）マップできるようになります。この意味では、 [filter](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) の逆のような働きをします。単純に、アイテムを保持するには 1 要素の配列を返し、アイテムを追加するには複数要素の配列を返し、アイテムを削除するには 0 要素の配列を返します。 +`flatMap` は、`map` 中にアイテムの追加と削除（アイテムの数を変更）を行う方法として利用できます。 +つまり、常に*一対一*ではなく、_多くのアイテムを多くのアイテムに_（入力されたアイテムを個別に扱うことで）マップできるようになります。 +この意味では、 [filter](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) の逆のような働きをします。 +単純に、アイテムを保持するには 1 要素の配列を返し、アイテムを追加するには複数要素の配列を返し、アイテムを削除するには 0 要素の配列を返します。 ```js // 例えば、すべての負の数を取り除き、 @@ -142,7 +117,41 @@ const result = a.flatMap((n) => { } return n % 2 === 0 ? [n] : [n - 1, 1]; }); -// expected output: [4, 1, 4, 20, 16, 1, 18] +console.log(result); // [4, 1, 4, 20, 16, 1, 18] +``` + +### 疎配列に対する flatMap() の使用 + +`map()` は呼び出されず、 `flat()` は返す配列の空のスロットを無視するので、 `callbackFn` は元の配列の空のスロットに対しては呼び出されません。 + +```js +console.log([1, 2, , 4, 5].flatMap((x) => [x, x * 2])); // [1, 2, 2, 4, 4, 8, 5, 10] +console.log([1, 2, 3, 4].flatMap((x) => [, x * 2])); // [2, 4, 6, 8] +``` + +### 配列以外のオブジェクトに対する flatMap() の呼び出し + +`flatMap()` メソッドは `this` の `length` プロパティを読み込み、次にキーが `length` より小さい非負の整数である各プロパティにアクセスします。コールバック関数の返り値が配列でない場合は、常に結果の配列に直接追加されます。 + +```js +const arrayLike = { + length: 3, + 0: 1, + 1: 2, + 2: 3, + 3: 4, // length が 3 であるため flatMap() から無視される +}; +console.log(Array.prototype.flatMap.call(arrayLike, (x) => [x, x * 2])); +// [1, 2, 2, 4, 3, 6] + +// コールバックから返された配列風のオブジェクトは平坦化されない +console.log( + Array.prototype.flatMap.call(arrayLike, (x) => ({ + length: 1, + 0: x, + })), +); +// [ { '0': 1, length: 1 }, { '0': 2, length: 1 }, { '0': 3, length: 1 } ] ``` ## 仕様書 @@ -156,8 +165,9 @@ const result = a.flatMap((n) => { ## 関連情報 - [`Array.prototype.flatMap` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array) +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド +- {{jsxref("Array")}} +- {{jsxref("Array.prototype.concat()")}} - {{jsxref("Array.prototype.flat()")}} - {{jsxref("Array.prototype.map()")}} - {{jsxref("Array.prototype.reduce()")}} -- {{jsxref("Array.prototype.concat()")}} -- [ポリフィル](https://github.com/behnammodi/polyfill/blob/master/array.polyfill.js) From e7be67ad6a824b86b4225891c9755e1493fa0036 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 3 Nov 2023 23:32:02 +0900 Subject: [PATCH 013/141] =?UTF-8?q?2023/09/25=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../global_objects/array/foreach/index.md | 150 ++++++++---------- 1 file changed, 63 insertions(+), 87 deletions(-) diff --git a/files/ja/web/javascript/reference/global_objects/array/foreach/index.md b/files/ja/web/javascript/reference/global_objects/array/foreach/index.md index e0e71d85da731d..b0c10f82e1beee 100644 --- a/files/ja/web/javascript/reference/global_objects/array/foreach/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/foreach/index.md @@ -2,7 +2,7 @@ title: Array.prototype.forEach() slug: Web/JavaScript/Reference/Global_Objects/Array/forEach l10n: - sourceCommit: 9b38f886d21c5d0a428f58acb20c4d0fc6c2e098 + sourceCommit: fb85334ffa4a2c88d209b1074909bee0e0abd57a --- {{JSRef}} @@ -13,116 +13,70 @@ l10n: ## 構文 -```js -// アロー関数 -forEach((element) => { - /* … */ -}); -forEach((element, index) => { - /* … */ -}); -forEach((element, index, array) => { - /* … */ -}); - -// コールバック関数 -forEach(callbackFn); -forEach(callbackFn, thisArg); - -// インラインコールバック関数 -forEach(function (element) { - /* … */ -}); -forEach(function (element, index) { - /* … */ -}); -forEach(function (element, index, array) { - /* … */ -}); -forEach(function (element, index, array) { - /* … */ -}, thisArg); +```js-nolint +forEach(callbackFn) +forEach(callbackFn, thisArg) ``` ### 引数 - `callbackFn` - - - : 各要素に対して実行されるコールバック関数です。 - - この関数は、以下の引数と共に呼び出されます。 - + - : 配列のそれぞれの要素に対して実行する関数。返値は破棄されます。この関数は以下の引数で呼び出されます。 - `element` - - : 現在処理されている配列の要素です。 + - : 現在処理中の配列の要素です。 - `index` - - : 配列内の `element` の添字です。 + - : 現在処理中の配列の要素のインデックスです。 - `array` - : `forEach()` が呼び出されている配列です。 - - `thisArg` {{optional_inline}} - - : `callbackFn` 内で `this` として使用する値です。 + - : `callbackFn` を実行するときに `this` として使用する値です。[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)を参照してください。 ### 返値 -`undefined` です。 +なし ({{jsxref("undefined")}})。 ## 解説 -`forEach()` は、与えられた関数 `callbackFn` を配列に含まれる各要素に対して一度ずつ、昇順で呼び出します。インデックスプロパティが削除されていたり、初期化されていなかったりした場合は呼び出されません。（不連続な配列については、[下記の例を参照](#初期化されていない値については何もしない（不連続な配列）)。） - -`callbackFn` は次の 3 つの引数で呼び出されます。 +`forEach()` メソッドは[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)です。指定された関数 `callbackFn` を配列に含まれる各要素に対して一度ずつ、昇順で呼び出します。 {{jsxref("Array/map", "map()")}} と異なり、 `forEach()` は常に {{jsxref("undefined")}} を返し、連鎖させることはできません。典型的な使用する用途は、チェーンの終わりで副次効果を実行することです。 -1. 要素の値 -2. 要素のインデックス -3. 走査されている配列 +`callbackFn` は値が割り当てられている配列インデックスに対してのみ呼び出されます。[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#sparse_arrays)で空のスロットに対しては呼び出されません。 -`thisArg` 引数が `forEach()` に与えられると、それがコールバックの `this` 値になります。 -最終的に `callbackFn` から見える `thisArg` の値は、[関数が見る `this` を決める通常のルール](/ja/docs/Web/JavaScript/Reference/Operators/this) に従って決定されます。 +`forEach()` メソッドは呼び出し元の配列を変更しませんが、 `callbackFn` に指定された関数は変更することがあります。ただし、配列の長さは `callbackFn` を最初に呼び出す前に保存されることに注意してください。したがって、 -`forEach()` によって処理される配列要素の範囲は、`callbackFn` が最初に呼び出される前に設定されます。訪問済みの添字、または範囲を外れた添字に割り当てられている要素については `callbackFn` が実行されません。既存の配列要素が変更または削除された場合、`callbackFn` に渡される値は `forEach()` がそれらを参照した時点での値になります。削除された配列要素を参照することはありません。既に参照された配列要素が反復処理の間に（例えば {{jsxref("Array.prototype.shift()", "shift()")}} を使用して）削除された場合、後の要素は飛ばされます。([下記の例を参照してください](#反復処理中の配列の変更)。) +- `callbackFn` は `forEach()` の呼び出しを始めたときの配列の長さを超えて追加された要素にはアクセスしません。 +- 既に訪問した位置を変更しても、 `callbackFn` が再度呼び出されることはありません。 +- まだ訪問していない既存の配列要素が `callbackFn` によって変更された場合、 `callbackFn` に渡される値はその要素が取得される時点の値になります。[削除](/ja/docs/Web/JavaScript/Reference/Operators/delete)された要素は `undefined` であるかのように処理されます。 > **警告:** 前項で説明したような、参照中の配列の同時進行での変更は（特殊な場合を除いて）普通は避けるべきです。多くの場合、理解しにくいコードになります。 -`forEach()` は配列の各要素に対して `callbackFn` 関数を一度ずつ実行します。{{jsxref("Array.prototype.map()", "map()")}} や {{jsxref("Array.prototype.reduce()", "reduce()")}} と異なり、返値は常に {{jsxref("undefined")}} であり、チェーンできません。チェーンの最後に副作用を生じさせるのが典型的な使用法です。 +`された()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。 -`forEach()` は呼び出された配列を変化させません。(ただし `callbackFn` が変化させる可能性があります) +例外を発生する以外の方法で、 `forEach()` ループを止めたり脱出したりする方法はありません。そのような動作を行う場合、 `forEach()` メソッドは適切な方法ではありません。 -> **メモ:** 例外を発生する以外の方法で、`forEach()` ループを止めることはできません。ループ中に中断する必要がある場合、`forEach()` メソッドは適切な方法ではありません。 -> -> 早期終了を行うには下記のような手段が適しています。 -> -> - 単純な [for](/ja/docs/Web/JavaScript/Reference/Statements/for) ループ -> - [for...of](/ja/docs/Web/JavaScript/Reference/Statements/for...of) -> / [for...in](/ja/docs/Web/JavaScript/Reference/Statements/for...in) ループ -> - {{jsxref("Array.prototype.every()")}} -> - {{jsxref("Array.prototype.some()")}} -> - {{jsxref("Array.prototype.find()")}} -> - {{jsxref("Array.prototype.findIndex()")}} -> -> 他の Array のメソッドである {{jsxref("Array.prototype.every()", "every()")}}, {{jsxref("Array.prototype.some()", "some()")}}, {{jsxref("Array.prototype.find()", "find()")}}, {{jsxref("Array.prototype.findIndex()", "findIndex()")}} は、配列の要素を検査する際、truthy の値を返すことで以降の繰り返しが必要であるかどうかを決めます。 +早期終了は [`for`](/ja/docs/Web/JavaScript/Reference/Statements/for), [`for...of`](/ja/docs/Web/JavaScript/Reference/Statements/for...of), [`for...in`](/ja/docs/Web/JavaScript/Reference/Statements/for...in) のようなループ文で行うことができます。また、{{jsxref("Array/every", "every()")}}, {{jsxref("Array/some", "some()")}}, {{jsxref("Array/find", "find()")}}, {{jsxref("Array/findIndex", "findIndex()")}} のような配列メソッドも、それ以上の反復処理が不要な場合は、直ちに反復処理を停止します。 -> **メモ:** forEach は同期関数を期待します。 -> -> `forEach` はプロミスを待ちません。`forEach` のコールバックとしてプロミス (または非同期関数) を使用する場合は、その意味合いを理解しておくようにしてください。 -> -> ```js -> const ratings = [5, 4, 5]; -> let sum = 0; -> -> const sumFunction = async (a, b) => a + b; -> -> ratings.forEach(async (rating) => { -> sum = await sumFunction(sum, rating); -> }); -> -> console.log(sum); -> // 本来期待される出力: 14 -> // 実際の出力: 0 -> ``` +`forEach()` は同期関数を期待します。プロミスを待ちません。`forEach` のコールバックとしてプロミス（または非同期関数）を使用する場合は、その意味合いを理解しておくようにしてください。 + +```js +const ratings = [5, 4, 5]; +let sum = 0; + +const sumFunction = async (a, b) => a + b; + +ratings.forEach(async (rating) => { + sum = await sumFunction(sum, rating); +}); + +console.log(sum); +// 本来期待される出力: 14 +// 実際の出力: 0 +``` + +一連の非同期処理を順次または並列に実行するには、[プロミスの合成](/ja/docs/Web/JavaScript/Guide/Using_promises#合成)を参照してください。 ## 例 -### 初期化されていない値については何もしない（不連続な配列） +### 不連続な配列に対する forEach() の使用 ```js-nolint const arraySparse = [1, 3, /* 空 */, 7]; @@ -215,7 +169,8 @@ console.log(obj.sum); // 16 次のコードは与えられたオブジェクトのコピーを生成します。 -オブジェクトのコピーを作成するには様々な方法があります。以下のものは一つの方法で、`Array.prototype.forEach()` が `Object.*` ユーティリティ関数を使用して、どのように動作するかを説明しています。 +オブジェクトのコピーを作成するには様々な方法があります。 +以下のものは一つの方法で、`Array.prototype.forEach()` が `Object.*` ユーティリティ関数を使用して、どのように動作するかを説明しています。 ```js const copy = (obj) => { @@ -253,9 +208,10 @@ words.forEach((word) => { console.log(words); // ['two', 'three', 'four'] ``` -### 配列の平板化 +### 配列の平坦化 -次の例は学習目的だけのものです。組み込みメソッドを使用して配列を平板化したい場合は、{{jsxref("Array.prototype.flat()")}} を使用することができます。 +次の例は学習目的だけのものです。 +組み込みメソッドを使用して配列を平坦化したい場合は、{{jsxref("Array.prototype.flat()")}} を使用することができます。 ```js const flatten = (arr) => { @@ -275,6 +231,24 @@ const nested = [1, 2, 3, [4, 5, [6, 7], 8, 9]]; console.log(flatten(nested)); // [1, 2, 3, 4, 5, 6, 7, 8, 9] ``` +### 配列以外のオブジェクトに対する forEach() の呼び出し + +`forEach()` メソッドは `this` の `length` プロパティを読み込み、次にキーが `length` より小さい非負の整数である各プロパティにアクセスします。 + +```js +const arrayLike = { + length: 3, + 0: 2, + 1: 3, + 2: 4, + 3: 5, // length が 3 であるため forEach() からは無視される +}; +Array.prototype.forEach.call(arrayLike, (x) => console.log(x)); +// 2 +// 3 +// 4 +``` + ## 仕様書 {{Specifications}} @@ -286,11 +260,13 @@ console.log(flatten(nested)); // [1, 2, 3, 4, 5, 6, 7, 8, 9] ## 関連情報 - [`Array.prototype.forEach` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array) +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド +- {{jsxref("Array")}} - {{jsxref("Array.prototype.find()")}} -- {{jsxref("Array.prototype.findIndex()")}} - {{jsxref("Array.prototype.map()")}} - {{jsxref("Array.prototype.filter()")}} - {{jsxref("Array.prototype.every()")}} - {{jsxref("Array.prototype.some()")}} +- {{jsxref("TypedArray.prototype.forEach()")}} - {{jsxref("Map.prototype.forEach()")}} - {{jsxref("Set.prototype.forEach()")}} From 9cbe27e343bb043eed8d82ab466acc7a05e39bfd Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 4 Nov 2023 00:14:14 +0900 Subject: [PATCH 014/141] =?UTF-8?q?2023/09/25=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../global_objects/array/from/index.md | 99 ++++++++++--------- 1 file changed, 51 insertions(+), 48 deletions(-) diff --git a/files/ja/web/javascript/reference/global_objects/array/from/index.md b/files/ja/web/javascript/reference/global_objects/array/from/index.md index 806d7f4ec42ad9..5b92523a3c1570 100644 --- a/files/ja/web/javascript/reference/global_objects/array/from/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/from/index.md @@ -2,61 +2,35 @@ title: Array.from() slug: Web/JavaScript/Reference/Global_Objects/Array/from l10n: - sourceCommit: 968e6f1f3b6f977a09e116a0ac552459b741eac3 + sourceCommit: fb85334ffa4a2c88d209b1074909bee0e0abd57a --- {{JSRef}} -**`Array.from()`** メソッドは、反復可能オブジェクトや配列風オブジェクトからシャローコピーされた、新しい `Array` インスタンスを生成します。 +**`Array.from()`** 静的メソッドは、[反復可能オブジェクト](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol)や[配列風オブジェクト](/ja/docs/Web/JavaScript/Guide/Indexed_collections#working_with_array-like_objects)からシャローコピーされた、新しい `Array` インスタンスを生成します。 -{{EmbedInteractiveExample("pages/js/array-from.html","shorter")}} +{{EmbedInteractiveExample("pages/js/array-from.html", "shorter")}} ## 構文 -```js -// アロー関数 -Array.from(arrayLike, (element) => { - /* … */ -}); -Array.from(arrayLike, (element, index) => { - /* … */ -}); - -// マッピング関数 -Array.from(arrayLike, mapFn); -Array.from(arrayLike, mapFn, thisArg); - -// インラインマッピング関数 -Array.from(arrayLike, function mapFn(element) { - /* … */ -}); -Array.from(arrayLike, function mapFn(element, index) { - /* … */ -}); -Array.from( - arrayLike, - function mapFn(element) { - /* … */ - }, - thisArg, -); -Array.from( - arrayLike, - function mapFn(element, index) { - /* … */ - }, - thisArg, -); +```js-nolint +Array.from(arrayLike) +Array.from(arrayLike, mapFn) +Array.from(arrayLike, mapFn, thisArg) ``` ### 引数 - `arrayLike` - : 配列に変換する反復可能オブジェクトまたは配列風オブジェクト。 -- `mapFn` {{Optional_inline}} - - : 配列のすべての要素に対して呼び出される マッピング関数。 -- `thisArg` {{Optional_inline}} - - : `mapFn` を実行する時に `this` として使用する値。 +- `mapFn` {{optional_inline}} + - : 配列の各要素に対して呼び出す関数です。指定された場合、配列に追加されるすべての値は最初にこの関数に渡され、代わりに `mapFn` の返値が配列に追加されます。この関数は以下の引数で呼び出されます。 + - `element` + - : 配列内で現在処理中の要素です。 + - `index` + - : 配列内で現在処理中の要素のインデックスです。 +- `thisArg` {{optional_inline}} + - : `mapFn` を実行する時に `this` として使用する値です。 ### 返値 @@ -69,15 +43,15 @@ Array.from( - [反復可能オブジェクト](/ja/docs/Web/JavaScript/Reference/Iteration_protocols)（{{jsxref("Map")}} や {{jsxref("Set")}} のような要素を取得するオブジェクト） - オブジェクトが反復可能でない場合は、配列風オブジェクト（`length` プロパティおよび添字の付いた要素を持つオブジェクト） -`Array.from()` にはオプションの引数 `mapFn` があります。これにより作成中の配列のすべての要素に対して {{jsxref("Array.prototype.map()", "map()")}} 関数を実行することができます。 +反復可能オブジェクトでも配列風でもない普通のオブジェクトを配列に変換するには（プロパティのキー、値、またはその両方を列挙して） {{jsxref("Object.keys()")}}、{{jsxref("Object.values()")}}、{{jsxref("Object.entries()")}} のいずれかを使用してください。[非同期反復可能オブジェクト](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#非同期イテレーターと非同期反復可能プロトコル)を配列に変換するには、{{jsxref("Array.fromAsync()")}}を使用します。 -より明確に言うと、中間配列を生成しないことを除いて、`Array.from(obj, mapFn, thisArg)` は `Array.from(obj).map(mapFn, thisArg)` と同じ結果です。 _mapFn_ は配列全体ではなく 2 つの引数 (_element_, _index_) のみを取るため、配列は構築途中になります。 +`Array.from()` は疎配列を作成しません。 `arrayLike` オブジェクトのインデックスプロパティが欠けている場合、新しい配列では `undefined` になります。 -> **メモ:** これは、[型付き配列](/ja/docs/Web/JavaScript/Typed_arrays)のような特定の配列のサブクラスでは特に重要です。なぜなら、中間配列の値は適切な型に収まるように切り捨てられている必要があるからです。 +`Array.from()` にはオプションで `mapFn` という引数があり、 {{jsxref("Array/map", "map()")}} と同様に、作成する配列のそれぞれの要素に対して関数を実行することができます。より明確には、`Array.from(obj, mapFn, thisArg)` は `Array.from(obj).map(mapFn, thisArg)` と同じ結果を保有します。ただし、`Array.from(obj).map(mapFn, thisArg)` は中間配列を作成せず、`mapFn` は配列全体を持たずに 2 つの引数 (`element`, `index`) を受け取るだけです。 -`from()` メソッドの `length` プロパティは 1 です。 +> **メモ:** この動作は[型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)にとってより重要です。なぜなら、中間の配列は適切な型を入力するために必然的に値が切り捨てられるからです。 `Array.from()` は {{jsxref("TypedArray.from()")}} と同じシグネチャを持つために実装します。 -ES2015 では、 [class](/ja/docs/Web/JavaScript/Reference/Classes) 構文により定義済みクラスとユーザー定義クラスの両方をサブクラス化することができます。結果として、`Array.from` のような静的メソッドは `Array` のサブクラスに「継承」され、`Array` ではなくサブクラスのインスタンスを生成します。 `Array.from()` メソッドも汎用的に定義されており、単一の数値の引数を受け入れる任意のコンストラクターに定義することができます。 +`Array.from()` メソッドは汎用ファクトリーメソッドです。例えば、 `Array` のサブクラスが `from()` メソッドを継承した場合、継承した `from()` メソッドは `Array` インスタンスではなく、サブクラスの新しいインスタンスを返します。実際には、新しい配列の長さを表す単一の引数を受け入れるコンストラクター関数を `this` 値として指定することができます。反復可能オブジェクトが `arrayLike` として渡された場合、コンストラクターは引数なしで呼び出されます。配列風のオブジェクトが渡された場合、コンストラクターは配列風オブジェクトの[正規化された長さ](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#length_プロパティの正規化)で呼び出されます。最終的な `length` は反復処理が完了したときに再び設定されます。もし `this` の値がコンストラクター関数でない場合、代わりにプレーンな `Array` コンストラクターが使用されます。 ## 例 @@ -122,7 +96,7 @@ Array.from(mapper.keys()); ```js // DOM 要素のプロパティに基づく配列を作成します。 -const images = document.getElementsByTagName("img"); +const images = document.querySelectorAll("img"); const sources = Array.from(images, (image) => image.src); const insecureSources = sources.filter((link) => link.startsWith("http://")); ``` @@ -165,7 +139,7 @@ const range = (start, stop, step) => range(0, 4, 1); // [0, 1, 2, 3, 4] -// 1..10 の範囲の数値を 2 ごとに生成 +// 1..10 の範囲の数値を 2 ごとに生成 range(1, 10, 2); // [1, 3, 5, 7, 9] @@ -176,6 +150,32 @@ range("A".charCodeAt(0), "Z".charCodeAt(0), 1).map((x) => // ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"] ``` +### 配列でないコンストラクターにおける from() の呼び出し + +`from()` メソッドは、新しい配列の長さを表す単一の引数を受け入れるコンストラクター関数で呼び出すことができます。 + +```js +function NotArray(len) { + console.log("NotArray called with length", len); +} + +// 反復可能 +console.log(Array.from.call(NotArray, new Set(["foo", "bar", "baz"]))); +// NotArray を length が undefined のままで呼び出し +// NotArray { '0': 'foo', '1': 'bar', '2': 'baz', length: 3 } + +// 配列風 +console.log(Array.from.call(NotArray, { length: 1, 0: "foo" })); +// NotArray called with length 1 +// NotArray { '0': 'foo', length: 1 } +``` + +`this` の値がコンストラクタでない場合は、プレーンな `Array` オブジェクトを返します。 + +```js +console.log(Array.from.call({}, { length: 1, 0: "foo" })); // [ 'foo' ] +``` + ## 仕様書 {{Specifications}} @@ -187,7 +187,10 @@ range("A".charCodeAt(0), "Z".charCodeAt(0), 1).map((x) => ## 関連情報 - [`Array.from` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array) +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド - {{jsxref("Array")}} +- {{jsxref("Array/Array", "Array()")}} - {{jsxref("Array.of()")}} +- {{jsxref("Array.fromAsync()")}} - {{jsxref("Array.prototype.map()")}} - {{jsxref("TypedArray.from()")}} From 71f1dbd95eafe33d0a32fff0e5e58fe0187d8744 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 4 Nov 2023 08:54:43 +0900 Subject: [PATCH 015/141] =?UTF-8?q?sourceCommit=20=E3=81=AE=E5=80=A4?= =?UTF-8?q?=E3=82=92=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/javascript/reference/global_objects/array/fill/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/ja/web/javascript/reference/global_objects/array/fill/index.md b/files/ja/web/javascript/reference/global_objects/array/fill/index.md index b6f0f51bec2e02..0607add5eaba13 100644 --- a/files/ja/web/javascript/reference/global_objects/array/fill/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/fill/index.md @@ -2,7 +2,7 @@ title: Array.prototype.fill() slug: Web/JavaScript/Reference/Global_Objects/Array/fill l10n: - sourceCommit: 968e6f1f3b6f977a09e116a0ac552459b741eac3 + sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de --- {{JSRef}} From 82f6b6d7fcb0f2201a9005fc5d123eb0394181ff Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 5 Nov 2023 18:56:42 +0900 Subject: [PATCH 016/141] =?UTF-8?q?=E4=BF=AE=E6=AD=A3=E3=83=9F=E3=82=B9?= =?UTF-8?q?=E3=82=92=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../javascript/reference/global_objects/array/foreach/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/ja/web/javascript/reference/global_objects/array/foreach/index.md b/files/ja/web/javascript/reference/global_objects/array/foreach/index.md index b0c10f82e1beee..9ccfc5a2de788f 100644 --- a/files/ja/web/javascript/reference/global_objects/array/foreach/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/foreach/index.md @@ -49,7 +49,7 @@ forEach(callbackFn, thisArg) > **警告:** 前項で説明したような、参照中の配列の同時進行での変更は（特殊な場合を除いて）普通は避けるべきです。多くの場合、理解しにくいコードになります。 -`された()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。 +`forEach()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。 例外を発生する以外の方法で、 `forEach()` ループを止めたり脱出したりする方法はありません。そのような動作を行う場合、 `forEach()` メソッドは適切な方法ではありません。 From 34cc81a87e5f6092513537dd2ccf8e25426b812f Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 5 Nov 2023 21:47:40 +0900 Subject: [PATCH 017/141] Update files/ja/web/javascript/reference/global_objects/array/filter/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .../javascript/reference/global_objects/array/filter/index.md | 1 + 1 file changed, 1 insertion(+) diff --git a/files/ja/web/javascript/reference/global_objects/array/filter/index.md b/files/ja/web/javascript/reference/global_objects/array/filter/index.md index 9c11fb5a0f4496..f052aa1ad7e9c4 100644 --- a/files/ja/web/javascript/reference/global_objects/array/filter/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/filter/index.md @@ -21,6 +21,7 @@ filter(callbackFn, thisArg) ### 引数 - `callbackFn` + - : 配列のそれぞれの要素に対して実行する関数です。この関数は、配列の要素を保持する場合は[真値](/ja/docs/Glossary/Truthy)、保持しない場合は[偽値](/ja/docs/Glossary/Falsy)を返します。この関数は以下の引数で呼び出されます。 - `element` - : 配列内で処理中の現在の要素です。 From 74b4d06bf1e109677bffe42124324724e2638654 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 5 Nov 2023 21:47:52 +0900 Subject: [PATCH 018/141] Update files/ja/web/javascript/reference/global_objects/array/flatmap/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .../javascript/reference/global_objects/array/flatmap/index.md | 1 + 1 file changed, 1 insertion(+) diff --git a/files/ja/web/javascript/reference/global_objects/array/flatmap/index.md b/files/ja/web/javascript/reference/global_objects/array/flatmap/index.md index be82d9f7df5b84..bcba8a650167c6 100644 --- a/files/ja/web/javascript/reference/global_objects/array/flatmap/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/flatmap/index.md @@ -21,6 +21,7 @@ flatMap(callbackFn, thisArg) ### 引数 - `callbackFn` + - : 配列のそれぞれの要素に対して実行する関数。この関数は、新しい配列の要素を格納した配列を返すか、新しい配列に追加する 1 つの配列以外の値を返します。この関数は、以下の引数で呼び出されます。 - `element` - : 配列で現在処理中の要素です。 From 3ae3ba9af5b3a561ae1eb55b65cfedd9490261f3 Mon Sep 17 00:00:00 2001 From: YujiSoftware Date: Sun, 5 Nov 2023 16:51:52 +0900 Subject: [PATCH 019/141] FIX: Live example in HTMLElement: drag event page --- files/ja/web/api/htmlelement/drag_event/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/ja/web/api/htmlelement/drag_event/index.md b/files/ja/web/api/htmlelement/drag_event/index.md index 7a2c3999bec9bc..76fd959f19d9f5 100644 --- a/files/ja/web/api/htmlelement/drag_event/index.md +++ b/files/ja/web/api/htmlelement/drag_event/index.md @@ -136,7 +136,7 @@ target.addEventListener("drop", (event) => { #### 結果 -{{EmbedLiveSample('Drag and drop example')}} +{{EmbedLiveSample('ドラッグ＆ドロップの例')}} ## 仕様書 From e9c451438c04daa381aba66a71798c4171f66993 Mon Sep 17 00:00:00 2001 From: YujiSoftware Date: Sat, 11 Nov 2023 00:40:58 +0900 Subject: [PATCH 020/141] =?UTF-8?q?2023/11/05=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= =?UTF-8?q?=20(#16834)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 2023/11/05 時点の英語版に同期 * 未翻訳のヘッダを修正 --- .../ja/web/api/fetch_api/using_fetch/index.md | 218 +++++++++++------- 1 file changed, 129 insertions(+), 89 deletions(-) diff --git a/files/ja/web/api/fetch_api/using_fetch/index.md b/files/ja/web/api/fetch_api/using_fetch/index.md index 0a85b975bbd22a..b4cca6a909246e 100644 --- a/files/ja/web/api/fetch_api/using_fetch/index.md +++ b/files/ja/web/api/fetch_api/using_fetch/index.md @@ -2,32 +2,26 @@ title: フェッチ API の使用 slug: Web/API/Fetch_API/Using_Fetch l10n: - sourceCommit: 1511e914c6b1ce6f88056bfefd48a6aa585cebce + sourceCommit: aae16b81e18d13dd006d418983558578563e9746 --- {{DefaultAPISidebar("Fetch API")}} [フェッチ API](/ja/docs/Web/API/Fetch_API) は、リクエストやレスポンスといった[プロトコル](/ja/docs/Glossary/Protocol)を操作する要素にアクセスするための JavaScript インターフェイスです。グローバルの {{domxref("fetch()")}} メソッドも提供しており、簡単で論理的な方法で、非同期にネットワーク越しでリソースを取得することができます。 -従来、このような機能は {{domxref("XMLHttpRequest")}} を使用して実現されてきました。フェッチはそれのより良い代替となるもので、{{domxref("Service_Worker_API", "サービスワーカー", "", 1)}}のような他の技術から簡単に利用することができます。フェッチは [CORS](/ja/docs/Web/HTTP/CORS) や HTTP への拡張のような HTTP に関連する概念をまとめて定義する場所でもあります。 +コールバックベースの API である {{domxref("XMLHttpRequest")}} とは異なり、Fetch は Promise ベースであり、[サービスワーカー](/ja/docs/Web/API/Service_Worker_API) で簡単に使用できる優れた代替手段を提供します。Fetch は、[CORS](/ja/docs/Web/HTTP/CORS) やその他の HTTP 拡張機能などの高度な HTTP 概念も統合します。 -`fetch` の仕様は、 `jQuery.ajax()` とは特に以下の点で異なっています。 - -- `fetch()` から返されるプロミスは、レスポンスが HTTP 404 や 500 を返す **HTTP エラーステータスの場合でも拒否されません**。サーバーがヘッダーで応答すると、プロミスは直ちに正常に解決します（レスポンスが 200-299 の範囲にない場合は、レスポンスの {{domxref("Response/ok", "ok")}} プロパティが false に設定されます）。拒否されるのは、ネットワーク障害があった場合や、何かがリクエストの完了を妨げた場合のみです。 -- [`credentials`](/ja/docs/Web/API/fetch#credentials) オプションを `include` に設定しない限り、`fetch()` は次のように動作します。 - - オリジン間リクエストではクッキーを送信しません。 - - オリジン間のレスポンスでは、送り返されたクッキーを設定しません。 - - 2018 年 8 月現在、既定の資格情報ポリシーは same-origin に変更されています。 Firefox もバージョン 61.0b13 で変更されました）。 - -基本的なフェッチリクエストは、本当に簡単に設定できます。以下のコードを見てください。 +基本的なフェッチリクエストは、以下のコードを見てください。 ```js -fetch("http://example.com/movies.json") - .then((response) => response.json()) - .then((data) => console.log(data)); +async function logMovies() { + const response = await fetch("http://example.com/movies.json"); + const movies = await response.json(); + console.log(movies); +} ``` -これはネットワーク越しに JSON ファイルを取得してコンソールに出力するスクリプトです。 `fetch()` の最も簡単な使い方は 1 つの引数 — fetch で取得したいリソースへのパス — のみをとり、 {{domxref("Response")}} オブジェクトで解決するプロミスを返します。 +これはネットワーク越しに JSON ファイルを取得してパースし、コンソールにデータを出力するスクリプトです。 `fetch()` の最も簡単な使い方は 1 つの引数 — fetch で取得したいリソースへのパス — のみをとり、 {{domxref("Response")}} オブジェクトで解決するプロミスを返します。 {{domxref("Response")}} は、実際の JSON レスポンス本体を直接持っているのではなく、 HTTP レスポンス全体を表現するものです。 {{domxref("Response")}} オブジェクトから JSON の本体の内容を抽出するには、 {{domxref("Response.json()", "json()")}} メソッドを使用します。これはレスポンス本体のテキストを JSON として解釈した結果で解決する第 2 のプロミスを返します。 @@ -73,6 +67,33 @@ postData("https://example.com/answer", { answer: 42 }).then((data) => { - `Content-Language` - `Content-Type` のうち、値が `application/x-www-form-urlencoded`, `multipart/form-data`, `text/plain` のいずれかのもの +## fetch の中止 + +未完了の `fetch()` 操作を中止するには、{{DOMxRef("AbortController")}} および {{DOMxRef("AbortSignal")}} インターフェイスを使用します。 + +```js +const controller = new AbortController(); +const signal = controller.signal; +const url = "video.mp4"; + +const downloadBtn = document.querySelector("#download"); +const abortBtn = document.querySelector("#abort"); + +downloadBtn.addEventListener("click", async () => { + try { + const response = await fetch(url, { signal }); + console.log("Download complete", response); + } catch (error) { + console.error(`Download error: ${error.message}`); + } +}); + +abortBtn.addEventListener("click", () => { + controller.abort(); + console.log("Download aborted"); +}); +``` + ## 資格情報つきのリクエストの送信 ブラウザーに資格情報のついたリクエストを送るようにするには、同一オリジンの場合もオリジン間の呼び出しの場合も、 `credentials: 'include'` を `init` オブジェクトに追加して `fetch()` メソッドに渡してください。 @@ -85,7 +106,7 @@ fetch("https://example.com", { > **メモ:** `Access-Control-Allow-Origin` は `credentials: 'include'` を含むリクエストでは、ワイルドカードを使用することを禁止しています。このような場合、正確なオリジンを提供する必要があります。 CORS unblocker 拡張機能を使用している場合でも、リクエストは失敗します。 -> **メモ:** この設定に関係なく、ブラウザーはプリフライトリクエストで資格情報を送信しないようにしてください。詳細については、 [CORS > 資格情報を含むリクエスト](/ja/docs/Web/HTTP/CORS#資格情報を含むリクエスト)を参照してください。 +> **メモ:** この設定に関係なく、ブラウザーはプリフライトリクエストで資格情報を送信しないようにしてください。詳細については、 [CORS 資格情報を含むリクエスト](/ja/docs/Web/HTTP/CORS#資格情報を含むリクエスト)を参照してください。 リクエスト URL が呼び出しスクリプトと同一オリジンの場合だけ資格情報を送りたい場合、 `credentials: 'same-origin'` を追加します。 @@ -110,22 +131,25 @@ fetch("https://example.com", { {{domxref("fetch()")}} を使って JSON エンコードしたデータを POST します。 ```js -const data = { username: "example" }; - -fetch("https://example.com/profile", { - method: "POST", // or 'PUT' - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify(data), -}) - .then((response) => response.json()) - .then((data) => { - console.log("Success:", data); - }) - .catch((error) => { +async function postJSON(data) { + try { + const response = await fetch("https://example.com/profile", { + method: "POST", // or 'PUT' + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(data), + }); + + const result = await response.json(); + console.log("Success:", result); + } catch (error) { console.error("Error:", error); - }); + } +} + +const data = { username: "example" }; +postJSON(data); ``` ## ファイルのアップロード @@ -133,23 +157,26 @@ fetch("https://example.com/profile", { ファイルは HTML の `` input 要素と、{{domxref("FormData.FormData","FormData()")}} と {{domxref("fetch()")}} を使ってアップロードできます。 ```js +async function upload(formData) { + try { + const response = await fetch("https://example.com/profile/avatar", { + method: "PUT", + body: formData, + }); + const result = await response.json(); + console.log("Success:", result); + } catch (error) { + console.error("Error:", error); + } +} + const formData = new FormData(); const fileField = document.querySelector('input[type="file"]'); formData.append("username", "abc123"); formData.append("avatar", fileField.files[0]); -fetch("https://example.com/profile/avatar", { - method: "PUT", - body: formData, -}) - .then((response) => response.json()) - .then((result) => { - console.log("Success:", result); - }) - .catch((error) => { - console.error("Error:", error); - }); +upload(formData); ``` ## 複数のファイルのアップロード @@ -157,27 +184,29 @@ fetch("https://example.com/profile/avatar", { ファイルのアップロードは、 HTML の `` 入力要素と {{domxref("FormData.FormData","FormData()")}} と {{domxref("fetch()")}} を使用して行うことができます。 ```js -const formData = new FormData(); +async function uploadMultiple(formData) { + try { + const response = await fetch("https://example.com/posts", { + method: "POST", + body: formData, + }); + const result = await response.json(); + console.log("Success:", result); + } catch (error) { + console.error("Error:", error); + } +} + const photos = document.querySelector('input[type="file"][multiple]'); +const formData = new FormData(); formData.append("title", "My Vegas Vacation"); -let i = 0; -for (const photo of photos.files) { + +for (const [i, photo] of Array.from(photos.files).entries()) { formData.append(`photos_${i}`, photo); - i++; } -fetch("https://example.com/posts", { - method: "POST", - body: formData, -}) - .then((response) => response.json()) - .then((result) => { - console.log("Success:", result); - }) - .catch((error) => { - console.error("Error:", error); - }); +uploadMultiple(formData); ``` ### テキストファイルの 1 行ずつの処理 @@ -192,22 +221,22 @@ async function* makeTextFileLineIterator(fileURL) { let { value: chunk, done: readerDone } = await reader.read(); chunk = chunk ? utf8Decoder.decode(chunk) : ""; - const re = /\n|\r|\r\n/gm; + const newline = /\r?\n/gm; let startIndex = 0; let result; while (true) { - let result = re.exec(chunk); + const result = newline.exec(chunk); if (!result) { if (readerDone) break; - let remainder = chunk.substr(startIndex); + const remainder = chunk.substr(startIndex); ({ value: chunk, done: readerDone } = await reader.read()); chunk = remainder + (chunk ? utf8Decoder.decode(chunk) : ""); - startIndex = re.lastIndex = 0; + startIndex = newline.lastIndex = 0; continue; } yield chunk.substring(startIndex, result.index); - startIndex = re.lastIndex; + startIndex = newline.lastIndex; } if (startIndex < chunk.length) { @@ -230,19 +259,18 @@ run(); {{domxref("fetch()")}} のプロミスは、ネットワークエラーに遭遇したりサーバー側の CORS の設定（通常はアクセス権の問題など）が間違っていたりすると、 {{jsxref("TypeError")}} で拒否されます。例えば、 404 はネットワークエラーにはなりません。 `fetch()` が成功したかどうかを正確に判定するには、プロミスが解決された後で、 {{domxref("Response.ok")}} プロパティが true になっているかを確認してください。次のようなコードになるでしょう。 ```js -fetch("flowers.jpg") - .then((response) => { +async function fetchImage() { + try { + const response = await fetch("flowers.jpg"); if (!response.ok) { throw new Error("Network response was not OK"); } - return response.blob(); - }) - .then((myBlob) => { + const myBlob = await response.blob(); myImage.src = URL.createObjectURL(myBlob); - }) - .catch((error) => { + } catch (error) { console.error("There has been a problem with your fetch operation:", error); - }); + } +} ``` ## 独自のリクエストオブジェクトの提供 @@ -250,6 +278,19 @@ fetch("flowers.jpg") `fetch()` の呼び出しに、リクエストしたいリソースへのパスを渡す代わりに、{{domxref("Request.Request","Request()")}} コンストラクターを使用して Request オブジェクトを作成し、 `fetch()` メソッドの引数として渡すこともできます。 ```js +async function fetchImage(request) { + try { + const response = await fetch(request); + if (!response.ok) { + throw new Error("Network response was not OK"); + } + const myBlob = await response.blob(); + myImage.src = URL.createObjectURL(myBlob); + } catch (error) { + console.error("Error:", error); + } +} + const myHeaders = new Headers(); const myRequest = new Request("flowers.jpg", { @@ -259,11 +300,7 @@ const myRequest = new Request("flowers.jpg", { cache: "default", }); -fetch(myRequest) - .then((response) => response.blob()) - .then((myBlob) => { - myImage.src = URL.createObjectURL(myBlob); - }); +fetchImage(myRequest); ``` `Request()` は、 `fetch()` メソッドとまったく同じ引数を受け入れます。既存のリクエストオブジェクトを渡して、コピーを作成することもできます。 @@ -331,18 +368,19 @@ try { ヘッダーの良い使用方法としては、以下のように、処理を行う前に、コンテンツタイプが正しいかどうか判定する等の使い方があります。 ```js -fetch(myRequest) - .then((response) => { +async function fetchJSON(request) { + try { + const response = await fetch(request); const contentType = response.headers.get("content-type"); if (!contentType || !contentType.includes("application/json")) { throw new TypeError("Oops, we haven't got JSON!"); } - return response.json(); - }) - .then((data) => { - /* process your data further */ - }) - .catch((error) => console.error(error)); + const jsonData = await response.json(); + // process your data further + } catch (error) { + console.error("Error:", error); + } +} ``` ### ガード @@ -386,7 +424,7 @@ addEventListener("fetch", (event) => { {{domxref("Response.Response","Response()")}} コンストラクターは、オプションとして 2 つの引数をとることができます。レスポンス本体と初期化オブジェクトです。 ({{domxref("Request.Request","Request()")}} が受け取れるものと似ています。) -> **メモ:** 静的メソッド {{domxref("Response.error","error()")}} は単純にエラーレスポンスを返します。同様に {{domxref("Response.redirect","redirect()")}} メソッドも 指定した URL にリダイレクトするレスポンスを返します。これらはサービスワーカーにのみ関連しています。 +> **メモ:** 静的メソッド {{domxref("Response/error_static","error()")}} は単純にエラーレスポンスを返します。同様に {{domxref("Response/redirect_static","redirect()")}} メソッドも 指定した URL にリダイレクトするレスポンスを返します。これらはサービスワーカーにのみ関連しています。 ## 本体 @@ -435,13 +473,15 @@ if (window.fetch) { } ``` -## 仕様書 - -{{Specifications}} +## `jQuery.ajax()` との差異 -## ブラウザーの互換性 +`fetch` の仕様は、 `jQuery.ajax()` とは特に以下の点で異なっています。 -{{Compat}} +- `fetch()` から返されるプロミスは、レスポンスが HTTP 404 や 500 を返す HTTP エラーステータスの場合でも拒否されません。サーバーがヘッダーで応答すると、プロミスは直ちに正常に解決します（レスポンスが 200-299 の範囲にない場合は、レスポンスの {{domxref("Response/ok", "ok")}} プロパティが `false` に設定されます）。拒否されるのは、ネットワーク障害があった場合や、何かがリクエストの完了を妨げた場合のみです。 +- [`credentials`](/ja/docs/Web/API/fetch#credentials) オプションを `include` に設定しない限り、`fetch()` は次のように動作します。 + - オリジン間リクエストではクッキーを送信しません。 + - オリジン間のレスポンスでは、送り返されたクッキーを設定しません。 + - 2018 年 8 月現在、既定の資格情報ポリシーは same-origin に変更されています。 ## 関連情報 From 64b311bc3c8c4fb417f5a33acb2c91891f07ceae Mon Sep 17 00:00:00 2001 From: MikeCAT Date: Mon, 6 Nov 2023 02:40:51 +0900 Subject: [PATCH 021/141] Translate Function.prototype[@@hasInstance]() --- .../function/@@hasinstance/index.md | 76 +++++++++++++++++++ 1 file changed, 76 insertions(+) create mode 100644 files/ja/web/javascript/reference/global_objects/function/@@hasinstance/index.md diff --git a/files/ja/web/javascript/reference/global_objects/function/@@hasinstance/index.md b/files/ja/web/javascript/reference/global_objects/function/@@hasinstance/index.md new file mode 100644 index 00000000000000..2ba650f7b9027f --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/function/@@hasinstance/index.md @@ -0,0 +1,76 @@ +--- +title: Function.prototype[@@hasInstance]() +slug: Web/JavaScript/Reference/Global_Objects/Function/@@hasInstance +l10n: + sourceCommit: 0891bd2199fabb1ec00dfe4765019d54f21d965c +--- + +{{JSRef}} + +{{jsxref("Function")}} インスタンスの **`[@@hasInstance]()`** メソッドは、コンストラクター関数がオブジェクトをそのコンストラクターのインスタンスの一つであると認識するかどうかを決定するデフォルトの手続きを定義します。これは、[`instanceof`](/ja/docs/Web/JavaScript/Reference/Operators/instanceof) 演算子から呼ばれます。 + +## 構文 + +```js-nolint +func[Symbol.hasInstance](value) +``` + +### 引数 + +- `value` + - : 判定を行うオブジェクトです。プリミティブ値に対しては常に `false` を返します。 + +### 返値 + +`func.prototype` が `value` のプロトタイプチェーン内に存在する場合は `true` を返し、そうでない場合は `false` を返します。`value` がオブジェクトではないか、`this` が関数でない場合は、常に `false` を返します。`this` が[バインド済み関数](/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind)である場合は、`value` およびもとになったターゲット関数における `instanceof` 判定の結果を返します。 + +### 例外 + +- {{jsxref("TypeError")}} + - : `this` がバインド済み関数ではなく、かつ `this.prototype` がオブジェクトではないとき投げられます。 + +## 説明 + +[`instanceof`](/ja/docs/Web/JavaScript/Reference/Operators/instanceof) 演算子は、右辺の値に [`[@@hasInstance]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Symbol/hasInstance) メソッドが存在する場合は、常にこのメソッドを呼びます。すべての関数はデフォルトで `Function.prototype` を継承しているので、それらはすべてこの `[@@hasInstance]()` メソッドを持ちます。そのため、ほとんどの場合、右辺が関数であれば `Function.prototype[@@hasInstance]` メソッドが `instanceof` の挙動を定義します。このメソッドは、`instanceof` 演算子のデフォルトの挙動 (`constructor` が `@@hasInstance` を持たないときと同じアルゴリズム) を実装します。 + +ほとんどのメソッドと違い、`Function.prototype[@@hasInstance]()` プロパティは設定不可能で、書込不可能です。これは、バインド済み関数のもとになったターゲット関数を取得されるのを防ぐためのセキュリティ機能です。例として、[この StackOverflow での回答](https://stackoverflow.com/questions/38215027/trying-to-understand-the-official-es6-spec-regarding-symbol-hasinstance/38215392#38215392)を参照してください。 + +## 例 + +### デフォルトの instanceof の挙動に戻す + +このメソッドを直接呼ぶ必要が生じることはほとんどないでしょう。かわりに、このメソッドは `instanceof` 演算子から呼ばれます。以下の 2 種類の結果は通常等価であることを期待するべきです。 + +```js +class Foo {} +const foo = new Foo(); +console.log(foo instanceof Foo === Foo[Symbol.hasInstance](foo)); // true +``` + +デフォルトの `instanceof` の挙動を呼び出したいが、コンストラクターにオーバーライドされた `[@@hasInstance]()` メソッドがあるかわからないとき、このメソッドを使いたくなるかもしれません。 + +```js +class Foo { + static [Symbol.hasInstance](value) { + // 独自の実装 + return false; + } +} + +const foo = new Foo(); +console.log(foo instanceof Foo); // false +console.log(Function.prototype[Symbol.hasInstance].call(Foo, foo)); // true +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [`instanceof`](/ja/docs/Web/JavaScript/Reference/Operators/instanceof) +- {{jsxref("Symbol.hasInstance")}} From 31e46cee1ff8cfa544d354abdba79a3e078b8781 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 5 Nov 2023 18:57:50 +0900 Subject: [PATCH 022/141] =?UTF-8?q?2023/09/07=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../global_objects/array/includes/index.md | 80 +++++++++++-------- 1 file changed, 47 insertions(+), 33 deletions(-) diff --git a/files/ja/web/javascript/reference/global_objects/array/includes/index.md b/files/ja/web/javascript/reference/global_objects/array/includes/index.md index 2554fa7793a3f4..0f7b144d6d5374 100644 --- a/files/ja/web/javascript/reference/global_objects/array/includes/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/includes/index.md @@ -2,56 +2,55 @@ title: Array.prototype.includes() slug: Web/JavaScript/Reference/Global_Objects/Array/includes l10n: - sourceCommit: 968e6f1f3b6f977a09e116a0ac552459b741eac3 + sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de --- {{JSRef}} -**`includes()`** メソッドは、特定の要素が配列に含まれているかどうかを `true` または `false` で返します。 +**`includes()`** は {{jsxref("Array")}} インスタンスのメソッドで、特定の要素が配列に含まれているかどうかを `true` または `false` で返します。 {{EmbedInteractiveExample("pages/js/array-includes.html")}} ## 構文 -```js -includes(searchElement); -includes(searchElement, fromIndex); +```js-nolint +includes(searchElement) +includes(searchElement, fromIndex) ``` ### 引数 - `searchElement` - - : 検索する値です。 - - > **メモ:** 文字列や文字を比較する場合、`includes()` は*大文字と小文字を区別します*。 - - `fromIndex` {{optional_inline}} + - : 検索し始める位置のゼロから始まるインデックスで、[整数に変換されます](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#整数への変換)。 + - インデックスが負の場合、配列の末尾からさかのぼって数えます。 `fromIndex < 0` の場合、 `fromIndex + array.length` が使用されます。ただし、この場合でも配列は前から後ろに向けて検索されます。 + - `fromIndex < -array.length` または `fromIndex` が省略された場合は `0` が使用され、配列全体に対して検索が行われます。 + - `fromIndex >= array.length` の場合、配列の検索は行われず、 `false` が返されます。 - - : `searchElement` の検索を始める配列内の位置です。 - - 検索される最初の要素は、`fromIndex` が正の値の場合は `fromIndex` の位置に、`fromIndex` が負の値の場合は `arr.length + fromIndex` の位置になります（検索を開始する配列の端からの要素数として fromIndex の[絶対値](https://ja.wikipedia.org/wiki/絶対値)を使用します）。 +### 返値 - 既定値は `0` です。 +論理値で、`searchElement` の値が配列内（`fromIndex` が指定されていた場合は、配列のその位置以降の部分）にあった場合は `true` を返します。 -### 返値 +## 解説 -論理値で、`searchElement` の値が配列内 (`fromIndex` が指定されていた場合は、配列のその位置以降の部分) にあった場合は `true` を返します。 +`includes()` は `searchElement` を [SameValueZero](/ja/docs/Web/JavaScript/Equality_comparisons_and_sameness#同値ゼロ等価性) アルゴリズムを使用して比較します。ゼロの値は符号に関わらず、すべて等しい（すなわち、`-0` は `0` と等しい）とみなされますが、`false` は `0` と同じとはみなされ*ません*。 [`NaN`](/ja/docs/Web/JavaScript/Reference/Global_Objects/NaN) は正しく検索することができます。 -ゼロの値は符号に関わらず、すべて等しいとみなされます（すなわち、`-0` は `0` とも `+0` とも等しいとみなされます）が、`false` は `0` と同じとはみなされ*ません*。 [`NaN`](/ja/docs/Web/JavaScript/Reference/Global_Objects/NaN) は正しく検索することができます。 +[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#sparse_arrays)で使用する場合、 `includes()` メソッドは空のスロットを `undefined` という値があるかのように反復処理します。 -> **メモ:** 技術的に言えば、`includes()` は [SameValueZero](/ja/docs/Web/JavaScript/Equality_comparisons_and_sameness#同値ゼロ等価性) アルゴリズムを使用して、指定された要素が見つかったかどうかを確認しています。 +`includes()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。 ## 例 +### includes() の使用 + ```js -[1, 2, 3] - .includes(2) // true - [(1, 2, 3)].includes(4) // false - [(1, 2, 3)].includes(3, 3) // false - [(1, 2, 3)].includes(3, -1) // true - [(1, 2, NaN)].includes(NaN) // true - [("1", "2", "3")].includes(3); // false +[1, 2, 3].includes(2); // true +[1, 2, 3].includes(4); // false +[1, 2, 3].includes(3, 3); // false +[1, 2, 3].includes(3, -1); // true +[1, 2, NaN].includes(NaN); // true +["1", "2", "3"].includes(3); // false ``` ### fromIndex が配列の長さと同じか大きい場合 @@ -82,17 +81,30 @@ arr.includes("c", -100); // true arr.includes("a", -2); // false ``` -### 一般化メソッドとして使用される includes() +### 疎配列に対する includes() の使用 -`includes()` メソッドは意図的に一般化されています。`this` が Array オブジェクトであることは必須ではないので、他の種類のオブジェクト（例えば配列風オブジェクト）にも適用することができます。 +疎配列で `undefined` を検索して `true` を取得することができます。 -以下の例は、`includes()` メソッドが関数の [arguments](/ja/docs/Web/JavaScript/Reference/Functions/arguments) オブジェクトに対して使用される様子を示しています。 +```js +console.log([1, , 3].includes(undefined)); // true +``` + +### 配列でないオブジェクトに対する includes() の呼び出し + +`includes()` メソッドは `this` の `length` プロパティを読み込み、次にキーが `length` より小さい非負の整数であるそれぞれのプロパティにアクセスします。 ```js -(function () { - console.log(Array.prototype.includes.call(arguments, "a")); // true - console.log(Array.prototype.includes.call(arguments, "d")); // false -})("a", "b", "c"); +const arrayLike = { + length: 3, + 0: 2, + 1: 3, + 2: 4, + 3: 1, // length が 3 なので includes() からは無視される +}; +console.log(Array.prototype.includes.call(arrayLike, 2)); +// true +console.log(Array.prototype.includes.call(arrayLike, 1)); +// false ``` ## 仕様書 @@ -106,8 +118,10 @@ arr.includes("a", -2); // false ## 関連情報 - [`Array.prototype.includes` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array) -- {{jsxref("TypedArray.prototype.includes()")}} -- {{jsxref("String.prototype.includes()")}} +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド +- {{jsxref("Array")}} - {{jsxref("Array.prototype.indexOf()")}} - {{jsxref("Array.prototype.find()")}} - {{jsxref("Array.prototype.findIndex()")}} +- {{jsxref("TypedArray.prototype.includes()")}} +- {{jsxref("String.prototype.includes()")}} From 6397835605565df6b567031de60726706933329c Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 6 Nov 2023 00:35:48 +0900 Subject: [PATCH 023/141] =?UTF-8?q?2023/09/15=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../global_objects/array/indexof/index.md | 60 ++++++++++++++++--- 1 file changed, 51 insertions(+), 9 deletions(-) diff --git a/files/ja/web/javascript/reference/global_objects/array/indexof/index.md b/files/ja/web/javascript/reference/global_objects/array/indexof/index.md index 1b51ebe57bd829..600e3ee1d05a35 100644 --- a/files/ja/web/javascript/reference/global_objects/array/indexof/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/indexof/index.md @@ -2,20 +2,20 @@ title: Array.prototype.indexOf() slug: Web/JavaScript/Reference/Global_Objects/Array/indexOf l10n: - sourceCommit: 968e6f1f3b6f977a09e116a0ac552459b741eac3 + sourceCommit: d9e66eca59d82c65166c65e7946332650da8f48f --- {{JSRef}} -**`indexOf()`** メソッドは引数に与えられた内容と同じ内容を持つ最初の配列要素の添字を返します。存在しない場合は -1 を返します。 +**`indexOf()`** は {{jsxref("Array")}} インスタンスのメソッドで、引数に与えられた内容と同じ内容を持つ最初の配列要素の添字を返します。存在しない場合は -1 を返します。 {{EmbedInteractiveExample("pages/js/array-indexof.html")}} ## 構文 -```js -indexOf(searchElement); -indexOf(searchElement, fromIndex); +```js-nolint +indexOf(searchElement) +indexOf(searchElement, fromIndex) ``` ### 引数 @@ -23,17 +23,22 @@ indexOf(searchElement, fromIndex); - `searchElement` - : 検索する配列要素です。 - `fromIndex` {{optional_inline}} - - : 検索を始める位置です。もしこの位置が配列の長さ以上の場合は、-1 が返され、配列は検索されません。負の数の場合、これは配列の末尾からのオフセットとみなされます。なお、この位置が負の数であっても、配列は前から後ろに検索されることに注意してください。指定された位置が 0 であれば、配列全体が検索されます。既定値は 0 （配列全体を検索）です。 + - : 検索し始める位置のゼロから始まるインデックスで、[整数に変換されます](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#整数への変換)。 + - インデックスが負の場合、配列の末尾からさかのぼって数えます。 `fromIndex < 0` の場合、 `fromIndex + array.length` が使用されます。ただし、この場合でも配列は前から後ろに向けて検索されます。 + - `fromIndex < -array.length` または `fromIndex` が省略された場合は `0` が使用され、配列全体に対して検索が行われます。 + - `fromIndex >= array.length` の場合、配列の検索は行われず、 `false` が返されます。 ### 返値 -見つかった最初の配列要素の添字です。見つからなかった場合は **-1** です。 +配列内にある最初の `searchElement` のインデックスです。見つからなかった場合は `-1`` です。 ## 解説 -`indexOf()` は `searchElement` と配列の要素を [厳密等価](/ja/docs/Web/JavaScript/Reference/Operators/Strict_equality) （三重イコール演算子 `===` で使われるのと同じ方法）を使って比較します。 +`indexOf()` メソッドは `searchElement` と配列の要素を[厳密等価](/ja/docs/Web/JavaScript/Reference/Operators/Strict_equality)（三重イコール演算子 `===` で使われるのと同じ方法）を使って比較します。 [`NaN`](/ja/docs/Web/JavaScript/Reference/Global_Objects/NaN) の値は等しい値として比較されることはないので、`indexOf()` は `searchElement` が `NaN` のときには常に `-1` を返します。 + +`indexOf()` メソッドは[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#sparse_arrays)の空スロットをスキップします。 -> **メモ:** String のメソッドについては、{{jsxref("String.prototype.indexOf()")}} を参照してください。 +`indexOf()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。 ## 例 @@ -50,6 +55,13 @@ array.indexOf(2, -1); // -1 array.indexOf(2, -3); // 0 ``` +`indexOf()` を使って `NaN` を検索することはできません。 + +```js +const array = [NaN]; +array.indexOf(NaN); // -1 +``` + ### ある要素の存在をすべて見つける ```js @@ -85,6 +97,32 @@ updateVegetablesCollection(veggies, "spinach"); // spinach already exists in the veggies collection. ``` +### 疎配列での indexOf() の使用 + +疎配列の空のスロットを検索するために `indexOf()` を使用することはできません。 + +```js +console.log([1, , 3].indexOf(undefined)); // -1 +``` + +### 配列ではないオブジェクトに対する indexOf() の呼び出し + +`indexOf()` メソッドは `this` の `length` プロパティを読み込み、次にキーが `length` より小さい非負の整数である各プロパティにアクセスします。 + +```js +const arrayLike = { + length: 3, + 0: 2, + 1: 3, + 2: 4, + 3: 5, // length が 3 であるため indexOf() から無視される +}; +console.log(Array.prototype.indexOf.call(arrayLike, 2)); +// 0 +console.log(Array.prototype.indexOf.call(arrayLike, 5)); +// -1 +``` + ## 仕様書 {{Specifications}} @@ -96,6 +134,10 @@ updateVegetablesCollection(veggies, "spinach"); ## 関連情報 - [`Array.prototype.indexOf` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array) +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド +- {{jsxref("Array")}} +- {{jsxref("Array.prototype.findIndex()")}} +- {{jsxref("Array.prototype.findLastIndex()")}} - {{jsxref("Array.prototype.lastIndexOf()")}} - {{jsxref("TypedArray.prototype.indexOf()")}} - {{jsxref("String.prototype.indexOf()")}} From 7650f9c66d542ab4aed4a458f7c566ef6db40239 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 6 Nov 2023 00:44:55 +0900 Subject: [PATCH 024/141] =?UTF-8?q?2023/09/07=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../global_objects/array/isarray/index.md | 39 +++++++++---------- 1 file changed, 19 insertions(+), 20 deletions(-) diff --git a/files/ja/web/javascript/reference/global_objects/array/isarray/index.md b/files/ja/web/javascript/reference/global_objects/array/isarray/index.md index 9f19b36a47ccb0..f3991e51353a9c 100644 --- a/files/ja/web/javascript/reference/global_objects/array/isarray/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/isarray/index.md @@ -2,24 +2,19 @@ title: Array.isArray() slug: Web/JavaScript/Reference/Global_Objects/Array/isArray l10n: - sourceCommit: 968e6f1f3b6f977a09e116a0ac552459b741eac3 + sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de --- {{JSRef}} -**`Array.isArray()`** メソッドは、渡された値が {{jsxref("Array")}} かどうかを判断します。 +**`Array.isArray()`** 静的メソッドは、渡された値が {{jsxref("Array")}} かどうかを判断します。 -```js -Array.isArray([1, 2, 3]); // true -Array.isArray({ foo: 123 }); // false -Array.isArray("foobar"); // false -Array.isArray(undefined); // false -``` +{{EmbedInteractiveExample("pages/js/array-isarray.html")}} ## 構文 -```js -Array.isArray(value); +```js-nolint +Array.isArray(value) ``` ### 引数 @@ -29,18 +24,19 @@ Array.isArray(value); ### 返値 -この値が {{jsxref("Array")}} の場合は `true` です。そうでなければ `false` を返します。 +`value` が {{jsxref("Array")}} の場合は `true` です。そうでなければ `false` を返します。 `value` が {{jsxref("TypedArray")}} インスタンスであった場合は常に `false` を返します。 ## 解説 -値が {{jsxref("Array")}} の場合は `true` が返ります。それ以外の場合は `false` が返ります。 +`Array.isArray()` は、渡された値が {{jsxref("Array")}} であるかどうかを調べます。値のプロトタイプチェーンを調べたり、 `Array` コンストラクターに頼っているわけではありません。配列リテラル構文または `Array` コンストラクターを使用して作成した値に対しては `true` を返します。このため、 `Array` コンストラクターの ID が異なり、[`instanceof Array`](/ja/docs/Web/JavaScript/Reference/Operators/instanceof) が失敗してしまうような領域を超えるオブジェクトでも安全に使用することができます。 詳しくは、 ["Determining with absolute accuracy whether or not a JavaScript object is an array"](https://web.mit.edu/jwalden/www/isArray.html) を参照してください。 -{{jsxref("TypedArray")}} のインスタンスが与えられると、常に `false` が返されます。 + +また、 `Array.isArray()` は `Array.prototype` をプロトタイプチェーンに持つオブジェクトも拒否しますが、 `instanceof Array` が受け入れる実際の配列ではありません。 ## 例 -### Array.isArray の使用 +### Array.isArray() の使用 ```js // 以下の呼び出しはすべて true を返します @@ -62,22 +58,25 @@ Array.isArray("Array"); Array.isArray(true); Array.isArray(false); Array.isArray(new Uint8Array(32)); +// これは配列ではありません。配列リテラルを使用した構文でも、 +// Array コンストラクターでもないからです。 Array.isArray({ __proto__: Array.prototype }); ``` -### `instanceof` と `isArray` +### instanceof と Array.isArray() -`Array` のインスタンスをチェックする際、`Array.isArray` は `iframes` で動作するので、`instanceof` よりも推奨されます。 +`Array` のインスタンスをチェックする際、 `Array.isArray` は領域を超えても動作するので、 `instanceof` よりも推奨されます。 ```js const iframe = document.createElement("iframe"); document.body.appendChild(iframe); -xArray = window.frames[window.frames.length - 1].Array; -const arr = new xArray(1, 2, 3); // [1,2,3] +const xArray = window.frames[window.frames.length - 1].Array; +const arr = new xArray(1, 2, 3); // [1, 2, 3] // 配列を正しくチェックできます Array.isArray(arr); // true -// iframe を介して配列を正しくチェックできません +// arr のプロトタイプは xArray.prototype であり、 +// Array.prototype とは異なるオブジェクトです。 arr instanceof Array; // false ``` @@ -92,5 +91,5 @@ arr instanceof Array; // false ## 関連情報 - [`Array.isArray` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array) -- [ポリフィル](https://github.com/behnammodi/polyfill/blob/master/array.polyfill.js) +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド - {{jsxref("Array")}} From e37d0055f59b8b160603e707ac506b4559e73fee Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 6 Nov 2023 08:30:04 +0900 Subject: [PATCH 025/141] =?UTF-8?q?2023/09/07=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../global_objects/array/join/index.md | 78 ++++++++++++++----- 1 file changed, 59 insertions(+), 19 deletions(-) diff --git a/files/ja/web/javascript/reference/global_objects/array/join/index.md b/files/ja/web/javascript/reference/global_objects/array/join/index.md index 1db055abdb7eac..11dfed9a95bac0 100644 --- a/files/ja/web/javascript/reference/global_objects/array/join/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/join/index.md @@ -2,39 +2,62 @@ title: Array.prototype.join() slug: Web/JavaScript/Reference/Global_Objects/Array/join l10n: - sourceCommit: 968e6f1f3b6f977a09e116a0ac552459b741eac3 + sourceCommit: d9e66eca59d82c65166c65e7946332650da8f48f --- {{JSRef}} -**`join()`** メソッドは、配列（または[配列風オブジェクト](/ja/docs/Web/JavaScript/Guide/Indexed_collections#配列風オブジェクトの扱い)）の全要素を順に連結した文字列を新たに作成して返します。区切り文字はカンマ、または指定された文字列です。配列にアイテムが一つしかない場合は、区切り文字を使用せずにアイテムが返されます。 +**`join()`** は {{jsxref("Array")}} インスタンスのメソッドで、配列の全要素を順に連結した新しい文字列を返します。区切り文字はカンマ、または指定された文字列です。配列にアイテムが一つしかない場合は、区切り文字を使用せずにアイテムが返されます。 {{EmbedInteractiveExample("pages/js/array-join.html")}} ## 構文 -```js -join(); -join(separator); +```js-nolint +join() +join(separator) ``` ### 引数 - `separator` {{optional_inline}} - - : 配列の各要素を区切る文字列を指定します。 separator は、必要であれば文字列に変換されます。省略した場合、配列の要素はカンマ (",") で区切られます。 `separator` に空文字列を渡した場合、すべての要素の間が区切り文字無しで繋がれます。 + - : 配列の各要素を区切る文字列です。省略した場合、配列の要素はカンマ (",") で区切られます。 ### 返値 -配列の全要素が連結された文字列です。 `arr.length` が `0` だった場合、空の文字列が返されます。 +配列の全要素が連結された文字列です。 `array.length` が `0` であった場合、空の文字列が返されます。 ## 解説 -配列のすべての要素を文字列に変換したものが、1 個の文字列に繋がれます。 - -> **警告:** 要素が `undefined` または `null` または空配列 `[]` であった場合は、空の文字列に変換されます。 +配列のすべての要素を文字列に変換したものが、1 個の文字列に繋がれます。要素が `undefined` または `null` であった場合、 `"null"` や `"undefined"` ではなく空文字列に変換されます。 `join` メソッドは、内部的には [`Array.prototype.toString()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/toString) によって引数なしでアクセスすることができます。配列インスタンスの `join` をオーバーライドすると、その `toString` の動作もオーバーライドされます。 +`Array.prototype.join` は他の配列も含めて、再帰的にそれぞれの要素を文字列に変換します。 `Array.prototype.toString` が返す文字列（これは `join()` を呼び出すのと同じです）には区切り文字がないので、入れ子配列は平坦化されたように見えます。区切り文字を制御できるのは最初のレベルだけで、それ以上のレベルでは常に既定のカンマを使用します。 + +```js +const matrix = [ + [1, 2, 3], + [4, 5, 6], + [7, 8, 9], +]; + +console.log(matrix.join()); // 1,2,3,4,5,6,7,8,9 +console.log(matrix.join(";")); // 1,2,3;4,5,6;7,8,9 +``` + +配列が循環している（コンテナーそのものである要素を格納している）場合、ブラウザーは循環参照を無視することで無限再帰を避けます。 + +```js +const arr = []; +arr.push(1, [3, arr, 4], 2); +console.log(arr.join(";")); // 1;3,,4;2 +``` + +[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#sparse_arrays)で使用した場合、 `join()` メソッドは空のスロットを `undefined` という値があるかのように反復処理します。 + +`join()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。 + ## 例 ### 3 通りの異なる形で配列をつなぐ @@ -49,17 +72,31 @@ a.join(" + "); // '風 + 水 + 火' a.join(""); // '風水火' ``` -### 配列風オブジェクトを連結する +### 疎配列に対する join() の使用 -次の例は、配列風オブジェクト （ [`arguments`](/ja/docs/Web/JavaScript/Reference/Functions/arguments) ）を連結するために、 `Array.prototype.join` を {{jsxref("Function.prototype.call")}} を使用して呼び出します。 +`join()` は空のスロットを `undefined` と同じように扱い、余分な区切り文字を生成します。 ```js -function f(a, b, c) { - const s = Array.prototype.join.call(arguments); - console.log(s); // '1,a,true' -} -f(1, "a", true); -//expected output: "1,a,true" +console.log([1, , 3].join()); // '1,,3' +console.log([1, undefined, 3].join()); // '1,,3' +``` + +### 配列以外のオブジェクトに対する join() の呼び出し + +`join()` メソッドは `this` の `length` プロパティを読み込み、次にキーが `length` より小さい非負の整数である各プロパティにアクセスします。 + +```js +const arrayLike = { + length: 3, + 0: 2, + 1: 3, + 2: 4, + 3: 5, // ignored by join() since length is 3 +}; +console.log(Array.prototype.join.call(arrayLike)); +// 2,3,4 +console.log(Array.prototype.join.call(arrayLike, ".")); +// 2.3.4 ``` ## 仕様書 @@ -72,6 +109,9 @@ f(1, "a", true); ## 関連情報 -- {{jsxref("String.prototype.split()")}} +- [`Array.prototype.join` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array) +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド +- {{jsxref("Array")}} - {{jsxref("Array.prototype.toString()")}} - {{jsxref("TypedArray.prototype.join()")}} +- {{jsxref("String.prototype.split()")}} From 20615fe1bbc1927b4365f4d94c1cb210eeffc95b Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 6 Nov 2023 08:37:53 +0900 Subject: [PATCH 026/141] =?UTF-8?q?2023/09/07=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../global_objects/array/keys/index.md | 48 +++++++++++++++---- 1 file changed, 40 insertions(+), 8 deletions(-) diff --git a/files/ja/web/javascript/reference/global_objects/array/keys/index.md b/files/ja/web/javascript/reference/global_objects/array/keys/index.md index 2bb10c22c7495e..3d83bb43b34ac0 100644 --- a/files/ja/web/javascript/reference/global_objects/array/keys/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/keys/index.md @@ -2,28 +2,40 @@ title: Array.prototype.keys() slug: Web/JavaScript/Reference/Global_Objects/Array/keys l10n: - sourceCommit: 968e6f1f3b6f977a09e116a0ac552459b741eac3 + sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de --- {{JSRef}} -**`keys()`** メソッドは、配列内の各インデックスのキーを含む、新しい**配列イテレーター**オブジェクトを返します。 +**`keys()`** は {{jsxref("Array")}} インスタンスのメソッドで、配列内の各インデックスのキーを含む、新しい[配列イテレーター](/ja/docs/Web/JavaScript/Reference/Global_Objects/Iterator)オブジェクトを返します。 {{EmbedInteractiveExample("pages/js/array-keys.html")}} ## 構文 -```js -keys(); +```js-nolint +keys() ``` +### 引数 + +なし。 + ### 返値 -新しい {{jsxref("Array")}} のイテレーターオブジェクトです。 +新しい[反復可能なイテレーターオブジェクト](/ja/docs/Web/JavaScript/Reference/Global_Objects/Iterator)です。 + +## 解説 + +[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#sparse_arrays)で使用した場合、 `keys()` メソッドは空のスロットを `undefined` という値があるかのように反復処理します。 + +`keys()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。 ## 例 -### 不連続を無視しないキーイテレーター +### 疎配列に対する keys() の呼び出し + +配列に実際に存在するキーだけを処理する {{jsxref("Object.keys()")}} とは異なり、 `keys()` イテレーターは見つからないプロパティを表す穴を無視しません。 ```js const arr = ["a", , "c"]; @@ -33,6 +45,22 @@ console.log(sparseKeys); // ['0', '2'] console.log(denseKeys); // [0, 1, 2] ``` +### 配列以外のオブジェクトに対する keys() の呼び出し + +`keys()`メソッドは `this` の `length` プロパティを読み込み、 0 から `length - 1` までのすべての整数インデックスを返します。実際にはインデックスアクセスは行われません。 + +```js +const arrayLike = { + length: 3, +}; +for (const entry of Array.prototype.keys.call(arrayLike)) { + console.log(entry); +} +// 0 +// 1 +// 2 +``` + ## 仕様書 {{Specifications}} @@ -44,6 +72,10 @@ console.log(denseKeys); // [0, 1, 2] ## 関連情報 - [`Array.prototype.keys` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array) -- {{jsxref("Array.prototype.values()")}} +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド +- {{jsxref("Array")}} - {{jsxref("Array.prototype.entries()")}} -- [反復処理プロトコル](/ja/docs/Web/JavaScript/Reference/Iteration_protocols) +- {{jsxref("Array.prototype.values()")}} +- [`Array.prototype[@@iterator]()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/@@iterator) +- {{jsxref("TypedArray.prototype.keys()")}} +- [Iteration protocols](/en-US/docs/Web/JavaScript/Reference/Iteration_protocols) From 26dcf2560fe08dd062f4bf200ec89af33da02ce0 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 6 Nov 2023 21:41:41 +0900 Subject: [PATCH 027/141] Update files/ja/web/javascript/reference/global_objects/array/keys/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .../web/javascript/reference/global_objects/array/keys/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/ja/web/javascript/reference/global_objects/array/keys/index.md b/files/ja/web/javascript/reference/global_objects/array/keys/index.md index 3d83bb43b34ac0..32c26d85eb42a6 100644 --- a/files/ja/web/javascript/reference/global_objects/array/keys/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/keys/index.md @@ -76,6 +76,6 @@ for (const entry of Array.prototype.keys.call(arrayLike)) { - {{jsxref("Array")}} - {{jsxref("Array.prototype.entries()")}} - {{jsxref("Array.prototype.values()")}} -- [`Array.prototype[@@iterator]()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/@@iterator) +- [`Array.prototype[@@iterator]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/@@iterator) - {{jsxref("TypedArray.prototype.keys()")}} - [Iteration protocols](/en-US/docs/Web/JavaScript/Reference/Iteration_protocols) From 12aea4480adedac69da4eb8353070d3401fffa4e Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 6 Nov 2023 21:42:16 +0900 Subject: [PATCH 028/141] Update files/ja/web/javascript/reference/global_objects/array/keys/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .../web/javascript/reference/global_objects/array/keys/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/ja/web/javascript/reference/global_objects/array/keys/index.md b/files/ja/web/javascript/reference/global_objects/array/keys/index.md index 32c26d85eb42a6..240bc760bee8ec 100644 --- a/files/ja/web/javascript/reference/global_objects/array/keys/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/keys/index.md @@ -78,4 +78,4 @@ for (const entry of Array.prototype.keys.call(arrayLike)) { - {{jsxref("Array.prototype.values()")}} - [`Array.prototype[@@iterator]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/@@iterator) - {{jsxref("TypedArray.prototype.keys()")}} -- [Iteration protocols](/en-US/docs/Web/JavaScript/Reference/Iteration_protocols) +- [Iteration protocols](/ja/docs/Web/JavaScript/Reference/Iteration_protocols) From 8d38b2fc1158cb18cffad5a5be06e851dcbce208 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 6 Nov 2023 22:07:11 +0900 Subject: [PATCH 029/141] =?UTF-8?q?2023/09/25=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../global_objects/array/lastindexof/index.md | 77 ++++++++++++++----- 1 file changed, 59 insertions(+), 18 deletions(-) diff --git a/files/ja/web/javascript/reference/global_objects/array/lastindexof/index.md b/files/ja/web/javascript/reference/global_objects/array/lastindexof/index.md index 86c717baa6d049..be096cc36cf551 100644 --- a/files/ja/web/javascript/reference/global_objects/array/lastindexof/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/lastindexof/index.md @@ -2,19 +2,20 @@ title: Array.prototype.lastIndexOf() slug: Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf l10n: - sourceCommit: 9b38f886d21c5d0a428f58acb20c4d0fc6c2e098 + sourceCommit: fb85334ffa4a2c88d209b1074909bee0e0abd57a --- {{JSRef}} -**`lastIndexOf()`** メソッドは、配列中で与えられた要素が見つかった最後の添字を返します。もし存在しなければ -1 を返します。配列は `fromIndex` から逆向きに検索されます。 +**`lastIndexOf()`** は {{jsxref("Array")}} インスタンスのメソッドで、配列中で与えられた要素が見つかった最後の添字を返します。もし存在しなければ -1 を返します。配列は `fromIndex` から逆向きに検索されます。 {{EmbedInteractiveExample("pages/js/array-lastindexof.html")}} ## 構文 -``` -arr.lastIndexOf(searchElement[, fromIndex]) +```js-nolint +lastIndexOf(searchElement) +lastIndexOf(searchElement, fromIndex) ``` ### 引数 @@ -22,28 +23,28 @@ arr.lastIndexOf(searchElement[, fromIndex]) - `searchElement` - : 検索する配列要素です。 - `fromIndex` {{optional_inline}} - - - : 逆向きに検索し始める添字です。既定値は配列の長さ に 1 を引いた値 (`arr.length - 1`) で、つまり配列全体が検索されます。 - - `fromIndex` の値が配列の長さ以上であれば、配列全体を検索します。（この場合、概念的には、配列の末尾から先の存在しない位置からメソッドの検索を開始させ、そこから配列の実際の末尾の位置を探して、実在する配列の要素を逆方向に検索し始めると考えることができます。） - - `fromIndex` の値が 0 より大きい場合は、配列の先頭からのオフセットとして受け取られます。 - -`fromIndex` に 0 よりも小さい値を指定すると、配列の末尾からのオフセットとして受け取られます。言い換えると、 `array.length + fromIndex` の位置を指定したものとみなされます。したがって、 `array.length + fromIndex` が 0 よりも小さい場合、配列の探索は行われず、メソッドは -1 を返します（この場合、 `fromIndex` は配列の先頭の存在しない位置を指定しているので、概念的には、メソッドがその存在しない位置から探索して、そこから配列要素を探すと考えることができますが、決して見つかることはありません）。 + - : 検索し始める位置のゼロから始まるインデックスで、[整数に変換されます](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#整数への変換)。 + - インデックスが負の場合、配列の末尾からさかのぼって数えます。 `fromIndex < 0` の場合、 `fromIndex + array.length` が使用されます。 + - `fromIndex < -array.length` の場合、配列は検索が行われず、 `-1` が返されます。概念的には、配列の先頭より前の存在しない位置から始めて、そこから逆方向に進むと考えることができます。途中には配列要素はないので、 `searchElement` は決して見つかりません。 + - `fromIndex >= array.length` または `fromIndex` が省略された場合、 `array.length - 1` が使用され、配列全体が検索されます。概念的には、配列の末尾の先にある存在しない位置から始めて、そこから後方に進むと考えることができます。最終的に配列の本当の末尾に到達し、この点から実在する配列要素を逆探索し始めます。 ### 返値 -配列内の一致した要素の最後の位置です。見つからなかった場合は **-1** です。 +配列内の最後の `searchElement` のインデックスです。見つからなかった場合は `-1` です。 ## 解説 -`lastIndexOf` は `searchElement` と配列の要素を[厳密等価](/ja/docs/Web/JavaScript/Reference/Operators/Strict_equality)（三重イコール演算子 `===` で使われるのと同じ方法）によって比較します。 +`lastIndexOf()` メソッドは `searchElement` と配列の要素を[厳密な等価性](/ja/docs/Web/JavaScript/Reference/Operators/Strict_equality)（`===` 演算子を使用するアルゴリズムと同じ）を使用して比較します。 [`NaN`](/ja/docs/Web/JavaScript/Reference/Global_Objects/NaN) 値が等しいものとして比較されることはないので、 `searchElement` が `NaN` の場合、`lastIndexOf()` は常に `-1` を返します。 + +`lastIndexOf()` メソッドは[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#sparse_arrays)の空スロットをスキップします。 + +`lastIndexOf()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。 ## 例 -### `lastIndexOf` の使用 +### lastIndexOf() の使用 -`lastIndexOf` を使って配列中のある値の位置を探す例を以下に示します。 +`lastIndexOf()` を使って配列中のある値の位置を探す例を以下に示します。 ```js const numbers = [2, 5, 9, 2]; @@ -55,9 +56,16 @@ numbers.lastIndexOf(2, -2); // 0 numbers.lastIndexOf(2, -1); // 3 ``` +`lastIndexOf()` を使用して `NaN` を検索することはできません。 + +```js +const array = [NaN]; +array.lastIndexOf(NaN); // -1 +``` + ### ある要素の存在をすべて見つける -以下の例は `lastIndexOf` を使って、与えられた配列中のある値の添字すべてを探しています。{{jsxref("Array.prototype.push", "push")}} を使って、値が見つかる度に別の配列にその添字を追加しています。 +以下の例は `lastIndexOf` を使って、与えられた配列中のある値の添字すべてを探しています。{{jsxref("Array/push", "push")}} を使って、値が見つかる度に別の配列にその添字を追加しています。 ```js const indices = []; @@ -73,7 +81,35 @@ console.log(indices); // [4, 2, 0] ``` -ここで `idx == 0` の場合を分けて扱わないといけないことに注意してください。なぜなら、もし検索する値が配列の最初の要素にあると、その値は `fromIndex` パラメータにかかわらずいつもヒットしてしまうのです。これは {{jsxref("Array.prototype.indexOf", "indexOf")}} メソッドとは異なります。 +ここで `idx == 0` の場合を分けて扱わないといけないことに注意してください。 +なぜなら、もし検索する値が配列の最初の要素にあると、その値は `fromIndex` パラメータにかかわらずいつもヒットしてしまうのです。 +これは {{jsxref("Array/indexOf", "indexOf()")}} メソッドとは異なります。 + +### 疎配列に対する lastIndexOf() の使用 + +疎配列の空のスロットを検索するために `lastIndexOf()` を使用することはできません。 + +```js +console.log([1, , 3].lastIndexOf(undefined)); // -1 +``` + +### 配列以外のオブジェクトに対する lastIndexOf() の呼び出し + +`lastIndexOf()` メソッドは `this` の `length` プロパティを読み込み、次にキーが `length` より小さい非負の整数である各プロパティにアクセスします。 + +```js +const arrayLike = { + length: 3, + 0: 2, + 1: 3, + 2: 2, + 3: 5, // length が 3 なので lastIndexOf() からは無視される +}; +console.log(Array.prototype.lastIndexOf.call(arrayLike, 2)); +// 2 +console.log(Array.prototype.lastIndexOf.call(arrayLike, 5)); +// -1 +``` ## 仕様書 @@ -86,5 +122,10 @@ console.log(indices); ## 関連情報 - [`Array.prototype.lastIndexOf` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array) +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド +- {{jsxref("Array")}} +- {{jsxref("Array.prototype.findIndex()")}} +- {{jsxref("Array.prototype.findLastIndex()")}} - {{jsxref("Array.prototype.indexOf()")}} - {{jsxref("TypedArray.prototype.lastIndexOf()")}} +- {{jsxref("String.prototype.lastIndexOf()")}} From 6cd90c978aa40b988c5144bb270ac61ea50994b1 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 6 Nov 2023 22:49:56 +0900 Subject: [PATCH 030/141] =?UTF-8?q?2023/09/07=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../global_objects/array/map/index.md | 181 +++++++++++------- 1 file changed, 114 insertions(+), 67 deletions(-) diff --git a/files/ja/web/javascript/reference/global_objects/array/map/index.md b/files/ja/web/javascript/reference/global_objects/array/map/index.md index 9ac367b1a0c0b5..11cd3f3cd058ce 100644 --- a/files/ja/web/javascript/reference/global_objects/array/map/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/map/index.md @@ -2,51 +2,34 @@ title: Array.prototype.map() slug: Web/JavaScript/Reference/Global_Objects/Array/map l10n: - sourceCommit: f1b0423793182c7025b15815bb2a70defea39c2b + sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de --- {{JSRef}} -**`map()`** メソッドは、与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる**新しい配列を生成します**。 +**`map()`** は {{jsxref("Array")}} インスタンスのメソッドで、与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。 {{EmbedInteractiveExample("pages/js/array-map.html")}} ## 構文 ```js-nolint -// アロー関数 -map((element) => { /* … */ }) -map((element, index) => { /* … */ }) -map((element, index, array) => { /* … */ }) - -// コールバック関数 map(callbackFn) map(callbackFn, thisArg) - -// インラインコールバック関数 -map(function(element) { /* … */ }) -map(function(element, index) { /* … */ }) -map(function(element, index, array){ /* … */ }) -map(function(element, index, array) { /* … */ }, thisArg) ``` ### 引数 - `callbackFn` - - - : `arr` の要素ごとに呼び出される関数です。 `callbackFn` が実行されるたびに、返された値が `newArray` に追加されます。 - - この関数は以下の引数と共に呼び出されます。 - + - : 配列のそれぞれの要素に対して実行する関数。その返値は、新しい配列の単一の要素として追加されます。この関数は、以下の引数で呼び出されます。 - `element` - : 配列内で現在処理中の要素です。 - `index` - : 現在処理中の要素の配列内における添字です。 - `array` - - : `map` が呼び出された配列です。 - + - : `map()` が呼び出された配列です。 - `thisArg` {{optional_inline}} - - : `callbackFn` を実行するときに `this` として使う値です。 + - : `callbackFn` を実行するときに `this` として使う値です。[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)を参照してください。 ### 返値 @@ -54,37 +37,21 @@ map(function(element, index, array) { /* … */ }, thisArg) ## 解説 -`map` は、与えられた `callbackFn` 関数を配列の順番通りに、**各要素に対して一度ずつ呼び出し**、その結果から新しい配列を生成します。 `callbackFn` は、値が代入されている配列の要素に対してのみ呼び出されます ({{jsxref("undefined")}} が代入されているものも含みます)。 - -これは配列の中で存在しない要素、すなわち以下の要素に対しては呼び出し*ません*。 - -- 設定されたことがない添字 -- 削除された要素 -- 値を割り当てられたことがない要素 - -### map() を使用すべきではない場合 - -`map` は新しい配列を作成するので、返された配列を使わない場合、map を使うのはパターンに合いません。代わりに {{jsxref("Array/forEach", "forEach")}} または {{jsxref("Statements/for...of", "for...of")}} を使用してください。 - -`map` を使用するべきでないのは以下の場合です。 - -- 返された配列を使用しない場合 -- コールバックから値を返さない場合 +`map()` メソッドは[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)です。指定された関数 `callbackFn` を配列に含まれる各要素に対して一度ずつ呼び出し、その結果から新しい配列を構築します。 -### 引数の詳細 +`callbackFn` は値が割り当てられている配列インデックスに対してのみ呼び出されます。[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#sparse_arrays)で空のスロットに対しては呼び出されません。 -`callbackFn` は、要素の値、要素の添字、走査されている Array オブジェクトという 3 つの引数をともなって呼び出されます。 +`map()` メソッドは[コピーメソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#コピーメソッドと変更メソッド)です。これは `this` を変更しません。しかし、 `callbackFn` に指定された関数は変更することがあります。ただし、配列の長さは `callbackFn` を最初に呼び出す前に保存されることに注意してください。したがって、 -`thisArg` 引数が与えられた場合は、それがコールバックの `this` として使用されます。引数が省略された場合は、 {{jsxref("undefined")}} が `this` の値として使用されます。 `callbackFn` によって最終的に識別できる `this` の値は、[関数における通常の `this` を決定するルール](/ja/docs/Web/JavaScript/Reference/Operators/this)に従って決まります。 - -`map` は呼び出された配列を変化させません (ただし、呼び出された `callbackFn` が配列を変更する可能性はあります)。 - -`map` によって処理される要素の範囲は、最初に `callbackFn` が呼び出される前に設定されます。既に訪問した位置に割り当てられている要素や、範囲外の位置に割り当てられている要素に対しては、`callbackFn` が呼び出されることはありません。 -既存の配列要素が変更されたり、削除された場合、 `callbackFn` に渡される値は `map` がそれらを訪れた時点での値になり、 `map` が削除された要素を訪問することはありません。 +- `callbackFn` は `map()` の呼び出しを始めたときの配列の長さを超えて追加された要素にはアクセスしません。 +- 既に処理したインデックスを変更しても、 `callbackFn` が再度呼び出されることはありません。 +- まだ処理していない既存の配列要素が `callbackFn` によって変更された場合、 `callbackFn` に渡される値はその要素が取得される時点の値になります。[削除](/ja/docs/Web/JavaScript/Reference/Operators/delete)された要素は処理されません。 > **警告:** 前項で説明したような、参照中の配列の同時進行での変更は（特殊な場合を除いて）普通は避けるべきです。多くの場合、理解しにくいコードになります。 -仕様書で定義されているアルゴリズムによって、 `map` が呼び出された配列がまばらである場合、結果の配列もまばらとなり、要素を空欄のままにします。 +`map()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。 + +`map` は新しい配列を作成するので、返された配列を使わない場合、map を使うのはパターンに合いません。代わりに {{jsxref("Array/forEach", "forEach")}} または {{jsxref("Statements/for...of", "for...of")}} を使用してください。 ## 例 @@ -113,12 +80,13 @@ const kvArray = [ const reformattedArray = kvArray.map(({ key, value }) => ({ [key]: value })); -// フォーマットされた配列の内容は [{1: 10}, {2: 20}, {3: 30}]となる - -// kvArray は以下のまま -// [{key: 1, value: 10}, -// {key: 2, value: 20}, -// {key: 3, value: 30}] +console.log(reformattedArray); // [{ 1: 10 }, { 2: 20 }, { 3: 30 }] +console.log(kvArray); +// [ +// { key: 1, value: 10 }, +// { key: 2, value: 20 }, +// { key: 3, value: 30 } +// ] ``` ### 引数を含む関数を使用して数値配列を対応付ける @@ -129,22 +97,80 @@ const reformattedArray = kvArray.map(({ key, value }) => ({ [key]: value })); const numbers = [1, 4, 9]; const doubles = numbers.map((num) => num * 2); -// doubles is now [2, 8, 18] -// numbers is still [1, 4, 9] +console.log(doubles); // [2, 8, 18] +console.log(numbers); // [1, 4, 9] +``` + +### 副作用のある対応付け + +コールバックには副作用があります。 + +```js +const cart = [5, 15, 25]; +let total = 0; +const withTax = cart.map((cost) => { + total += cost; + return cost * 1.2; +}); +console.log(withTax); // [6, 18, 30] +console.log(total); // 45 +``` + +なぜなら、コピーメソッドは純粋関数とともに使用するのが最適だからです。この場合、配列を 2 回反復処理することを選べます。 + +```js +const cart = [5, 15, 25]; +const total = cart.reduce((acc, cost) => acc + cost, 0); +const withTax = cart.map((cost) => cost * 1.2); ``` -### 汎用的な map の使用 +このパターンが極端になり、 `map()` が行う有益なことが副作用を発生させることだけになってしまうことがあります。 -次の例は、 {{jsxref("String")}} に対して map を使用することで、文字列内の文字を UTF-16 コードユニットので表す数値の配列を取得します。 +```js +const products = [ + { name: "sports car" }, + { name: "laptop" }, + { name: "phone" }, +]; + +products.map((product) => { + product.price = 100; +}); +``` + +前回述べたように、これはパターンに反します。 `map()` の返値を使用しない場合は、代わりに `forEach()` または `for...of` ループを使用してください。 ```js -const map = Array.prototype.map; -const charCodes = map.call("Hello World", (x) => x.charCodeAt(0)); +products.forEach((product) => { + product.price = 100; +}); +``` + +あるいは、代わりに新しい配列を作成することもできます。 -// a の内容は [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100] となる +```js +const productsWithPrice = products.map((product) => { + return { ...product, price: 100 }; +}); +``` + +### 配列以外のオブジェクトに対する map() の呼び出し + +`map()` メソッドは `this` の `length` プロパティを読み込み、次にキーが `length` より小さい非負の整数である各プロパティにアクセスします。 + +```js +const arrayLike = { + length: 3, + 0: 2, + 1: 3, + 2: 4, + 3: 5, // length が 3 なので map() 空は無視される +}; +console.log(Array.prototype.map.call(arrayLike, (x) => x ** 2)); +// [ 4, 9, 16 ] ``` -### 汎用的な map の使用: querySelectorAll +### map() を汎用的に NodeList で使用 この例では、 `querySelectorAll` によって収集されたオブジェクトのコレクションを反復処理する方法を示します。これは `querySelectorAll` が `NodeList` （オブジェクトの集合）を返すためです。 @@ -157,11 +183,28 @@ const values = Array.prototype.map.call(elems, ({ value }) => value); もっと簡単な方法は {{jsxref("Array.from()")}} メソッドを使用することです。 -### トリッキーな使用例 +### 疎配列に対する map() の使用 + +疎配列は `map()` の後も疎配列のままです。空のスロットのインデックスは返された配列においても空のままであり、コールバック関数が呼び出されることはありません。 + +```js +console.log( + [1, , 3].map((x, index) => { + console.log(`Visit ${index}`); + return x * 2; + }), +); +// Visit 0 +// Visit 2 +// [2, empty, 6] +``` + +### parseInt() を map() で使用 ([このブログの記事に創発されました](https://wirfs-brock.com/allen/posts/166)) -コールバック関数は第一引数（変換するべき要素）だけを意識して指定するケースがほとんどだと思います。しかし一般的に第一引数しか使わないような関数でも、実は追加のオプション引数を受け取っている場合があります。これは混乱につながる可能性があります。 +コールバック関数は第一引数（変換するべき要素）だけを意識して指定するケースがほとんどだと思います。 +しかし一般的に第一引数しか使わないような関数でも、実は追加のオプション引数を受け取っている場合があります。これは混乱につながる可能性があります。 まずこの例をご覧ください。 @@ -183,9 +226,9 @@ const values = Array.prototype.map.call(elems, ({ value }) => value); ```js // parseInt(string, radix) -> map(parseInt(value, index)) -/* first iteration (index is 0): */ parseInt("1", 0); // 1 -/* second iteration (index is 1): */ parseInt("2", 1); // NaN -/* third iteration (index is 2): */ parseInt("3", 2); // NaN +/* first iteration (index is 0): */ parseInt("1", 0); // 1 +/* second iteration (index is 1): */ parseInt("2", 1); // NaN +/* third iteration (index is 2): */ parseInt("3", 2); // NaN ``` 解決策を考えてみましょう。 @@ -230,6 +273,7 @@ const filteredNumbers = numbers.map((num, index) => { return num; } }); + // index は 0 から始まるので、 filterNumbers は 1,2,3 および undefined になります。 // filteredNumbers は [1, 2, undefined, undefined] // numbers は [1, 2, 3, 4] のまま @@ -246,6 +290,9 @@ const filteredNumbers = numbers.map((num, index) => { ## 関連情報 - [`Array.prototype.map` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array) +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド +- {{jsxref("Array")}} - {{jsxref("Array.prototype.forEach()")}} -- {{jsxref("Map")}} object - {{jsxref("Array.from()")}} +- {{jsxref("TypedArray.prototype.map()")}} +- {{jsxref("Map")}} From 97bba9ca59654585102a63c40d8487e1eebd9ac4 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 6 Nov 2023 23:04:11 +0900 Subject: [PATCH 031/141] =?UTF-8?q?2023/09/07=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../global_objects/array/of/index.md | 66 +++++++++++++------ 1 file changed, 47 insertions(+), 19 deletions(-) diff --git a/files/ja/web/javascript/reference/global_objects/array/of/index.md b/files/ja/web/javascript/reference/global_objects/array/of/index.md index e2ec1a16c38641..ca32caf1644953 100644 --- a/files/ja/web/javascript/reference/global_objects/array/of/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/of/index.md @@ -7,38 +7,45 @@ l10n: {{JSRef}} -**`Array.of()`** メソッドは、引数の数や型にかかわらず、可変長引数から、新しい `Array` インスタンスを生成します。 +**`Array.of()`** 静的メソッドは、引数の数や型にかかわらず、可変長引数から、新しい `Array` インスタンスを生成します。 -**`Array.of()`** と `Array` コンストラクタの違いは整数引数の扱いにあります。**`Array.of(7)`** は単一の要素、`7` を持つ配列を作成しますが、**`Array(7)`** は `length` プロパティが 7 の空の配列を作成します（これは {{jsxref("undefined")}} の値を持つ実在のスロットではなく、7 つの空のスロットの配列を意味します）。 - -```js -Array.of(7); // [7] -Array(7); // array of 7 empty slots - -Array.of(1, 2, 3); // [1, 2, 3] -Array(1, 2, 3); // [1, 2, 3] -``` +{{EmbedInteractiveExample("pages/js/array-of.html", "shorter")}} ## 構文 -```js -Array.of(element0); -Array.of(element0, element1); -Array.of(element0, element1, /* … ,*/ elementN); +```js-nolint +Array.of() +Array.of(element1) +Array.of(element1, element2) +Array.of(element1, element2, /* …, */ elementN) ``` ### 引数 -- `elementN` +- `element1`, …, `elementN` - : 生成する配列の要素。 ### 返値 新しい {{jsxref("Array")}} インスタンス。 +## 解説 + +`Array.of()` と [`Array()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/Array) コンストラクターの違いは整数引数の扱いにあります。 `Array.of(7)` は単一の要素、`7` を持つ配列を作成しますが、 `Array(7)` は `length` プロパティが 7 の空の配列を作成します（これは {{jsxref("undefined")}} の値を持つ実在のスロットではなく、7 つの空のスロットの配列を意味します）。 + +```js +Array.of(7); // [7] +Array(7); // 7 つの空スロットの配列 + +Array.of(1, 2, 3); // [1, 2, 3] +Array(1, 2, 3); // [1, 2, 3] +``` + +`Array.of()` メソッドは汎用ファクトリーメソッドです。例えば、 `Array` のサブクラスが `of()` メソッドを継承した場合、継承した `of()` メソッドは `Array` インスタンスではなく、サブクラスの新しいインスタンスを返します。実際には、 `this` 値には新しい配列の長さを表す単一の引数を受け入れる任意のコンストラクタ関数を指定することができ、コンストラクタは `of()` に渡された引数の数だけ呼び出されます。最終的な `length` は、すべての要素が代入されたときに再度設定されます。もし `this` の値がコンストラクター関数でない場合、代わりにプレーンな `Array` コンストラクターが使用されます。 + ## 例 -### Array.of の使用 +### Array.of() の使用 ```js Array.of(1); // [1] @@ -46,6 +53,28 @@ Array.of(1, 2, 3); // [1, 2, 3] Array.of(undefined); // [undefined] ``` +### 配列以外のコンストラクターに対する of() の呼び出し + +`of()` メソッドは、新しい配列の長さを表す単一の引数を受け入れるコンストラクター関数で呼び出すことができます。 + +```js +function NotArray(len) { + console.log("NotArray called with length", len); +} + +console.log(Array.of.call(NotArray, 1, 2, 3)); +// NotArray called with length 3 +// NotArray { '0': 1, '1': 2, '2': 3, length: 3 } + +console.log(Array.of.call(Object)); // [Number: 0] { length: 0 } +``` + +`this` の値がコンストラクターでない場合は、プレーンな `Array` オブジェクトを返します。 + +```js +console.log(Array.of.call({}, 1)); // [ 1 ] +``` + ## 仕様書 {{Specifications}} @@ -57,9 +86,8 @@ Array.of(undefined); // [undefined] ## 関連情報 - [`Array.of` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array) -- [ポリフィル](https://github.com/behnammodi/polyfill/blob/master/array.polyfill.js) +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド - {{jsxref("Array")}} +- {{jsxref("Array/Array", "Array()")}} - {{jsxref("Array.from()")}} - {{jsxref("TypedArray.of()")}} -- [`Array.of()` と `Array.from()` の提案](https://gist.github.com/rwaldron/1074126) -- [`Array.of()` のポリフィル](https://gist.github.com/rwaldron/3186576) From 4401a435faa410c14b6560b144ae22de5b4fabc5 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 7 Nov 2023 00:23:28 +0900 Subject: [PATCH 032/141] =?UTF-8?q?2023/09/07=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../global_objects/array/pop/index.md | 43 +++++++++++-------- 1 file changed, 26 insertions(+), 17 deletions(-) diff --git a/files/ja/web/javascript/reference/global_objects/array/pop/index.md b/files/ja/web/javascript/reference/global_objects/array/pop/index.md index e6c0ac65ac3298..9596f44ad17a21 100644 --- a/files/ja/web/javascript/reference/global_objects/array/pop/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/pop/index.md @@ -2,7 +2,7 @@ title: Array.prototype.pop() slug: Web/JavaScript/Reference/Global_Objects/Array/pop l10n: - sourceCommit: 968e6f1f3b6f977a09e116a0ac552459b741eac3 + sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de --- {{JSRef}} @@ -13,9 +13,13 @@ l10n: ## 構文 +```js-nolint +pop() ``` -arrName.pop() -``` + +### 引数 + +なし。 ### 返値 @@ -25,11 +29,11 @@ arrName.pop() `pop()` メソッドは配列の最後の要素を取り除き、呼び出し元にその値を返します。 `pop()` を空の配列に対して呼び出すと、 {{jsxref("undefined")}} を返します。 -{{jsxref("Array.prototype.shift()")}} は `pop` と同様の動作をしますが、配列の最初の要素に適用されます。 +{{jsxref("Array.prototype.shift()")}} は `pop()` と同様の動作をしますが、配列の最初の要素に適用されます。 `pop()` は変更を行うメソッドです。 `this` の長さと内容を変更します。 `this` の値は変更せずに、最後の要素を取り除いた新しい配列を返したい場合は、代わりに [`arr.slice(0, -1)`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) を使用することができます。 -`pop` は意図的に汎用性を持たせています。つまり、このメソッドは配列に類似したオブジェクトに対して呼び出すことができます。オブジェクトが、連続したゼロベースの数値プロパティの最後のものを反映した `length` プロパティを含んでいない場合、意味のある動作をしないことがあります。 +`pop()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。文字列も配列風ですが、文字列は不変であるため、このメソッドを適用するのは適切ではありません。 ## 例 @@ -47,22 +51,26 @@ console.log(myFish); // ['angel', 'clown', 'mandarin' ] console.log(popped); // 'sturgeon' ``` -### 配列風のオブジェクトでの apply() や call () の使用 +### 配列以外のオブジェクトに対する pop() の呼び出し -以下のコードは、4 つの要素と長さの値を含む配列風の `myFish` オブジェクトを作成し、最後の要素を削除して長さの値をデクリメントします。 +`pop()` メソッドは `this` の `length` プロパティを読み込みます。[正規化された長さ](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#length_プロパティの正規化)が 0 の場合、`length` は再び `0` に設定されます（以前は負の値または `undefined` であった可能性があります）。そうでない場合は、`length - 1` のプロパティが返され、[削除](/ja/docs/Web/JavaScript/Reference/Operators/delete)されます。 ```js -const myFish = { - 0: "angel", - 1: "clown", - 2: "mandarin", - 3: "sturgeon", - length: 4, +const arrayLike = { + length: 3, + unrelated: "foo", + 2: 4, }; - -const popped = Array.prototype.pop.call(myFish); // same syntax when using apply() -console.log(myFish); // { 0: 'angel', 1: 'clown', 2: 'mandarin', length: 3 } -console.log(popped); // 'sturgeon' +console.log(Array.prototype.pop.call(arrayLike)); +// 4 +console.log(arrayLike); +// { length: 2, unrelated: 'foo' } + +const plainObj = {}; +// length プロパティがないので、長さは 0 +Array.prototype.pop.call(plainObj); +console.log(plainObj); +// { length: 0 } ``` ### 配列風のオブジェクトの使用 @@ -108,6 +116,7 @@ console.log(collection.length); // 2 ## 関連情報 +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド - {{jsxref("Array.prototype.push()")}} - {{jsxref("Array.prototype.shift()")}} - {{jsxref("Array.prototype.unshift()")}} From 63ea42157b0dcfb9cc3924f10db090a1a1f95f09 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 7 Nov 2023 00:59:38 +0900 Subject: [PATCH 033/141] =?UTF-8?q?2023/09/25=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../global_objects/array/push/index.md | 49 +++++++++++++------ 1 file changed, 35 insertions(+), 14 deletions(-) diff --git a/files/ja/web/javascript/reference/global_objects/array/push/index.md b/files/ja/web/javascript/reference/global_objects/array/push/index.md index b2b1b4d82d3464..a4a7bb96afbc36 100644 --- a/files/ja/web/javascript/reference/global_objects/array/push/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/push/index.md @@ -2,26 +2,27 @@ title: Array.prototype.push() slug: Web/JavaScript/Reference/Global_Objects/Array/push l10n: - sourceCommit: 968e6f1f3b6f977a09e116a0ac552459b741eac3 + sourceCommit: fb85334ffa4a2c88d209b1074909bee0e0abd57a --- {{JSRef}} -**`push()`** メソッドは、配列の末尾に 1 つ以上の要素を追加することができます。また戻り値として新しい配列の要素数を返します。 +**`push()`** は {{jsxref("Array")}} インスタンスのメソッドで、配列の末尾に指定された要素を追加します。また返値として配列の新しい長さを返します。 {{EmbedInteractiveExample("pages/js/array-push.html")}} ## 構文 -```js -push(element0); -push(element0, element1); -push(element0, element1, /* … ,*/ elementN); +```js-nolint +push() +push(element1) +push(element1, element2) +push(element1, element2, /* …, */ elementN) ``` ### 引数 -- `elementN` +- `element1`, …, `elementN` - : 配列の末尾に追加する要素。 ### 返値 @@ -34,11 +35,9 @@ push(element0, element1, /* … ,*/ elementN); {{jsxref("Array.prototype.unshift()")}} は `push()` と同様の動作ですが、配列の先頭に適用されます。 -`push()` メソッドは変更を行うメソッドです。これは、 `this` の長さとコンテンツを変更します。 `this` の値はそのままで、最後に要素を追加した新しい配列を返したい場合は、代わりに [`arr.concat([element0, element1, /* ... ,*/ elementN])`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/concat) を使用することができます。要素が余分な配列に包まれていることに注意してください。そうでなければ、要素が配列そのものである場合、 `concat()` の動作により、単一の要素として挿入されるのではなく、分散されてしまうでしょう。 - -`Array.prototype.push()` は意図的に汎用性を持たせています。このメソッドは配列に似たオブジェクトに対して呼び出すことができます。 `push` は配列の末尾から要素を挿入する必要性があるため、 `length` プロパティに依存しています。`length` が数値に変換できない場合、0 が用いられます。また、 `length` が存在しない場合は `length` も作成されることになります。 +`push()` メソッドは[変更メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#コピーメソッドと変更メソッド)です。これは、 `this` の長さとコンテンツを変更します。 `this` の値はそのままで、最後に要素を追加した新しい配列を返したい場合は、代わりに [`arr.concat([element0, element1, /* ... ,*/ elementN])`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/concat) を使用することができます。要素が余分な配列に包まれていることに注意してください。そうでなければ、要素が配列そのものである場合、 `concat()` の動作により、単一の要素として挿入されるのではなく、分散されてしまうでしょう。 -ネイティブの配列風オブジェクトは{{jsxref("Global_Objects/String", "文字列", "", 1)}}ですが、文字列は変化しないので、このメソッドの効果を受けるには相応しくありません。 +`pop()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。文字列も配列風ですが、文字列は不変であるため、このメソッドを適用するのは適切ではありません。 ## 例 @@ -70,9 +69,30 @@ console.log(vegetables); // ['parsnip', 'potato', 'celery', 'beetroot'] 2 つの配列の結合は、 {{jsxref("Array.prototype.concat()", "concat()")}} メソッドでも行うことができます。 +### 配列以外のオブジェクトに対する push() の呼び出し + +`push()` メソッドは `this` の `length` プロパティを読み込みます。そして、 `length` から始まる `this` の各インデックスを `push()` に渡された引数で設定します。最後に、`length` に直前の長さにプッシュされた要素数を加えた値を設定します。 + +```js +const arrayLike = { + length: 3, + unrelated: "foo", + 2: 4, +}; +Array.prototype.push.call(arrayLike, 1, 2); +console.log(arrayLike); +// { '2': 4, '3': 1, '4': 2, length: 5, unrelated: 'foo' } + +const plainObj = {}; +// length プロパティがないので、長さは 0 +Array.prototype.push.call(plainObj, 1, 2); +console.log(plainObj); +// { '0': 1, '1': 2, length: 2 } +``` + ### オブジェクトを配列のように使用する -上述したように、`push` は内部的には汎用的なので、その利点を活かすことができます。この例が示しているように、オブジェクト上で `Array.prototype.push` は正しく動作します。 +前述したように、`push` は内部的には汎用的なので、その利点を活かすことができます。この例が示しているように、オブジェクト上で `Array.prototype.push` は正しく動作します。 オブジェクトの集合を保存するために、配列を生成していないことに注意してください。代わりに、集合をオブジェクト自体に保存して、配列を扱っているかのように見せかけるために `Array.prototype.push` 上で `call` を使用しています。そして、JavaScript は実行コンテキストの確立を許可しているおかげで、これは動作します。 @@ -90,8 +110,7 @@ const obj = { // 例示のために空のオブジェクトを追加する。 obj.addElem({}); obj.addElem({}); -console.log(obj.length); -// → 2 +console.log(obj.length); // 2 ``` `obj` は配列ではありませんが、本当の配列を扱っているかのように `push` メソッドは `obj` の `length` プロパティを増加させできていることに注意してください。 @@ -107,7 +126,9 @@ console.log(obj.length); ## 関連情報 - [このメソッドの修正を含んだ `Array.prototype.push` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array) +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド - {{jsxref("Array.prototype.pop()")}} - {{jsxref("Array.prototype.shift()")}} - {{jsxref("Array.prototype.unshift()")}} - {{jsxref("Array.prototype.concat()")}} +- {{jsxref("Array.prototype.splice()")}} From 7fe937d473dd0f3f73b0d4fbd8f1473c6ebca631 Mon Sep 17 00:00:00 2001 From: Kohei Watanabe Date: Tue, 7 Nov 2023 10:57:21 +0900 Subject: [PATCH 034/141] =?UTF-8?q?`browser=5Fspecific=5Fsettings`=20?= =?UTF-8?q?=E3=82=AD=E3=83=BC=E3=82=92=E4=BD=BF=E7=94=A8=E3=81=99=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ### Description manifest.json の例として `applications` キーを使用していましたが、Firefox の仕様に合わせて `browser_specific_settings` キーを使用する例に変更しました。 ### Motivation 最新のFirefoxの仕様に合わせます。 ### Additional details https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_settings --- .../manifest.json/browser_specific_settings/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/ja/mozilla/add-ons/webextensions/manifest.json/browser_specific_settings/index.md b/files/ja/mozilla/add-ons/webextensions/manifest.json/browser_specific_settings/index.md index 912d87cd8d30e6..cfe3e415af02c9 100644 --- a/files/ja/mozilla/add-ons/webextensions/manifest.json/browser_specific_settings/index.md +++ b/files/ja/mozilla/add-ons/webextensions/manifest.json/browser_specific_settings/index.md @@ -77,7 +77,7 @@ slug: Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_settings 使用可能なキーをすべて使用した例です。たいていの拡張機能では `strict_max_version` と `update_url` は省略するのに注意してください。 ```json -"applications": { +"browser_specific_settings": { "gecko": { "id": "addon@example.com", "strict_min_version": "42.0", From b7d171966c28694d8aba15e221e2614092058695 Mon Sep 17 00:00:00 2001 From: Tristan Pagezy <61625831+Triw-12@users.noreply.github.com> Date: Fri, 10 Nov 2023 20:05:59 +0100 Subject: [PATCH 035/141] fr: Add code 503 in teapot page (#16906) Update index.md Add 503 teapot --- files/fr/web/http/status/418/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/fr/web/http/status/418/index.md b/files/fr/web/http/status/418/index.md index 37aadbfcc47129..fd293313c7210b 100644 --- a/files/fr/web/http/status/418/index.md +++ b/files/fr/web/http/status/418/index.md @@ -5,7 +5,7 @@ slug: Web/HTTP/Status/418 {{HTTPSidebar}} -Le statut erreur client HTTP **`418 I'm a teapot`** qui signifie « Je suis une théière » informe que le serveur refuse de préparer du café, car il s'agit d'une théière. Cette erreur est une référence au protocole « Hyper Text Coffee Pot Control Protocol » qui est le poisson d'avril des RFCs en 1998. +Le statut erreur client HTTP **`418 I'm a teapot`** qui signifie « Je suis une théière » informe que le serveur refuse de préparer du café, car il s'agit d'une théière. Une cafetière/théière combinée qui serait temporairement à court de café devrait retourner le code 503. Cette erreur est une référence au protocole « Hyper Text Coffee Pot Control Protocol » qui est le poisson d'avril des RFCs en 1998. Certains sites web utilisent ce code de réponse pour les requêtes qu'ils ne souhaitent pas traiter (par exemple des requêtes automatiques). From 59f8c786d73cdb8b7480a386b5b59215bd355677 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 11 Nov 2023 14:51:12 +0900 Subject: [PATCH 036/141] =?UTF-8?q?Array=20=E3=81=AE=20r*=EF=BD=9Es*=20?= =?UTF-8?q?=E3=83=A1=E3=82=BD=E3=83=83=E3=83=89=E3=81=AE=E8=A8=98=E4=BA=8B?= =?UTF-8?q?=E3=82=92=E6=9B=B4=E6=96=B0=20(#16875)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 2023/09/15 時点の英語版に同期 * 2023/11/04 時点の英語版に同期 * 2023/09/07 時点の英語版に同期 * 2023/09/07 時点の英語版に同期 * 2023/09/25 時点の英語版に同期 * 2023/09/08 時点の英語版に同期 * 2023/09/07 時点の英語版に同期 * 2023/09/25 時点の英語版に同期 * 「反復処理メソッド」の記事を更新 * Update index.md * Update index.md * typo を修正 --------- Co-authored-by: potappo --- .../global_objects/array/reduce/index.md | 475 +++++++++--------- .../global_objects/array/reduceright/index.md | 133 ++--- .../global_objects/array/reverse/index.md | 66 ++- .../global_objects/array/shift/index.md | 52 +- .../global_objects/array/slice/index.md | 115 +++-- .../global_objects/array/some/index.md | 108 ++-- .../global_objects/array/sort/index.md | 4 +- .../global_objects/array/splice/index.md | 81 ++- 8 files changed, 557 insertions(+), 477 deletions(-) diff --git a/files/ja/web/javascript/reference/global_objects/array/reduce/index.md b/files/ja/web/javascript/reference/global_objects/array/reduce/index.md index 3c5bb33b15783f..70c989e5f4fbde 100644 --- a/files/ja/web/javascript/reference/global_objects/array/reduce/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/reduce/index.md @@ -2,12 +2,12 @@ title: Array.prototype.reduce() slug: Web/JavaScript/Reference/Global_Objects/Array/reduce l10n: - sourceCommit: 968e6f1f3b6f977a09e116a0ac552459b741eac3 + sourceCommit: d9e66eca59d82c65166c65e7946332650da8f48f --- {{JSRef}} -**`reduce()`** メソッドは、配列のそれぞれの要素に対して、ユーザーが提供した「縮小」コールバック関数を呼び出します。その際、直前の要素における計算結果の返値を渡します。配列のすべての要素に対して縮小関数を実行した結果が単一の値が最終結果になります。 +**`reduce()`** は {{jsxref("Array")}} インターフェイスのメソッドで、配列のそれぞれの要素に対して、ユーザーが提供した「縮小」コールバック関数を呼び出します。その際、直前の要素における計算結果の返値を渡します。配列のすべての要素に対して縮小関数を実行した結果が単一の値が最終結果になります。 コールバックの初回実行時には「直前の計算の返値」は存在しません。 初期値が与えらえた場合は、代わりに使用されることがあります。 @@ -22,45 +22,26 @@ l10n: ## 構文 ```js-nolint -// アロー関数 -reduce((previousValue, currentValue) => { /* … */ } ) -reduce((previousValue, currentValue, currentIndex) => { /* … */ } ) -reduce((previousValue, currentValue, currentIndex, array) => { /* … */ } ) - -reduce((previousValue, currentValue) => { /* … */ } , initialValue) -reduce((previousValue, currentValue, currentIndex) => { /* … */ } , initialValue) -reduce((previousValue, currentValue, currentIndex, array) => { /* … */ }, initialValue) - -// コールバック関数 reduce(callbackFn) reduce(callbackFn, initialValue) - -// インラインコールバック関数 -reduce(function(previousValue, currentValue) { /* … */ }) -reduce(function(previousValue, currentValue, currentIndex) { /* … */ }) -reduce(function(previousValue, currentValue, currentIndex, array) { /* … */ }) - -reduce(function(previousValue, currentValue) { /* … */ }, initialValue) -reduce(function(previousValue, currentValue, currentIndex) { /* … */ }, initialValue) -reduce(function(previousValue, currentValue, currentIndex, array) { /* … */ }, initialValue) ``` ### 引数 - `callbackFn` - - : 以下の引数を取る「縮小」関数です。 - - `previousValue` + - : 配列の各要素に対して実行される関数です。その返値は、次に `callbackFn` を呼び出す際の `accumulator` 引数の値になります。最後の呼び出しでは、返値は `reduce()` の返値となります。この関数は以下の引数で呼び出されます。 + - `accumulator` - : 前回の `callbackFn` の呼び出し結果の値です。初回の呼び出しでは `initialValue` が指定されていた場合はその値、そうでない場合は `array[0]` の値です。 - `currentValue` - : 現在の要素の値です。初回の呼び出しでは `initialValue` が指定された場合は `array[0]` の値であり、そうでない場合は `array[1]` の値です。 - `currentIndex` - : `currentValue` の位置です。初回の呼び出しでは、 `initialValue` が指定された場合は `0`、そうでない場合は `1` です。 - `array` - - : 走査する配列です。 + - : `reduce()` が呼び出された配列です。 - `initialValue` {{optional_inline}} - - : コールバックが初めて呼び出されたときの `previousValue` の初期値です。 - `initialValue` が指定された場合は、 `currentValue` も配列の最初の値に初期化されます。 - `initialValue` が指定され*なかった*場合、 `previousValue` は配列の最初の値で初期化され、 `currentValue` は配列の 2 番目の値で初期化されます。 + - : コールバックが最初に呼び出された時に `accumulator` が初期化される値です。 + `initialValue` が指定された場合、`callbackFn` は配列の最初の値を `currentValue` として実行を開始します。 + もし `initialValue` が指定されなかった場合、`accumulator` は配列の最初の値に初期化され、`callbackFn` は配列の 2 つ目の値を `currentValue` として実行を開始します。この場合、配列が空であれば（`accumulator`として返す最初の値がなければ）エラーが発生します。 ### 返値 @@ -69,35 +50,33 @@ reduce(function(previousValue, currentValue, currentIndex, array) { /* … */ }, ### 例外 - {{jsxref("TypeError")}} - - : 配列に要素がなく、かつ `initialValue` が提供されなかった場合に発生します。 ## 解説 -`reduce()` メソッドは 2 つの引数をとります。コールバック関数と、オプションで初期値を指定することができます。 -初期値が指定された場合、 `reduce()` は配列のそれぞれの要素に対して順に「縮小」コールバック関数を呼び出します。初期値が指定されなかった場合、 `reduce()` は配列の最初の要素の後にあるそれぞれの要素に対してコールバック関数を呼び出します。 +`reduce()` メソッドは[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)です。「縮小」コールバック関数を配列に含まれる各要素に対して昇順に一度ずつ呼び出し、その結果を単一の値に積算します。毎回、 `callbackFn` の返値は次回の `callbackFn` の呼び出しで `accumulator` として渡されます。最終的な `accumulator` の値（配列の最終反復処理において `callbackFn` から返される値）が `reduce()` の返値となります。 -`reduce()` は、配列の反復処理の最後にコールバック関数から返される値を返します。 +`callbackFn` は値が割り当てられている配列インデックスに対してのみ呼び出されます。[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#疎配列)の空のスロットに対しては呼び出されません。 -`reduce()` は[関数型プログラミング](https://ja.wikipedia.org/wiki/関数型プログラミング)の中心的な概念です。ここでは、どの値も変異させることができないので、配列のすべての値を積算するには、反復処理のたびに新しい積算値を返さなければなりません。この約束事は JavaScript の `reduce()` にも当てはまります。[スプレッド構文](/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax)や他の可能な限りコピーする方法を使用して、既存のものを変更せずに、アキュームレーターとして新しい配列やオブジェクトを作成すべきなのです。もし、アキュームレーターをコピーする代わりに変化させることにした場合、コールバックで変更したオブジェクトを返すことを忘れないでください、さもなければ、次の反復処理で undefined を受け取ることになります。 +他の[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)とは異なり、 `reduce()` は `thisArg` 引数を受け入れません。 `callbackFn` は常に `undefined` を `this` として呼び出され、 `callbackFn` が厳格モードでない場合は `globalThis` に置き換えられます。 -### reduce() を使用しない場合 +`reduce()` は[関数型プログラミング](https://ja.wikipedia.org/wiki/関数型プログラミング)の中心的な概念です。ここでは、どの値も変異させることができないので、配列のすべての値を積算するには、反復処理のたびに新しい積算値を返さなければなりません。この約束事は JavaScript の `reduce()` にも当てはまります。[スプレッド構文](/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax)や他の可能な限りコピーする方法を使用して、既存のものを変更せずに、アキュームレーターとして新しい配列やオブジェクトを作成すべきなのです。もし、アキュームレーターをコピーする代わりに変化させることにした場合、コールバックで変更したオブジェクトを返すことを忘れないでください、さもなければ、次の反復処理で undefined を受け取ることになります。 -`reduce()` のような再帰的な関数は強力ですが、特に経験の浅い JavaScript 開発者にとっては理解するのが難しい場合があります。他の配列メソッドを使用した場合にコードが明確になるなら、開発者は `reduce()` を使用する他の利点と可読性をトレードオフで比較検討する必要があります。 `reduce()` が最適な選択である場合は、文書化と意味的な変数名を使用することが可読性の欠点を軽減するのに役立ちます。 +`reduce()` メソッドは呼び出し元の配列を変更しませんが、 `callbackFn` に指定された関数は変更することがあります。ただし、配列の長さは `callbackFn` を最初に呼び出す前に保存されることに注意してください。したがって、 -### 配列変更時の動作について +- `callbackFn` は `reduce()` の呼び出しを始めたときの配列の長さを超えて追加された要素にはアクセスしません。 +- 既に処理したインデックスを変更しても、 `callbackFn` が再度呼び出されることはありません。 +- まだ処理していない既存の配列要素が `callbackFn` によって変更された場合、 `callbackFn` に渡される値はその要素が取得される時点の値になります。[削除](/ja/docs/Web/JavaScript/Reference/Operators/delete)された要素は `undefined` であるかのように処理されます。 -`reduce()` メソッド自身は、使用する配列を変更することはありません。しかし、コールバック関数内のコードが配列を変更することは可能です。以下は、配列の改変が起こる可能性のあるシナリオと、そのシナリオにおける `reduce()` の動作です。 +> **警告:** 前項で説明したような、参照中の配列の同時進行での変更は（特殊な場合を除いて）普通は避けるべきです。多くの場合、理解しにくいコードになります。 -- もし `reduce()` が配列に対して反復処理を始めた後に配列に要素が追加された場合、コールバック関数は追加された要素に対して反復処理を行いません。 -- 配列の既存の要素が変更された場合、コールバック関数に渡される値は、reduce()が配列に対して最初に呼び出された時点の値になります。 -- `reduce()` の呼び出しが始まった後、反復処理される前に削除された配列要素は `reduce()` の処理が行われません。 +`reduce()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。 ### 稀な場合 -配列が（位置に関わらず）1 つの要素しか持たず、 `initialValue` が指定されなかった場合、または `initialValue` が指定されていても配列が空だった場合、 `callbackfn` は*実行されずに*要素が返却されます。 +配列が（位置に関わらず） 1 つの要素しか持たず、 `initialValue` が指定されなかった場合、または `initialValue` が指定されていても配列が空だった場合、 `callbackFn` は*実行されずに*要素が返却されます。 -`initialValue` が提供され、配列が空でない場合、 reduce メソッドは常に 0 の位置コールバック関数を呼び出し始めます。 +`initialValue` が提供され、配列が空でない場合、 reduce メソッドは常に 0 の位置からコールバック関数を呼び出し始めます。 `initialValue` が提供されなかった場合、 reduce メソッドは、次の例に示すように、長さが 1 より大きい配列、長さが 1 の配列、長さが 0 の配列に対して異なる動作をします。 @@ -127,10 +106,10 @@ const getMax = (a, b) => Math.max(a, b); ```js const array = [15, 16, 17, 18, 19]; -function reducer(previousValue, currentValue, index) { - const returns = previousValue + currentValue; +function reducer(accumulator, currentValue, index) { + const returns = accumulator + currentValue; console.log( - `previousValue: ${previousValue}, currentValue: ${currentValue}, index: ${index}, returns: ${returns}`, + `accumulator: ${accumulator}, currentValue: ${currentValue}, index: ${index}, returns: ${returns}`, ); return returns; } @@ -140,12 +119,12 @@ array.reduce(reducer); コールバック関数は 4 回呼び出され、各回の引数の内容は以下のようになります。 -| | `previousValue` | `currentValue` | `index` | 返値 | -| ---------------- | --------------- | -------------- | ------- | ---- | -| 最初の呼び出し | `15` | `16` | `1` | `31` | -| 2 番目の呼び出し | `31` | `17` | `2` | `48` | -| 3 番目の呼び出し | `48` | `18` | `3` | `66` | -| 4 番目の呼び出し | `66` | `19` | `4` | `85` | +| | `accumulator` | `currentValue` | `index` | 返値 | +| ---------------- | ------------- | -------------- | ------- | ---- | +| 最初の呼び出し | `15` | `16` | `1` | `31` | +| 2 番目の呼び出し | `31` | `17` | `2` | `48` | +| 3 番目の呼び出し | `48` | `18` | `3` | `66` | +| 4 番目の呼び出し | `66` | `19` | `4` | `85` | `array` の要素は処理中に変化しません。常に `[15, 16, 17, 18, 19]` です。 `reduce()` の返値は、コールバック呼び出しの最後の返値である (`85`) となるでしょう。 @@ -155,43 +134,23 @@ array.reduce(reducer); ```js [15, 16, 17, 18, 19].reduce( - (previousValue, currentValue) => previousValue + currentValue, + (accumulator, currentValue) => accumulator + currentValue, 10, ); ``` コールバックは 5 回呼び出され、それぞれの呼び出しにおける引数と返値は次のようになります。 -| | `previousValue` | `currentValue` | `index` | 返値 | -| ---------------- | --------------- | -------------- | ------- | ---- | -| 最初の呼び出し | `10` | `15` | `0` | `25` | -| 2 番目の呼び出し | `25` | `16` | `1` | `41` | -| 3 番目の呼び出し | `41` | `17` | `2` | `58` | -| 4 番目の呼び出し | `58` | `18` | `3` | `76` | -| 5 番目の呼び出し | `76` | `19` | `4` | `95` | +| | `accumulator` | `currentValue` | `index` | 返値 | +| ---------------- | ------------- | -------------- | ------- | ---- | +| 最初の呼び出し | `10` | `15` | `0` | `25` | +| 2 番目の呼び出し | `25` | `16` | `1` | `41` | +| 3 番目の呼び出し | `41` | `17` | `2` | `58` | +| 4 番目の呼び出し | `58` | `18` | `3` | `76` | +| 5 番目の呼び出し | `76` | `19` | `4` | `95` | この場合の `reduce()` の返値は `95` となります。 -## 例 - -### 配列内の値の合計値を出す - -```js -let sum = [0, 1, 2, 3].reduce(function (previousValue, currentValue) { - return previousValue + currentValue; -}, 0); -// sum is 6 -``` - -また、アロー関数を用いて書くこともできます。 - -```js -let total = [0, 1, 2, 3].reduce( - (previousValue, currentValue) => previousValue + currentValue, - 0, -); -``` - ### オブジェクト配列の値の合計値 オブジェクトの配列に含まれた値の合計値を出すには、すべての項目を関数内で取得できるようにするために `initialValue` を指定する**必要があります**。 @@ -199,220 +158,240 @@ let total = [0, 1, 2, 3].reduce( ```js const objects = [{ x: 1 }, { x: 2 }, { x: 3 }]; const sum = objects.reduce( - (previousValue, currentValue) => previousValue + currentValue.x, + (accumulator, currentValue) => accumulator + currentValue.x, 0, ); console.log(sum); // logs 6 ``` -### 二次元配列を一次元配列にする +### 関数を直列にパイプ接続 + +`pipe` 関数は一連の関数を受け取り、新しい関数を返します。新しい関数が引数で呼び出されると、一連の関数が順番に呼び出され、それぞれが前回関数の返値を受け取ります。 ```js -const flattened = [ - [0, 1], - [2, 3], - [4, 5], -].reduce( - (previousValue, currentValue) => previousValue.concat(currentValue), - [], -); -// flattened is [0, 1, 2, 3, 4, 5] -``` +const pipe = + (...functions) => + (initialValue) => + functions.reduce((acc, fn) => fn(acc), initialValue); -### オブジェクトの値のインスタンスを数える +// 合成に使用する素材 +const double = (x) => 2 * x; +const triple = (x) => 3 * x; +const quadruple = (x) => 4 * x; -```js -const names = ["Alice", "Bob", "Tiff", "Bruce", "Alice"]; +// 特定の値の乗算のための合成関数 +const multiply6 = pipe(double, triple); +const multiply9 = pipe(triple, triple); +const multiply16 = pipe(quadruple, quadruple); +const multiply24 = pipe(double, triple, quadruple); -const countedNames = names.reduce((allNames, name) => { - const currCount = allNames[name] ?? 0; - return { - ...allNames, - [name]: currCount + 1, - }; -}, {}); -// countedNames is: -// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 } +// 使用方法 +multiply6(6); // 36 +multiply9(9); // 81 +multiply16(16); // 256 +multiply24(10); // 240 ``` -### プロパティによってオブジェクトをグループ化 +### プロミスを直列に実行 + +[プロミスシーケンス](/ja/docs/Web/JavaScript/Guide/Using_promises#composition)は、非同期で行われることを除けば、基本的に前回の節で示された関数のパイプ接続です。 ```js -const people = [ - { name: "Alice", age: 21 }, - { name: "Max", age: 20 }, - { name: "Jane", age: 20 }, -]; - -function groupBy(objectArray, property) { - return objectArray.reduce((acc, obj) => { - const key = obj[property]; - const curGroup = acc[key] ?? []; +// パイプと比較すると、 fn(acc) は acc.then(fn) に変更され、 +// initialValue はプロミスであることが保証されます。 +const asyncPipe = + (...functions) => + (initialValue) => + functions.reduce((acc, fn) => acc.then(fn), Promise.resolve(initialValue)); - return { ...acc, [key]: [...curGroup, obj] }; - }, {}); -} +// 合成に使用する構成要素 +const p1 = async (a) => a * 5; +const p2 = async (a) => a * 2; +// 構成された関数は、最終的にすべてプロミスで包まれるため、 +// プロミス以外を返すこともできます。 +const f3 = (a) => a * 3; +const p4 = async (a) => a * 4; -const groupedPeople = groupBy(people, "age"); -// groupedPeople is: -// { -// 20: [ -// { name: 'Max', age: 20 }, -// { name: 'Jane', age: 20 } -// ], -// 21: [{ name: 'Alice', age: 21 }] -// } +asyncPipe(p1, p2, f3, p4)(10).then(console.log); // 1200 ``` -### スプレッド演算子と initialValue を使ってオブジェクトの配列に含まれる配列を結合させる +`asyncPipe` は `async`/`await` を使用して実装することもでき、 `pipe` との類似性をよりよく示しています。 ```js -// friends - an array of objects -// where object field "books" is a list of favorite books -const friends = [ - { - name: "Anna", - books: ["Bible", "Harry Potter"], - age: 21, - }, - { - name: "Bob", - books: ["War and peace", "Romeo and Juliet"], - age: 26, - }, - { - name: "Alice", - books: ["The Lord of the Rings", "The Shining"], - age: 18, - }, -]; - -// allbooks - list which will contain all friends' books + -// additional list contained in initialValue -const allbooks = friends.reduce( - (previousValue, currentValue) => [...previousValue, ...currentValue.books], - ["Alphabet"], -); - -// allbooks = [ -// 'Alphabet', 'Bible', 'Harry Potter', 'War and peace', -// 'Romeo and Juliet', 'The Lord of the Rings', -// 'The Shining' -// ] +const asyncPipe = + (...functions) => + (initialValue) => + functions.reduce(async (acc, fn) => fn(await acc), initialValue); ``` -### 配列内の重複要素を除去する +### reduce() を疎配列で使用 -> **メモ:** {{jsxref("Set")}} と {{jsxref("Array.from()")}} に対応している環境を使っている場合は、`const arrayWithNoDuplicates = Array.from(new Set(myArray))` を使うことで重複要素を除去された配列を取得することができます。 +`reduce()` は疎配列の欠落している要素をスキップしますが、値が `undefined` の場合はスキップしません。 ```js -const myArray = ["a", "b", "a", "b", "c", "e", "e", "c", "d", "d", "d", "d"]; -const myArrayWithNoDuplicates = myArray.reduce( - (previousValue, currentValue) => { - if (!previousValue.includes(currentValue)) { - return [...previousValue, currentValue]; - } - return previousValue; - }, - [], -); - -console.log(myArrayWithNoDuplicates); +console.log([1, 2, , 4].reduce((a, b) => a + b)); // 7 +console.log([1, 2, undefined, 4].reduce((a, b) => a + b)); // NaN ``` -### .filter().map() を .reduce() で置き換える +### 配列以外のオブジェクトに対する reduce() の呼び出し -{{jsxref("Array/filter", "filter()")}} を使用した後で {{jsxref("Array/map", "map()")}} を使用すると配列を二度走査しますが、{{jsxref("Array/reduce", "reduce()")}} では同じ効果を一度の操作で実現することができ、もっと効率的です。(`for` ループが好きなのであれば、{{jsxref("Array/forEach", "forEach()")}} で一度の操作で filter と map を行うことができます)。 +`reduce()` メソッドは `this` の `length` プロパティを読み込み、次にキーが `length` より小さい非負の整数である各プロパティにアクセスします。 ```js -const numbers = [-5, 6, 2, 0]; +const arrayLike = { + length: 3, + 0: 2, + 1: 3, + 2: 4, + 3: 99, // length が 3 であるため reduce() からは無視される +}; +console.log(Array.prototype.reduce.call(arrayLike, (x, y) => x + y)); +// 9 +``` -const doubledPositiveNumbers = numbers.reduce((previousValue, currentValue) => { - if (currentValue > 0) { - const doubled = currentValue * 2; - return [...previousValue, doubled]; - } - return previousValue; -}, []); +### reduce() を使用すべきでない場合 -console.log(doubledPositiveNumbers); // [12, 4] -``` +`reduce()` のような多目的の高次関数は強力ですが、特に経験の浅い JavaScript の開発者にとっては理解しにくい場合があります。他の配列メソッドを使用した方がコードが明快になる場合、開発者は `reduce()` を使用する他の利点と読み取り可能性のトレードオフを比較検討する必要があります。 -### 直列のプロミスの実行 +`reduce()` は常に `for...of` ループと同等ですが、上位スコープの変数を変更する代わりに、各反復処理で新しい値を返すことに注意してください。 ```js -/** - * 一連のプロミスハンドラーを連鎖させる。 - * - * @param {array} arr - プロミスハンドラーのリストで、各ハンドラーは前のハンドラーの - * 解決した結果を受け取り、別のプロミスを返します。 - * @param {*} input プロミスチェーンを開始するための初期値 - * @return {Object} ハンドラーの連鎖を伴う最終プロミス - */ -function runPromiseInSequence(arr, input) { - return arr.reduce( - (promiseChain, currentFunction) => promiseChain.then(currentFunction), - Promise.resolve(input), - ); -} +const val = array.reduce((acc, cur) => update(acc, cur), initialValue); -// promise function 1 -function p1(a) { - return new Promise((resolve, reject) => { - resolve(a * 5); - }); +// これは、次のものと同等です +let val = initialValue; +for (const cur of array) { + val = update(val, cur); } +``` -// promise function 2 -function p2(a) { - return new Promise((resolve, reject) => { - resolve(a * 2); - }); -} +前述のように、人々が `reduce()` を使用したいと思う理由は、データを不変とする関数型プログラミングの手法を模倣するためです。したがって、アキュムレーターの不変性を支持する開発者は、次のように反復処理ごとにアキュムレーター全体をコピーする傾向があります。 -// function 3 - will be wrapped in a resolved promise by .then() -function f3(a) { - return a * 3; -} +```js example-bad +const names = ["Alice", "Bob", "Tiff", "Bruce", "Alice"]; +const countedNames = names.reduce((allNames, name) => { + const currCount = Object.hasOwn(allNames, name) ? allNames[name] : 0; + return { + ...allNames, + [name]: currCount + 1, + }; +}, {}); +``` -// promise function 4 -function p4(a) { - return new Promise((resolve, reject) => { - resolve(a * 4); - }); -} +このコードは非効率的です。というのも、各イテレーターは `allNames` オブジェクト全体をコピーする必要があり、これは固有の名前がいくつあるかによってサイズが大きくなってしまうからです。このコードは最悪の場合、 `N` が `names` の長さだとすると `O(N^2)` のパフォーマンスになります。 + +各反復処理で `allNames` オブジェクトを変更したほうがよりよいでしょう。しかし、 `allNames` がいずれにせよ変更されるのであれば、 `reduce()` を単純な `for` ループに変換した方がより明確です。 -const promiseArr = [p1, p2, f3, p4]; -runPromiseInSequence(promiseArr, 10).then(console.log); // 1200 +```js example-bad +const names = ["Alice", "Bob", "Tiff", "Bruce", "Alice"]; +const countedNames = names.reduce((allNames, name) => { + const currCount = allNames[name] ?? 0; + allNames[name] = currCount + 1; + // allNames を返さないと、次の反復処理で undefined を受け取る + return allNames; +}, Object.create(null)); ``` -### パイプによって関数を合成する +```js example-good +const names = ["Alice", "Bob", "Tiff", "Bruce", "Alice"]; +const countedNames = Object.create(null); +for (const name of names) { + const currCount = countedNames[name] ?? 0; + countedNames[name] = currCount + 1; +} +``` -```js -// 合成に使用する素材 -const double = (x) => 2 * x; -const triple = (x) => 3 * x; -const quadruple = (x) => 4 * x; +したがって、アキュムレーターが配列やオブジェクトで、反復処理ごとに配列やオブジェクトをコピーしている場合、誤ってコードに 2 次的な複雑さを導入してしまい、大きなデータですぐにパフォーマンスが低下してしまう可能性があります。 -// パイプ機能を実現する関数の合成 -const pipe = - (...functions) => - (initialValue) => - functions.reduce((acc, fn) => fn(acc), initialValue); +`reduce()` の受け入れられる用途のいくつかは上で指定されたものです（特に、配列の合計、プロミスの順序付け、関数のパイプ処理）。他にも `reduce()` よりも優れた代替手段が存在する場合があります。 -// 詳細な値の乗算のための合成関数 -const multiply6 = pipe(double, triple); -const multiply9 = pipe(triple, triple); -const multiply16 = pipe(quadruple, quadruple); -const multiply24 = pipe(double, triple, quadruple); +- 配列の平坦化。代わりに {{jsxref("Array/flat", "flat()")}} を使用してください。 -// 使用方法 -multiply6(6); // 36 -multiply9(9); // 81 -multiply16(16); // 256 -multiply24(10); // 240 -``` + ```js example-bad + const flattened = array.reduce((acc, cur) => acc.concat(cur), []); + ``` + + ```js example-good + const flattened = array.flat(); + ``` + +- プロパティによるオブジェクトのグループ化。代わりに {{jsxref("Object.groupBy()")}} を使用してください。 + + ```js example-bad + const groups = array.reduce((acc, obj) => { + const key = obj.name; + const curGroup = acc[key] ?? []; + return { ...acc, [key]: [...curGroup, obj] }; + }, {}); + ``` + + ```js example-good + const groups = Object.groupBy(array, (obj) => obj.name); + ``` + +- オブジェクトの配列に格納されている配列の連結。代わりに {{jsxref("Array/flatMap", "flatMap()")}} を使用してください。 + + ```js example-bad + const friends = [ + { name: "Anna", books: ["Bible", "Harry Potter"] }, + { name: "Bob", books: ["War and peace", "Romeo and Juliet"] }, + { name: "Alice", books: ["The Lord of the Rings", "The Shining"] }, + ]; + const allBooks = friends.reduce((acc, cur) => [...acc, ...cur.books], []); + ``` + + ```js example-good + const allBooks = friends.flatMap((person) => person.books); + ``` + +- 配列内の重複項目の除去。代わりに {{jsxref("Set")}} と {{jsxref("Array.from()")}} を使用してください。 + + ```js example-bad + const uniqArray = array.reduce( + (acc, cur) => (acc.includes(cur) ? acc : [...acc, cur]), + [], + ); + ``` + + ```js example-good + const uniqArray = Array.from(new Set(array)); + ``` + +- 配列の要素の削除や追加。代わりに {{jsxref("Array/flatMap", "flatMap()")}} を使用してください。 + + ```js example-bad + // 数値の配列を受け取り、完全二乗を平方根に分割します。 + const roots = array.reduce((acc, cur) => { + if (cur < 0) return acc; + const root = Math.sqrt(cur); + if (Number.isInteger(root)) return [...acc, root, root]; + return [...acc, cur]; + }, []); + ``` + + ```js example-good + const roots = array.flatMap((val) => { + if (val < 0) return []; + const root = Math.sqrt(val); + if (Number.isInteger(root)) return [root, root]; + return [val]; + }); + ``` + + 配列から要素を取り除くだけなら {{jsxref("Array/filter", "filter()")}} も使用できます。 + +- 要素の検索、または要素が条件を満たすかどうかのテスト。代わりに {{jsxref("Array/find", "find()")}} と {{jsxref("Array/find", "findIndex()")}} または {{jsxref("Array/some", "some()")}} と {{jsxref("Array/every", "every()")}} を使用してください。これらのメソッドには、配列全体を反復処理することなく、結果が確定したらすぐに返すという好ましいこともあります。 + + ```js example-bad + const allEven = array.reduce((acc, cur) => acc && cur % 2 === 0, true); + ``` + + ```js example-good + const allEven = array.every((val) => val % 2 === 0); + ``` + +`reduce()` が最良の選択である場合は、ドキュメント化と変数名の意味づけをすることで、可読性の欠点を軽減する手助けになります。 ## 仕様書 @@ -425,4 +404,12 @@ multiply24(10); // 240 ## 関連情報 - [`Array.prototype.reduce` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array) +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド +- {{jsxref("Array")}} +- {{jsxref("Array.prototype.map()")}} +- {{jsxref("Array.prototype.flat()")}} +- {{jsxref("Array.prototype.flatMap()")}} - {{jsxref("Array.prototype.reduceRight()")}} +- {{jsxref("TypedArray.prototype.reduce()")}} +- {{jsxref("Object.groupBy()")}} +- {{jsxref("Map.groupBy()")}} diff --git a/files/ja/web/javascript/reference/global_objects/array/reduceright/index.md b/files/ja/web/javascript/reference/global_objects/array/reduceright/index.md index 43deb38862ba74..8f30c099289915 100644 --- a/files/ja/web/javascript/reference/global_objects/array/reduceright/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/reduceright/index.md @@ -2,72 +2,38 @@ title: Array.prototype.reduceRight() slug: Web/JavaScript/Reference/Global_Objects/Array/reduceRight l10n: - sourceCommit: 9b38f886d21c5d0a428f58acb20c4d0fc6c2e098 + sourceCommit: c607c483fe079c61de5e32fba1a6cce61896e97d --- {{JSRef}} -**`reduceRight()`** メソッドは、アキュームレーターと配列のそれぞれの値に対して (右から左へ) 関数を適用して、単一の値にします。 +**`reduceRight()`** は {{jsxref("Array")}} インスタンスのメソッドで、アキュームレーターと配列のそれぞれの値に対して（右から左へ）関数を適用して、単一の値にします。 -{{EmbedInteractiveExample("pages/js/array-reduce-right.html","shorter")}} +左から右へ適用する場合は {{jsxref("Array.prototype.reduce()")}} を参照してください。 -左から右へ適用する際は {{jsxref("Array.prototype.reduce()")}} を参照してください。 +{{EmbedInteractiveExample("pages/js/array-reduce-right.html")}} ## 構文 -```js -// アロー関数 -reduceRight((accumulator, currentValue) => { - /* … */ -}); -reduceRight((accumulator, currentValue, index) => { - /* … */ -}); -reduceRight((accumulator, currentValue, index, array) => { - /* … */ -}); -reduceRight((accumulator, currentValue, index, array) => { - /* … */ -}, initialValue); - -// コールバック関数 -reduceRight(callbackFn); -reduceRight(callbackFn, initialValue); - -// コールバック畳み込み関数 -reduceRight(function (accumulator, currentValue) { - /* … */ -}); -reduceRight(function (accumulator, currentValue, index) { - /* … */ -}); -reduceRight(function (accumulator, currentValue, index, array) { - /* … */ -}); -reduceRight(function (accumulator, currentValue, index, array) { - /* … */ -}, initialValue); +```js-nolint +reduceRight(callbackFn) +reduceRight(callbackFn, initialValue) ``` ### 引数 - `callbackFn` - - : 配列内のそれぞれの値に対して実行される関数です。 - - この関数は、以下の引数と共に呼び出されます。 - + - : 配列の各要素に対して実行される関数です。その返値は、次に `callbackFn` を呼び出す際の `accumulator` 引数の値になります。最後の呼び出しでは、返値は `reduceRight()` の返値となります。この関数は以下の引数で呼び出されます。 - `accumulator` - - : コールバック関数の前回の呼び出しで返された値、もしくは、指定されていれば `initialValue` です。（下記参照） + - : 前回の `callbackFn` の呼び出し結果の値です。初回の呼び出しでは `initialValue` が指定されていた場合はその値、そうでない場合はこの配列の末尾の要素の値です。 - `currentValue` - - : 配列内で現在処理中の要素です。 - - `index` - - : 配列内で現在処理中の要素の位置です。 - - `array` + - : 現在の要素の値です。初回の呼び出しでは `initialValue` が指定された場合は末尾の要素の値であり、そうでない場合は末尾から 2 番目の要素の値です。 + - `currentIndex` + - : `currentValue` のインデックス位置です。初回の呼び出しでは、 `initialValue` が指定された場合は `array.length - 1`、そうでない場合は `array.length - 2` です。 - : `reduceRight()` が呼び出された配列です。 - - `initialValue` {{optional_inline}} - - : `callbackFn` の最初の呼び出しのときに、アキュームレーターとして使用する値です。初期値がが渡されなかった場合は、配列の最後の要素が適用され、その要素が飛ばされます。また、 reduce または reduceRight を空の配列に対して初期値なしで呼び出すと `TypeError` になります。 + - : `callbackFn` の最初の呼び出しのときに、アキュームレーターとして使用する値です。初期値がが渡されなかった場合は、配列の最後の要素が適用され、その要素が飛ばされます。また、 `reduceRight()` を空の配列に対して初期値なしで呼び出すと `TypeError` になります。 ### 返値 @@ -75,9 +41,27 @@ reduceRight(function (accumulator, currentValue, index, array) { ## 解説 -`reduceRight` は、配列内に存在するそれぞれの要素に対してコールバック関数を一度ずつ実行します。配列内の穴は対象外です。初期値 (あるいは直前のコールバックの呼び出し結果)、現在の要素の値、現在の位置、繰り返しが行われる配列の 4 つの引数を受け取ります。 +`reduceRight()` メソッドは[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)です。「縮小」コールバック関数を配列に含まれる各要素に対して昇順に一度ずつ呼び出し、その結果を単一の値に積算します。 + +`callbackFn` は値が割り当てられている配列インデックスに対してのみ呼び出されます。[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#疎配列)の空のスロットに対しては呼び出されません。 + +他の[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)とは異なり、 `reduceRight()` は `thisArg` 引数を受け入れません。 `callbackFn` は常に `undefined` を `this` として呼び出され、 `callbackFn` が厳格モードでない場合は `globalThis` に置き換えられます。 + +`reduceRight()` メソッドは呼び出し元の配列を変更しませんが、 `callbackFn` に指定された関数は変更することがあります。ただし、配列の長さは `callbackFn` を最初に呼び出す前に保存されることに注意してください。したがって、 + +- `callbackFn` は `reduceRight()` の呼び出しを始めたときの配列の長さを超えて追加された要素にはアクセスしません。 +- 既に処理したインデックスを変更しても、 `callbackFn` が再度呼び出されることはありません。 +- まだ処理していない既存の配列要素が `callbackFn` によって変更された場合、 `callbackFn` に渡される値はその要素が取得される時点の値になります。[削除](/ja/docs/Web/JavaScript/Reference/Operators/delete)された要素は `undefined` であるかのように処理されます。 + +> **警告:** 前項で説明したような、参照中の配列の同時進行での変更は（特殊な場合を除いて）普通は避けるべきです。多くの場合、理解しにくいコードになります。 + +`reduceRight()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。 + +## 例 -reduceRight の `callbackFn` の呼び出しは、以下のように見えるでしょう。 +### 初期値がない場合の reduceRight() の動作 + +reduceRight の `callbackFn` の呼び出しは次のようになります： ```js arr.reduceRight((accumulator, currentValue, index, array) => { @@ -108,7 +92,9 @@ arr.reduceRight((accumulator, currentValue, index, array) => { `reduceRight` の返値は、コールバック呼び出しの最後の返値である (`10`) になります。 -`initialValue` を渡した場合、結果は次のようになります。 +### 初期値がある場合の reduceRight() の動作 + +ここでは、同じアルゴリズムを使用して同じ配列を縮小しますが、 `reduceRight()` の 2 つ目の引数である `initialValue` として `10` を使用します。 ```js [0, 1, 2, 3, 4].reduceRight( @@ -127,8 +113,6 @@ arr.reduceRight((accumulator, currentValue, index, array) => { `reduceRight` から返される値はこのときのもので、もちろん `20` です。 -## 例 - ### 配列内のすべての値を合計する ```js @@ -136,18 +120,6 @@ const sum = [0, 1, 2, 3].reduceRight((a, b) => a + b); // sum is 6 ``` -### 配列中の配列を平坦化する - -```js -const arrays = [ - [0, 1], - [2, 3], - [4, 5], -]; -const flattened = arrays.reduceRight((a, b) => a.concat(b), []); -// flattened is [4, 5, 2, 3, 0, 1] -``` - ### 一連のコールバックを使用して非同期関数のリストを実行し、それぞれの結果を次のコールバックに渡す ```js @@ -233,6 +205,31 @@ console.log(compose(double, inc)(2)); // 6 console.log(compose(inc, double)(2)); // 5 ``` +### reduceRight() を疎配列で使用 + +`reduceRight()` は疎配列の欠落している要素をスキップしますが、値が `undefined` の場合はスキップしません。 + +```js +console.log([1, 2, , 4].reduceRight((a, b) => a + b)); // 7 +console.log([1, 2, undefined, 4].reduceRight((a, b) => a + b)); // NaN +``` + +### 配列以外のオブジェクトに対する reduceRight() の呼び出し + +`reduceRight()` メソッドは `this` の `length` プロパティを読み込み、次にキーが `length` より小さい非負の整数である各プロパティにアクセスします。 + +```js +const arrayLike = { + length: 3, + 0: 2, + 1: 3, + 2: 4, + 3: 99, // length が 3 であるため reduceRight() からは無視される +}; +console.log(Array.prototype.reduceRight.call(arrayLike, (x, y) => x - y)); +// -1 すなわち 4 - 3 - 2 +``` + ## 仕様書 {{Specifications}} @@ -244,4 +241,12 @@ console.log(compose(inc, double)(2)); // 5 ## 関連情報 - [`Array.prototype.reduceRight` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array) +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド +- {{jsxref("Array")}} +- {{jsxref("Array.prototype.map()")}} +- {{jsxref("Array.prototype.flat()")}} +- {{jsxref("Array.prototype.flatMap()")}} - {{jsxref("Array.prototype.reduce()")}} +- {{jsxref("TypedArray.prototype.reduceRight()")}} +- {{jsxref("Object.groupBy()")}} +- {{jsxref("Map.groupBy()")}} diff --git a/files/ja/web/javascript/reference/global_objects/array/reverse/index.md b/files/ja/web/javascript/reference/global_objects/array/reverse/index.md index 39f5a599b1e5bc..ef38b0e1a06504 100644 --- a/files/ja/web/javascript/reference/global_objects/array/reverse/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/reverse/index.md @@ -2,30 +2,38 @@ title: Array.prototype.reverse() slug: Web/JavaScript/Reference/Global_Objects/Array/reverse l10n: - sourceCommit: cf607d68522cd35ee7670782d3ee3a361eaef2e4 + sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de --- {{JSRef}} -**`reverse()`** メソッドは、配列の要素を [in-place(その場)](https://ja.wikipedia.org/wiki/In-place%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0) で反転させ、その配列への参照を返します。最初の要素が最後の要素に、最後の要素が最初の要素になります。言い換えれば、配列内の要素順序を、先に述べた方向とは逆に向かわせます。 +**`reverse()`** は {{jsxref("Array")}} のメソッドで、配列の要素を[その場 (in-place)](https://ja.wikipedia.org/wiki/In-place%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0) で反転させ、その配列への参照を返します。最初の要素が最後の要素に、最後の要素が最初の要素になります。言い換えれば、配列内の要素順序を、先に述べた方向とは逆に向かわせます。 + +元の配列を変更せずに配列の要素を反転させるには {{jsxref("Array/toReversed", "toReversed()")}} を使用してください。 {{EmbedInteractiveExample("pages/js/array-reverse.html")}} ## 構文 -```js -reverse(); +```js-nolint +reverse() ``` +### 引数 + +なし。 + ### 返値 -元の配列を反転されたものへの参照です。なお、配列は [in-place(その場)](https://ja.wikipedia.org/wiki/In-place%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0) で反転され、コピーは作られません。 +元の配列を反転されたものへの参照です。なお、配列は[その場 (in-place)](https://ja.wikipedia.org/wiki/In-place%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0) で反転され、コピーは作られません。 ## 解説 -`reverse` メソッドは、呼び出した配列オブジェクトの要素を反転し、書き換えられた配列の参照を返します。 +`reverse()` メソッドは、呼び出した配列オブジェクトの要素を反転し、書き換えられた配列の参照を返します。 + +`reverse()` メソッドは空のスロットを維持します。元の配列が[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#sparse_arrays)である場合、空のスロットに対応する新しいインデックスは[削除され](/ja/docs/Web/JavaScript/Reference/Operators/delete)、空のスロットになります。 -`reverse` は意図的に汎用性を持たせています。つまり、このメソッドは配列に類似したオブジェクトに対して呼び出すこともできます。ゼロから始まる数値プロパティであり、連続した連なりの最後を反映している `length` プロパティを含まないオブジェクトでは効果がないかもしれません。 +`reverse()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。文字列も配列風ですが、文字列は不変であるため、このメソッドを適用するのは適切ではありません。 ## 例 @@ -41,18 +49,6 @@ items.reverse(); console.log(items); // [3, 2, 1] ``` -### 配列風オブジェクトの要素を反転させる - -次の例は、3 つの要素と length プロパティを含む配列風オブジェクト `obj` を作成し、その配列風オブジェクトを反転させます。`reverse()` の呼び出しは、反転した配列風オブジェクト `obj` への参照を返します。 - -```js -const obj = { 0: 1, 1: 2, 2: 3, length: 3 }; -console.log(obj); // {0: 1, 1: 2, 2: 3, length: 3} - -Array.prototype.reverse.call(obj); //apply() を使用するのと同じ構文 -console.log(obj); // {0: 3, 1: 2, 2: 1, length: 3} -``` - ### reverse() メソッドは同じ配列への参照を返す `reverse()` メソッドは元の配列への参照を返すので、返された配列を変更すると、元の配列も変更されます。 @@ -65,7 +61,7 @@ reversed[0] = 5; console.log(numbers[0]); // 5 ``` -`reverse()` で元の配列を変更せず、他の配列メソッド（[`map()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map) など）が行うように[シャローコピーした](/ja/docs/Glossary/Shallow_copy)配列を返すようにするには、 `reverse()` を呼び出す前に[スプレッド構文](/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax)か [`Array.from()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/from) を使用してシャローコピーを行ってください。 +`reverse()` で元の配列を変更せず、他の配列メソッド（[`map()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map) など）が行うように[シャローコピーした](/ja/docs/Glossary/Shallow_copy)配列を返すようにするには、 {{jsxref("Array/toReversed", "toReversed()")}} メソッドを使用してください。他にも、 `reverse()` を呼び出す前に[スプレッド構文](/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax)か [`Array.from()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/from) を使用してシャローコピーを行っておくこともできます。 ```js const numbers = [3, 2, 4, 1, 5]; @@ -75,6 +71,32 @@ reverted[0] = 5; console.log(numbers[0]); // 3 ``` +### 疎配列に対する reverse() の使用 + +疎配列は `reverse()` を呼び出しても疎配列のままです。空のスロットは空のスロットとしてそれぞれの新しいインデックスにコピーされます。 + +```js +console.log([1, , 3].reverse()); // [3, empty, 1] +console.log([1, , 3, 4].reverse()); // [4, 3, empty, 1] +``` + +### 配列以外のオブジェクトに対する reverse() の呼び出し + +`reverse()` メソッドは `this` の `length` プロパティを読み込みます。そして、 `0` から `length / 2` までの整数のキーを持つ各プロパティを参照し、両端の対応する 2 つのインデックスを入れ替えます。出力先のプロパティで、参照元のプロパティが存在しないものは[削除](/ja/docs/Web/JavaScript/Reference/Operators/delete)します。 + +```js +const arrayLike = { + length: 3, + unrelated: "foo", + 2: 4, + 3: 33, // length が 3 であるため reverse() 空は無視される +}; +console.log(Array.prototype.reverse.call(arrayLike)); +// { 0: 4, 3: 33, length: 3, unrelated: 'foo' } +// 元々インデックス 0 が存在しなかったため、インデックス 2 は削除される +// 長さが 3 であるため、インデックス 3 は変更されない +``` + ## 仕様書 {{Specifications}} @@ -85,6 +107,10 @@ console.log(numbers[0]); // 3 ## 関連情報 +- [`Array.prototype.reverse` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array) +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド +- {{jsxref("Array")}} - {{jsxref("Array.prototype.join()")}} - {{jsxref("Array.prototype.sort()")}} +- {{jsxref("Array.prototype.toReversed()")}} - {{jsxref("TypedArray.prototype.reverse()")}} diff --git a/files/ja/web/javascript/reference/global_objects/array/shift/index.md b/files/ja/web/javascript/reference/global_objects/array/shift/index.md index e28fd0262a6476..56903b7137d028 100644 --- a/files/ja/web/javascript/reference/global_objects/array/shift/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/shift/index.md @@ -2,34 +2,39 @@ title: Array.prototype.shift() slug: Web/JavaScript/Reference/Global_Objects/Array/shift l10n: - sourceCommit: cf607d68522cd35ee7670782d3ee3a361eaef2e4 + sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de --- {{JSRef}} -**`shift()`** メソッドは、配列から**最初**の要素を取り除き、その要素を返します。このメソッドは配列の長さを変えます。 +**`shift()`** は {{jsxref("Array")}} インスタンスのメソッドで、配列から**最初**の要素を取り除き、その要素を返します。このメソッドは配列の長さを変えます。 {{EmbedInteractiveExample("pages/js/array-shift.html")}} ## 構文 -```js -shift(); +```js-nolint +shift() ``` +### 引数 + +なし。 + ### 返値 配列から取り除かれた要素を返します。配列が空の場合は、{{jsxref("undefined")}} を返します。 ## 解説 -`shift()` メソッドは 0 番目の位置の要素を取り除き、続く位置の値を小さい方向にずらします。そして、削除された値を返します。{{jsxref("Array/length", "length")}} プロパティが 0 の場合、{{jsxref("undefined")}} を返します。 +`shift()` メソッドは 0 番目の位置の要素を取り除き、続く位置の値を小さい方向にずらします。 +そして、削除された値を返します。{{jsxref("Array/length", "length")}} プロパティが 0 の場合、{{jsxref("undefined")}} を返します。 {{jsxref("Array/pop", "pop()")}} メソッドは `shift()` と似た動作をしますが、こちらは配列の末尾の要素に適用されます。 -`shift()` メソッドは変更を行うメソッドです。長さと `this` の内容を変更します。 `this` の値を変化させず、最初の要素を取り除いた新しい配列を返したい場合は、代わりに [`arr.slice(1)`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) を使用することができます。 +`shift()` メソッドは[変更メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#コピーメソッドと変更メソッド)です。長さと `this` の内容を変更します。 `this` の値を変化させず、最初の要素を取り除いた新しい配列を返したい場合は、代わりに [`arr.slice(1)`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) を使用することができます。 -`Array.prototype.shift()` は意図的に汎用性を持たせています。つまり、このメソッドは配列に類似したオブジェクトに対して呼び出すこともできます。ゼロから始まる数値プロパティであり、連続した連なりの最後を反映している `length` プロパティを含まないオブジェクトでは効果がないかもしれません。 +`shift()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。文字列も配列風ですが、文字列は不変であるため、このメソッドを適用するのは適切ではありません。 ## 例 @@ -40,7 +45,7 @@ shift(); ```js const myFish = ["angel", "clown", "mandarin", "surgeon"]; -console.log("myFish before:", JSON.stringify(myFish)); +console.log("myFish 処理前:", myFish); // myFish 処理前: ['angel', 'clown', 'mandarin', 'surgeon'] const shifted = myFish.shift(); @@ -52,17 +57,39 @@ console.log("取り除いた要素:", shifted); // 取り除いた要素: angel ``` -### shift() メソッドの while ループ内での使用する +### shift() メソッドの while ループ内での使用 shift() メソッドは時に、 while 文の条件内において用いられます。以下のコードでは、要素がすべて無くなるまで、反復処理のたびにその配列内の次の要素を取り除きます。 ```js -const names = ["Andrew", "Edward", "Paul", "Chris", "John"]; +const names = ["Andrew", "Tyrone", "Paul", "Maria", "Gayatri"]; while (typeof (i = names.shift()) !== "undefined") { console.log(i); } -// Andrew, Edward, Paul, Chris, John +// Andrew, Tyrone, Paul, Maria, Gayatri +``` + +### 配列以外のオブジェクトに対する shift() の呼び出し + +`shift()` メソッドは `this` の `length` プロパティを読み込みます。[正規化された長さ](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#length_プロパティの正規化)が 0 の場合、`length` は再び `0` に設定されます（以前は負の値または `undefined` であった可能性があります）。そうでない場合は、 `0` のプロパティを返し、残りのプロパティは左に 1 つシフトされます。 `length` プロパティは 1 つデクリメントされます。 + +```js +const arrayLike = { + length: 3, + unrelated: "foo", + 2: 4, +}; +console.log(Array.prototype.shift.call(arrayLike)); +// undefined。空のスロットであるため +console.log(arrayLike); +// { '1': 4, length: 2, unrelated: 'foo' } + +const plainObj = {}; +// length プロパティがないため、 length は 0 +Array.prototype.shift.call(plainObj); +console.log(plainObj); +// { length: 0 } ``` ## 仕様書 @@ -75,7 +102,10 @@ while (typeof (i = names.shift()) !== "undefined") { ## 関連情報 +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド +- {{jsxref("Array")}} - {{jsxref("Array.prototype.push()")}} - {{jsxref("Array.prototype.pop()")}} - {{jsxref("Array.prototype.unshift()")}} - {{jsxref("Array.prototype.concat()")}} +- {{jsxref("Array.prototype.splice()")}} diff --git a/files/ja/web/javascript/reference/global_objects/array/slice/index.md b/files/ja/web/javascript/reference/global_objects/array/slice/index.md index a74770f029a5cc..412751f427e3bf 100644 --- a/files/ja/web/javascript/reference/global_objects/array/slice/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/slice/index.md @@ -2,44 +2,37 @@ title: Array.prototype.slice() slug: Web/JavaScript/Reference/Global_Objects/Array/slice l10n: - sourceCommit: 968e6f1f3b6f977a09e116a0ac552459b741eac3 + sourceCommit: fb85334ffa4a2c88d209b1074909bee0e0abd57a --- {{JSRef}} -**`slice()`** メソッドは、配列の一部を `start` から `end` （`end` は含まれない）までの範囲で、選択した新しい配列オブジェクトに[シャローコピー](/ja/docs/Glossary/Shallow_copy)して返します。ここで `start` と `end` はその配列に含まれる項目の添字を表します。元の配列は変更されません。 +**`slice()`** は {{jsxref("Array")}} インスタンスのメソッドで、配列の一部を `start` から `end` （`end` は含まれない）までの範囲で、選択した新しい配列オブジェクトに[シャローコピー](/ja/docs/Glossary/Shallow_copy)して返します。 +ここで `start` と `end` はその配列に含まれる項目のインデックスを表します。元の配列は変更されません。 {{EmbedInteractiveExample("pages/js/array-slice.html", "taller")}} ## 構文 -```js -slice(); -slice(start); -slice(start, end); +```js-nolint +slice() +slice(start) +slice(start, end) ``` ### 引数 - `start` {{optional_inline}} - - - : 取り出しの開始位置を示す 0 から始まる位置です。 - - 負の位置を使って、列の末尾からのオフセットを指定することができます。`slice(-2)` は列の最後の 2 つの要素を取り出します。 - - `start` が指定されなかった場合、 `slice` は位置 `0` から開始します。 - - `start` が列の位置の範囲よりも大きい場合は、空の配列が返されます。 - + - : 抽出を始める位置のゼロから始まるインデックスで、[整数に変換されます](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#整数への変換)。 + - インデックスが負の場合、配列の末尾からさかのぼって数えます。 `start < 0` の場合、 `start + array.length` が使用されます。 + - `start < -array.length` または `start` が省略された場合は `0` が使用されます。 + - `start >= array.length` の場合、何も抽出されません。 - `end` {{optional_inline}} - - - : 返される配列から除外される最初の要素の位置です。 `slice` は `end` 自体は含めず、その直前まで取り出します。例えば、 `slice(1,4)` は 2 番目から 4 番目までの要素 (位置がそれぞれ 1, 2, 3 番目の要素) を取り出します。 - - 負の位置を使って、列の終わりからのオフセットとして指定することができます。 `slice(2,-1)` は列の 3 番目から、最後から 2 番目までの要素を取り出します。 - - `end` が省略された場合、 `slice` は列の最後 (`arr.length`) までを取り出します。 - - `end` がシーケンスの長さを超えた場合も、`slice` はシーケンスの最後 (`arr.length`) までを取り出します。 + - : 抽出し終える位置のゼロから始まるインデックスで、[整数に変換されます](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#整数への変換)。 `slice()` は `end` を含まず、その直前までを抽出します。 + - インデックスが負の場合、配列の末尾からさかのぼって数えます。 `end < 0` の場合、 `end + array.length` が使用されます。 + - `end < -array.length` の場合は `0` が使用されます。 + - `end >= array.length` または `end` が省略された場合は `array.length` が使用され、最後まですべての要素が抽出されます。 + - 正規化後に `end` が `start` より前か同じ位置になった場合、何も抽出されません。 ### 返値 @@ -47,12 +40,11 @@ slice(start, end); ## 解説 -`slice` は元の配列を変更せず、元の配列から要素を[シャローコピー](/ja/docs/Glossary/Shallow_copy)した新しい配列を返します。元の配列の要素は以下のように返される配列にコピーされます。 +`slice()` メソッドは[コピーメソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#copying_methods_and_mutating_methods)です。これは `this` を変更するのではなく、元の配列と同じ要素を格納した[シャローコピー](/ja/docs/Glossary/Shallow_copy)を返します。 -- (実際のオブジェクトではない) オブジェクトの参照については、`slice` はオブジェクトの参照を新しい配列にコピーします。元の配列も新しい配列も同じオブジェクトを参照します。参照されたオブジェクトが修正された場合、その変更は新しい配列と元の配列の両方に現れます。 -- ({{jsxref("String")}}, {{jsxref("Number")}}, {{jsxref("Boolean")}} オブジェクトではなく) 文字列、数値、論理値では、`slice` は値を新しい配列にコピーします。一方の配列の文字列や数値に変更を加えても、他の配列に影響はしません。 +`slice()` メソッドは空のスロットを保持します。スライスされた部分が[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#疎配列)の場合、返す配列も疎配列になります。 -一方の配列に新しい要素が追加されても、他方の配列に影響はしません。 +`slice()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。 ## 例 @@ -62,8 +54,8 @@ slice(start, end); const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"]; const citrus = fruits.slice(1, 3); -// fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'] -// citrus contains ['Orange','Lemon'] +// fruits には ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'] が含まれる +// citrus には ['Orange','Lemon'] が含まれる ``` ### slice の使用 @@ -80,32 +72,29 @@ const myHonda = { const myCar = [myHonda, 2, "cherry condition", "purchased 1997"]; const newCar = myCar.slice(0, 2); -// myCar, newCar と両方の要素から参照されている myHonda の color の -// 値を書きだす。 -console.log("myCar = ", myCar); -console.log("newCar = ", newCar); -console.log("myCar[0].color = ", myCar[0].color); -console.log("newCar[0].color = ", newCar[0].color); +console.log("myCar =", myCar); +console.log("newCar =", newCar); +console.log("myCar[0].color =", myCar[0].color); +console.log("newCar[0].color =", newCar[0].color); // myHonda の色を変える。 myHonda.color = "purple"; -console.log("The new color of my Honda is ", myHonda.color); +console.log("The new color of my Honda is", myHonda.color); -// 両方の要素から参照されている myHonda の color を書き出す。 -console.log("myCar[0].color = ", myCar[0].color); -console.log("newCar[0].color = ", newCar[0].color); +console.log("myCar[0].color =", myCar[0].color); +console.log("newCar[0].color =", newCar[0].color); ``` このスクリプトの出力は次の様になります。 -``` +```plain myCar = [ { color: 'red', wheels: 4, engine: { cylinders: 4, size: 2.2 } }, 2, 'cherry condition', 'purchased 1997' ] -newCar = [{color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}}, 2] +newCar = [ { color: 'red', wheels: 4, engine: { cylinders: 4, size: 2.2 } }, 2 ] myCar[0].color = red newCar[0].color = red The new color of my Honda is purple @@ -113,25 +102,29 @@ myCar[0].color = purple newCar[0].color = purple ``` -### 配列風オブジェクト +### 配列以外のオブジェクトに対する slice() の呼び出し -`slice` メソッドを呼び出すことで、配列風オブジェクトやコレクションを新しい配列に変換することができます。メソッドをオブジェクトに {{jsxref("Function.prototype.bind", "bind")}} するだけです。配列風オブジェクトの一例として、{{jsxref("Functions/arguments", "arguments")}} が挙げられます。以下に例を示します。 +`slice()` メソッドは `this` の `length` プロパティを読み込みます。そして、 `start` から `end` までの整数キーのプロパティを読み込み、新しく作成した配列に定義します。 ```js -function list() { - return Array.prototype.slice.call(arguments); -} - -const list1 = list(1, 2, 3); // [1, 2, 3] +const arrayLike = { + length: 3, + 0: 2, + 1: 3, + 2: 4, + 3: 33, // length が 3 であるので slice() から無視される +}; +console.log(Array.prototype.slice.call(arrayLike, 1, 3)); +// [ 3, 4 ] ``` -結合 (Binding) は {{jsxref("Function")}} の {{jsxref("Function.prototype.call", "call()")}} メソッドを用いて行うことができますし、`[].slice.call(arguments)` を `Array.prototype.slice.call` の代わりに使って減らすこともできます。 +### slice() を用いて配列風オブジェクトを配列に変換 -いずれにせよ、{{jsxref("Function.prototype.bind", "bind")}} を使用することで簡略化することができます。 +`slice()` メソッドは {{jsxref("Function/bind", "bind()")}} や {{jsxref("Function/call", "call()")}} と共に、配列風オブジェクトを配列に変換するユーティリティメソッドを作成するためによく使われます。 ```js -const unboundSlice = Array.prototype.slice; -const slice = Function.prototype.call.bind(unboundSlice); +// slice() は第 1 引数として `this` が渡されて呼び出される +const slice = Function.prototype.call.bind(Array.prototype.slice); function list() { return slice(arguments); @@ -140,6 +133,14 @@ function list() { const list1 = list(1, 2, 3); // [1, 2, 3] ``` +### 疎配列に対する slice() の使用 + +`slice()` から返される配列は、元の配列が疎配列であれば疎配列になります。 + +```js +console.log([1, 2, , 4, 5].slice(1, 4)); // [2, empty, 4] +``` + ## 仕様書 {{Specifications}} @@ -150,6 +151,12 @@ const list1 = list(1, 2, 3); // [1, 2, 3] ## 関連情報 +- [`Array.prototype.slice` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array) +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド +- {{jsxref("Array")}} +- {{jsxref("Array.prototype.pop()")}} +- {{jsxref("Array.prototype.shift()")}} +- {{jsxref("Array.prototype.concat()")}} - {{jsxref("Array.prototype.splice()")}} -- {{jsxref("Function.prototype.call()")}} -- {{jsxref("Function.prototype.bind()")}} +- {{jsxref("TypedArray.prototype.slice()")}} +- {{jsxref("String.prototype.slice()")}} diff --git a/files/ja/web/javascript/reference/global_objects/array/some/index.md b/files/ja/web/javascript/reference/global_objects/array/some/index.md index 8e77fcd1219d12..bf6f6f68b3037d 100644 --- a/files/ja/web/javascript/reference/global_objects/array/some/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/some/index.md @@ -2,85 +2,57 @@ title: Array.prototype.some() slug: Web/JavaScript/Reference/Global_Objects/Array/some l10n: - sourceCommit: 968e6f1f3b6f977a09e116a0ac552459b741eac3 + sourceCommit: 28232983aa91026e50ec4300ddcb1b1d894a93b9 --- {{JSRef}} -**`some()`** メソッドは、指定された関数で実装されているテストに、配列の中の少なくとも 1 つの要素が 合格するかどうかを判定します。配列の中で指定された関数が true を返す要素を見つけた場合は true を返し、そうでない場合は false を返します。それ以外の場合は false を返します。配列は変更しません。 +**`some()`** は {{jsxref("Array")}} インスタンスのメソッドで、指定された関数で実装されているテストに、配列の中の少なくとも 1 つの要素が合格するかどうかを判定します。配列の中で指定された関数が true を返す要素を見つけた場合は true を返し、そうでない場合は false を返します。それ以外の場合は false を返します。配列は変更しません。 {{EmbedInteractiveExample("pages/js/array-some.html")}} ## 構文 -```js -// アロー関数 -some((element) => { - /* … */ -}); -some((element, index) => { - /* … */ -}); -some((element, index, array) => { - /* … */ -}); - -// コールバック関数 -some(callbackFn); -some(callbackFn, thisArg); - -// インラインコールバック関数 -some(function (element) { - /* … */ -}); -some(function (element, index) { - /* … */ -}); -some(function (element, index, array) { - /* … */ -}); -some(function (element, index, array) { - /* … */ -}, thisArg); +```js-nolint +some(callbackFn) +some(callbackFn, thisArg) ``` ### 引数 - `callbackFn` - - - : 各要素に対してテストを実行する関数です。 - - この関数は以下の引数と共に呼び出されます。 - + - : 配列のそれぞれの要素に対して実行する関数です。この関数は、要素がテストに合格したことを示すには[真値](/ja/docs/Glossary/Truthy)を、そうでない場合は[偽値](/ja/docs/Glossary/Falsy)を返します。この関数は以下の引数で呼び出されます。 - `element` - - : 配列内で現在処理されている要素です。 + - : 配列内で処理中の現在の要素です。 - `index` - - : 現在処理されている要素の添字です。 + - : 配列内で処理中の現在の要素のインデックスです。 - `array` - : `some()` が呼び出された配列です。 - `thisArg` {{optional_inline}} - - : `callbackFn` を実行するときに `this` として使用するオブジェクトです。 + - : `callbackFn` を実行する際に `this` として使用される値。[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)を参照してください。 ### 返値 -配列内の少なくとも 1 つの要素でコールバック関数が{{Glossary("truthy", "真値")}}を返した場合は **`true`** です。それ以外は **`false`** です。 +配列の要素のいずれかで `callbackFn` が{{Glossary("truthy", "真値")}}を返した場合は、直ちに `true` を返します。それ以外の場合は `false` です。 ## 解説 -`some()` は、与えられた `callbackFn` 関数を、配列に含まれる各要素に対して一度ずつ、`callbackFn` が「真値」（論理型に変換した際に真となる値）を返す要素が見つかるまで呼び出します。そのような要素が見つかると、 `some()` はただちに `true` を返します。見つからなかった場合、`some()` は `false` を返します。`callbackFn` は値が代入されている配列の要素に対してのみ呼び出されます。つまり、すでに削除された要素や、まだ値が代入されていない要素に対しては呼び出されません。 +`some()` メソッドは[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)です。指定された `callbackFn` 関数を配列の各要素に対して一度ずつ、 `callbackFn` が[真値](/ja/docs/Glossary/Truthy)を返すまで呼び出します。該当する要素が見つかった場合は、 `some()` は直ちに `true` を返し、配列の反復処理を中止します。一方、 `callbackFn` がすべての要素に対して[偽値](/ja/docs/Glossary/Falsy)を返した場合、 `some()` は `false` を返します。 -`callbackFn` は、要素の値、要素のインデックス、走査されている Array オブジェクトという 3 つの引数を伴って呼び出されます。 +`some()` は数学の量化子 "there exists" のような働きをします。特に、空配列の場合、どのような条件でも `false` を返します。 -`thisArg` 引数が `some()` に与えられた場合は、それがコールバックのの `this` として使用されます。そうでない場合は 、{{jsxref("undefined")}} 値が `this` として使用されます。 `callbackFn` から最終的に見られる `this` の値は、[関数から見た `this` の決定に関する一般的なルール](/ja/docs/Web/JavaScript/Reference/Operators/this)によって決定されます。 +`callbackFn` は値が割り当てられている配列インデックスに対してのみ呼び出されます。[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#疎配列)の空のスロットに対しては呼び出されません。 -`some()` は呼び出された配列を変化させません。 +`some()` は呼び出し元の配列を変更しませんが、 `callbackFn` として指定された関数は配列を変更することができます。ただし、配列の長さは `callbackFn` を最初に呼び出す前に保存されることに注意してください。したがって、 -`some()` によって処理される要素の範囲は、 `callbackFn` が最初に呼び出される前に設定されます。`some()` の呼び出しが開始された後に追加された要素に対しては、`callbackFn` は呼び出されません。既存の配列要素が変更されたり、削除されたりした場合、`callbackFn` に渡される値は `some()` がそれらを訪れた時点での値になり、削除された要素に対して呼び出されることはありません。 +- `callbackFn` は、 `some()` の呼び出しを始めたときの配列の長さを超えて追加された要素にはアクセスしません。 +- 既に処理したインデックスを変更しても、 `callbackFn` が再度呼び出されることはありません。 +- まだ処理していない既存の配列要素が `callbackFn` によって変更された場合、`callbackFn` に渡される値はその要素が取得された時点での値になります。[削除](/ja/docs/Web/JavaScript/Reference/Operators/delete)された要素は処理されません。 -> **警告:** 前項で説明したような、参照中の配列の同時進行での変更は（特殊な場合を除いて）普通は避けるべきです。多くの場合、理解しにくいコードになります。 +> **警告:** 上記のように進行中の配列に対して変更を行うと、理解しにくいコードになることが多いので、（特別な場合を除いて）避けるのが一般的です。 -> **メモ:** このメソッドは空の配列ではあらゆる条件式に対して `false` を返します。 +`some()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。 ## 例 @@ -121,19 +93,6 @@ checkAvailability(fruits, "kela"); // false checkAvailability(fruits, "banana"); // true ``` -### アロー関数を使ったある値が存在するかどうかのチェック - -```js -const fruits = ["apple", "banana", "mango", "guava"]; - -function checkAvailability(arr, val) { - return arr.some((arrVal) => val === arrVal); -} - -checkAvailability(fruits, "kela"); // false -checkAvailability(fruits, "banana"); // true -``` - ### 任意の値の論理値への変換 ```js @@ -153,6 +112,32 @@ getBoolean(1); // true getBoolean("true"); // true ``` +### 疎配列に対する some() の使用 + +`some()` は空のスロットでは処理を実行しません。 + +```js +console.log([1, , 3].some((x) => x === undefined)); // false +console.log([1, , 1].some((x) => x !== 1)); // false +console.log([1, undefined, 1].some((x) => x !== 1)); // true +``` + +### 配列以外のオブジェクトに対する some() の呼び出し + +`some()` メソッドは `this` の `length` プロパティを読み込み、キーが `length` より小さい非負の整数である各プロパティに、すべてアクセスするか `callbackFn` が `true` を返すまでアクセスします。 + +```js +const arrayLike = { + length: 3, + 0: "a", + 1: "b", + 2: "c", + 3: 3, // length が 3 .なので some() 空は無視される +}; +console.log(Array.prototype.some.call(arrayLike, (x) => typeof x === "number")); +// false +``` + ## 仕様書 {{Specifications}} @@ -164,7 +149,10 @@ getBoolean("true"); // true ## 関連情報 - [`Array.prototype.some` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array) +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド +- {{jsxref("Array")}} - {{jsxref("Array.prototype.every()")}} - {{jsxref("Array.prototype.forEach()")}} - {{jsxref("Array.prototype.find()")}} +- {{jsxref("Array.prototype.includes()")}} - {{jsxref("TypedArray.prototype.some()")}} diff --git a/files/ja/web/javascript/reference/global_objects/array/sort/index.md b/files/ja/web/javascript/reference/global_objects/array/sort/index.md index a5ac8853e0c3d1..66d3b866c6631b 100644 --- a/files/ja/web/javascript/reference/global_objects/array/sort/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/sort/index.md @@ -7,7 +7,7 @@ l10n: {{JSRef}} -**`sort()`** は {{jsxref("Array")}} のメソッドで、配列の要素を[その場](https://ja.wikipedia.org/wiki/In-place%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0)でソートし、ソートされた同じ配列の参照を返します。既定のソート順は昇順で、要素を文字列に変換してから、 UTF-16 コード単位の値の並びとして比較します。 +**`sort()`** は {{jsxref("Array")}} のメソッドで、配列の要素を[その場 (in-place)](https://ja.wikipedia.org/wiki/In-place%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0) でソートし、ソートされた同じ配列の参照を返します。既定のソート順は昇順で、要素を文字列に変換してから、 UTF-16 コード単位の値の並びとして比較します。 ソートの時間的・空間的予測値は実装に依存するため、保証はできません。 @@ -89,7 +89,7 @@ function compareNumbers(a, b) { } ``` -`sort()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#generic_array_methods)です。このメソッドは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。文字列も配列風ですが、文字列は不変なので、このメソッドを適用するのには適していません。 +`sort()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。このメソッドは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。文字列も配列風ですが、文字列は不変なので、このメソッドを適用するのには適していません。 ## 例 diff --git a/files/ja/web/javascript/reference/global_objects/array/splice/index.md b/files/ja/web/javascript/reference/global_objects/array/splice/index.md index a7976586c48672..3f06118401d6a4 100644 --- a/files/ja/web/javascript/reference/global_objects/array/splice/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/splice/index.md @@ -2,44 +2,44 @@ title: Array.prototype.splice() slug: Web/JavaScript/Reference/Global_Objects/Array/splice l10n: - sourceCommit: 9b38f886d21c5d0a428f58acb20c4d0fc6c2e098 + sourceCommit: fb85334ffa4a2c88d209b1074909bee0e0abd57a --- {{JSRef}} -**`splice()`** メソッドは、[その場](https://ja.wikipedia.org/wiki/In-place%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0)で既存の要素を取り除いたり、置き換えたり、新しい要素を追加したりすることで、配列の内容を変更します。 +**`splice()`** は {{jsxref("Array")}} インスタンスのメソッドは、[その場 (in-place)](https://ja.wikipedia.org/wiki/In-place%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0) で既存の要素を取り除いたり、置き換えたり、新しい要素を追加したりすることで、配列の内容を変更します。 + +元の配列を変更せずに、ある部分を除去したり置き換えたりした新しい配列を作成するには {{jsxref("Array/toSpliced", "toSpliced()")}} を使用してください。配列を変更せずに配列の一部にアクセスするには {{jsxref("Array/slice", "slice()")}} を参照してください。 {{EmbedInteractiveExample("pages/js/array-splice.html")}} ## 構文 -```js -splice(start); -splice(start, deleteCount); -splice(start, deleteCount, item1); -splice(start, deleteCount, item1, item2, itemN); +```js-nolint +splice(start) +splice(start, deleteCount) +splice(start, deleteCount, item1) +splice(start, deleteCount, item1, item2) +splice(start, deleteCount, item1, item2, /* …, */ itemN) ``` ### 引数 - `start` - - : 配列を変更する先頭の位置です。 - - 配列の長さより大きい場合、`start` は配列の長さに設定されます。 - この場合、削除される要素はありませんが、このメソッドは追加関数として動作し、提供された項目の数だけ要素を追加します。 - - 値が負の数の場合は、配列の末尾から要素数だけ戻ったところから始まります。 - （`-1` が原点で、`-n` は最後の要素から `n` 番目であることを意味し、したがって位置が `array.length - n` であるのと同等です）。 - `start` が `-Infinity` であった場合は、 `0` の位置から始まります。 + - : 配列の変更を始める位置のゼロから始まるインデックスで、[整数に変換されます](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#整数への変換)。 + - インデックスが負の場合、配列の末尾からさかのぼって数えます。 `start < 0` の場合、 `start + array.length` が使用されます。 + - `start < -array.length` の場合は `0` が使用されます。 + - `start >= array.length` の場合、要素は削除されませんが、メソッドは追加関数として動作し、指定された数だけ要素を追加します。 + - `start` が省略された場合（そして `splice()` が引数なしで呼び出された場合）、何も削除されません。これは `undefined` を渡すと `0` に変換されるのとは異なります。 - `deleteCount` {{optional_inline}} - : 配列の `start` の位置から取り除く古い要素の個数を示す整数です。 - `deleteCount` 引数が省略された場合、または `array.length - start` 以上 (つまり、`start` から始めて配列に残っている要素の数以上) の場合、`start` 以降のすべての要素が取り除かれます。ただし、 `item1` 引数が存在する場合は省略できません。 + `deleteCount` が省略された場合、または `deleteCount` の値が `start` で指定した位置より後の要素数以上の場合、 `start` から配列の末尾までのすべての要素が削除されます。ただし、任意の `itemN` 引数を渡したい場合は、 `start` より後の要素をすべて削除するために `deleteCount` として `Infinity` を渡す必要があります。明示的に `undefined` を渡すと、[変換](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#integer_conversion)されて `0` になるからです。 - `deleteCount` が `0` または負の数の場合、どの要素も取り除かれません。この場合、少なくとも 1 つの新しい要素を指定する必要があります (以下参照)。 + `deleteCount` が `0` または負の数の場合、どの要素も取り除かれません。この場合、少なくとも 1 つの新しい要素を指定する必要があります（以下参照）。 - `item1`, …, `itemN` {{optional_inline}} @@ -57,7 +57,11 @@ splice(start, deleteCount, item1, item2, itemN); ## 解説 -取り除こうとする要素数と異なる数の要素を挿入するように指定した場合、配列の `length` は変更されます。 +`splice()` メソッドは[変更メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#コピーメソッドと変更メソッド)です。 `this` の内容を変更します。指定した挿入する要素数と除去される要素数が異なる場合、配列の `length` も変更されます。同時に、 [`@@species`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/@@species) を使用して、返す新しい配列インスタンスを作成します。 + +削除された部分が[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#sparse_arrays)の場合、 `splice()` が返す配列も疎配列になり、対応するインデックスは空のスロットになります。 + +`splice()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。このメソッドは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。文字列も配列風ですが、文字列は不変なので、このメソッドを適用するのには適していません。 ## 例 @@ -87,8 +91,8 @@ const removed = myFish.splice(2, 0, "drum", "guitar"); const myFish = ["angel", "clown", "drum", "mandarin", "sturgeon"]; const removed = myFish.splice(3, 1); -// removed は ["mandarin"] // myFish は ["angel", "clown", "drum", "sturgeon"] +// removed は ["mandarin"] ``` ### 2 の位置から 1 つ取り除いて "trumpet" を挿入 @@ -141,6 +145,33 @@ const removed = myFish.splice(2); // removed は ["mandarin", "sturgeon"] ``` +### 疎配列に対する splice() の使用 + +`splice()` メソッドは疎配列であることを維持します。 + +```js +const arr = [1, , 3, 4, , 6]; +console.log(arr.splice(1, 2)); // [empty, 3] +console.log(arr); // [1, 4, empty, 6] +``` + +### 配列以外のオブジェクトに対する splice() の呼び出し + +`splice()` メソッドは `this` の `length` プロパティを読み込みます。そして、必要に応じて整数キーのプロパティと `length` プロパティを更新します。 + +```js +const arrayLike = { + length: 3, + unrelated: "foo", + 0: 5, + 2: 4, +}; +console.log(Array.prototype.splice.call(arrayLike, 0, 1, 2, 3)); +// [ 5 ] +console.log(arrayLike); +// { '0': 2, '1': 3, '3': 4, length: 4, unrelated: 'foo' } +``` + ## 仕様書 {{Specifications}} @@ -151,6 +182,12 @@ const removed = myFish.splice(2); ## 関連情報 -- {{jsxref("Array.prototype.push()", "push()")}} / {{jsxref("Array.prototype.pop()", "pop()")}}— 配列の末尾の要素の追加/削除 -- {{jsxref("Array.prototype.unshift()", "unshift()")}} / {{jsxref("Array.prototype.shift()", "shift()")}}— 配列の先頭の要素の追加/削除 -- {{jsxref("Array.prototype.concat()", "concat()")}}— 配列に他の配列や値をつないでできた新しい配列を返す +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド +- {{jsxref("Array")}} +- {{jsxref("Array.prototype.concat()")}} +- {{jsxref("Array.prototype.push()")}} +- {{jsxref("Array.prototype.pop()")}} +- {{jsxref("Array.prototype.shift()")}} +- {{jsxref("Array.prototype.slice()")}} +- {{jsxref("Array.prototype.toSpliced()")}} +- {{jsxref("Array.prototype.unshift()")}} From 33c6687335ae83f2eb94106132b339894d640e7d Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 11 Nov 2023 15:52:40 +0900 Subject: [PATCH 037/141] =?UTF-8?q?Array.t*=EF=BD=9Ew*=20=E3=83=A1?= =?UTF-8?q?=E3=82=BD=E3=83=83=E3=83=89=E3=81=AE=E8=A8=98=E4=BA=8B=E3=82=92?= =?UTF-8?q?=E6=9B=B4=E6=96=B0=20(#16904)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * リンクフラグメントを修正 * リンクフラグメントを修正 * 2023/09/12 時点の英語版に同期 * 2023/09/07 時点の英語版に同期 * 2023/09/07 時点の英語版に同期 * 2023/09/19 時点の英語版に同期 * typoを修正 --------- Co-authored-by: potappo --- .../global_objects/array/tosorted/index.md | 2 +- .../global_objects/array/tospliced/index.md | 2 +- .../global_objects/array/tostring/index.md | 65 ++++++++++++++++--- .../global_objects/array/unshift/index.md | 45 ++++++++++--- .../global_objects/array/values/index.md | 63 ++++++++++++++---- .../global_objects/array/with/index.md | 11 ++-- 6 files changed, 153 insertions(+), 35 deletions(-) diff --git a/files/ja/web/javascript/reference/global_objects/array/tosorted/index.md b/files/ja/web/javascript/reference/global_objects/array/tosorted/index.md index 5c70e982ddce1c..c9ac6b5767d552 100644 --- a/files/ja/web/javascript/reference/global_objects/array/tosorted/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/tosorted/index.md @@ -35,7 +35,7 @@ toSorted(compareFn) `compareFn` 引数の情報については {{jsxref("Array/sort", "sort()")}} を参照してください。 -[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#sparse_arrays)が使用された場合、 `toSorted()` メソッドは空のスロットを `undefined` という値があるものとして反復処理します。 +[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#疎配列)が使用された場合、 `toSorted()` メソッドは空のスロットを `undefined` という値があるものとして反復処理します。 `toSorted()` メソッドは[汎用](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。 `this` の値が `length` プロパティを持っており、整数のキーのプロパティがあることのみを期待します。 diff --git a/files/ja/web/javascript/reference/global_objects/array/tospliced/index.md b/files/ja/web/javascript/reference/global_objects/array/tospliced/index.md index fa89f7bce19d5b..2c190656f87d6d 100644 --- a/files/ja/web/javascript/reference/global_objects/array/tospliced/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/tospliced/index.md @@ -51,7 +51,7 @@ toSpliced(start, deleteCount, item1, item2, /* …, */ itemN) `toSpliced()` メソッドは `splice()` と同様に、一度に複数のことを行います。指定されたインデックスの位置から、指定された数の要素を配列から除去し、同じインデックスの位置に指定された要素を挿入します。しかし、元の配列を変更するのではなく、新しい配列を返します。したがって、削除された要素はこのメソッドからは返されません。 -`toSpliced()` メソッドは決して[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#sparse_arrays)を生成しません。疎配列の場合、空のスロットは新しい配列の `undefined` に置き換わります。 +`toSpliced()` メソッドは決して[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#疎配列)を生成しません。疎配列の場合、空のスロットは新しい配列の `undefined` に置き換わります。 `toSpliced()` メソッドは[汎用](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。 `this` の値が `length` プロパティを持っており、整数のキーのプロパティがあることのみを期待します。 diff --git a/files/ja/web/javascript/reference/global_objects/array/tostring/index.md b/files/ja/web/javascript/reference/global_objects/array/tostring/index.md index 353ebd1008ad07..013d6b50ec9d6d 100644 --- a/files/ja/web/javascript/reference/global_objects/array/tostring/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/tostring/index.md @@ -2,21 +2,25 @@ title: Array.prototype.toString() slug: Web/JavaScript/Reference/Global_Objects/Array/toString l10n: - sourceCommit: 968e6f1f3b6f977a09e116a0ac552459b741eac3 + sourceCommit: 5c3c25fd4f2fbd7a5f01727a65c2f70d73f1880a --- {{JSRef}} -**`toString()`** メソッドは、指定された配列とその要素を表す文字列を返します。 +**`toString()`** は {{jsxref("Array")}} インスタンスのメソッドで、指定された配列とその要素を表す文字列を返します。 -{{EmbedInteractiveExample("pages/js/array-tostring.html","shorter")}} +{{EmbedInteractiveExample("pages/js/array-tostring.html", "shorter")}} ## 構文 -```js -toString(); +```js-nolint +toString() ``` +### 引数 + +なし。 + ### 返値 配列の要素の文字列表現です。 @@ -35,15 +39,55 @@ console.log(Array.prototype.toString.call({ join: () => 1 })); // 1 と出力 配列を文字列値として表す必要がある場合や、配列が文字列の結合として参照されるとき、 JavaScript は `toString` メソッドを自動的に呼び出します。 +`Array.prototype.toString` は他の配列も含めて、再帰的にそれぞれの要素を文字列に変換します。Array.prototype.toString` が返す文字列には区切り文字がないので、入れ子配列は平坦化されたように見えます。 + +```js +const matrix = [ + [1, 2, 3], + [4, 5, 6], + [7, 8, 9], +]; + +console.log(matrix.toString()); // 1,2,3,4,5,6,7,8,9 +``` + +配列が循環している（コンテナーそのものである要素を格納している）場合、ブラウザーは循環参照を無視することで無限の再帰を避けます。 + +```js +const arr = []; +arr.push(1, [3, arr, 4], 2); +console.log(arr.toString()); // 1,3,,4,2 +``` + ## 例 -### toString の使用 +### toString() の使用 ```js const array1 = [1, 2, "a", "1a"]; -console.log(array1.toString()); -// 期待される出力: "1,2,a,1a" +console.log(array1.toString()); // "1,2,a,1a" +``` + +### 疎配列における toString() の使用 + +`join()` の動作に従い、 `toString()` は空のスロットを `undefined` と同じように扱い、余分な区切り文字を生成します： + +```js +console.log([1, , 3].toString()); // '1,,3' +``` + +### 配列以外のオブジェクトに対する toString() の呼び出し + +`toString()` は[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#generic_array_methods)です。このメソッドは `this` が `join()` メソッドを持っていることを期待します。ない場合は、代わりに `Object.prototype.toString()` を使用します。 + +```js +console.log(Array.prototype.toString.call({ join: () => 1 })); +// 1; a number +console.log(Array.prototype.toString.call({ join: () => undefined })); +// undefined +console.log(Array.prototype.toString.call({ join: "not function" })); +// "[object Object]" ``` ## 仕様書 @@ -56,4 +100,9 @@ console.log(array1.toString()); ## 関連情報 +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド +- {{jsxref("Array")}} - {{jsxref("Array.prototype.join()")}} +- {{jsxref("Array.prototype.toLocaleString()")}} +- {{jsxref("TypedArray.prototype.toString()")}} +- {{jsxref("String.prototype.toString()")}} diff --git a/files/ja/web/javascript/reference/global_objects/array/unshift/index.md b/files/ja/web/javascript/reference/global_objects/array/unshift/index.md index 1a2858c73db647..204dd52a0021a4 100644 --- a/files/ja/web/javascript/reference/global_objects/array/unshift/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/unshift/index.md @@ -2,26 +2,27 @@ title: Array.prototype.unshift() slug: Web/JavaScript/Reference/Global_Objects/Array/unshift l10n: - sourceCommit: 968e6f1f3b6f977a09e116a0ac552459b741eac3 + sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de --- {{JSRef}} -**`unshift()`** メソッドは、配列の最初に 1 つ以上の要素を追加し、新しい配列の長さを返します。 +**`unshift()`** は {{jsxref("Array")}} インスタンスのメソッドで、指定された要素を配列の先頭に追加し、新しい配列の長さを返します。 {{EmbedInteractiveExample("pages/js/array-unshift.html")}} ## 構文 -```js -unshift(element0); -unshift(element0, element1); -unshift(element0, element1, /* … ,*/ elementN); +```js-nolint +unshift() +unshift(element1) +unshift(element1, element2) +unshift(element1, element2, /* …, */ elementN) ``` ### 引数 -- `elementN` +- `element1`, …, `elementN` - : `arr` の先頭に追加する要素。 ### 返値 @@ -34,9 +35,7 @@ unshift(element0, element1, /* … ,*/ elementN); {{jsxref("Array.prototype.push()")}} は `unshift()` と似た動作をしますが、配列の末尾に対して行う点が異なります。 -`Array.prototype.unshift()` は意図的に汎用化されています。このメソッドは，配列に類似したオブジェクトに対して呼び出すことができます。 `length` プロパティ、すなわち連続の最後を示すゼロベースの数値プロパティがないオブジェクトでは、意味のある動作ができない可能性があります。 - -複数の要素が引数として渡された場合、引数として渡されたものと全く同じ順番で、オブジェクトの最初のチャンクに挿入されることに注意してください。したがって、 `unshift` を `n` 個の引数で 1 回呼び出すのと、1 個の引数で `n` 回（例えばループを使って）呼び出すのとでは同じ結果にはなりません。 +複数の要素が引数として渡された場合、引数として渡されたものと全く同じ順番で、オブジェクトの最初のチャンクに挿入されることに注意してください。したがって、 `unshift` を `n` 個の引数で **1 回**呼び出すのと、**1 個**の引数で `n` 回（例えばループを使って）呼び出すのとでは同じ結果にはなりません。 例をご覧ください。 @@ -57,6 +56,8 @@ console.log(arr); // [3, 2, 1, 4, 5, 6] ``` +`unshift()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。このメソッドは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。文字列も配列風ですが、文字列は不変なので、このメソッドを適用するのには適していません。 + ## 例 ### unshift の使用 @@ -77,6 +78,27 @@ arr.unshift([-7, -6], [-5]); // 新しい配列の長さは 8 // arr is [ [-7, -6], [-5], [-4, -3], -2, -1, 0, 1, 2 ] ``` +### 配列以外のオブジェクトに対する unshift() の呼び出し + +`unshift()` メソッドは `this` の `length` プロパティを読み込みます。 `0` から `length - 1` までの範囲にあるすべてのインデックスを、引数の数だけ右にシフトします（この数だけ値を増加します）。次に、 `0` から始めるには、各インデックスを `unshift()` に渡した引数で設定します。最後に、`length` を前回の長さに、前に追加した要素の数を加えた値に設定します。 + +```js +const arrayLike = { + length: 3, + unrelated: "foo", + 2: 4, +}; +Array.prototype.unshift.call(arrayLike, 1, 2); +console.log(arrayLike); +// { '0': 1, '1': 2, '4': 4, length: 5, unrelated: 'foo' } + +const plainObj = {}; +// length プロパティがないため、 length は 0 +Array.prototype.unshift.call(plainObj, 1, 2); +console.log(plainObj); +// { '0': 1, '1': 2, length: 2 } +``` + ## 仕様書 {{Specifications}} @@ -88,7 +110,10 @@ arr.unshift([-7, -6], [-5]); // 新しい配列の長さは 8 ## 関連情報 - [`Array.prototype.unshift` の修正を含むポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array) +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド +- {{jsxref("Array")}} - {{jsxref("Array.prototype.push()")}} - {{jsxref("Array.prototype.pop()")}} - {{jsxref("Array.prototype.shift()")}} - {{jsxref("Array.prototype.concat()")}} +- {{jsxref("Array.prototype.splice()")}} diff --git a/files/ja/web/javascript/reference/global_objects/array/values/index.md b/files/ja/web/javascript/reference/global_objects/array/values/index.md index cc3bf5c18db9f6..2023096afd9a1a 100644 --- a/files/ja/web/javascript/reference/global_objects/array/values/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/values/index.md @@ -2,24 +2,28 @@ title: Array.prototype.values() slug: Web/JavaScript/Reference/Global_Objects/Array/values l10n: - sourceCommit: dadaa03da92fc616814454b761a6c783100f7e3b + sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de --- {{JSRef}} -**`values()`** メソッドは、配列の各インデックスの値を含む新しい「配列[イテレーター](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#イテレータープロトコル)」オブジェクトを返します。 +**`values()`** は {{jsxref("Array")}} インスタンスのメソッドで、配列の各インデックスの値を含む新しい「[配列イテレーター](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#イテレータープロトコル)」オブジェクトを返します。 {{EmbedInteractiveExample("pages/js/array-values.html")}} ## 構文 -```js -values(); +```js-nolint +values() ``` +### 引数 + +なし。 + ### 返値 -新しい反復可能なイテレーターオブジェクトです。 +新しい[反復可能なイテレーターオブジェクト](/ja/docs/Web/JavaScript/Reference/Global_Objects/Iterator)です。 ## 解説 @@ -29,6 +33,10 @@ values(); Array.prototype.values === Array.prototype[Symbol.iterator]; // true ``` +[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#sparse_arrays)に使用された場合、 `values()` メソッドは空のスロットを `undefined` の値である可能用に反復処理します。 + +`values()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。このメソッドは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。 + ## 例 ### for...of ループを用いた反復処理 @@ -64,7 +72,7 @@ console.log(iterator.next().value); // undefined > **警告:** 配列イテレーターオブジェクトは、一回のみ使用可能なオブジェクトになります。再利用しないでください。 -`values()` で返される反復可能オブジェクトは再利用できません。 `next().done = true` または `currentIndex > length` になった場合、 [`for...of` ループは終了](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#interactions_between_the_language_and_iteration_protocols)し、それ以降の反復処理は効果がありません。 +`values()` で返される反復可能オブジェクトは再利用できません。 `next().done = true` または `currentIndex > length` になった場合、 [`for...of` ループは終了](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#言語と反復処理プロトコルの対話)し、それ以降の反復処理は効果がありません。 ```js const arr = ["a", "b", "c", "d", "e"]; @@ -111,6 +119,38 @@ arr[1] = "n"; console.log(iterator.next().value); // "n" ``` +### 疎配列の反復処理 + +`values()` は空のスロットを `undefined` であるかのように処理します。 + +```js +for (const element of [, "a"].values()) { + console.log(element); +} +// undefined +// 'a' +``` + +### 配列以外のオブジェクトに対する values() の呼び出し + +`values()` メソッドは `this` の `length` プロパティを読み込み、そのキーが `length` より小さい非負の整数である各プロパティにアクセスします。 + +```js +const arrayLike = { + length: 3, + 0: "a", + 1: "b", + 2: "c", + 3: "d", // length が 3 であるため values() からは無視される +}; +for (const entry of Array.prototype.values.call(arrayLike)) { + console.log(entry); +} +// a +// b +// c +``` + ## 仕様書 {{Specifications}} @@ -122,9 +162,10 @@ console.log(iterator.next().value); // "n" ## 関連情報 - [`Array.prototype.values` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array) -- {{jsxref("Array.prototype.keys()")}} +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド +- {{jsxref("Array")}} - {{jsxref("Array.prototype.entries()")}} -- {{jsxref("Array.prototype.forEach()")}} -- {{jsxref("Array.prototype.every()")}} -- {{jsxref("Array.prototype.some()")}} -- [ポリフィル](https://github.com/behnammodi/polyfill/blob/master/array.polyfill.js) +- {{jsxref("Array.prototype.keys()")}} +- [`Array.prototype[@@iterator]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/@@iterator) +- {{jsxref("TypedArray.prototype.values()")}} +- [反復処理プロトコル](/ja/docs/Web/JavaScript/Reference/Iteration_protocols) diff --git a/files/ja/web/javascript/reference/global_objects/array/with/index.md b/files/ja/web/javascript/reference/global_objects/array/with/index.md index aaad58aa16e975..e44a809998dde5 100644 --- a/files/ja/web/javascript/reference/global_objects/array/with/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/with/index.md @@ -2,7 +2,7 @@ title: Array.prototype.with() slug: Web/JavaScript/Reference/Global_Objects/Array/with l10n: - sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de + sourceCommit: d78e56f238d41d5f1e050ed7b04179d2b657d573 --- {{JSRef}} @@ -35,11 +35,13 @@ arrayInstance.with(index, value) ## 解説 -with()` メソッドは、配列の指定された位置の値を変更し、指定されたインデックスの要素を指定された値で置き換えた新しい配列を返します。元の配列は変更しません。これにより、配列メソッドを連鎖させながら操作を行うことができます。 +`with()` メソッドは、配列の指定された位置の値を変更し、指定されたインデックスの要素を指定された値で置き換えた新しい配列を返します。元の配列は変更しません。これにより、配列メソッドを連鎖させながら操作を行うことができます。 -`with()` メソッドは決して[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#sparse_arrays)を生成しません。疎配列の場合、空のスロットは新しい配列の `undefined` に置き換わります。 +`with()` と {{jsxref("Array/at", "at()")}} を組み合わせることで、負のインデックスを用いた配列の書き込みと読み込み（それぞれ）ができます。 -`with()` メソッドは[汎用](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。 `this` の値が `length` プロパティを持っており、整数のキーのプロパティがあることのみを期待します。 +`with()` メソッドは決して[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#疎配列)を生成しません。疎配列の場合、空のスロットは新しい配列の `undefined` に置き換わります。 + +`with()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。このメソッドは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。 ## 例 @@ -100,4 +102,5 @@ console.log(Array.prototype.with.call(arrayLike, 0, 1)); - {{jsxref("Array.prototype.toReversed()")}} - {{jsxref("Array.prototype.toSorted()")}} - {{jsxref("Array.prototype.toSpliced()")}} +- {{jsxref("Array.prototype.at()")}} - {{jsxref("TypedArray.prototype.with()")}} From 9f06bf395751e1c0714ad3cf7a5a32a81a7c9971 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 11 Nov 2023 16:18:06 +0900 Subject: [PATCH 038/141] =?UTF-8?q?=E3=80=8C=E5=8F=8D=E5=BE=A9=E5=87=A6?= =?UTF-8?q?=E7=90=86=E3=83=A1=E3=82=BD=E3=83=83=E3=83=89=E3=80=8D=E3=81=AE?= =?UTF-8?q?=E7=94=A8=E8=AA=9E=E3=82=92=E7=B5=B1=E4=B8=80=20(#16910)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 「反復処理メソッド」の用語を統一 * typo を修正 --------- Co-authored-by: potappo --- .../reference/global_objects/array/every/index.md | 6 +++--- .../reference/global_objects/array/filter/index.md | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/files/ja/web/javascript/reference/global_objects/array/every/index.md b/files/ja/web/javascript/reference/global_objects/array/every/index.md index ab75892991f916..65897cef334e2b 100644 --- a/files/ja/web/javascript/reference/global_objects/array/every/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/every/index.md @@ -21,7 +21,7 @@ every(callbackFn, thisArg) ### 引数 - `callbackFn` - - : 配列のそれぞれの要素に対して実行する関数です。要素がテストに合格した場合は[真値](/ja/docs/Glossary/Truthy)返し、そうでなければ[偽値](/ja/docs/Glossary/Falsy)を返す必要があります。この関数は以下の引数で呼び出されます。 + - : 配列のそれぞれの要素に対して実行する関数です。要素がテストに合格した場合は[真値](/ja/docs/Glossary/Truthy)を返し、そうでなければ[偽値](/ja/docs/Glossary/Falsy)を返す必要があります。この関数は以下の引数で呼び出されます。 - `element` - : 配列内で現在処理されている要素です。 - `index` @@ -29,7 +29,7 @@ every(callbackFn, thisArg) - `array` - : `every()` が実行されている配列です。 - `thisArg` {{optional_inline}} - - : `callbackFn` を実行するときに `this` として使用される値です。[反復可能メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復可能メソッド)を参照してください。 + - : `callbackFn` を実行するときに `this` として使用される値です。[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)を参照してください。 ### 返値 @@ -37,7 +37,7 @@ every(callbackFn, thisArg) ## 解説 -`every()` メソッドは[反復可能メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#iterative_methods)です。配列のそれぞれの要素に対して、指定された `callbackFn` 関数が[偽値](/ja/docs/Glossary/Falsy)を返すまで一度ずつ呼び出します。 そのような要素が見つかった場合、 `every()` は直ちに `false` を返し、配列の反復処理を中止します。そうでない場合、 `callbackFn` がすべての要素に対して[真値](/ja/docs/Glossary/Truthy)を返すと、 `every()` は `true` を返します。 +`every()` メソッドは[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)です。配列のそれぞれの要素に対して、指定された `callbackFn` 関数が[偽値](/ja/docs/Glossary/Falsy)を返すまで一度ずつ呼び出します。 そのような要素が見つかった場合、 `every()` は直ちに `false` を返し、配列の反復処理を中止します。そうでない場合、 `callbackFn` がすべての要素に対して[真値](/ja/docs/Glossary/Truthy)を返すと、 `every()` は `true` を返します。 `every` は数学における「∀ （すべての / for all）」記号と同様のふるまいをします。特に、空の配列に対しては `true` を返します。（[空集合](https://ja.wikipedia.org/wiki/空集合#性質)のすべての要素が与えられた任意の条件を満たすことは[空虚に真](https://en.wikipedia.org/wiki/Vacuous_truth)です。） diff --git a/files/ja/web/javascript/reference/global_objects/array/filter/index.md b/files/ja/web/javascript/reference/global_objects/array/filter/index.md index f052aa1ad7e9c4..bc1b17ca749d96 100644 --- a/files/ja/web/javascript/reference/global_objects/array/filter/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/filter/index.md @@ -31,7 +31,7 @@ filter(callbackFn, thisArg) - : `filter()` が呼び出された配列です。 - `thisArg` {{optional_inline}} - - : `callbackFn` を実行する際に `this` として使用される値。[反復可能メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復可能メソッド)を参照してください。 + - : `callbackFn` を実行する際に `this` として使用される値。[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)を参照してください。 ### 返値 @@ -39,7 +39,7 @@ filter(callbackFn, thisArg) ## 解説 -`filter()` メソッドは[反復可能メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復可能メソッド)です。指定された `callbackFn` 関数を配列の各要素に対して一度ずつ呼び出し、 `callbackFn` が[真値](/ja/docs/Glossary/Truthy)を返したすべての要素からなる新しい配列を生成します。 `callbackFn` は値が代入されている配列の添字に対してのみ呼び出されます。 +`filter()` メソッドは[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)です。指定された `callbackFn` 関数を配列の各要素に対して一度ずつ呼び出し、 `callbackFn` が[真値](/ja/docs/Glossary/Truthy)を返したすべての要素からなる新しい配列を生成します。 `callbackFn` は値が代入されている配列の添字に対してのみ呼び出されます。 `callbackFn` は値が割り当てられている配列インデックスに対してのみ呼び出されます。[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#疎配列)の空のスロットに対しては呼び出されません。 From 7bce36edae7a8c6350686f11efae0ed47e4d0894 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 11 Nov 2023 16:36:56 +0900 Subject: [PATCH 039/141] =?UTF-8?q?TypedArray=20=E3=81=AE=E3=83=97?= =?UTF-8?q?=E3=83=AD=E3=83=91=E3=83=86=E3=82=A3=E3=81=AE=E8=A8=98=E4=BA=8B?= =?UTF-8?q?=E3=82=92=E6=9B=B4=E6=96=B0=20(#16905)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 2023/04/10 時点の英語版に同期 * 2023/09/12 時点の英語版に同期 * 2023/09/12 時点の英語版に同期 * 2023/09/07 時点の英語版に同期 * 2023/09/12 時点の英語版に同期 * 2023/09/12 時点の英語版に同期 --- .../global_objects/typedarray/@@species/index.md | 4 ++-- .../reference/global_objects/typedarray/buffer/index.md | 6 +++--- .../global_objects/typedarray/bytelength/index.md | 8 ++++---- .../global_objects/typedarray/byteoffset/index.md | 4 ++-- .../global_objects/typedarray/bytes_per_element/index.md | 6 +++--- .../reference/global_objects/typedarray/length/index.md | 8 ++++---- 6 files changed, 18 insertions(+), 18 deletions(-) diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/@@species/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/@@species/index.md index 659cac07a26c8a..ba94573921d3a7 100644 --- a/files/ja/web/javascript/reference/global_objects/typedarray/@@species/index.md +++ b/files/ja/web/javascript/reference/global_objects/typedarray/@@species/index.md @@ -1,8 +1,8 @@ --- -title: get TypedArray[@@species] +title: TypedArray[@@species] slug: Web/JavaScript/Reference/Global_Objects/TypedArray/@@species l10n: - sourceCommit: 194d3e00cb93a6e5ea44812548f4131cb17f0381 + sourceCommit: bf81c9ed7de8cfd94cf1fc7f77e23b987f753a8b --- {{JSRef}} diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/buffer/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/buffer/index.md index 34943ec4576760..291f48d9d01a01 100644 --- a/files/ja/web/javascript/reference/global_objects/typedarray/buffer/index.md +++ b/files/ja/web/javascript/reference/global_objects/typedarray/buffer/index.md @@ -7,9 +7,9 @@ l10n: {{JSRef}} -**`buffer`** アクセサープロパティは、構築時に _TypedArray_ から参照されるようになった {{jsxref("ArrayBuffer")}} を表します。 +**`buffer`** は {{jsxref("TypedArray")}} インスタンスのアクセサープロパティで、構築時点にこの型付き配列が参照する {{jsxref("ArrayBuffer")}} または {{jsxref("SharedArrayBuffer")}} を返します。 -{{EmbedInteractiveExample("pages/js/typedarray-buffer.html","shorter")}} +{{EmbedInteractiveExample("pages/js/typedarray-buffer.html", "shorter")}} ## 解説 @@ -47,5 +47,5 @@ console.log(arr.buffer === buffer); // true ## 関連情報 -- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Typed_arrays) +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays) - {{jsxref("TypedArray")}} diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/bytelength/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/bytelength/index.md index db6508ffdf7657..17b8e7f81d1ad3 100644 --- a/files/ja/web/javascript/reference/global_objects/typedarray/bytelength/index.md +++ b/files/ja/web/javascript/reference/global_objects/typedarray/bytelength/index.md @@ -2,14 +2,14 @@ title: TypedArray.prototype.byteLength slug: Web/JavaScript/Reference/Global_Objects/TypedArray/byteLength l10n: - sourceCommit: 194d3e00cb93a6e5ea44812548f4131cb17f0381 + sourceCommit: c2445ce1dc3a0170e2fbfdbee10e18a7455c2282 --- {{JSRef}} -**`byteLength`** アクセサープロパティは、型付き配列の長さを（バイト単位で）表します。 +**`byteLength`** は {{jsxref("TypedArray")}} のアクセサープロパティで、この型付き配列の長さを（バイト単位で）返します。 -{{EmbedInteractiveExample("pages/js/typedarray-bytelength.html","shorter")}} +{{EmbedInteractiveExample("pages/js/typedarray-bytelength.html", "shorter")}} ## 解説 @@ -42,5 +42,5 @@ uint8offSet.byteLength; // 6 (due to the offset of the constructed Uint8Array) ## 関連情報 -- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Typed_arrays) +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays) - {{jsxref("TypedArray")}} diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/byteoffset/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/byteoffset/index.md index 853dd04643b563..e42136a6a5ff19 100644 --- a/files/ja/web/javascript/reference/global_objects/typedarray/byteoffset/index.md +++ b/files/ja/web/javascript/reference/global_objects/typedarray/byteoffset/index.md @@ -7,7 +7,7 @@ l10n: {{JSRef}} -**`byteOffset`** アクセサープロパティは、 {{jsxref("ArrayBuffer")}} の開始位置からの型付き配列の (バイト単位の) オフセットを表します。 +**`byteOffset`** は {{jsxref("TypedArray")}} インスタンスのアクセサープロパティで、この型付き配列の {{jsxref("ArrayBuffer")}} または {{jsxref("SharedArrayBuffer")}} の開始位置からの（バイト単位の）オフセットを返します。 ## 解説 @@ -37,5 +37,5 @@ uint8array2.byteOffset; // 3 (as specified when constructing Uint8Array) ## 関連情報 -- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Typed_arrays) +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays) - {{jsxref("TypedArray")}} diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/bytes_per_element/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/bytes_per_element/index.md index 5467f40c234121..d5daae34d738f5 100644 --- a/files/ja/web/javascript/reference/global_objects/typedarray/bytes_per_element/index.md +++ b/files/ja/web/javascript/reference/global_objects/typedarray/bytes_per_element/index.md @@ -2,14 +2,14 @@ title: TypedArray.BYTES_PER_ELEMENT slug: Web/JavaScript/Reference/Global_Objects/TypedArray/BYTES_PER_ELEMENT l10n: - sourceCommit: 194d3e00cb93a6e5ea44812548f4131cb17f0381 + sourceCommit: c2445ce1dc3a0170e2fbfdbee10e18a7455c2282 --- {{JSRef}} **`TypedArray.BYTES_PER_ELEMENT`** プロパティは、型付き配列内の各要素の大きさをバイト単位で表します。 -{{EmbedInteractiveExample("pages/js/typedarray-bytes-per-element.html","shorter")}} +{{EmbedInteractiveExample("pages/js/typedarray-bytes-per-element.html", "shorter")}} ## 値 @@ -75,5 +75,5 @@ new BigUint64Array([]).BYTES_PER_ELEMENT; // 8 ## 関連情報 -- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Typed_arrays) +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays) - {{jsxref("TypedArray")}} diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/length/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/length/index.md index bd4c5e76eb2c2a..677a891aa29e38 100644 --- a/files/ja/web/javascript/reference/global_objects/typedarray/length/index.md +++ b/files/ja/web/javascript/reference/global_objects/typedarray/length/index.md @@ -2,14 +2,14 @@ title: TypedArray.prototype.length slug: Web/JavaScript/Reference/Global_Objects/TypedArray/length l10n: - sourceCommit: 194d3e00cb93a6e5ea44812548f4131cb17f0381 + sourceCommit: c2445ce1dc3a0170e2fbfdbee10e18a7455c2282 --- {{JSRef}} -**`length`** アクセサープロパティは、型付き配列の長さを（要素数で）表します。 +**`length`** は {{jsxref("TypedArray")}} インスタンスのアクセサープロパティで、型付き配列の長さを（要素数で）返します。 -{{EmbedInteractiveExample("pages/js/typedarray-length.html","shorter")}} +{{EmbedInteractiveExample("pages/js/typedarray-length.html", "shorter")}} ## 解説 @@ -42,5 +42,5 @@ uint8.length; // 6 （構築された Uint8Array のオフセットによる） ## 関連情報 -- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Typed_arrays) +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays) - {{jsxref("TypedArray")}} From 1986e5e96a7f1449ea9dd95bf44757d688b3be57 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 11 Nov 2023 17:13:11 +0900 Subject: [PATCH 040/141] =?UTF-8?q?TypedArray=20=E3=81=AE=20@*=EF=BD=9Ee*?= =?UTF-8?q?=20=E3=83=A1=E3=82=BD=E3=83=83=E3=83=89=E3=81=AE=E8=A8=98?= =?UTF-8?q?=E4=BA=8B=E3=82=92=E6=9B=B4=E6=96=B0=20(#16909)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 2023/09/07 時点の英語版に同期 * 2023/09/16 時点の英語版に同期 * 2023/09/15 時点の英語版に同期 * 2023/09/07 時点の英語版に同期 * 2023/11/03 時点の英語版に同期 --- .../typedarray/@@iterator/index.md | 18 +++++-- .../global_objects/typedarray/at/index.md | 25 +++++---- .../typedarray/copywithin/index.md | 16 +++--- .../typedarray/entries/index.md | 20 +++++-- .../global_objects/typedarray/every/index.md | 52 +++++-------------- 5 files changed, 64 insertions(+), 67 deletions(-) diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/@@iterator/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/@@iterator/index.md index e124f56981117d..06213d28646554 100644 --- a/files/ja/web/javascript/reference/global_objects/typedarray/@@iterator/index.md +++ b/files/ja/web/javascript/reference/global_objects/typedarray/@@iterator/index.md @@ -2,30 +2,36 @@ title: TypedArray.prototype[@@iterator]() slug: Web/JavaScript/Reference/Global_Objects/TypedArray/@@iterator l10n: - sourceCommit: 194d3e00cb93a6e5ea44812548f4131cb17f0381 + sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de --- {{JSRef}} -**`@@iterator`** は `TypedArray` オブジェクトのプロパティで、[反復可能プロトコル](/ja/docs/Web/JavaScript/Reference/Iteration_protocols)を実装し、型付き配列を[スプレッド構文](/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax)や [`for...of`](/ja/docs/Web/JavaScript/Reference/Statements/for...of) ループのような反復可能オブジェクトを想定するほとんどの構文で利用できるようにするためのものです。配列の各要素の値を返すイテレーターを返します。 +**`[@@iterator]()`** は {{jsxref("TypedArray")}} インスタンスのプロパティで、[反復可能プロトコル](/ja/docs/Web/JavaScript/Reference/Iteration_protocols)を実装し、型付き配列を[スプレッド構文](/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax)や {{jsxref("Statements/for...of", "for...of")}} ループのような反復可能オブジェクトを想定するほとんどの構文で利用できるようにするためのものです。この型付き配列の各要素の値を返す[配列イテレーターオブジェクト](/ja/docs/Web/JavaScript/Reference/Global_Objects/Iterator)を返します。 このプロパティの初期値は {{jsxref("TypedArray.prototype.values")}} プロパティの初期値と同じ関数オブジェクトです。 +{{EmbedInteractiveExample("pages/js/typedarray-prototype-@@iterator.html")}} + ## 構文 ```js-nolint typedArray[Symbol.iterator]() ``` +### 引数 + +なし。 + ### 返値 -{{jsxref("TypedArray.prototype.values()")}} と同じ返値で、この型付き配列のすべての要素の値を返す、新しい反復可能イテレーターオブジェクトを返します。 +{{jsxref("TypedArray.prototype.values()")}} と同じ返値で、この型付き配列のすべての要素の値を返す、新しい[反復可能イテレーターオブジェクト](/ja/docs/Web/JavaScript/Reference/Global_Objects/Iterator)を返します。 ## 例 ### for...of ループを使用した反復処理 -このメソッドを直接呼び出す必要はめったにないことに注意してください。`@@iterator` メソッドの存在により、型付き配列は[反復可能] (/ja/docs/Web/JavaScript/Reference/Iteration_protocols#反復可能プロトコル)となり、 `for...of` ループのような反復処理構文は、ループするために自動的にこのメソッドを呼び出し、イテレータを取得します。 +このメソッドを直接呼び出す必要はめったにないことに注意してください。`@@iterator` メソッドの存在により、型付き配列は[反復可能](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#反復可能プロトコル)となり、 `for...of` ループのような反復処理構文は、ループするために自動的にこのメソッドを呼び出し、イテレータを取得します。 ```js const arr = new Uint8Array([10, 20, 30, 40, 50]); @@ -59,8 +65,10 @@ console.log(arrIter.next().value); // 50 ## 関連情報 - [`TypedArray.prototype[@@iterator]` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-typed-arrays) -- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Typed_arrays) +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays) - {{jsxref("TypedArray")}} - {{jsxref("TypedArray.prototype.entries()")}} - {{jsxref("TypedArray.prototype.keys()")}} - {{jsxref("TypedArray.prototype.values()")}} +- {{jsxref("Symbol.iterator")}} +- [反復処理プロトコル](/ja/docs/Web/JavaScript/Reference/Iteration_protocols) diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/at/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/at/index.md index ffd02c2b6fe227..7f7ed929f6ddd0 100644 --- a/files/ja/web/javascript/reference/global_objects/typedarray/at/index.md +++ b/files/ja/web/javascript/reference/global_objects/typedarray/at/index.md @@ -7,9 +7,7 @@ l10n: {{JSRef}} -**`at()`** メソッドは整数値を受け取り、その位置にある項目を返します。正の整数値と負の整数値が使用できます。負の整数は、配列の最後の項目から前へ数えます。 - -これは、角括弧記法を使用することに何らかの問題があることを示唆しているわけではありません。例えば、 `array[0]` は最初の項目を返します。しかし、後方の項目、例えば最後の項目には {{jsxref('Array.prototype.length','array.length')}} を使用する代わりに、 `array.at(-1)` を呼び出すことで取得することができます。[（下記の例を参照してください）](#例) +**`at()`** は {{jsxref("TypedArray")}} インスタンスのメソッドで整数値を受け取り、そのインデックスにある項目を返します。整数値には正の整数と負の整数が使用できます。負の整数の場合は、この型付き配列の末尾の項目から前に数えます。このメソッドは {{jsxref("Array.prototype.at()")}} と同じアルゴリズムです。 {{EmbedInteractiveExample("pages/js/typedarray-at.html")}} @@ -22,11 +20,15 @@ at(index) ### 引数 - `index` - - : 返される配列要素の添字（位置）。負の添字を使用した場合は、配列の末尾からの相対位置指定に対応しています。つまり、負の数を使用した場合は、配列の末尾から数えて返される要素を見つけることになります。 + - : 返される配列要素のゼロ基点のインデックスで、[整数に変換されます](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#整数への変換)。負の添字を使用した場合は、配列の末尾から逆に数えた位置です。 `index < 0` であれば、 `index + array.length` がアクセスされます。 ### 返値 -指定された位置に一致する配列の要素です。指定された位置が見つからない場合は {{jsxref('undefined')}} を返します。 +指定されたインデックスに一致する型付き配列の要素です。 `index < -array.length` または `index >= array.length` の場合は、対応するプロパティにアクセスしようとせずに常に {{jsxref("undefined")}} を返します。 + +## 解説 + +詳細は {{jsxref("Array.prototype.at()")}} を参照してください。このメソッドは汎用的ではなく、型付き配列インスタンスに対してのみ呼び出すことができます。 ## 例 @@ -48,7 +50,7 @@ console.log(lastItem); // 18 ### メソッドの比較 -ここでは、{{jsxref('TypedArray')}} の最後から 2 番目の項目を選択するさまざまな方法を比較しています。以下に示すどの方法も有効ですが、`at()` メソッドの簡潔さと読みやすさが際立っています。 +ここでは、 {{jsxref("TypedArray")}} の最後から 2 番目の項目を選択するさまざまな方法を比較しています。以下に示すどの方法も有効ですが、`at()` メソッドの簡潔さと読みやすさが際立っています。 ```js // Our typed array with values @@ -78,7 +80,10 @@ console.log(atWay); // 11 ## 関連情報 - [`TypedArray.prototype.at` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#relative-indexing-method) -- [at() メソッドのポリフィル](https://github.com/tc39/proposal-relative-indexing-method#polyfill). -- {{jsxref("TypedArray.prototype.find()")}} – 指定されたテストに基づき値を返す。 -- {{jsxref("TypedArray.prototype.includes()")}} – 値が配列内にあるかどうかを調べて返す。 -- {{jsxref("TypedArray.prototype.indexOf()")}} – 指定された要素のインデックスを返す。 +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)ガイド +- {{jsxref("TypedArray")}} +- {{jsxref("TypedArray.prototype.findIndex()")}} +- {{jsxref("TypedArray.prototype.indexOf()")}} +- {{jsxref("TypedArray.prototype.with()")}} +- {{jsxref("Array.prototype.at()")}} +- {{jsxref("String.prototype.at()")}} diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/copywithin/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/copywithin/index.md index 444b56461d796b..1132f0ca24e347 100644 --- a/files/ja/web/javascript/reference/global_objects/typedarray/copywithin/index.md +++ b/files/ja/web/javascript/reference/global_objects/typedarray/copywithin/index.md @@ -7,7 +7,7 @@ l10n: {{JSRef}} -**`copyWithin()`** メソッドは、配列内の一連の配列の要素を `target` から始まる位置にコピーします。コピーは第 2、第 3の引数、 `start` と `end` の位置から実施されます。 `end` 引数はオプションで、既定では配列の長さです。このメソッドは {{jsxref("Array.prototype.copyWithin")}} と同じアルゴリズムです。 _TypedArray_ は、ここでは [型付き配列型](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#typedarray_オブジェクト)のうちの一つです。 +**`copyWithin()`** は {{jsxref("TypedArray")}} インスタンスのメソッドで、この型付き配列の一部を同じ型付き配列の別の場所にシャローコピーし、この型付き配列の長さを変更せずに返します。このメソッドは {{jsxref("Array.prototype.copyWithin()")}} と同じアルゴリズムです。 {{EmbedInteractiveExample("pages/js/typedarray-copywithin.html")}} @@ -21,23 +21,23 @@ copyWithin(target, start, end) ### 引数 - `target` - - : 要素をコピーする対象の開始インデックス位置。 + - : 並びのコピー先となるゼロ基点のインデックスで、[整数に変換されます](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#整数への変換)。これは `start` にある要素がコピーされる場所に対応し、`start` から `end` までのすべての要素が後続のインデックスにコピーされます。 - `start` - - : 要素をコピーし始める元の開始インデックス位置。 + - : コピー元でコピーを始める位置のゼロ基点のインデックスで、[整数に変換されます](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#整数への変換)。 - `end` {{optional_inline}} - - : オプション。要素をコピーし終わる元の終了インデックス位置。 + - : コピー元でコピーを終える位置のゼロ基点のインデックスで、[整数に変換されます](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#整数への変換)。 `copyWithin()` はここまでをコピーしますが、 `end` は含みません。 ### 返値 -変更された配列です。 +変更された型付き配列です。 ## 解説 -詳細については、 {{jsxref("Array.prototype.copyWithin")}} をご覧ください +詳細については、 {{jsxref("Array.prototype.copyWithin()")}} をご覧ください。このメソッドは汎用的ではなく、型付き配列インスタンスに対してのみ呼び出すことができます。 ## 例 -### copyWithin の使用 +### copyWithin() の使用 ```js const buffer = new ArrayBuffer(8); @@ -59,4 +59,6 @@ console.log(uint8); // Uint8Array [ 1, 2, 3, 1, 2, 3, 0, 0 ] ## 関連情報 - [`TypedArray.prototype.copyWithin` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-typed-arrays) +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)ガイド - {{jsxref("TypedArray")}} +- {{jsxref("Array.prototype.copyWithin()")}} diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/entries/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/entries/index.md index 6f085a3a2d1b7a..bca42477071d12 100644 --- a/files/ja/web/javascript/reference/global_objects/typedarray/entries/index.md +++ b/files/ja/web/javascript/reference/global_objects/typedarray/entries/index.md @@ -2,12 +2,12 @@ title: TypedArray.prototype.entries() slug: Web/JavaScript/Reference/Global_Objects/TypedArray/entries l10n: - sourceCommit: 194d3e00cb93a6e5ea44812548f4131cb17f0381 + sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de --- {{JSRef}} -**`entries()`** メソッドは、配列内の各インデックスのキーと値のペアを含む新しい配列イテレーターオブジェクトを返します。 +**`entries()`** は {{jsxref("TypedArray")}} インスタンスのメソッドで、型付き配列の各インデックスのキーと値を含む新しい[配列のイテレーター](/ja/docs/Web/JavaScript/Reference/Global_Objects/Iterator)オブジェクトを返します。このメソッドは {{jsxref("Array.prototype.entries()")}} と同じアルゴリズムです。 {{EmbedInteractiveExample("pages/js/typedarray-entries.html")}} @@ -17,9 +17,17 @@ l10n: entries() ``` +### 引数 + +なし。 + ### 返値 -新しい配列イテレーターオブジェクトです。 +新しい[配列イテレーターオブジェクト](/ja/docs/Web/JavaScript/Reference/Global_Objects/Iterator)です。 + +## 解説 + +詳細については、 {{jsxref("Array.prototype.entries()")}} をご覧ください。このメソッドは汎用的ではなく、型付き配列インスタンスに対してのみ呼び出すことができます。 ## 例 @@ -57,8 +65,10 @@ console.log(arrayEntries.next().value); // [4, 50] ## 関連情報 - [`TypedArray.prototype.entries` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-typed-arrays) -- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Typed_arrays) +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)ガイド - {{jsxref("TypedArray")}} - {{jsxref("TypedArray.prototype.keys()")}} - {{jsxref("TypedArray.prototype.values()")}} -- {{jsxref("TypedArray.prototype.@@iterator()", "TypedArray.prototype[@@iterator]()")}} +- [`TypedArray.prototype[@@iterator]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/@@iterator) +- {{jsxref("Array.prototype.entries()")}} +- [Iteration protocols](/ja/docs/Web/JavaScript/Reference/Iteration_protocols) diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/every/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/every/index.md index e1a746352a5696..b72ddb75028bdb 100644 --- a/files/ja/web/javascript/reference/global_objects/typedarray/every/index.md +++ b/files/ja/web/javascript/reference/global_objects/typedarray/every/index.md @@ -2,65 +2,42 @@ title: TypedArray.prototype.every() slug: Web/JavaScript/Reference/Global_Objects/TypedArray/every l10n: - sourceCommit: 194d3e00cb93a6e5ea44812548f4131cb17f0381 + sourceCommit: 4e32a881872958fdf928d8b4d42189fba2e11459 --- {{JSRef}} -**`every()`** メソッドは、提供された関数で実装されたテストに、型付き配列内のすべての要素が合格するかどうかをテストします。このメソッドのアルゴリズムは {{jsxref("Array.prototype.every()")}} と同じです。ここで _TypedArray_ は、[型付き配列型](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#typedarray_オブジェクト)のうちの 1 つです。 +**`every()`** は {{jsxref("TypedArray")}} インスタンスのメソッドで、提供された関数で実装されたテストに、型付き配列内のすべての要素が合格するかどうかをテストします。これは論理値を返します。このメソッドのアルゴリズムは {{jsxref("Array.prototype.every()")}} と同じです。 {{EmbedInteractiveExample("pages/js/typedarray-every.html")}} ## 構文 ```js-nolint -// アロー関数 -every((element) => { /* ... */ } ) -every((element, index) => { /* ... */ } ) -every((element, index, array) => { /* ... */ } ) - -// コールバック関数 every(callbackFn) every(callbackFn, thisArg) - -// インラインコールバック関数 -every(function(element) { /* ... */ }) -every(function(element, index) { /* ... */ }) -every(function(element, index, array){ /* ... */ }) -every(function(element, index, array) { /* ... */ }, thisArg) ``` ### 引数 - `callbackFn` - - - : 各要素をテストする関数です。 - - この関数は、次の引数を伴って呼び出されます。 - + - : 配列のそれぞれの要素に対して実行する関数です。要素がテストに合格した場合は[真値](/ja/docs/Glossary/Truthy)を返し、そうでなければ[偽値](/ja/docs/Glossary/Falsy)を返す必要があります。この関数は以下の引数で呼び出されます。 - `element` - : 現在処理されている型付き配列の要素です。 - `index` - : 現在処理されている型付き配列の要素の添字です。 - `array` - - : `every` が実行されている型付き配列です。 - -- `thisArg` {{Optional_inline}} - - : `callbackFn` を実行するときに `this` として使用すされる値です。 + - : `every()` が実行されている型付き配列です。 +- `thisArg` {{optional_inline}} + - : `callbackFn` を実行する際に `this` として使用する値。[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)を参照してください。 ### 返値 -コールバック関数が型付き配列のすべての要素について{{Glossary("truthy", "真値")}}を返した場合は `true`。それ以外は `false`。 +`callbackFn` 関数がいずれかの要素で{{Glossary("falsy", "偽値")}}を返した場合は、すぐに `false` を返します。それ以外は `true` です。 ## 解説 -`every` は、与えられた `callbackFn` 関数を、配列に含まれる各要素に対して一度ずつ、 `callbackFn` が{{Glossary("falsy", "偽値")}}を返す要素が見つかるまで呼び出します。そのような要素が見つかると、`every` メソッドはただちに `false` を返します。 `callbackFn` がすべての要素に対して{{Glossary("truthy", "真値")}}を返した場合、 `every` は `true` を返します。 - -`callbackFn` は、要素の値、要素の添字、走査中の型付き配列オブジェクトという 3 つの引数を伴って呼び出されます。 - -`thisArg` 引数が `every` に与えられると、それがコールバックの `this` として使用されます。それ以外の場合は `undefined` が `this` の値として使われます。 `callbackFn` が最終的に監視できる `this` の値は、[関数から見た `this` の決定に関する一般的なルール](/ja/docs/Web/JavaScript/Reference/Operators/this)によって決定されます。 - -`every` は呼び出された型付き配列を変更しません。 +詳細については、 {{jsxref("Array.prototype.every()")}} をご覧ください。このメソッドは汎用的ではなく、型付き配列インスタンスに対してのみ呼び出すことができます。 ## 例 @@ -76,15 +53,6 @@ new Uint8Array([12, 5, 8, 130, 44]).every(isBigEnough); // false new Uint8Array([12, 54, 18, 130, 44]).every(isBigEnough); // true ``` -### アロー関数を使用して型付き配列の要素をテストする - -[アロー関数](/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions)によって、同じテストをより短い構文で実現できます。 - -```js -new Uint8Array([12, 5, 8, 130, 44]).every((elem) => elem >= 10); // false -new Uint8Array([12, 54, 18, 130, 44]).every((elem) => elem >= 10); // true -``` - ## 仕様書 {{Specifications}} @@ -96,5 +64,9 @@ new Uint8Array([12, 54, 18, 130, 44]).every((elem) => elem >= 10); // true ## 関連情報 - [`TypedArray.prototype.every` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-typed-arrays) +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)ガイド +- {{jsxref("TypedArray")}} +- {{jsxref("TypedArray.prototype.forEach()")}} - {{jsxref("TypedArray.prototype.some()")}} +- {{jsxref("TypedArray.prototype.find()")}} - {{jsxref("Array.prototype.every()")}} From c784a520c2699683fe3157f5f249ea9f8edc4cff Mon Sep 17 00:00:00 2001 From: Allo Date: Sat, 11 Nov 2023 10:41:21 +0800 Subject: [PATCH 041/141] zh-cn: update the translation of `` --- files/zh-cn/web/html/element/sup/index.md | 159 ++++++++++++++++------ 1 file changed, 119 insertions(+), 40 deletions(-) diff --git a/files/zh-cn/web/html/element/sup/index.md b/files/zh-cn/web/html/element/sup/index.md index e9cb5e37a2378c..47dfdbddfa9d3d 100644 --- a/files/zh-cn/web/html/element/sup/index.md +++ b/files/zh-cn/web/html/element/sup/index.md @@ -1,65 +1,144 @@ --- -title: +title: ：上标元素 slug: Web/HTML/Element/sup --- -**HTML `` 元素**定义了一个文本区域，出于排版的原因，与主要的文本相比，应该展示得更高并且更小。 +{{HTMLSidebar}} - - - - - - - - - - - - - - - - - - - - - - - - - - - -
内容分类流式内容和短语内容
允许的内容短语内容
标签省略{{no_tag_omission}}
允许的父元素可以包含短语内容的任意元素
允许的 ARIA 角色任意
DOM 接口{{domxref("HTMLElement")}}
+[HTML](/zh-CN/docs/Web/HTML) **`` 元素**定义仅出于排版目的而显示为上标的行内文本。上标通常在高出基线的位置以较小的文本呈现。 + +{{EmbedInteractiveExample("pages/tabbed/sup.html", "tabbed-shorter")}} ## 属性 -这个元素仅仅包含[全局属性](/zh-CN/docs/HTML/Global_attributes)。 +该元素仅包含[全局属性](/zh-CN/docs/Web/HTML/Global_attributes)。 -## 用法注解 +## 使用说明 -- 这个元素应该只用于排版目的，也就是改变文本的位置会改变含义，例如在数学中（_f4_，也可以考虑使用 [MathML](/zh-CN/docs/MathML) 公式）或者在法语缩写中（Mlle，Mme 或者 Cie）。 -- 这个元素不能用于样式上的目的，比如产品名称 LaTeX 的样式，这时应该使用 [CSS](/zh-CN/docs/CSS)样式： {{ cssxref("vertical-align") }} 属性的 `super` 值能实现相同效果。 +`` 元素应该只用于排版目的，也就是改变文本的位置以符合印刷习惯或标准，而不能仅用于呈现或外观的目的。 + +例如，要为企业或产品的[字体商标](https://en.wikipedia.org/wiki/Wordmark)添加抬高基线的样式，应该使用 CSS（很可能是 {{cssxref("vertical-align")}}）而不是 ``。可以使用 `vertical-align: super` 或者 `vertical-align: 50%` 来将基线上移 50%。 + +适当的 `` 用例包括（但不限于）： + +- 显示指数，例如“x3”。对于这种情况，尤其是在更复杂的情况下，考虑使用 [MathML](/zh-CN/docs/Web/MathML)。请参阅下面的 [示例](#示例)中的[指数](#指数)。 +- 显示[上标字母](https://en.wikipedia.org/wiki/Superior_letter)，在某些语言中用于呈现某些缩写词。例如，在法语中，单词“mademoiselle”可以缩写为“Mlle”；这是可接受的用例。请参阅示例[上标字母](#上标字母)。 +- 表示序数，例如用“4th”来代替“fourth”。请参阅示例[序数](#序数)。 ## 示例 +### 指数 + +指数，或者说是数字的幂，是上标文本最常见的用法之一。例如： + ```html -

This text is superscripted

+

+ 物理学中最常见的方程之一：E=mc2。 +

``` #### 结果 -This text is superscripted +{{EmbedLiveSample("指数", 650, 80)}} + +### 上标字母 + +从技术上讲，上标字母与上标不是同一回事。但是，在 HTML 中使用 `` 来呈现上标字母是很常见的。一种最常见的上标字母用法是在法语中呈现某些缩写词： + +```html +

Robert a présenté son rapport à Mlle Bernard.

+``` + +#### 结果 + +{{EmbedLiveSample("上标字母", 650, 80)}} + +### 序数 + +序数，例如英语中的“fourth”或西班牙语中的“quinto”，可以使用数字和以上标形式呈现的特定于语言的文本缩写来表示： + +```html +

序数词“fifth”在不同语言中的缩写如下：

+
    +
  • 英语：5th
    • +
  • 法语：5ème
    • +
+``` + +#### 结果 + +{{EmbedLiveSample("序数", 650, 160)}} + +## 技术概要 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ 内容分类 + + 流式内容、短语内容、可感知内容。 +
允许的内容 + 短语内容。 +
标签省略{{no_tag_omission}}
允许的父元素 + 任何接受短语内容的元素。 +
隐式 ARIA 角色 + superscript +
允许的 ARIA 角色任意
DOM 接口{{domxref("HTMLElement")}}
## 规范 {{Specifications}} -## 另见 +## 浏览器兼容性 -- {{ HTMLElement("sub") }} HTML 元素会产生下标。要注意，你不能同时使用它们，你需要 [MathML](/zh-CN/docs/MathML) 来同时产生化学符号旁边的下标和上标，代表它的序号和核子数。 -- [``](/zh-CN/docs/MathML/Element/msub), [``](/zh-CN/docs/MathML/Element/msup), 和 [``](/zh-CN/docs/MathML/Element/msubsup) MathML 元素。 +{{Compat}} -{{HTMLSidebar}} +## 参见 + +- HTML {{HTMLElement("sub")}} 元素会产生下标。注意，你不能同时使用它们，你需要使用 [MathML](/zh-CN/docs/Web/MathML) 来同时产生化学符号旁边的下标和上标，代表它的序号和核子数。 +- MathML 元素：[``](/zh-CN/docs/Web/MathML/Element/msub)、[``](/zh-CN/docs/Web/MathML/Element/msup) 和 [``](/zh-CN/docs/Web/MathML/Element/msubsup)。 +- CSS {{cssxref("vertical-align")}} 属性。 From 4309dd06d214b80db7059ba99a1bd7408612f042 Mon Sep 17 00:00:00 2001 From: Allo Date: Sat, 11 Nov 2023 10:48:36 +0800 Subject: [PATCH 042/141] fixup --- files/zh-cn/web/html/element/sup/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/zh-cn/web/html/element/sup/index.md b/files/zh-cn/web/html/element/sup/index.md index 47dfdbddfa9d3d..6da7b0da27b563 100644 --- a/files/zh-cn/web/html/element/sup/index.md +++ b/files/zh-cn/web/html/element/sup/index.md @@ -5,7 +5,7 @@ slug: Web/HTML/Element/sup {{HTMLSidebar}} -[HTML](/zh-CN/docs/Web/HTML) **`` 元素**定义仅出于排版目的而显示为上标的行内文本。上标通常在高出基线的位置以较小的文本呈现。 +[HTML](/zh-CN/docs/Web/HTML) **`` 元素**定义仅出于排版目的而显示为上标的行内文本。上标通常以较小的文本在高出基线的位置呈现。 {{EmbedInteractiveExample("pages/tabbed/sup.html", "tabbed-shorter")}} @@ -21,7 +21,7 @@ slug: Web/HTML/Element/sup 适当的 `` 用例包括（但不限于）： -- 显示指数，例如“x3”。对于这种情况，尤其是在更复杂的情况下，考虑使用 [MathML](/zh-CN/docs/Web/MathML)。请参阅下面的 [示例](#示例)中的[指数](#指数)。 +- 显示指数，例如“x3”。对于这种情况，尤其是在更复杂的情况下，考虑使用 [MathML](/zh-CN/docs/Web/MathML)。请参阅下面的[示例](#示例)中的[指数](#指数)。 - 显示[上标字母](https://en.wikipedia.org/wiki/Superior_letter)，在某些语言中用于呈现某些缩写词。例如，在法语中，单词“mademoiselle”可以缩写为“Mlle”；这是可接受的用例。请参阅示例[上标字母](#上标字母)。 - 表示序数，例如用“4th”来代替“fourth”。请参阅示例[序数](#序数)。 From 0972cf5728775a282ae3291fc43576f3e46be64a Mon Sep 17 00:00:00 2001 From: A1lo Date: Sat, 11 Nov 2023 14:57:30 +0800 Subject: [PATCH 043/141] add source commit sha --- files/zh-cn/web/html/element/sup/index.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/files/zh-cn/web/html/element/sup/index.md b/files/zh-cn/web/html/element/sup/index.md index 6da7b0da27b563..c0a6f1c768af81 100644 --- a/files/zh-cn/web/html/element/sup/index.md +++ b/files/zh-cn/web/html/element/sup/index.md @@ -1,6 +1,8 @@ --- title: ：上标元素 slug: Web/HTML/Element/sup +l10n: + sourceCommit: 77a67438592286ded44a82bfe6b8a64e8cdf44a9 --- {{HTMLSidebar}} From 29c692d54a3fc7491ace057438c3bc0fd2f84020 Mon Sep 17 00:00:00 2001 From: potappo Date: Sat, 11 Nov 2023 16:13:43 +0900 Subject: [PATCH 044/141] =?UTF-8?q?=E5=A4=89=E6=8F=9B=E3=83=9F=E3=82=B9?= =?UTF-8?q?=E3=81=A8=E6=80=9D=E3=82=8F=E3=82=8C=E3=82=8B=E3=82=82=E3=81=AE?= =?UTF-8?q?=E3=82=92=E6=AD=A3=E3=81=97=E3=81=84=E5=8D=98=E8=AA=9E=E3=81=AB?= =?UTF-8?q?=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/fragmentdirective/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/ja/web/api/fragmentdirective/index.md b/files/ja/web/api/fragmentdirective/index.md index da5548d2b54329..31cac988df82e4 100644 --- a/files/ja/web/api/fragmentdirective/index.md +++ b/files/ja/web/api/fragmentdirective/index.md @@ -7,7 +7,7 @@ l10n: {{SeeCompatTable}} -**`FragmentDirective`** インターフェイスは、現在の文書で強調表示されているテキストフラグメントを表すお武衛j句とです。 +**`FragmentDirective`** インターフェイスは、現在の文書で強調表示されているテキストフラグメントを表すオブジェクトです。 これは {{domxref("Document.fragmentDirective")}} プロパティでアクセスできます。 From f86e50769b501a6625c96e187e11fd3b9ca7b851 Mon Sep 17 00:00:00 2001 From: HoJeong Im <39ghwjd@naver.com> Date: Sat, 11 Nov 2023 22:52:53 +0900 Subject: [PATCH 045/141] [ko]: revise index.md for `webassembly/concepts` (#16449) [add]: add index.md for webassembly/concepts --- files/ko/webassembly/concepts/index.md | 127 +++++++++++++------------ 1 file changed, 65 insertions(+), 62 deletions(-) diff --git a/files/ko/webassembly/concepts/index.md b/files/ko/webassembly/concepts/index.md index 0d7dff36a87c3c..60488864f6b16d 100644 --- a/files/ko/webassembly/concepts/index.md +++ b/files/ko/webassembly/concepts/index.md @@ -1,132 +1,135 @@ --- -title: 웹어셈블리의 컨셉 +title: WebAssembly의 개념 slug: WebAssembly/Concepts +l10n: + sourceCommit: e7dead4a3906bb4289acfee5c13fcea6bd682fa2 --- {{WebAssemblySidebar}} -본 글에서는 웹어셈블리의 작동원리 뒤에 숨어있는 컨셉을 설명함과 동시에 웹어셈블리의 목표, 웹어셈블리가 해결할 수 있는 문제, 그리고 웹브라우저 렌더링 엔진 안에서 웹어셈블리가 작동하는 원리에 관해 설명하려고 합니다. +이번 글에서는 WebAssembly의 작동원리 뒤에 숨어있는 컨셉을 설명함과 동시에 WebAssembly의 목표, WebAssembly가 해결할 수 있는 문제, 그리고 웹브라우저 렌더링 엔진 안에서 WebAssembly가 작동하는 원리에 관해 설명하려고 합니다. -## 웹어셈블리가 뭔가요? +## WebAssembly가 뭔가요? -WebAssembly는 최신 웹 브라우저에서 실행할 수 있는 새로운 유형의 코드이며 새로운 기능과 성능 면에서 큰 이점을 제공합니다. 직접 코드를 작성하는 것이 아니라 C, C ++, RUST 등의 저급 소스 언어를 효과적으로 컴파일하도록 고안되었습니다. +WebAssembly는 최신 웹 브라우저에서 실행할 수 있는 새로운 유형의 코드이며, 새로운 기능과 성능 면에서 큰 이점을 제공합니다. 직접 코드를 작성하는 것이 아니라 C, C++, RUST 등의 소스 언어를 효과적으로 컴파일하도록 고안되었습니다. -이는 웹 플랫폼에 큰 영향을 미칩니다. 이전에 불가능했던 웹에서 실행되는 클라이언트 응용 프로그램을 사용하여 웹에서 여러 언어로 작성된 코드를 네이티브에 가까운 속도로 실행하는 길을 제공합니다. +WebAssembly는 웹 플랫폼에 큰 영향을 미칩니다. 이전에 불가능했던 웹에서 실행되는 클라이언트 응용 프로그램을 사용하여 웹에서 여러 언어로 작성된 코드를 네이티브에 가까운 속도로 실행하는 방법을 제공합니다. -게다가 WebAssembly 코드를 사용하여 이를 활용하는 방법을 알 필요조차 없습니다. WebAssembly 모듈을 웹 (또는 Node.js) 앱으로 가져와 JavaScript를 통해 사용할 수 있도록 할 수 있습니다. JavaScript 프레임 워크는 WebAssembly를 사용하여 대규모 성능 이점과 새로운 기능을 제공하면서도 웹 개발자가 쉽게 기능을 사용할 수 있도록 할 수 있습니다. +게다가 WebAssembly 코드를 생성하는 방법을 알 필요조차 없습니다. WebAssembly 모듈을 웹(또는 Node.js) 애플리케이션으로 가져와 JavaScript를 통해 사용할 수 있도록 할 수 있습니다. JavaScript 프레임워크는 WebAssembly를 사용하여 대규모 성능 이점과 새로운 기능을 제공하면서도, 웹 개발자가 쉽게 기능을 사용할 수 있도록 할 수 있습니다. -## 웹어셈블리의 목표 +## WebAssembly의 목표 -웹어셈블리는 [W3C 웹어셈블리 커뮤니티 그룹](https://www.w3.org/community/webassembly/)에서 다음과 같은 목표들로 만들어지고 있는 열린 표준입니다: +WebAssembly는 [W3C WebAssembly 커뮤니티 그룹](https://www.w3.org/community/webassembly/)에서 아래와 같은 목표로 만들어지고 있는 열린 표준입니다. -- 빠르고, 효과적이고, 이식성이 좋을 것 — 웹어셈블리 코드는 [일반적인 하드웨어들이 제공하는 기능](http://webassembly.org/docs/portability/#assumptions-for-efficient-execution)을 활용하여 여러종류의 플랫폼 위에서 거의 네이티브에 가까운 속도로 실행될 수 있습니다. -- 읽기 쉽고 디버깅이 가능할 것 — 웹어셈블리는 저수준 어셈블리 언어지만, 손으로 작성하고, 보고, 디버깅할 수는 있도록, 사람이 충분히 읽을 수 있는 수준의 텍스트 포맷을 갖고있습니다 (아직 스펙이 다듬어지는 중이긴 합니다). -- 안전함을 유지할 것 — 웹어셈블리는 샌드박싱된 실행환경에서 안전하게 돌아갈 수 있도록 설계되었습니다. 웹상의 다른 코드와 마찬가지로, 웹어셈블리 코드도 브라우저의 동일한 출처(same-origin)와 권한정책을 강제할 것입니다. -- 웹을 망가뜨리지 않을 것 — 웹어셈블리는 다른 웹 기술과 마찰없이 사용되면서 하위호환성을 관리할 수 있도록 설계되었습니다. +- 빠르고, 효과적이고, 이식성이 좋을 것 - WebAssembly 코드는 [일반적인 하드웨어들이 제공하는 기능](http://webassembly.org/docs/portability/#assumptions-for-efficient-execution)을 활용하여 여러 종류의 플랫폼 위에서 거의 네이티브에 가까운 속도로 실행될 수 있습니다. +- 읽기 쉽고 디버깅이 가능할 것 - WebAssembly는 저수준 어셈블리 언어지만, 직접 작성하고, 보고, 디버깅할 수 있으며 사람이 충분히 읽을 수 있는 수준의 텍스트 형식을 갖고있습니다(명세는 아직 검토중입니다). +- 안전함을 유지할 것 - WebAssembly는 샌드박싱된 실행환경에서 안전하게 돌아갈 수 있도록 설계되었습니다. 웹상의 다른 코드와 마찬가지로, WebAssembly 코드도 브라우저의 동일한 출처(same-origin)와 권한정책을 지켜야합니다. +- 웹을 망가뜨리지 않을 것 - WebAssembly는 다른 웹 기술과 마찰없이 사용되면서 하위호환성을 관리할 수 있도록 설계되었습니다. -> **참고:** 웹어셈블리는 웹과 JavaScript 환경 밖에서도 사용될 것입니다. ([Non-web embeddings](http://webassembly.org/docs/non-web/) 참고). +> **참고:** WebAssembly는 웹과 JavaScript 환경 밖에서도 사용될 것입니다([Non-web embeddings](http://webassembly.org/docs/non-web/)를 참고해주세요). ## WebAssembly는 웹 플랫폼에 어떻게 적용될까요? -웹 플랫폼을 다음과 같이 두 부분으로 나눠서 생각해볼 수 있습니다: +웹 플랫폼을 다음과 같이 두 부분으로 나눠서 생각해볼 수 있습니다. - JavaScript같이 우리가 만든 앱을 구성하는 코드를 돌리는 가상머신(VM). -- 웹브라우저나 하드웨어의 기능을 호출해서 웹앱이 뭔가를 하도록 만들 수 있는 [Web API](/ko/docs/Web/API)의 집합 ([DOM](/ko/docs/Web/API/Document_Object_Model), [CSSOM](/ko/docs/Web/API/CSS_Object_Model), [WebGL](/ko/docs/Web/API/WebGL_API), [IndexedDB](/ko/docs/Web/API/IndexedDB_API), [Web Audio API](/ko/docs/Web/API/Web_Audio_API) 등등). -이전까지 웹브라우저의 VM은 오직 JavaScript만 불러올 수 있었습니다. 오늘날의 웹에서 사람들이 겪는 대부분의 문제를 해결하기에 JavaScript가 충분히 잘 작동했다고 볼 수 있기는 합니다. 하지만 3D 게임이나, 가상/증강현실, 영상처리, 이미지/비디오 편집, 그 외 네이티브 성능을 필요로하는 여러 분야의 사례([웹어셈블리 사용례](http://webassembly.org/docs/use-cases/) 참고)에서는 성능상의 문제에 부딪혀왔죠. +- 웹브라우저나 하드웨어의 기능을 호출해서 웹앱이 뭔가를 하도록 만들 수 있는 [Web API](/ko/docs/Web/API)의 집합 ([DOM](/ko/docs/Web/API/Document_Object_Model), [CSSOM](/ko/docs/Web/API/CSS_Object_Model), [WebGL](/ko/docs/Web/API/WebGL_API), [IndexedDB](/ko/docs/Web/API/IndexedDB_API), [Web Audio API](/ko/docs/Web/API/Web_Audio_API) 등). -거기에 더해서 아주 큰 JavaScript 애플리케이션을 다운받고 파싱하고 컴파일하는 비용은 감당하기 힘들 수가 있습니다. 모바일이라거나 다른 리소스가 많이 제한된 환경에서는 이런 성능병목현상이 더 두드러지게 나타나기도 합니다. +지금까지 VM은 오직 JavaScript만 불러올 수 있었습니다. 오늘날의 웹에서 사람들이 겪고 있는 대부분의 문제를 해결하기에 JavaScript가 충분히 잘 작동했다고 볼 수 있기는 합니다. 하지만 3D 게임이나, 가상/증강현실, 컴퓨터 비전, 이미지/비디오 편집, 그 외 네이티브 성능을 필요로하는 여러 분야의 사례([WebAssembly 사용 예제](http://webassembly.org/docs/use-cases/) 참고)에서는 성능 문제에 직면하게 됩니다. -WebAssembly는 JavaScript와는 다른 언어이지만, JavaScript를 대체하기 위해서 만들어지지는 않았습니다. 대신 JavaScript와 나란히 돌아가면서 서로의 부족한 점을 보완하여 웹개발자가 두 언어의 강점을 동시에 취할 수 있도록 설계되었죠: +거기에 더해서, 아주 큰 JavaScript 애플리케이션을 다운받고 구문 분석 및 컴파일하는 비용은 감당하기 힘들 수가 있습니다. 모바일 및 기타 리소스가 많이 제한된 환경에서는 이런 성능 병목현상이 더 두드러지게 나타나기도 합니다. -- JavaScript는 웹 애플리케이션을 작성하기에 좋은 유연하고 표현력 있는 고수준 언어입니다. 게다가 동적타입 언어라 컴파일 과정이 필요 없고, 강력한 프레임웍, 라이브러리, 여타 도구들을 제공하는 거대한 생태계 또한 갖고 있습니다. -- 웹어셈블리는 어셈블리같이 컴팩트한 바이너리 포맷을 갖고있는 저수준 언어로써 네이티브에 가까운 성능을 제공하기도 하고, C++이나 Rust같이 저수준의 메모리 모델을 가진 언어의 컴파일 타겟으로써 그런 언어로 작성된 프로그램을 웹에서 돌릴 수 있게 해줍니다. (참고로 웹어셈블리는 미래에 가비지콜렉션 메모리 모델을 가진 언어들을 지원할 [고수준 목표](http://webassembly.org/docs/high-level-goals/)도 갖고 있습니다.) +WebAssembly는 JavaScript와는 다른 언어이지만, JavaScript를 대체하기 위해서 만들어지지는 않았습니다. 대신 JavaScript와 나란히 돌아가면서 서로의 부족한 점을 보완하여 웹개발자가 두 언어의 강점을 동시에 취할 수 있도록 설계되었죠. -브라우저에 WebAssembly 가 등장하면서 앞에서 이야기했던 VM은 이제 JavaScript와 WebAssembly 두 가지 유형의 코드를 불러오고 실행합니다. +- JavaScript는 웹 애플리케이션을 작성하기에 좋은 유연하고 표현력 있는 고수준 언어입니다. 여기에는 많은 장점이 있습니다. 동적 타입 언어라 컴파일 과정이 필요 없고, 강력한 프레임워크, 라이브러리 및 기타 도구를 제공하는 거대한 생태계가 있습니다. +- WebAssembly는 네이티브에 가까운 성능으로 실행되고 C++ 및 Rust와 같이 저수준의 메모리 모델을 가진 언어의 컴파일 대상을 제공합니다. 또한, 웹에서 실행할 수 있는 컴팩트한 바이너리 형식을 갖고있는 저수준 어셈블리형 언어입니다(WebAssembly는 미래에 가비지 컬렉션 메모리 모델을 가진 언어를 지원한다는 [고수준 목표](http://webassembly.org/docs/high-level-goals/)도 갖고 있습니다). -필요하면 다른 형식의 코드끼리 서로를 호출할 수도 있습니다 — [웹어셈블리 JavaScript API](/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly)가 익스포트된 웹어셈블리 코드를 일반적으로 부를 수 있는 JavaScript 함수로 감싸고, 웹어셈블리 코드에서도 동기적으로 일반 JavaScript 함수를 호출할 수 있습니다. 사실 웹어셈블리의 기본 단위는 모듈이라고 불리고, 웹어셈블리 모듈은 여러모로 ES6 모듈과 대칭적입니다. +브라우저에 WebAssembly가 등장하면서 앞에서 이야기했던 가상머신(VM)은 이제 JavaScript와 WebAssembly 두 가지 유형의 코드를 불러오고 실행합니다. -### 웹어셈블리의 핵심 컨셉 +필요하면 다른 형식의 코드끼리 서로를 호출할 수도 있습니다. [WebAssembly JavaScript API](/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly)가 내보낸 WebAssembly 코드를 일반적으로 부를 수 있는 JavaScript 함수로 감싸고, WebAssembly 코드에서도 동기적으로 일반 JavaScript 함수를 호출할 수 있습니다. 사실 WebAssembly의 기본 단위는 모듈이라고 불리고, WebAssembly 모듈은 여러모로 ES6 모듈과 대칭적입니다. -어떻게 웹어셈블리가 브라우저에서 돌아가는지 이해하기 위해서 필요한 몇가지 핵심 컨셉들이 있습니다. 이 모든 컨셉은 [웹어셈블리 JavaScript API](/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly)에 반영돼있습니다. +### WebAssembly의 핵심 컨셉 -- **모듈**: 실행 가능한 컴퓨터 코드로 브라우저에서 컴파일된 WebAssembly 바이너리입니다. 모듈은 stateless이며 [Blob](/ko/docs/Web/API/Blob)처럼 Windows와 [worker](/ko/docs/MDN/Doc_status/API/WebWorkers) 간에 [`postMessage()`](/ko/docs/Web/API/MessagePort/postMessage)를 통해 명시적으로 공유 할 수 있습니다. 모듈은 ES2015 모듈과 마찬가지로 가져오기 및 내보내기를 선언합니다. -- **메모리**: 웹어셈블리의 저수준 메모리 접근 명령어에 의해 읽고 쓰여지는 바이트들의 선형 배열인, 사이즈 조절이 가능한 어레이버퍼(ArrayBuffer)입니다. -- **테이블**: (안전성이나 이식성 등을 위해서) 날(raw) 바이트로 메모리에 저장될 수 없는 (예를 들면 함수를 가리키는) 레퍼런스의, 사이즈 조절 가능한 형식 지정된 배열입니다. -- **인스턴스**: 모듈과 그 모듈이 사용하는 모든 상태의 쌍입니다. 모듈의 상태로는 메모리, 테이블, 임포트된 값의 집합 등이 있습니다. 인스턴스는 ES6 모듈처럼 특정한 전역에 특정한 임포트의 집합과 함께 로드됩니다. +WebAssembly가 브라우저에서 실행되는 방식을 이해하려면 필요한 몇가지 핵심 개념이 있습니다. 모든 개념은 [WebAssembly JavaScript API](/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly)에 1대 1로 반영되어 있습니다. -JavaScript API는 모듈, 메모리, 테이블, 인스턴스를 생성하는 방법을 제공합니다. JavaScript 코드에서는, 웹어셈블리 인스턴스에서 일반 JavaScript 함수의 형태로 노출한 익스포트를 동기적으로 호출할 수 있습니다. 웹어셈블리 코드 또한, 웹어셈블리 인스턴스의 임포트 형식으로 넘겨받은 임의의 JavaScript 함수를 동기적으로 호출할 수 있습니다. +- **모듈**: 브라우저에서 실행 가능한 기계어 코드로 컴파일된 WebAssembly 바이너리를 나타냅니다. 모듈은 stateless이며 [Blob](/ko/docs/Web/API/Blob)처럼 Windows와 [worker](/ko/docs/MDN/Doc_status/API/WebWorkers) 간에 [`postMessage()`](/ko/docs/Web/API/MessagePort/postMessage)를 통해 명시적으로 공유 할 수 있습니다. 모듈은 ES 모듈과 마찬가지로 가져오기 및 내보내기를 선언합니다. +- **메모리**: WebAssembly의 저수준 메모리 접근 명령어에 의해 읽고 쓰여지는 바이트들의 선형 배열인, 크기 조절이 가능한 ArrayBuffer입니다. +- **테이블**: 안전성이나 이식성 이유로 원시(raw) 바이트로 메모리에 저장될 수 없는, 크기 조절 가능한 형식 지정된 배열(예, 함수)입니다. +- **인스턴스**: 모듈과 그 모듈이 사용하는 모든 상태의 쌍입니다. 모듈의 상태로는 메모리, 테이블, 가져온 값의 집합 등이 있습니다. 인스턴스는 ES 모듈처럼 특정한 전역에 특정한 가져오기의 모듈 집합과 함께 로드됩니다. -웹어셈블리 코드를 다운로드하고, 컴파일하고, 돌리는 일련의 과정을 온전히 JavaScript로 제어할 수 있기 때문에, JavaScript 개발자는 웹어셈블리를 그저 효율적으로 고성능 함수를 생성하기 위한 JavaScript의 기능이라고 생각해도 무방합니다. +JavaScript API는 개발자에게 모듈, 메모리, 테이블 및 인스턴스를 생성하는 방법을 제공합니다. JavaScript 코드에서는, WebAssembly 인스턴스에서 일반 JavaScript 함수의 형태로 노출한 내보내기를 동기적으로 호출할 수 있습니다. WebAssembly 코드 또한, WebAssembly 인스턴스의 가져오기 형식으로 넘겨받은 임의의 JavaScript 함수를 동기적으로 호출할 수 있습니다. -미래에는 웹어셈블리 모듈이 (` hasta que el código se haya recuperado y ejecutado. El analizador de HTML de Firefox 4 y posteriores soporta análisis especulativo fuera del hilo de ejecución principal. Este analiza anticipadamente mientras el codigo está siendo descargado y ejecutado. Como en Firefox 3.5 y 3.6, el analizador de HTML es el que inicia la carga especulativa de código, las hojas de estilos y las imagenes que va encontrando en el flujo de la página. Sin embargo en Firefox 4 y posteriores el analizador de HTML también ejecuta el algoritmo especulativo de la construcción del árbol HTML. La ventaja es que cuando lo especulado tiene exito, no hay necesidad de reanalizar la parte del archivo de entrada que ya fue analizada junto la descarga de código, hojas de estilo y las imágenes. La desventaja es que se ha realizado un trabajo inútil cuando la especulación fracasa. Este documento le ayuda a evitar este tipo de situaciones que hacen que la especulación falle y ralentize la carga de la página. diff --git a/files/es/glossary/sql/index.md b/files/es/glossary/sql/index.md index d676c8c60f4b4c..38cab7ecf416b5 100644 --- a/files/es/glossary/sql/index.md +++ b/files/es/glossary/sql/index.md @@ -5,6 +5,8 @@ l10n: sourceCommit: d2a9f2e26a8139d4bb270d7dc3cddd8b848719fe --- +{{GlossarySidebar}} + **SQL** por sus siglas en inglés significa Lenguaje de Consulta Estructurada (Structured Query Language), es un lenguaje de programación diseñado para actualizar, obtener, y calcular información en bases de datos relacionales. ## Véase también diff --git a/files/es/glossary/statement/index.md b/files/es/glossary/statement/index.md index 9f721bb4fc1f38..9f63e8bc4595f9 100644 --- a/files/es/glossary/statement/index.md +++ b/files/es/glossary/statement/index.md @@ -3,6 +3,8 @@ title: Sentencias slug: Glossary/Statement --- +{{GlossarySidebar}} + En un lenguaje de programación, una **sentencia** es una línea de código al mando de una tarea Cada programa consiste en una secuencia de sentencias. ## Aprender más diff --git a/files/es/glossary/static_typing/index.md b/files/es/glossary/static_typing/index.md index 00c3b3306d7a5a..2c379470ab6155 100644 --- a/files/es/glossary/static_typing/index.md +++ b/files/es/glossary/static_typing/index.md @@ -3,6 +3,8 @@ title: Tipificación estática slug: Glossary/Static_typing --- +{{GlossarySidebar}} + Un lenguaje de **tipo estático** es un lenguaje (como Java, C, o C++) en donde los tipos de variables se conocen en tiempo de compilación. En la mayoria de estos lenguajes, los tipos deben ser expresamente indicados por el programador; en otros casos (como en OCaml), la inferencia de tipos permite al programador no indicar sus tipos de variables. ## Learn more diff --git a/files/es/glossary/string/index.md b/files/es/glossary/string/index.md index b13a840a98647b..23b2387c4786dd 100644 --- a/files/es/glossary/string/index.md +++ b/files/es/glossary/string/index.md @@ -3,6 +3,8 @@ title: String slug: Glossary/String --- +{{GlossarySidebar}} + En cualquier lenguaje de programación, un string es una secuencia de {{Glossary("character","caracteres")}} usado para representar el texto. En {{Glossary("JavaScript","JavaScript")}}, un String es uno de los {{Glossary("Primitivo", "valores primitivos")}} y el objeto {{jsxref("String")}} es un {{Glossary("wrapper","envoltorio")}} alrededor de un String primitivo. diff --git a/files/es/glossary/svg/index.md b/files/es/glossary/svg/index.md index 00dfc989574140..89aa19e87e1f68 100644 --- a/files/es/glossary/svg/index.md +++ b/files/es/glossary/svg/index.md @@ -3,6 +3,8 @@ title: SVG slug: Glossary/SVG --- +{{GlossarySidebar}} + Gráficos vectoriales escalables (del inglés _**S**calable **V**ector **G**raphics_) o **SVG** es un formato de imagen vectorial 2D basado en una sintaxis de {{Glossary("XML")}} . {{Glossary("W3C")}} comenzó a trabajar en SVG a finales de la década de 1990, pero SVG solo se hizo popular cuando {{Glossary("Microsoft Internet Explorer", "Internet Explorer")}} 9 salió con soporte para SVG. Todos los principales {{Glossary("browser","navegadores")}} ahora son compatibles con SVG. diff --git a/files/es/glossary/svn/index.md b/files/es/glossary/svn/index.md index d86450ac85794a..b85ff0321786de 100644 --- a/files/es/glossary/svn/index.md +++ b/files/es/glossary/svn/index.md @@ -3,6 +3,8 @@ title: SVN slug: Glossary/SVN --- +{{GlossarySidebar}} + Apache Subversion (**SVN**) es un sistema ({{Glossary("SCM")}}) de código abierto de control de almacenamiento. Permite a los desarrolladores mantener un historial de modificaciones de texto y código. Aunque SVN también puede manejar archivos binarios, no recomendamos su utilización para tales archivos. ## Saber más diff --git a/files/es/glossary/symmetric-key_cryptography/index.md b/files/es/glossary/symmetric-key_cryptography/index.md index 077474268b435b..0ba8ca2bfc2faf 100644 --- a/files/es/glossary/symmetric-key_cryptography/index.md +++ b/files/es/glossary/symmetric-key_cryptography/index.md @@ -3,6 +3,8 @@ title: Criptografía de clave simétrica slug: Glossary/Symmetric-key_cryptography --- +{{GlossarySidebar}} + La criptografía de clave simétrica es un término utilizado para los algoritmos criptográficos que utilizan la misma clave para el cifrado y el descifrado. La clave se suele llamar "clave simétrica" o "clave secreta". Esto generalmente se contrasta con {{Glossary ("public-key cryptography","criptografía de clave pública")}} en el que las claves se generan en pares, y la transformación realizada por una clave solo se puede revertir utilizando la otra clave. diff --git a/files/es/glossary/synchronous/index.md b/files/es/glossary/synchronous/index.md index 0d91d55520fa29..1a833237b9f8dd 100644 --- a/files/es/glossary/synchronous/index.md +++ b/files/es/glossary/synchronous/index.md @@ -3,6 +3,8 @@ title: Sincrónico slug: Glossary/Synchronous --- +{{GlossarySidebar}} + Sincrónico _se_ refiere a la comunicación en tiempo real donde cada lado recibe (y si es necesario, procesa y responde) mensajes instantáneamente (o lo más cerca posible a instantáneamente). Un ejemplo humano es el teléfono — durante una llamada telefónica tiendes a responder a la otra persona inmediatamente. diff --git a/files/es/glossary/tag/index.md b/files/es/glossary/tag/index.md index d1442312b1df4a..acfcf8cfa15c3c 100644 --- a/files/es/glossary/tag/index.md +++ b/files/es/glossary/tag/index.md @@ -3,6 +3,8 @@ title: Etiqueta slug: Glossary/Tag --- +{{GlossarySidebar}} + En {{Glossary("HTML")}} una etiqueta es usada para crear un {{Glossary("elemento")}}. El **nombre** de un elemento HTML es el **nombre** utilizado entre paréntesis angulares así como la etiqueta `

` para el párrafo. Tenga en cuenta que el nombre de la etiqueta de cierre está precedido por un carácter de barra inclinada, `

`, y que en los elementos vacíos la etiqueta final no es necesaria ni permitida. Si no se mencionan atributos, se utilizan valores por defecto en cada caso. ## Aprende más diff --git a/files/es/glossary/tcp/index.md b/files/es/glossary/tcp/index.md index bff628ee0aef84..86e4f3482438b5 100644 --- a/files/es/glossary/tcp/index.md +++ b/files/es/glossary/tcp/index.md @@ -3,6 +3,8 @@ title: TCP slug: Glossary/TCP --- +{{GlossarySidebar}} + **TCP** (**Protocolo de Control de Transmisión**, por sus siglas en inglés _Transmission Control Protocol_) es {{Glossary("protocol","protocolo")}} de red importante que permite que dos anfitriones (_hosts_) se conecten e intercambien flujos de datos. TCP garantiza la entrega de datos y {{Glossary("Packet","paquetes")}} en el mismo orden en que se enviaron. Vint Cerf y Bob Kahn, científicos de DARPA por aquél entonces, diseñaron TCP en la década de los 70. El rol de TCP es garantizar que los paquetes se entreguen de forma confiable y sin errores. TCP tiene control de concurrencia, lo que significa que las solicitudes iniciales serán pequeñas, aumentando de tamaño a los niveles de ancho de banda que los ordenadores, servidores y redes puedan soportar. diff --git a/files/es/glossary/three_js/index.md b/files/es/glossary/three_js/index.md index 2645097c67e67c..2014330031a0bd 100644 --- a/files/es/glossary/three_js/index.md +++ b/files/es/glossary/three_js/index.md @@ -3,6 +3,8 @@ title: Three js slug: Glossary/Three_js --- +{{GlossarySidebar}} + three.js es un motor {{Glossary("WebGL")}} basado en {{Glossary("JavaScript")}} que puede ejecutar juegos con GPU y otras aplicaciones con gráficos directamente desde el {{Glossary("browser")}} La biblioteca three.js proporciona muchas funciones y {{Glossary("API","APIs")}} para dibujar escenas 3D en su navegador. diff --git a/files/es/glossary/truthy/index.md b/files/es/glossary/truthy/index.md index 2cca02ca269717..67c9e45a63cd15 100644 --- a/files/es/glossary/truthy/index.md +++ b/files/es/glossary/truthy/index.md @@ -3,6 +3,8 @@ title: Truthy slug: Glossary/Truthy --- +{{GlossarySidebar}} + En {{Glossary("JavaScript")}}, un **valor verdadero** es un valor que se considera `true/verdadero` cuando es evaluado en un contexto {{Glossary("Booleano")}}. Todos los valores son verdaderos a menos que se definan como {{Glossary("Falso", "falso")}} (es decir, excepto `false`, `0`, `""`, `null`, `undefined`, y `NaN`). {{Glossary("JavaScript")}} usa {{Glossary("Type_Conversion", "coerción")}} en los contextos Booleanos. @@ -28,5 +30,3 @@ if (-Infinity) - {{Glossary("Falsy")}} - {{Glossary("Type_Conversion", "Coercion")}} - {{Glossary("Boolean")}} - -{{QuickLinksWithSubpages("/es/docs/Glossary")}} diff --git a/files/es/glossary/type/index.md b/files/es/glossary/type/index.md index 9be84acf9fa66c..1162100fbac4b3 100644 --- a/files/es/glossary/type/index.md +++ b/files/es/glossary/type/index.md @@ -3,6 +3,8 @@ title: Type slug: Glossary/Type --- +{{GlossarySidebar}} + El **tipo** (_type_ o _data type_) es una característica of una {{glossary("value", "valor")}} que afecta al tipo de datos que puede almacenar; por ejemplo, en JavaScript un {{domxref("Boolean")}} solo tiene valores `true`/`false`, mientras que un {{domxref("String")}} contiene cadenas de texto, un {{domxref("Number")}} contiene números de cualquier tipo, y así sucesivamente. El tipo de datos de un valor también afecta a qué operaciones son válidas en ese valor. Por ejemplo, un entero puede multiplicarse por un entero, pero no por una cadena. diff --git a/files/es/glossary/type_coercion/index.md b/files/es/glossary/type_coercion/index.md index e428798af5d628..29344c2cfa8371 100644 --- a/files/es/glossary/type_coercion/index.md +++ b/files/es/glossary/type_coercion/index.md @@ -3,6 +3,8 @@ title: Coerción slug: Glossary/Type_coercion --- +{{GlossarySidebar}} + La coerción es la conversión automática o implicita de valores de un tipo de dato a otro (Ejemplo: de cadena de texto a número). La conversión es similar a la coerción porque ambas convierten valores de un tipo de dato a otro pero con una diferencia clave - la coerción es implícita mientras que la conversión puede ser implícita o explícita. ## Examples diff --git a/files/es/glossary/ui/index.md b/files/es/glossary/ui/index.md index 94d60f76642c70..a4fc1217cc978f 100644 --- a/files/es/glossary/ui/index.md +++ b/files/es/glossary/ui/index.md @@ -3,6 +3,8 @@ title: IU slug: Glossary/UI --- +{{GlossarySidebar}} + La _Interfaz de Usuario_ (IU) es el medio que facilita la interacción entre el usuario y la máquina. En el campo de la informática, puede ser un teclado, un joystick, una pantalla, o un programa. En el caso del software, puede ser una entrada de línea de comandos, una página web, un formulario, o el front-end de cualquier aplicación. ## Saber más diff --git a/files/es/glossary/undefined/index.md b/files/es/glossary/undefined/index.md index 6089352be220b0..546144df0c38fe 100644 --- a/files/es/glossary/undefined/index.md +++ b/files/es/glossary/undefined/index.md @@ -3,6 +3,8 @@ title: undefined slug: Glossary/Undefined --- +{{GlossarySidebar}} + Un valor **{{Glossary("primitivo")}}** automáticamente asignado a las **variables** que solo han sido declarados o a los **{{Glossary("Argument","argumentos")}}** formales para los cuales no existe argumentos reales. ## Aprender más diff --git a/files/es/glossary/unicode/index.md b/files/es/glossary/unicode/index.md index 14db453ebe2874..c7fd72b4395c10 100644 --- a/files/es/glossary/unicode/index.md +++ b/files/es/glossary/unicode/index.md @@ -3,6 +3,8 @@ title: Unicode slug: Glossary/Unicode --- +{{GlossarySidebar}} + Unicode es un {{Glossary("Character set", "conjunto de caracteres")}} estándar que numera y define {{Glossary("Character", "caracteres")}} de diferentes idiomas, sistemas de escritura y símbolos. Al asignar un número a cada caracter, los programadores pueden crear {{Glossary("Character encoding", "codificaciones de caracteres")}}, para permitir que las computadoras almacenen, procesen y transmitan cualquier combinación de idiomas en el mismo archivo o programa. Antes de Unicode, era difícil y propenso a errores mezclar idiomas en los mismos datos. Por ejemplo, un juego de caracteres almacenaría caracteres japoneses y otro almacenaría el alfabeto árabe. Si no estuviera claramente marcado qué partes de los datos estaban en qué juego de caracteres, otros programas y computadoras mostrarían el texto incorrectamente o lo dañarían durante el procesamiento. Si alguna vez has visto texto en el que caracteres como comillas entrecruzadas (`“”`) fueron reemplazadas por un galimatías como `£`, entonces has visto este problema, conocido como [Mojibake](https://es.wikipedia.org/wiki/Mojibake). diff --git a/files/es/glossary/uri/index.md b/files/es/glossary/uri/index.md index f732705ed18f53..b726276a5f72d6 100644 --- a/files/es/glossary/uri/index.md +++ b/files/es/glossary/uri/index.md @@ -3,6 +3,8 @@ title: URI slug: Glossary/URI --- +{{GlossarySidebar}} + Un **URI** _(Identificador Uniforme de Recursos de sus siglas en inglés: Uniform Resource Identifier)_ es una cadena que se refiere a un recurso. Los más comunes son {{Glossary("URL","URLs")}}, que identifican el recurso dando su ubicación en la Web. {{Glossary("URN","URNs")}}, por el contrario, se refiere a un recurso por un nombre, en un espacio de nombres determinados, como el ISBN(International Standard Book Number) de un libro. ## Aprende más diff --git a/files/es/glossary/url/index.md b/files/es/glossary/url/index.md index 1f8d93f3e33537..02cbe942d156dd 100644 --- a/files/es/glossary/url/index.md +++ b/files/es/glossary/url/index.md @@ -3,6 +3,8 @@ title: URL slug: Glossary/URL --- +{{GlossarySidebar}} + La «**_Uniform Resource Locator_**» (**URL** o _Localizadora Uniforme de Recursos_ en Español) es una cadena de texto que especifica dónde se puede encontrar un recurso (como una página web, una imagen o un video) en Internet. En el contexto de {{Glossary("HTTP")}}, las URLs se denominan "dirección web" o "enlace". Tu {{Glossary("browser", "navegador")}} muestra las URLs en su barra de direcciones, por ejemplo: `https://developer.mozilla.org` — Algunos navegadores muestran solo la parte de una URL después de "//", es decir, el {{Glossary("Domain name", "Nombre de dominio")}}. diff --git a/files/es/glossary/utf-8/index.md b/files/es/glossary/utf-8/index.md index 97567fa1460c74..cc335f0779dd28 100644 --- a/files/es/glossary/utf-8/index.md +++ b/files/es/glossary/utf-8/index.md @@ -3,6 +3,8 @@ title: UTF-8 slug: Glossary/UTF-8 --- +{{GlossarySidebar}} + UTF-8 (UCS Transformation Format 8) es la {{Glossary("Character encoding", "Codificación de caracteres")}} más común en la red. El número de bytes que representan un carácter pueden ser desde uno hasta cuatro. UTF-8 es retrocompatible con {{Glossary("ASCII")}} y puede representar cualquier carácter Unicode estandar. Los primeros 128 carácteres UTF-8 se ajustan a los 128 primeros carácteres ASCII, lo cual significa que los textos escritos en ASCII son válidos en UTF-8. El resto de caracteres usan de dos a cuatro bytes. Cada byte reserva unos bits para albergar información sobre la codificación. Como los caracteres que no son ASCII necesitan más de un byte cuando son almacenados, corren el riesgo de corromperse si estos bytes son separados y no se vuelven a juntar. diff --git a/files/es/glossary/ux/index.md b/files/es/glossary/ux/index.md index 540a0a3c0546b9..75e5339f23cff1 100644 --- a/files/es/glossary/ux/index.md +++ b/files/es/glossary/ux/index.md @@ -3,6 +3,8 @@ title: UX slug: Glossary/UX --- +{{GlossarySidebar}} + **UX** es un acrónimo de User eXperience. Es el estudio de la interacción entre usuarios y un sistema. Su objetivo es hacer que un sistema sea fácil de interactuar desde el punto de vista del usuario. El sistema puede ser cualquier tipo de producto o aplicación con el que un usuario final deba interactuar. Los estudios de UX realizados en una página web, por ejemplo, pueden demostrar si es fácil para los usuarios entender la página, navegar a diferentes áreas y completar tareas comunes, y dónde dichos procesos podrían tener menos fricciones. diff --git a/files/es/glossary/validator/index.md b/files/es/glossary/validator/index.md index f05b9846c136ae..62370b8083de3e 100644 --- a/files/es/glossary/validator/index.md +++ b/files/es/glossary/validator/index.md @@ -3,6 +3,8 @@ title: Validador slug: Glossary/Validator --- +{{GlossarySidebar}} + Un validador es un programa que comprueba errores de sintaxis en el código. Las validadores pueden ser creados para cualquier formato o lenguaje, pero en este contexto se habla de herramientas que comprueban {{Glossary("HTML")}}, {{Glossary("CSS")}}, y {{Glossary("XML")}}. ## Saber más diff --git a/files/es/glossary/value/index.md b/files/es/glossary/value/index.md index 68fa8699db409f..36e8b2e4634ce6 100644 --- a/files/es/glossary/value/index.md +++ b/files/es/glossary/value/index.md @@ -3,6 +3,8 @@ title: Valor slug: Glossary/Value --- +{{GlossarySidebar}} + {{jsSidebar}} En el contexto de datos o un objeto **{{Glossary("Wrapper", "wrapper")}}** alrededor de esos datos, el valor es el **{{Glossary("Primitive", "valor primitivo")}}** que contiene el contenedor de objetos. En el contexto de una **{{Glossary("Variable", "variable")}}** o **{{Glossary("Property", "property")}}**, el El valor puede ser primitivo o **{{Glossary("Object reference", "Referencia de objeto")}}**. diff --git a/files/es/glossary/variable/index.md b/files/es/glossary/variable/index.md index 5241abd86c2d9b..3ea7f03395f432 100644 --- a/files/es/glossary/variable/index.md +++ b/files/es/glossary/variable/index.md @@ -3,6 +3,8 @@ title: Variable slug: Glossary/Variable --- +{{GlossarySidebar}} + {{jsSidebar}} Una variable es una ubicación nombrada para almacenar un {{Glossary("Value", "valor")}}. De esta manera se puede acceder a un valor impredecible por medio de un nombre predeterminado. diff --git a/files/es/glossary/vendor_prefix/index.md b/files/es/glossary/vendor_prefix/index.md index 670133d188f901..0477266bf5ea66 100644 --- a/files/es/glossary/vendor_prefix/index.md +++ b/files/es/glossary/vendor_prefix/index.md @@ -3,6 +3,8 @@ title: Vendor Prefix slug: Glossary/Vendor_Prefix --- +{{GlossarySidebar}} + Los proveedores de navegadores a veces agregan prefijos a las propiedades de CSS experimentales o no estándar y las API de JavaScript, por lo que los desarrolladores pueden experimentar con nuevas ideas mientras que, en teoría, evitan que se confíe en sus experimentos y luego rompan el código de los desarrolladores web durante el proceso de estandarización. Los desarrolladores deben esperar para incluir la propiedad sin prefijar hasta que se estandarice el comportamiento del navegador. > **Nota:** Los proveedores de navegadores están trabajando para dejar de usar los prefijos de proveedores para funciones experimentales. Los desarrolladores web los han estado utilizando en sitios web de producción, a pesar de su naturaleza experimental. Esto ha hecho que sea más difícil para los proveedores de navegadores garantizar la compatibilidad y trabajar en nuevas características; También ha sido perjudicial para los navegadores más pequeños que terminan obligados a agregar prefijos de otros navegadores para cargar sitios web populares. @@ -45,5 +47,3 @@ Los prefijos para propiedades y métodos son minúsculas: ### Conocimientos generales - [Vendor prefix](https://es.wikipedia.org/wiki/CSS_hack#Browser_prefixes) on Wikipedia - -{{QuickLinksWithSubpages("/es/docs/Glossary")}} diff --git a/files/es/glossary/viewport/index.md b/files/es/glossary/viewport/index.md index 7f2cca0b359d7b..22c54220feb1f9 100644 --- a/files/es/glossary/viewport/index.md +++ b/files/es/glossary/viewport/index.md @@ -3,6 +3,8 @@ title: Viewport slug: Glossary/Viewport --- +{{GlossarySidebar}} + Un viewport representa la región poligonal (normalmente rectangular) en gráficas de computación que está siendo visualizada en ese instante. En términos de navegadores web, se refiere a la parte del documento que usted está viendo, la cual es actualmente visible en su ventana (o la pantalla, si el documento está siendo visto en modo pantalla completa). El contenido fuera del viewport no es visible en la pantalla hasta que sea desplazado dentro de él. La porción del viewport que se encuentra visible en ese momento se denomina **visual viewport**. Este puede ser más pequeño que el viewport de diseño, por ejemplo, cuando el usuario hace uso del zoom. El viewport de diseño (**layout viewport**), sigue siendo el mismo, pero el visual viewport se empequeñeció. diff --git a/files/es/glossary/void_element/index.md b/files/es/glossary/void_element/index.md index ca804baf11f9db..3ed5963467e0aa 100644 --- a/files/es/glossary/void_element/index.md +++ b/files/es/glossary/void_element/index.md @@ -3,6 +3,8 @@ title: Elemento vacío slug: Glossary/Void_element --- +{{GlossarySidebar}} + Un **elemento vacío** es un {{Glossary("elemento")}} de HTML, SVG, o MathML que **no puede** tener nodos secundarios (es decir, elementos anidados o nodos de texto). Las especificaciones [HTML](https://html.spec.whatwg.org/multipage/), [SVG](https://www.w3.org/TR/SVG2/), y [MathML](https://www.w3.org/TR/MathML3/) definen con precisión lo que cada elemento puede contener. Muchas combinaciones no tienen sentido semántico, por ejemplo un elemento {{HTMLElement("audio")}} anidado dentro de un elemento {{HTMLElement("hr")}}. diff --git a/files/es/glossary/wcag/index.md b/files/es/glossary/wcag/index.md index a0ffdea04dc5d0..d394af61fce6c9 100644 --- a/files/es/glossary/wcag/index.md +++ b/files/es/glossary/wcag/index.md @@ -3,6 +3,8 @@ title: WCAG slug: Glossary/WCAG --- +{{GlossarySidebar}} + Las _Pautas de Accesibilidad para el Contenido Web_ (**WCAG**, por us siglas en inglés) son una recomendación publicada por el grupo {{Glossary("WAI","Web Accessibility Initiative")}} en el {{Glossary("W3C")}}. Describen un conjunto de pautas para hacer que el contenido sea accesible principalmente para personas con discapacidades, pero también para dispositivos de recursos limitados, como los teléfonos móviles. WCAG 2.0, que reemplazó a WCAG 1.0, se publicó como una recomendación del W3C el 11 de diciembre de 2008. Consta de 12 directrices organizadas en 4 principios (perceptibles, operables, comprensibles y robustos) y cada guía tiene criterios de éxito comprobables. diff --git a/files/es/glossary/webkit/index.md b/files/es/glossary/webkit/index.md index dae0362dfb089a..7f92d7e985626a 100644 --- a/files/es/glossary/webkit/index.md +++ b/files/es/glossary/webkit/index.md @@ -3,6 +3,8 @@ title: WebKit slug: Glossary/WebKit --- +{{GlossarySidebar}} + _WebKit_ es un _framework_ (marco o interfaz) que proporciona páginas web "bien formadas" basadas es su lenguaje de marcado. El principal navegador que utiliza este framework es [Safari](/es/docs/Glossary/Apple_Safari), aunque también lo hacen muchos otros navegadores web para dispositivos móviles (debido a que WebKit es muy portable y customizable). WebKit comenzó como una copia del KHTML de KDE y sus librerías KJS, pero desde entonces ha habido una gran multitud de particulares y empresas que han contribuido en su desarrollo (incluyendo KDE, Apple, Google, y Nokia). diff --git a/files/es/glossary/websockets/index.md b/files/es/glossary/websockets/index.md index e7f5e704cf3caa..ec57a004750840 100644 --- a/files/es/glossary/websockets/index.md +++ b/files/es/glossary/websockets/index.md @@ -3,6 +3,8 @@ title: WebSockets slug: Glossary/WebSockets --- +{{GlossarySidebar}} + _WebSocket_ es un {{Glossary("protocolo")}} que permite establecer conexiones {{Glossary("TCP")}} entre el {{Glossary("Server", "servidor")}} y el cliente, permitiendo así el transporte de datos en cualquier momento. Cualquier cliente o servidor de aplicaciones puede usar WebSockets, pero principalmente es usado por {{Glossary("Navegador", "browsers")}} y el servidor web. WebScoket permite enviar datos al cliente sin la necesidad de recibir ningún tipo de notificación, permitiendo la actualización dinámica del contenido. diff --git a/files/es/glossary/webvtt/index.md b/files/es/glossary/webvtt/index.md index 6838af00c93aae..0f22ea77434882 100644 --- a/files/es/glossary/webvtt/index.md +++ b/files/es/glossary/webvtt/index.md @@ -5,6 +5,8 @@ l10n: sourceCommit: 4bd65a01204446af2254bb8864bd22ad87bc86b0 --- +{{GlossarySidebar}} + WebVTT (Pistas de Texto para Videos Web) es una especificación del {{Glossary("W3C")}} para un formato de archivo para crear pistas de texto en combinación con el elemento HTML {{HTMLElement("track")}}. Los archivos WebVTT proporcionan metadatos alineados en el tiempo con contenido de audio o video, como subtítulos para contenido de video, descripciones de video de texto, capítulos para navegación de contenido y más. diff --git a/files/es/glossary/whatwg/index.md b/files/es/glossary/whatwg/index.md index 022b56283025f5..3e36a0b96b36dd 100644 --- a/files/es/glossary/whatwg/index.md +++ b/files/es/glossary/whatwg/index.md @@ -3,6 +3,8 @@ title: WHATWG slug: Glossary/WHATWG --- +{{GlossarySidebar}} + EL ( Grupo de trabajo de tecnología de aplicaciones de hipertexto web) por sus siglas en inglés WHATWG es una organización que mantinene y desarrolla {{Glossary("HTML")}} y {{Glossary("API", "APIs")}} para las aplicaciones Web. Antiguos empleados de Apple, Mozilla y Opera establecieron el WHATWG en el 2004. Los editores de especificación en el WHATWG investigan y recopilan comentarios para los documentos de especificación. El grupo también tiene un pequeño comité de miembros invitados y autorizados para anular o reemplazar editores de especificación. Puedes unirte como un colaborador registrándote en la [lista de correo](https://whatwg.org/mailing-list). diff --git a/files/es/glossary/whitespace/index.md b/files/es/glossary/whitespace/index.md index 11667e45a6c7f0..78d798a021ad54 100644 --- a/files/es/glossary/whitespace/index.md +++ b/files/es/glossary/whitespace/index.md @@ -3,6 +3,8 @@ title: Espacio en blanco slug: Glossary/Whitespace --- +{{GlossarySidebar}} + El **espacio en blanco** es un conjunto de {{Glossary("Caracter", "caracteres")}} que se utiliza para mostrar espacios horizontales o verticales entre otros caracteres. A menudo se utilizan para separar fragmentos en {{Glossary("HTML")}}, {{Glossary("CSS")}}, {{Glossary("JavaScript")}} y otros lenguajes informáticos.Los caracteres de espacio en blanco y su uso varía de un lenguaje a otro. ## En HTML @@ -13,29 +15,11 @@ La [_HTML Living Standard_](https://html.spec.whatwg.org/) especifica 5 caracter La [especificación del lenguaje ECMAScript® 2015](https://www.ecma-international.org/ecma-262/6.0/#sec-white-space) establece varios puntos de código Unicode como espacio en blanco: `U+0009` CARACTERES de TABULACIÓN \, `U+000B` TABULACIÓN DE LÍNEA \, `U+000C` FORM FEED \, `U+0020` ESPACIO \, `U+00A0` ESPACIO SIN ROTURA \, `U+FEFF` ANCHO CERO NO -BREAK SPACE \ y otra categoría "Zs" Cualquier otro punto de código Unicode "Separador, espacio" \. Estos caracteres suelen ser innecesarios para la funcionalidad del código. - +## Véase también + +- [Espacio en blanco ASCII](https://infra.spec.whatwg.org/#ascii-whitespace) +- [Especificación del lenguaje ECMAScript® 2015](https://www.ecma-international.org/ecma-262/6.0/#sec-white-space) +- [Cómo se manejan los espacios en blanco mediante HTML, CSS y el DOM](/es/docs/Web/API/Document_Object_Model/Whitespace) +- [El caracter de espacio en blanco](https://es.wikipedia.org/wiki/El_caracter_de_espacio_en_blanco) en Wikipedia +- [Glosario de MDN Web Docs](/es/docs/Glossary) + - {{Glossary("Character", "Caracter")}} diff --git a/files/es/glossary/world_wide_web/index.md b/files/es/glossary/world_wide_web/index.md index 2f2a83394c1fb2..a22a3691e4b192 100644 --- a/files/es/glossary/world_wide_web/index.md +++ b/files/es/glossary/world_wide_web/index.md @@ -3,6 +3,8 @@ title: World Wide Web slug: Glossary/World_Wide_Web --- +{{GlossarySidebar}} + La _World Wide Web_ —comúnmente conocida como **WWW**, **W3**, o **la Web**— es un sistema interconectado de páginas web públicas accesibles a través de {{Glossary("Internet")}}. La Web no es lo mismo que el Internet: la Web es una de las muchas aplicaciones construidas sobre Internet. Tim Berners-Lee propuso la arquitectura de lo que es conocido como la World Wide Web. Él creó el primer servidor web ({{Glossary("Server","server")}}), el primer navegador de internet ({{Glossary("Browser","browser")}}), y la primera página web, en su computadora del laboratorio de investigación de física del CERN en 1990. En 1991, anunció su creación en el grupo de noticias alt.hypertext, marcando con esto el momento en que la Web se hizo pública. diff --git a/files/es/glossary/wrapper/index.md b/files/es/glossary/wrapper/index.md index c9f7e599fab215..a49ab3d524ec5f 100644 --- a/files/es/glossary/wrapper/index.md +++ b/files/es/glossary/wrapper/index.md @@ -3,24 +3,16 @@ title: Wrapper slug: Glossary/Wrapper --- +{{GlossarySidebar}} + En lenguajes de programación como JavaScript, un wrapper o envoltorio es una función que llama a una o varias funciones, unas veces únicamente por convenio y otras para adaptarlas con el objetivo de hacer una tarea ligeramente diferente. Por ejemplo, las librerías SDK de AWS son un ejemplo de wrappers. -## Saber más - -### Conocimientos generales - -[Wrapper function](https://es.wikipedia.org/wiki/Wrapper_function) on Wikipedia +## Véase también - +- [Wrapper function](https://es.wikipedia.org/wiki/Wrapper_function) on Wikipedia +- [Glosario de MDN Web Docs](/es/docs/Glossary) + - {{Glossary("API")}} + - {{Glossary("Class")}} + - {{Glossary("Function")}} diff --git a/files/es/glossary/xforms/index.md b/files/es/glossary/xforms/index.md index 16adf704bb6a12..88cfcfdde714b4 100644 --- a/files/es/glossary/xforms/index.md +++ b/files/es/glossary/xforms/index.md @@ -3,6 +3,8 @@ title: XForm slug: Glossary/XForms --- +{{GlossarySidebar}} + **XForms** es una norma para la creación de formularios web y el procesamiento de datos de formulario en formato {{glossary("XML")}}. Actualmente ningún navegador soporta Xforms—sugerimos en su lugar utilizar los formularios en [HTML5 forms](/es/docs/Web/Guide/HTML/Forms). ## Saber más diff --git a/files/es/glossary/xhtml/index.md b/files/es/glossary/xhtml/index.md index 475a80025a25ec..c61f0983ad019b 100644 --- a/files/es/glossary/xhtml/index.md +++ b/files/es/glossary/xhtml/index.md @@ -3,6 +3,8 @@ title: XHTML slug: Glossary/XHTML --- +{{GlossarySidebar}} + **XHTML** es a [XML](/es/XML) como [HTML](/es/HTML) es a [SGML](/es/SGML). Es decir, XHTML es un lenguaje de marcado que es similar al HTML, pero con un sintaxis más estricta. Dos versiones de XHTML han sido terminadas por el [W3C](http://www.w3.org/): - [XHTML 1.0](http://www.sidar.org/recur/desdi/traduc/es/xhtml/xhtml11.htm) es HTML4 reformulado como una aplicación XML, y es compatible con versiones anteriores de HTML en casos limitados. diff --git a/files/es/glossary/xml/index.md b/files/es/glossary/xml/index.md index c09e82a9f6930c..559147f3257827 100644 --- a/files/es/glossary/xml/index.md +++ b/files/es/glossary/xml/index.md @@ -3,6 +3,8 @@ title: XML slug: Glossary/XML --- +{{GlossarySidebar}} + _XML_ (eXtensible Markup Language en español **Lenguaje de Marcado eXtensible**) es un lenguaje de marcado genérico especificado por la W3C. La industria de tecnologías de la información (_IT Industry_) utiliza muchos lenguajes de descripción de datos (_data-description language_) que están basados en XML. Las etiquetas XML ó _tags_ son muy similares a las de [HTML](/es/docs/Glossary/HTML), pero en el caso de XML, es mucho más flexible debido a que permite a los usuarios definir sus propias etiquetas. En este sentido XML actúa como un metalenguaje (debido a esto, puede ser usado para definir otros lenguajes como por ejemplo [RSS](/es/docs/Glossary/RSS)). Además de esto, cabe señalar que HTML es un lenguaje de presentación, miestras que XML es un lenguaje descripción de datos. From 48edce291f776f0b36915bda189274147565812c Mon Sep 17 00:00:00 2001 From: jz4o <26317360+jz4o@users.noreply.github.com> Date: Tue, 14 Nov 2023 00:45:17 +0900 Subject: [PATCH 061/141] [ja]: fix typo --- files/ja/web/css/subsequent-sibling_combinator/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/ja/web/css/subsequent-sibling_combinator/index.md b/files/ja/web/css/subsequent-sibling_combinator/index.md index 9fe9c45180ae53..408909bbef2dc9 100644 --- a/files/ja/web/css/subsequent-sibling_combinator/index.md +++ b/files/ja/web/css/subsequent-sibling_combinator/index.md @@ -7,7 +7,7 @@ l10n: {{CSSRef("Selectors")}} -**後続兄弟結合子** (subsequent-sibling combinator, `~`) は 2 個のセレクターを結びつけ、 1 つ目の要素の後に 2 つ目の要素のがあり（直後である必要はない）、かつ両者が同じ親要素の子であるすべてのパターンに一致します。 +**後続兄弟結合子** (subsequent-sibling combinator, `~`) は 2 個のセレクターを結びつけ、 1 つ目の要素の後に 2 つ目の要素があり（直後である必要はない）、かつ両者が同じ親要素の子であるすべてのパターンに一致します。 次の例では、後続兄弟結合子 (`~`) は、画像の兄弟であり、画像の後に現れる段落を選択し、スタイル設定するのに便利です。 From f8e1363757ad0dd8596e4f179cd2f562f5394e81 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A9=BA=E7=99=BD?= <92154428+SummCoder@users.noreply.github.com> Date: Tue, 14 Nov 2023 14:52:15 +0800 Subject: [PATCH 062/141] Update index.md (#16954) --- files/zh-cn/web/css/margin/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/zh-cn/web/css/margin/index.md b/files/zh-cn/web/css/margin/index.md index 5cd4d20595695a..66cc6cb203af5c 100644 --- a/files/zh-cn/web/css/margin/index.md +++ b/files/zh-cn/web/css/margin/index.md @@ -5,7 +5,7 @@ slug: Web/CSS/margin {{CSSRef}} -**`margin`** 属性为给定元素设置所有四个（上下左右）方向的外边距属性。也就是 {{cssxref("margin-top")}}，{{cssxref("margin-right")}}，{{cssxref("margin-bottom")}}，和 {{cssxref("margin-left")}} 四个外边距属性设置的[简写](/zh-CN/docs/Web/CSS/Shorthand_properties)。 +**`margin`** 属性为给定元素设置所有四个（上右下左）方向的外边距属性。也就是 {{cssxref("margin-top")}}、{{cssxref("margin-right")}}、{{cssxref("margin-bottom")}} 和 {{cssxref("margin-left")}} 四个外边距属性设置的[简写](/zh-CN/docs/Web/CSS/Shorthand_properties)。 {{EmbedInteractiveExample("pages/css/margin.html")}} From 57b94a23c7f85dde3269c382a1a9cae5afdf2941 Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Tue, 14 Nov 2023 09:35:10 +0100 Subject: [PATCH 063/141] `fr` - Glossary - Initial translation for B entries (#16933) * Initial translation for glossary B * FIX: Binding link flaws * FIX flaw and sentence meaning --------- Co-authored-by: tristantheb --- .../glossary/baseline/compatibility/index.md | 33 ++++++++++++ .../fr/glossary/baseline/typography/index.md | 17 +++++++ files/fr/glossary/binding/index.md | 22 ++++++++ files/fr/glossary/bitwise_flags/index.md | 50 +++++++++++++++++++ files/fr/glossary/boolean/aria/index.md | 16 ++++++ files/fr/glossary/boolean/html/index.md | 30 +++++++++++ files/fr/glossary/boolean/javascript/index.md | 17 +++++++ 7 files changed, 185 insertions(+) create mode 100644 files/fr/glossary/baseline/compatibility/index.md create mode 100644 files/fr/glossary/baseline/typography/index.md create mode 100644 files/fr/glossary/binding/index.md create mode 100644 files/fr/glossary/bitwise_flags/index.md create mode 100644 files/fr/glossary/boolean/aria/index.md create mode 100644 files/fr/glossary/boolean/html/index.md create mode 100644 files/fr/glossary/boolean/javascript/index.md diff --git a/files/fr/glossary/baseline/compatibility/index.md b/files/fr/glossary/baseline/compatibility/index.md new file mode 100644 index 00000000000000..9e1912d0108d1c --- /dev/null +++ b/files/fr/glossary/baseline/compatibility/index.md @@ -0,0 +1,33 @@ +--- +title: Baseline (compatibilité) +slug: Glossary/Baseline/Compatibility +l10n: + sourceCommit: 36527a8af0f396e8b84de3cda578d9e0fe1860f4 +--- + +{{GlossarySidebar}} + +**Baseline** identifie les fonctionnalités prises en charge par l'ensemble des navigateurs. Les développeuses et développeurs web peuvent partir du principe que les fonctionnalités Baseline fonctionnent sans problème dans les navigateurs récents. + +Une fonctionnalité Baseline, comme une API, un ensemble de propriétés CSS ou une syntaxce JavaScript, fonctionnera de façon homogène depuis au moins la version antérieure à la version actuelle pour l'ensemble des navigateurs connus (Chrome, Edge, Firefox, et Safari). + +## Badges + +🟢 Sur une page MDN, si vous voyez un bandeau Baseline vert, vous pouvez partir du principe que la fonctionnalité correspondante est implémentée dans la version actuelle et précédente des navigateurs. + +🟡 Si vous voyez un bandeau jaune indiquant que la fonctionnalité ne fait pas encore partie de Baseline, il vous faudra vérifier les données de compatibilité et tester la fonctionnalité. Vous pouvez également attendre qu'elle soit ajoutée à Baseline. + +## Considérations supplémentaires + +Baseline doit être vu comme un guide général, qui ne couvre pas l'ensemble des situations. Si votre site ou application doit fonctionner dans un navigateur pour une version à support à long terme, ou dans un navigateur ou appareil plus ancien (éventuellement non couvert par Baseline), il vous appartiendra de tester et de consulter les données de compatibilité détaillées sur MDN ou [caniuse.com](https://caniuse.com/) avant de déployer une fonctionnalité donnée. + +## Contribuer + +Baseline est un projet participatif, mené par le groupe communautaire W3C WebDX, qui base ses données sur les données de compatibilité des navigateurs fournies par MDN. Si vous avez des questions, souhaitez mettre à jour ou étendre les données de Baseline, n'hésitez pas à vous rendre sur [web-platform-dx/web-features (en anglais)](https://github.com/web-platform-dx/web-features) pour participer. + +## Voir aussi + +- [Tester sur plusieurs navigateurs](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing) +- [Le dépôt GitHub web-platform-dx/web-features](https://github.com/web-platform-dx/web-features) +- [Le groupe communautaire W3C WebDX](https://www.w3.org/community/webdx/) +- [Le dépôt GitHub mdn/browser-compat-data](https://github.com/mdn/browser-compat-data) diff --git a/files/fr/glossary/baseline/typography/index.md b/files/fr/glossary/baseline/typography/index.md new file mode 100644 index 00000000000000..f2bbfb8108bd6c --- /dev/null +++ b/files/fr/glossary/baseline/typography/index.md @@ -0,0 +1,17 @@ +--- +title: Ligne de base (typographie) +slug: Glossary/Baseline/Typography +l10n: + sourceCommit: 36527a8af0f396e8b84de3cda578d9e0fe1860f4 +--- + +{{GlossarySidebar}} + +La **ligne de base** est une notion utilisée en typographie qui représente la ligne imaginaire sur laquelle repose les différents caractères d'un texte. + +{{GlossaryDisambiguation}} + +## Voir aussi + +- [La page Wikipédia sur la ligne de base]() +- [Alignement des boîtes CSS](/fr/docs/Web/CSS/CSS_box_alignment#types_dalignement) diff --git a/files/fr/glossary/binding/index.md b/files/fr/glossary/binding/index.md new file mode 100644 index 00000000000000..17fd0af4cf266c --- /dev/null +++ b/files/fr/glossary/binding/index.md @@ -0,0 +1,22 @@ +--- +title: Name binding (liaison de nom) +slug: Glossary/Binding +l10n: + sourceCommit: 36527a8af0f396e8b84de3cda578d9e0fe1860f4 +--- + +{{GlossarySidebar}} + +En programmation, la **liaison de nom** (name binding en anglais) correspond à l'association d'un [identifiant](/fr/docs/Glossary/Identifier) avec une valeur. C'est le cas pour les [variables](/fr/docs/Glossary/Variable), mais aussi pour les [paramètres](/fr/docs/Glossary/Parameter) des fonctions et celles créées par les blocs [`try…catch`](/fr/docs/Web/JavaScript/Reference/Statements/try...catch). Certaines liaisons de nom sont implicitement créées par le langage, comme [`this`](/fr/docs/Web/JavaScript/Reference/Operators/this) et [`new.target`](/fr/docs/Web/JavaScript/Reference/Operators/new.target) en JavaScript. + +On dit d'une liaison qu'elle est [muable](/fr/docs/Glossary/Mutable) si elle peut être réaffectée et [immuable](/fr/docs/Glossary/Immutable) sinon (cela ne signifie pas que la valeur correspondante est immuable). + +Une liaison est généralement associée à une [portée](/fr/docs/Glossary/Scope). Certains langages de programmation permettent de recréer des liaisons au sein d'une même portée (on parle parfois de redéclaration), et d'autres non. En JavaScript, une liaison pourra être redéclarée selon l'instruction utilisée pour créer la liaison. + +## Voir aussi + +- [`var`](/fr/docs/Web/JavaScript/Reference/Statements/var) +- [`let`](/fr/docs/Web/JavaScript/Reference/Statements/let) +- [`const`](/fr/docs/Web/JavaScript/Reference/Statements/const) +- [`function`](/fr/docs/Web/JavaScript/Reference/Statements/function) +- [`class`](/fr/docs/Web/JavaScript/Reference/Statements/class) diff --git a/files/fr/glossary/bitwise_flags/index.md b/files/fr/glossary/bitwise_flags/index.md new file mode 100644 index 00000000000000..a3ebf358e8a0b2 --- /dev/null +++ b/files/fr/glossary/bitwise_flags/index.md @@ -0,0 +1,50 @@ +--- +title: Marqueurs binaires +slug: Glossary/Bitwise_flags +l10n: + sourceCommit: 36527a8af0f396e8b84de3cda578d9e0fe1860f4 +--- + +{{GlossarySidebar}} + +Les **marqueurs binaires** sont un ensemble de variables, généralement des valeurs numériques, qui permettent d'activer ou désactiver des fonctionnalités d'une méthode ou autre. Ces opérations sont rapides, car elles s'appliquent au niveau binaire. Les marqueurs associés sont généralement des valeurs complémentaires, représentés par des bits différents d'une même valeur (généralement un nombre hexadécimal), afin qu'une même valeur numérique permette de combiner et représenter différents marqueurs. + +Par exemple, quand on crée un objet [`GPUBuffer`](/fr/docs/Web/API/GPUBuffer) avec la méthode [`GPUDevice.createBuffer()`](/fr/docs/Web/API/GPUDevice/createBuffer) de [l'API WebGPU](/fr/docs/Web/API/WebGPU_API), on fournit une propriété `usage` dans le descripteur qui contient un ou plusieurs marqueurs pour activer certaines utilisation du tampon. + +```js +usage: GPUBufferUsage.COPY_SRC | GPUBufferUsage.MAP_WRITE; +``` + +Ces valeurs sont définies dans le même espace de nom et chacune prend une valeur hexadécimale différente : + +| Marqueur | Représentation hexadécimale | Équivalent décimal | +| ------------------------------ | --------------------------- | ------------------ | +| `GPUBufferUsage.MAP_READ` | 0x0001 | 1 | +| `GPUBufferUsage.MAP_WRITE` | 0x0002 | 2 | +| `GPUBufferUsage.COPY_SRC` | 0x0004 | 4 | +| `GPUBufferUsage.COPY_DST` | 0x0008 | 8 | +| `GPUBufferUsage.INDEX` | 0x0010 | 16 | +| `GPUBufferUsage.VERTEX` | 0x0020 | 32 | +| `GPUBufferUsage.UNIFORM` | 0x0040 | 64 | +| `GPUBufferUsage.STORAGE` | 0x0080 | 128 | +| `GPUBufferUsage.INDIRECT` | 0x0100 | 256 | +| `GPUBufferUsage.QUERY_RESOLVE` | 0x0200 | 512 | + +Quand on consulte la propriété [`GPUBuffer.usage`](/fr/docs/Web/API/GPUBuffer/usage) d'un tampon, on obtient un seul nombre qui est la somme des différents marqueurs binaires. Si on récupère `GPUBuffer.usage` à partir de celui créé dans l'exemple précédent, on obtiendra la valeur décimale 6, car : + +- La valeur décimale équivalente de `GPUBufferUsage.COPY_SRC` vaut 4 +- La valeur décimale équivalente de `GPUBufferUsage.MAP_WRITE` vaut 2 +- La somme de 4 et 2 donne 6. + +Comme les valeurs de chaque marqueur se situent sur des bits différents de la valeur composite, chaque combinaison fournira une valeur unique. Le programme peut alors déterminer quels marqueurs sont actifs à partir d'une unique valeur. Il est aussi possible de tester les marqueurs présents sur une valeur composite à l'aide des opérateurs binaires : + +```js +if (buffer.usage & GPUBufferUsage.MAP_WRITE) { + // Buffer possède le marqueur MAP_WRITE usage +} +``` + +## Voir aussi + +- [La beauté des marqueurs binaires (en anglais)](https://www.hendrik-erz.de/post/bitwise-flags-are-beautiful-and-heres-why) +- [La page sur les opérations binaires sur Wikipédia](https://fr.wikipedia.org/wiki/Op%C3%A9ration_bit_%C3%A0_bit) diff --git a/files/fr/glossary/boolean/aria/index.md b/files/fr/glossary/boolean/aria/index.md new file mode 100644 index 00000000000000..bdd463660a3076 --- /dev/null +++ b/files/fr/glossary/boolean/aria/index.md @@ -0,0 +1,16 @@ +--- +title: Attribut booléen (ARIA) +slug: Glossary/Boolean/ARIA +l10n: + sourceCommit: 36527a8af0f396e8b84de3cda578d9e0fe1860f4 +--- + +{{GlossarySidebar}} + +Un **attribut booléen** ARIA est un [attribut à valeur contrainte](/fr/docs/Glossary/Enumerated) qui inclut `true` ou `false` dans la liste des valeurs qu'il peut prendre. + +En ARIA, les attributs booléens sont uniquement des chaînes de caractères `"true"` et `"false"`. + +## Voir aussi + +- [L'entrée du glossaire pour les listes énumérées](/fr/docs/Glossary/Enumerated), qui contient plus de détails et d'exemples, notamment pour les attributs booléens ARIA. diff --git a/files/fr/glossary/boolean/html/index.md b/files/fr/glossary/boolean/html/index.md new file mode 100644 index 00000000000000..c742a4743366a8 --- /dev/null +++ b/files/fr/glossary/boolean/html/index.md @@ -0,0 +1,30 @@ +--- +title: Attribut booléen (HTML) +slug: Glossary/Boolean/HTML +l10n: + sourceCommit: 36527a8af0f396e8b84de3cda578d9e0fe1860f4 +--- + +{{GlossarySidebar}} + +En HTML, un **attribut booléen** est un attribut qui peut valoir `true` ou `false`. + +On notera qu'un attribut booléen vaut `true` s'il est présent et `false` s'il est absent. + +Voici un exemple pour l'attribut booléen HTML `checked` : + +```html + + + + + + + + + +``` + +## Voir aussi + +- [Liste énumérée](/fr/docs/Glossary/Enumerated) diff --git a/files/fr/glossary/boolean/javascript/index.md b/files/fr/glossary/boolean/javascript/index.md new file mode 100644 index 00000000000000..eb6c8379099c2c --- /dev/null +++ b/files/fr/glossary/boolean/javascript/index.md @@ -0,0 +1,17 @@ +--- +title: Booléen (JavaScript) +slug: Glossary/Boolean/JavaScript +l10n: + sourceCommit: 36527a8af0f396e8b84de3cda578d9e0fe1860f4 +--- + +{{GlossarySidebar}} + +En JavaScript, un **booléen** est une [valeur primitive](/fr/docs/Glossary/Primitive) qui peut être `true` ou `false`. + +Un objet [`Boolean`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Boolean) est une [enveloppe (wrapper)](/fr/docs/Glossary/Wrapper) pour les valeurs booléennes primitives. + +## Voir aussi + +- [L'objet global JavaScript `Boolean`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Boolean) +- [Les types et structures de données en JavaScript](/fr/docs/Web/JavaScript/Data_structures) From efee41a6a7d6ad7ca6c0940c6b64c551404a38d6 Mon Sep 17 00:00:00 2001 From: A1lo Date: Tue, 14 Nov 2023 21:38:05 +0800 Subject: [PATCH 064/141] zh-cn: update the translation of `Element.setCapture()` (#16957) --- .../zh-cn/web/api/element/setcapture/index.md | 79 +++++++++++-------- 1 file changed, 48 insertions(+), 31 deletions(-) diff --git a/files/zh-cn/web/api/element/setcapture/index.md b/files/zh-cn/web/api/element/setcapture/index.md index b804120c86bec7..0c174b772b951c 100644 --- a/files/zh-cn/web/api/element/setcapture/index.md +++ b/files/zh-cn/web/api/element/setcapture/index.md @@ -1,45 +1,61 @@ --- -title: element.setCapture +title: Element：setCapture() 方法 slug: Web/API/Element/setCapture +l10n: + sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc --- -{{ ApiRef() }} +{{Deprecated_Header}}{{non-standard_header}}{{ APIRef("DOM") }} -### 概要 +在处理 mousedown 事件的期间调用此方法以将所有的鼠标事件的目标都设置为该元素，直到释放鼠标按钮或者调用 {{domxref("document.releaseCapture()")}}。 -在处理一个 mousedown 事件过程中调用这个方法来把全部的鼠标事件重新定向到这个元素，直到鼠标按钮被释放或者 {{ domxref("document.releaseCapture()") }} 被调用。 +> **警告：** 这个接口从未得到过很好的跨浏览器支持，你也许应使用 {{domxref("element.setPointerCapture")}}（来自指针事件 API）代替。 -### 语法 +## 语法 -```plain -element.setCapture(retargetToElement); +```js-nolint +setCapture(retargetToElement) ``` +### 参数 + - `retargetToElement` - - : 如果被设置为 `true`, 所有事件被直接定向到这个元素; 如果是 `false`, 事件也可以在这个元素的子元素上触发。 + - : 如果为 `true`，所有事件的目标都会被设置为这个元素；如果为 `false`，则事件也可以在这个元素的子元素上触发。 + +### 返回值 + +无（{{jsxref("undefined")}}）。 ### 示例 -在这个例子中，当你在一个元素中点击并且按住鼠标，然后再使用鼠标拖动的时候，当前鼠标位置的坐标就会被绘制出来。 +在此示例中，当你在点中一个元素并且按住鼠标，然后再移动鼠标的时候，会显示鼠标的当前位置。 ```html - + + - 鼠标捕捉示例 - -

这是一个关于如何在 Gecko 2.0 中针对元素使用鼠标捕捉的示例。

-

- 点我并且按住鼠标滑动 -

-
还没有任何事件哦！
+

在这里测试

+
还没有任何事件
``` -[查看在线演示](/samples/domref/mousecapture.html) +[查看在线演示](https://mdn.dev/archives/media/samples/domref/mousecapture.html) + +## 备注 + +这个元素可能无法被完全滚动到顶部或底部，这取决于其他元素的布局。 -### 注意 +## 规范 -这个元素可能不会完全被滚动到顶部或者底部，这取决于其他元素的布局。 +不属于任何规范。 -### 规范 +## 浏览器兼容性 -无 +{{Compat}} ## 参见 -- {{ domxref("document.releaseCapture()") }} +- {{domxref("document.releaseCapture()")}} +- {{domxref("element.setPointerCapture")}} From 492e5c512a783019a82c4200d8fb3c2f5eb50cdf Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Tue, 14 Nov 2023 15:55:23 +0100 Subject: [PATCH 065/141] fr: Initial translation for CycleTracker - Secure connection (#16773) Initial translation --- .../cycletracker/secure_connection/index.md | 97 +++++++++++++++++++ 1 file changed, 97 insertions(+) create mode 100644 files/fr/web/progressive_web_apps/tutorials/cycletracker/secure_connection/index.md diff --git a/files/fr/web/progressive_web_apps/tutorials/cycletracker/secure_connection/index.md b/files/fr/web/progressive_web_apps/tutorials/cycletracker/secure_connection/index.md new file mode 100644 index 00000000000000..10d0f2c8a9b465 --- /dev/null +++ b/files/fr/web/progressive_web_apps/tutorials/cycletracker/secure_connection/index.md @@ -0,0 +1,97 @@ +--- +title: "CycleTracker : connexion sécurisée" +short-title: Connexion sécurisée +slug: Web/Progressive_web_apps/Tutorials/CycleTracker/Secure_connection +l10n: + sourceCommit: 633b73367768588e7c2e93f35b470c503aede19e +--- + +{{PreviousMenuNext("Web/Progressive_web_apps/Tutorials/CycleTracker/HTML_and_CSS", "Web/Progressive_web_apps/Tutorials/CycleTracker/JavaScript_functionality", "Web/Progressive_web_apps/Tutorials/CycleTracker")}} + +{{PWASidebar}} + +Les service workers, et par extension les PWA, sont [restreints aux contextes sécurisés](/fr/docs/Web/Security/Secure_Contexts/features_restricted_to_secure_contexts). Les contextes sécurisés incluent notamment les contextes TLS servis avec le protocole `https://` et les ressources servies localement (par exemple les URL avec l'hôte `127.0.0.1` ou `localhost`, servies avec le protocole `http://`). Dans cette section, nous aborderons les façons de servir une application localement et à distance avec une connexion sécurisée. + +Dans l'article précédent, nous avons utilisé HTML et CSS pour créer le squelette de notre application. Dans ce chapitre, nous ouvrirons le contenu statique de CycleTracker dans un navigateur, nous en verrons le contenu depuis un environnement de développement local, mais aussi depuis un serveur distant, avec une connexion sécurisée. + +## Voir l'application avec le protocole `file://` + +N'importe quel navigateur peut afficher du contenu HTML. Pour voir le fichier HTML avec le CSS correspondant appliqué, par exemple ce que nous avons créé dans le chapitre précédent, ouvrez le fichier `index.html` en navigant dans l'explorateur de fichier de votre ordinateur ou depuis votre navigateur en utilisant l'option de menu « Ouvrir un fichier… ». + +Avec le fichier `index.html` mis à jour et le fichier `style.css` dans le même répertoire, si vous consultez le fichier dans un navigateur, vous devriez obtenir quelque chose ressemblant à cette capture d'écran : + +![Une page web verte avec un grand titre, un formulaire avec une légende, deux sélecteurs de date et un bouton.](filefile.jpg) + +Ici, on voit la page à l'aide du protocole `file://`. Cela fonctionne bien pour notre projet dans l'état actuel, et suffira encore lorsque [nous ajouterons des fonctionnalités à l'aide de JavaScript](/fr/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/JavaScript_functionality). Toutefois, les fichiers de manifeste et les service workers, qui sont des composants clés d'une PWA, ne fonctionnent qu'avec une connexion sécurisée (comme d'autres API). Une PWA doit donc être servie depuis un serveur web en HTTPS ou dans un environnement de développement local avec un hôte comme `localhost` ou `127.0.0.1` (avec ou sans numéro de port). Si nous consultons l'application finalisée avec le protocole `file://`, notre [manifeste](/fr/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/Manifest_file) sera ignoré et [les service workers](/fr/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/Service_workers) ajoutés échoueront. + +> **Note :** Servir l'application avec HTTPS est une bonne chose, qu'il s'agisse d'une PWA ou d'un site web. Cela permet que l'information qui transite entre le serveur web et le navigateur de la personne soit chiffrée de bout en bout. [Plusieurs API web ne fonctionnent qu'avec un contexte sécurisé](/fr/docs/Web/Security/Secure_Contexts/features_restricted_to_secure_contexts). Autrement dit, même si on ne crée par de PWA installable, on pourra avoir besoin d'un contexte sécurisé lorsqu'on ajoute des fonctionnalités. + +Il nous faut un environnement de développement local pour suivre ce tutoriel. Pour que [notre PWA soit installable](/fr/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable), il nous faut un serveur sécurisé. Les fichiers nécessaires devront être servis via une connexion sécurisée sur le Web pour tirer parti des avantages d'une PWA et pour distribuer l'application comme telle. + +## `localhost` + +La méthode par défaut pour mettre en place un environnement de développement local varie d'un système d'exploitation à un autre. L'emplacement par défaut de la page de départ (l'indexe) et des fichiers de configuration peut changer d'un système à l'autre, mais la plupart fournissent une configuration serveur accessible pour le développement. + +Ainsi, sur macOS Sierra ou Monterey, saisir `sudo apachectl start` dans une invite de commande démarrera un serveur web HTTP Apache. Lorsque le serveur est démarré, si vous saisissez l'URL `http://localhost` dans votre navigateur, vous pourrez voir une page web basique qui indique « It works! ». Par défaut, le fichier HTML qui s'affiche est situé dans le répertoire `Library/WebServer/Documents/index.html.en`. Pour activer d'autres extensions de fichier que `.html.en` ou pour changer le répertoire racine, vous devrez éditer le fichier de configuration situé à l'emplacement `/etc/apache2/httpd.conf`. Le serveur peut être arrêté avec la commande `sudo apachectl stop`. + +Le serveur web par défaut du système d'exploitation fournit certes un nom d'hôte simple à retenir, `localhost`, mais il faut connaître l'emplacement racine du serveur et savoir comment le configurer. Il peut aussi être limité à un seul serveur, situé à un emplacement donné. Heureusement, il existe d'autres méthodes, plus intuitives, pour créer un ou plusieurs environnements de développement, accessibles sur différents ports. + +## `localhost`, avec un numéro de port + +Il existe plusieurs extensions d'[IDE](/fr/docs/Glossary/IDE) et paquets propres à certains langages de programmation qui vous permettent de démarrer un environnement de développement à l'aide d'un clic ou d'une commande. Vous pouvez même démarrer plusieurs serveurs locaux, chacun ayant un numéro de port différent. + +Vous pouvez lancer un serveur HTTP local à [l'aide d'une extension Visual Studio Code plugin](/fr/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server#using_an_extension_in_your_code_editor), qui permet d'exécuter un serveur local sur un port donné.[L'extension Preview on Web Server](https://marketplace.visualstudio.com/items?itemName=yuichinukiyama.vscode-preview-server) de l'IDE [Visual Studio Code](https://code.visualstudio.com/download) permet de créer un serveur à la racine du répertoire ouvert dans l'éditeur, en utilisant le port `8080` oar défaut. Les extensions peuvent être configurées et on pourra donc changer le paramètre `previewServer.port` pour utiliser un autre port. Par défaut, si on saisit `localhost:8080` dans la barre d'URL du navigateur, on pourra voir la page. + +> **Note :** L'extension Preview on Web Server utilise [Browsersync](https://browsersync.io/). Lorsque vous avez un environnement de développement démarré avec cette extension, l'adresse `localhost:3001` vous permet d'accéder à l'interface utilisateur de Browsersync. + +Vous pouvez également créer [un serveur local avec l'IDE IntelliJ](https://www.jetbrains.com/help/idea/creating-local-server-configuration.html), qui intègre un [serveur web PHP configurable](https://www.jetbrains.com/help/idea/php-built-in-web-server.html#configuring-built-in-web-server). + +Sur MDN, vous pouvez consulter d'autres guides pour apprendre à [mettre en place un serveur de test local](/fr/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server) avec [Python](/fr/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server#using_python) ou avec [un langage de programmation serveur](/fr/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server#running_server-side_languages_locally) comme PHP. + +## `localhost` avec npx + +Si vous avez installé Node.js, vous avez probablement installé npm et npx avec. Dans une invite de commande, saisissez `npx -v`. Si vous voyez un numéro de version, cela signifie que vous pouvez utiliser le paquet [http-server](https://www.npmjs.com/package/http-server). Il s'agit d'un serveur HTTP sans configuration qui peut être installé sans prérequis particulier. Pour démarrer le serveur, saisissez `npx http-server [chemin]` dans votre invite de commande, avec `[chemin]` correspondant au répertoire où se situe votre fichier d'index. + +Par défaut, si vous saisissez `localhost:8080` dans la barre d'URL de votre navigateur, la page sera chargée. Si vous avez déjà un serveur démarré sur le port `8080`, http-server choisira automatiquement un autre port disponible pour servir l'environnement de développement, comme `8081`. + +Vous pouvez aussi choisir un autre numéro de port au démarrage. Par exemple, en saisissant `npx http-server /user/votreNom/CycleTracker -p 8787`, cela démarrera un serveur local sur le port `8787` si ce dernier est disponible. Si vous avez sélectionné un port déjà utilisé, vous aurez une erreur `address already in use` (adresse déjà utilisée) ou un message similaire. Si cela fonctionne, vous pourrez saisir `localhost:8787` dans la barre d'URL de votre navigateur pour afficher le fichier d'index situé à l'emplacement `~/user/votreNom/CycleTracker/index.html`. Si aucun fichier d'index n'est présent, le serveur affichera le contenu du répertoire `~/user/votreNom/CycleTracker/`. + +Ce serveur HTTP statique sans configuration suffira pour notre application. Les applications servies sur `localhost` et `127.0.0.1`, même servies sans HTTPS, sont considérées comme sécurisées. Si les navigateurs affichent des avertissements de sécurité, ceux-ci peuvent être ignorés _pour ces adresses_. Bien que ça ne soit pas nécessaire, vous pouvez configurer votre serveur web local pour utiliser HTTPS, en [ajoutant un certificat TLS intégré](https://github.com/lwsjs/local-web-server/wiki/How-to-get-the-%22green-padlock%22-using-the-built-in-certificate). Avec le certificat, vous pourrez installer et exécuter [local-web-server]() en ligne de commande pour servir votre projet en HTTPS et éviter tout avertissement de sécurité. + +```bash +npm install -g local-web-server +cd ~/user/votreNom/CycleTracker/ +ws --https +``` + +Vous devrez peut-être utiliser `sudo` pour la commande d'installation globale précédente. + +> **Note :** Si vous faites attention à la confidentialité et à la vie privée, vous verrez ici que vous pouvez construire votre PWA vous-même et l'installer sur votre machine depuis votre propre environnement de développement, sans jamais avoir besoin d'Internet. Cette application ne contient aucun pistage et aussi respectueuse de la vie privée que possible. + +## Serveurs externes sécurisés + +Les options précédentes sont acceptables et nécessaires pour tester une application lorsqu'on la développe (que ce soit celle de ce tutoriel ou une autre). Toutefois, même s'il est parfois possible d'héberger soi-même l'application sur un de ses appareils pour la rendre disponible sur Internet, ce n'est pas l'approche recommandée. + +Pour bénéficier des fonctionnalités propres aux PWA comme l'installation rapide, une interface utilisateur dédiée et une éventuelle publication sur un magasin d'application, l'application doit être une PWA, ce qui signifie qu'elle doit utiliser un service worker, ce qui implique d'utiliser une connexion sécurisée. Pour distribuer votre application et permettre à d'autres de la voir, de l'utiliser et de l'installer, vous aurez besoin que votre contenu soit hébergé et disponible sur un serveur _distant_. + +Pour publier officiellement une PWA, vous souhaiterez peut-être investir dans [un nom de domaine et un hébergement web](/fr/docs/Learn/Common_questions/Tools_and_setup/How_much_does_it_cost#hébergement). Pour les projets open source, où le code est disponible publiquement pour que toutes et tous puissent l'étudier et y contribuer, vous pouvez héberger votre projet sur [GitHub Pages](https://pages.github.com/). + +## GitHub Pages + +L'application CycleTracker actuelle peut être vue sur GitHub de façon sécurisée à l'URL [https://mdn.github.io/pwa-examples/cycletracker/html_and_css](https://mdn.github.io/pwa-examples/cycletracker/html_and_css). Nous avons mis en place les fichiers grâce à un dépôt GitHub de MDN. De même, si vous avez un compte [GitHub](https://github.com), vous pouvez mettre en place votre projet ainsi. On notera toutefois que, même si le contenu est servi de façon sécurisée avec TLS, tout ce qui est sur GitHub Pages est public. Si vous vivez dans une région où votre gouvernement peut vous poursuivre si vous suivez vos cycles menstruels, n'hésitez pas à copier-coller le code plutôt que de faire un fork du dépôt sur GitHub. + +Pour créer un site disponible publiquement et servi de façon sécurisée, créez un [site GitHub Pages](https://docs.github.com/fr/pages/getting-started-with-github-pages/creating-a-github-pages-site). Créez un dépôt intitulé `.github.io`, où `` est votre nom de compte GitHub. Créez ensuite une branche `gh-pages`. Le contenu de cette branche sera alors disponible publiquement à l'adresse `https://.github.io`. + +Comme nous l'avons indiqué, les sites hébergés sur GitHub Pages sont disponibles publiquement sur Internet, même si le dépôt est privé. Pour notre application, les données relatives aux cycles sont stockées dans le stockage local. Aussi, même si l'application est disponible via une URL GitHub, les données des utilisatrices et utilisateurs seront uniquement stockées dans le navigateur de l'appareil où les données auront été saisies. Supprimer le contenu du stockage local via l'interface du navigateur suffira à supprimer toutes les données enregistrées. + +Si vous ne souhaitez pas que votre PWA soit disponible à la racine de votre page, vous pouvez créer un sous-répertoire au sein du dépôt `.github.io` ou publier votre PWA dans un dépôt séparé. En [configurant une source de publication](https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site) au sein du dépôt de votre PWA, votre application sera visible à l'URL `https://.github.io/`, où `` est le nom du dépôt Git. Vous pouvez configurer GitHub pour publier automatiquement une nouvelle version de votre site quand vous [publiez des changements sur une branche donnée](https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#publishing-from-a-branch) du dépôt (qui peut être la branche `main`). + +Pour le cas de l'application de démonstration CycleTracker au fur et à mesure des différentes étapes du développement, `` sera `mdn` et le dépôt est `pwa-examples`. Comme ce dépôt contient plusieurs exemples de PWA, chacune avec le code correspondant à différentes étapes du processus de développement, les fichiers (et donc les PWA correspondantes) sont disponibles avec des URL ayant plusieurs niveaux de profondeur. + +> **Note :** [Vous pouvez configurer un domaine personnalisé pour les sites GitHub Pages](https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site). + +## Pour la suite + +Nous voici capables de voir la version statique du squelette de notre application CycleTracker dans un navigateur de façon sécurisée. Nous pouvons désormais passer à la construction de cette application. Dans le chapitre suivant, nous créerons le fichier `app.js` qui contiendra le code JavaScript qui permettra de passer de cet état statique à une application web fonctionnelle, qui stocke les données localement. + +{{PreviousMenuNext("Web/Progressive_web_apps/Tutorials/CycleTracker/HTML_and_CSS", "Web/Progressive_web_apps/Tutorials/CycleTracker/JavaScript_functionality", "Web/Progressive_web_apps/Tutorials/CycleTracker")}} From 87b5fda3a6b4a87d9f1b396412f69dedea0cc646 Mon Sep 17 00:00:00 2001 From: Jason Ren <40999116+jasonren0403@users.noreply.github.com> Date: Wed, 15 Nov 2023 15:50:11 +0800 Subject: [PATCH 066/141] [zh-cn] Update 'chrome incompatibilities' (#16945) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: A1lo --- .../chrome_incompatibilities/index.md | 261 +++++++++++++----- .../browser_specific_settings/index.md | 42 +-- 2 files changed, 211 insertions(+), 92 deletions(-) diff --git a/files/zh-cn/mozilla/add-ons/webextensions/chrome_incompatibilities/index.md b/files/zh-cn/mozilla/add-ons/webextensions/chrome_incompatibilities/index.md index 1bf0140546d9b1..1320779b09a4a5 100644 --- a/files/zh-cn/mozilla/add-ons/webextensions/chrome_incompatibilities/index.md +++ b/files/zh-cn/mozilla/add-ons/webextensions/chrome_incompatibilities/index.md @@ -1,145 +1,258 @@ --- title: Chrome 不兼容情况 slug: Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities +l10n: + sourceCommit: 311a791dde7caf8039bbc09bd81347a747f703b2 --- {{AddonSidebar}} -使用 WebExtension API 构建的扩展旨在与 Chrome 和 Opera 扩展兼容：尽可能为这些浏览器编写的扩展应该在 Firefox 上运行，并且只需进行极少的更改。 +WebExtension API 的目标是提供对所有主要浏览器的兼容性，因此扩展程序只需最小的改动即可在任何浏览器上运行。 -但是，Firefox 目前仅支持 Chrome 和 Opera 支持的有限功能和 API。我们正在努力增加更多的支持，但许多功能尚未得到支持，我们可能永远不会支持某些功能。 +不过，Chrome 浏览器（以及基于 Chromium 的浏览器）、Firefox 浏览器和 Safari 浏览器之间存在很大差异。特别是： -## JavaScript APIs +- 不同浏览器对 WebExtension API 的支持各不相同。详情请参阅[浏览器对 JavaScript API 的支持](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs)。 +- 不同浏览器对 `manifest.json` 键的支持有所不同。请参阅 [`manifest.json`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json#浏览器兼容性) 页面上的[“浏览器兼容性”部分](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json)了解更多详情。 +- 扩展 API 命名空间： -### 回调与 chrome.\* 命名空间 + - **在 Firefox 和 Safari 中**：扩展 API 在 `browser` 命名空间下访问。为了与 Chrome 浏览器兼容，还支持 `chrome` 命名空间。 + - **在 Chrome 浏览器中**：扩展 API 在 `chrome` 命名空间下访问。（参见 [Chrome bug 798169](https://crbug.com/798169)） -在 Chrome 中，扩展通过使用 `chrome` 命名空间来访问私有 JavaScript API： +- 异步 API： -```js -chrome.browserAction.setIcon({ path: "path/to/icon.png" }); -``` + - **在 Firefox 和 Safari 中**：异步 API 使用 Promise 实现。 + - **在 Chrome 浏览器中**：在 Manifest V2 中，异步 API 使用回调实现。在 Manifest V3 中，大多数适当的方法都支持 [promise](https://developer.chrome.com/docs/extensions/mv3/intro/mv3-overview/#promises)。（参见 [Chrome bug 328932](https://crbug.com/328932)）Manifest V3 支持回调，以实现向后兼容。 -WebExtensions 通过使用 `browser` 命名空间来访问等价的 API： +本页其余部分将详细介绍这些不兼容性和其他不兼容性。 -```js -browser.browserAction.setIcon({ path: "path/to/icon.png" }); -``` +## JavaScript API + +### chrome.\* 和 browser.\* 命名空间 + +- **在 Firefox 和 Safari 中**：API 使用 `browser` 命名空间访问。 -许多 API 是异步的。在 Chrome 中，异步的 API 使用回调来返回值，使用 {{WebExtAPIRef("runtime.lastError")}} 来与传达错误： + ```js + browser.browserAction.setIcon({ path: "path/to/icon.png" }); + ``` + +- **在 Chrome 中**：API 使用 `chrome` 命名空间访问。 + + ```js + chrome.browserAction.setIcon({ path: "path/to/icon.png" }); + ``` -```js -function logCookie(c) { - if (chrome.extension.lastError) { - console.error(chrome.extension.lastError); - } else { +### 回调与 Promise + +- **在 Firefox 和 Safari（所有版本）以及 Chrome 浏览器（从 Manifest 版本 3 开始）中**：异步 API 使用 [promise](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 返回值。 + + ```js + function logCookie(c) { console.log(c); } -} -chrome.cookies.set({ url: "https://developer.mozilla.org/" }, logCookie); -``` + function logError(e) { + console.error(e); + } -在 WebExtensions 中应使用 [promises](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 来访问等价的 API： + let setCookie = browser.cookies.set({ + url: "https://developer.mozilla.org/", + }); + setCookie.then(logCookie, logError); + ``` -```js -function logCookie(c) { - console.log(c); -} +- **在 Chrome 中**：在 Manifest V2 中，异步 API 使用回调来返回值，并使用 {{WebExtAPIRef("runtime.lastError")}} 来返回错误。在 Manifest V3 中，为实现向后兼容，支持回调，并在大多数适当的方法中支持 [promise](https://developer.chrome.com/docs/extensions/mv3/intro/mv3-overview/#promises)。 -function logError(e) { - console.error(e); -} + ```js + function logCookie(c) { + if (chrome.runtime.lastError) { + console.error(chrome.runtime.lastError); + } else { + console.log(c); + } + } -var setCookie = browser.cookies.set({ url: "https://developer.mozilla.org/" }); -setCookie.then(logCookie, logError); -``` + chrome.cookies.set({ url: "https://developer.mozilla.org/" }, logCookie); + ``` + +### Firefox 支持 chrome 和 browser 命名空间 -### Firefox 支持 `chrome` 和 `browser` 命名空间 +作为一种移植辅助工具，WebExtensions 的 Firefox 实现支持使用回调的 `chrome` 和使用 Promise 的 `browser`。这意味着许多 Chrome 扩展无需更改即可在 Firefox 中运行。 -为了帮助移植，Firefox 的 WebExtension 实现支持 `chrome` 与回调和 `browser` 与 promise。这意味着许多 Chrome 扩展无须修改就能在 Firefox 上运行。然而并不是 WebExtension 标准的一部分，也许不会被所有兼容 WebExtension 的浏览器支持。 +> **备注：** `browser` 命名空间由 Firefox 和 Safari 支持。在 [Chrome bug 798169](https://crbug.com/798169) 解决之前，Chrome 浏览器不提供 `browser` 命名空间。 -如果你在编写 WebExtension 时确实要用到 `browser` 和 promise，我们也开发了 polyfill 来保证扩展可以在 Chrome 里运行：. +如果你在编写 WebExtension 时确实要用到 `browser` 和 promise，我们也开发了 polyfill 来保证扩展可以在 Chrome 里运行：。 -### 部分受支持的 API +### 部分支持的 API 页面 [JavaScript API 的浏览器支持情况](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs) 包含了介绍受 Firefox 任意程度支持的 API 的兼容性表格。若对 API 的支持存在须要注意的事项，并标有星号“\*”，且在 API 的参考页面会介绍注意事项。 -这些表格由 [在 GitHub 上以 JSON 文件存储的兼容性数据](https://github.com/mdn/browser-compat-data)生成。 +这些表格由[在 GitHub 上以 JSON 文件存储的兼容性数据](https://github.com/mdn/browser-compat-data)生成。 -本节剩余部分介绍了表格未涵盖的兼容性问题。 +本节其余部分将介绍在构建跨浏览器扩展时可能需要考虑的主要兼容性问题。此外，请记得查看浏览器兼容性表，因为其中可能包含更多兼容性信息。 -#### notifications +#### Notifications API -- For `notifications.create(), with the "basic"` [`type`](/zh-CN/Add-ons/WebExtensions/API/notifications/TemplateType), `iconUrl` is optional in Firefox. It is required in Chrome. -- Notifications are cleared immediately when the user clicks on them. This is not the case in Chrome. -- If you call `notifications.create()` more than once in rapid succession, Firefox may end up not displaying any notification at all. Waiting to make subsequent calls until within the `chrome.notifications.create() callback` function is not a sufficiently long delay to prevent this from happening. +对于 `type "basic"` 的 `notifications.create()`： -#### proxy +- **在 Firefox 中**：`iconUrl` 为可选项。 +- **在 Chrome 中**：`iconUrl` 为必需项。 -- This API is completely different to the design of the Chrome API. With Chrome's API an extension can register a PAC file, but can also define explicit proxying rules. Since this is also possible using the extended PAC files, this API only supports the PAC file approach. Because this API is incompatible with the Chrome `proxy` API, this API is only available through the `browser` namespace. +当用户点击通知时： -#### tabs +- **在 Firefox 中**：通知会立即清除。 +- **在 Chrome 中**：情况并非如此（通知并不会立即清除）。 -- In Firefox, relative URLs passed into `tabs.executeScript()` or `tabs.insertCSS()` are resolved relative to the current page URL. In Chrome, these URLs are resolved relative to the add-on's base URL. To work cross-browser, you can specify the path as an absolute URL, starting at the add-on's root, like this: +如果连续多次调用 `notifications.create()`： - ```html - /path/to/script.js - ``` +- **在 Firefox 中**：通知可能不会显示。在 `notifications.create()` 回调函数中等待后续调用不足以防止出现这种情况。 + +#### Proxy API + +Firefox 和 Chrome 浏览器都包含代理 API。不过，这两个 API 的设计并不兼容。 + +- **在 Firefox 中**：使用 [proxy.settings](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/proxy/settings) 属性或 [proxy.onRequest](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/proxy/onRequest) 属性设置代理，以动态提供 [ProxyInfo](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/proxy/ProxyInfo)。 + 有关 API 的更多信息，请参阅 [proxy](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/proxy)。 +- **在 Chrome 中**：代理设置在 [`proxy.ProxyConfig`](https://developer.chrome.com/docs/extensions/reference/proxy/#type-ProxyConfig) 对象中定义。根据 Chrome 浏览器的代理设置，该设置可能包含 [`proxy.ProxyRules`](https://developer.chrome.com/docs/extensions/reference/proxy/#type-ProxyRules) 或 [`proxy.PacScript`](https://developer.chrome.com/docs/extensions/reference/proxy/#type-PacScript)。代理设置使用 [proxy.settings](https://developer.chrome.com/docs/extensions/reference/proxy/#property-settings) 属性。 + 有关 API 的更多信息，请参阅 [chrome.proxy](https://developer.chrome.com/docs/extensions/reference/proxy/)。 + +#### Tabs API + +使用 `tabs.executeScript()` 或 `tabs.insertCSS()` 时： + +- **在 Firefox 中**：传递的相对 URL 将相对于当前页面 URL 解析。 +- **在 Chrome 中**：相对网址是相对于扩展的基本网址解析的。 + +若要跨浏览器运行，可将路径指定为绝对 URL，从扩展根目录开始，如下所示： + +```plain +/path/to/script.js +``` + +调用 `tabs.remove()` 时： + +- **在 Firefox 中**：`tabs.remove()` promise 在 `beforeunload` 事件后兑现。 +- **在 Chrome 中**：回调不等待 `beforeunload`。 -- 在 Firefox 中，用 `tabs.query()` 根据 URL 查询标签页需要有`"tabs"` 权限。在 Chrome 中，没有`"tabs"`权限也可以，但结果将限制在 URL 匹配主机权限的标签页。 +#### WebRequest API -#### webRequest +- **在 Firefox 中**： -- 在 Firefox 中，只有原网址使用 `http:` 或 `https:` 协议时所请求的重定向才有效。 -- In Firefox, events are not fired for system requests (for example, extension upgrades or searchbar suggestions). From Firefox 57 onwards, Firefox makes an exception for extensions that need to intercept {{WebExtAPIRef("webRequest.onAuthRequired")}} for proxy authorization. See the documentation for {{WebExtAPIRef("webRequest.onAuthRequired")}}. -- In Firefox, if an extension wants to redirect a public (e.g. HTTPS) URL to an [extension page](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/user_interface/Extension_pages), the extension's manifest.json file must contain a [web_accessible_resources](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources) key that lists the URL for the extension page. Note that any website may then link or redirect to that url, and extensions should treat any input (POST data, for examples) as if it came from an untrusted source, just as a normal web page should. + - 只有当原始 URL 使用了 `http:` 或 `https:` 协议时，请求才能被重定向。 + - `activeTab` 权限不允许拦截当前标签页中的网络请求。（参见 [bug 1617479](https://bugzil.la/1617479)） + - 系统请求（如扩展升级或搜索栏建议）不会触发事件。 -#### windows + - **从 Firefox 57 开始**：Firefox 对需要拦截 {{WebExtAPIRef("webRequest.onAuthRequired")}} 代理授权的扩展例外处理。请参阅 {{WebExtAPIRef("webRequest.onAuthRequired")}} 的文档。 -- Firefox 中 `onFocusChanged` 对于指定的焦点变化将触发多次。 + - 如果扩展希望将公共（如 HTTPS）URL 重定向到[扩展页面](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/user_interface/Extension_pages)，扩展的 `manifest.json` 文件必须包含 [`web_accessible_resources`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources) 键，其中包含扩展页面的 URL。 + + > **备注：** 任何网站都可以链接或重定向到该 URL，扩展应将任何输入（例如 POST 数据）视为来自不可信任的来源，就像普通网页一样。 + + - 某些 `browser.webRequest.*` API 允许异步返回解析为 `webRequest.BlockingResponse` 的 Promise。 + +- **在 Chrome 中**：只有在提供 `'asyncBlocking'` 选项的情况下，`webRequest.onAuthRequired` 才（通过回调而非 Promise）支持异步的 `webRequest.BlockingResponse`。 + +#### Windows API + +- **在 Firefox 中**：{{WebExtAPIRef("windows")}} API 的 `onFocusChanged` 对于指定的焦点变化将触发多次。 + +### 不支持的 API + +#### DeclarativeContent API + +- **在 Firefox 中**：Chrome 浏览器的 [declarativeContent](https://developer.chrome.com/docs/extensions/reference/declarativeContent/) API [未被实现](https://bugzil.la/1435864)。此外，Firefox [将不支持](https://bugzil.la/1323433#c16) `declarativeContent.RequestContentScript` API（该 API 很少使用，在 Chrome 浏览器的稳定版本中也不可用）。 ### 其他不兼容情况 #### CSS 中的 URL -Firefox 解析 CSS 中嵌入的 URL 时，若 URL 时相对地址，将是相对 CSS 文件，而不是被嵌入的网页文件。 +- **在 Firefox 中**：被注入的 CSS 文件中的 URL 会相对于*该 CSS 文件*进行解析。 +- **在 Chrome 中**：被注入的 CSS 文件中的 URL 会相对于*被注入的页面*进行解析。 -#### 更多不兼容情况 +#### 持后台页面中对话框的支持情况 -Firefox 不支持从后台标签页使用 `alert()、confirm()` 或 [`prompt()`](/zh-CN/docs/Web/API/Window/prompt)。 +- **在 Firefox 中**：[`alert()`](/zh-CN/docs/Web/API/Window/alert)、[`confirm()`](/zh-CN/docs/Web/API/Window/confirm) 和 [`prompt()`](/zh-CN/docs/Web/API/Window/prompt) 在后台页面中不受支持。 #### web_accessible_resources -在 Chrome 中，若资源在 web_accessible_resources 中列出，即可通过 chrome-extension://\/\ 访问。每个扩展的 ID 都是固定的。 +- **在 Firefox 中**：资源会被分配一个随机的 {{Glossary("UUID")}}，在 Firefox 的每个实例中都会改变：`moz-extension://«random-UUID»/«path»`。这种随机性可能会阻止你做一些事情，比如将扩展的 URL 添加到另一个域的 CSP 策略中。 +- **在 Chrome 中**：当资源被列在 `web_accessible_resources` 中时，它的访问方式为 `chrome-extension://«your-extension-id»/«path»`。扩展 ID 对于扩展来说是固定的。 + +#### Manifest“key”属性 + +- **在 Firefox 中**：由于 Firefox 对 `web_accessible_resources` 使用随机 UUID，因此不支持此属性。Firefox 扩展可通过 `browser_specific_settings.gecko.id` 清单键（请参阅 [browser_specific_settings.gecko](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_settings#firefox_gecko_属性) 来固定其扩展 ID）。 +- **在 Chrome 中**：在使用未打包的扩展时，清单可能包含一个 [`"key"` 属性](https://developer.chrome.com/docs/extensions/mv3/manifest/key/)，以便在不同机器上固定扩展 ID。这主要在使用 `web_accessible_resources` 时有用。 + +#### 内容脚本 HTTP(S) 请求 + +- **在 Firefox 中**：内容脚本发出 HTTP(S) 请求时，必须提供绝对 URL。 +- **在 Chrome 中**：当内容脚本向相对 URL（如 `/api`）发出请求（例如，使用 [`fetch()`](/zh-CN/docs/Web/API/Fetch_API/Using_Fetch)）时，该请求将被发送到 `https://example.com/api`。 + +#### 内容脚本环境 + +- **在 Firefox 中**：[内容脚本环境](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Content_scripts#内容脚本环境)的全局作用域并不严格等于 `window`（[Firefox bug 1208775](https://bugzil.la/1208775)）。更具体地说，全局作用域（`globalThis`）照例由标准 JavaScript 功能组成，另外还有作为全局作用域原型的 `window`。大多数 DOM API 都通过 `window` 从页面继承，通过 [Xray vision](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Sharing_objects_with_page_scripts#xray_vision_in_firefox) 来屏蔽内容脚本对网页的修改。内容脚本可能会遇到来自其全局作用域的 JavaScript 对象或来自网页的 Xray 封装版本。 +- **在 Chrome 中**：全局作用域为 `window`，可用的 DOM API 一般独立于网页（除了共享底层 DOM 外）。内容脚本无法直接访问网页中的 JavaScript 对象。 -Firefox 以不同方式进行实现。它使用一个随机的 UUID，在每个 Firefox 实例中都不同：moz-extension://\/\。这一随机性可能会让你无法实现某些东西，例如你无法将特定扩展的 URL 添加到另一个域名的 CSP 策略中。 +#### 通过内容脚本在网页中执行代码 -#### Manifest "key" 属性 +- **在 Firefox 中**：{{jsxref("Global_Objects/eval", "eval")}} 在内容脚本的上下文中运行代码，而 `window.eval` 在页面的上下文中运行代码。请参阅[在内容脚本中使用`eval`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Content_scripts#在内容脚本中使用_eval)。 +- **在 Chrome 中**：{{jsxref("Global_Objects/eval", "eval")}} 和 `window.eval` 总是在内容脚本的上下文而非页面的上下文中运行代码。 -对于解包了的扩展，Chrome 允许将 ["key" 属性](https://developer.chrome.com/extensions/manifest/key)添加到 manifest，以确保在不同机器上的扩展 ID 不变。这主要在使用 web_accessible_resources 时有用。鉴于 Firefox 为 web_accessible_resources 使用随机的 UUID，此属性不受支持。 +#### 在内容脚本之间共享变量 -#### Content script requests happen in the context of extension, not content page +- **在 Firefox 中**：无法通过在一个脚本中将变量赋值给 `this.{variableName}` 并尝试在另一个脚本中使用 `window.{variableName}` 访问它们来在内容脚本之间共享变量。这是 Firefox 沙盒环境造成的限制。该限制可能会被移除；请参阅 [Firefox bug 1208775](https://bugzil.la/1208775)。 -In Chrome when request is called (for example, using [`fetch()`](/zh-CN/docs/Web/API/Fetch_API/Using_Fetch)) to relative URL like `/api` from content script, it will be sent to `https://example.com/api`. In Firefox you have to provide absolute URLs. +#### 导航时内容脚本的生命周期 + +- **在 Firefox 中**：内容脚本在用户离开网页后仍会注入网页。但是，window 对象属性会被销毁。例如，如果内容脚本设置了 `window.prop1 = "prop"`，而用户导航离开并返回页面时，`window.prop1` 是未定义的。此问题在 [Firefox bug 1525400](https://bugzil.la/1525400) 中被跟踪。 + + 要模仿 Chrome 浏览器的行为，请监听 [pageshow](/zh-CN/docs/Web/API/Window/pageshow_event) 和 [pagehide](/zh-CN/docs/Web/API/Window/pagehide_event) 事件。然后模拟注入或销毁内容脚本。 + +- **在 Chrome 中**：当用户离开网页时，内容脚本会被销毁。如果用户点击返回按钮通过历史记录返回页面，则内容脚本会被注入网页。 + +#### “逐标签”缩放行为 + +- **在 Firefox 中**：缩放级别会在页面加载和标签页导航时持续存在。 +- **在 Chrome 中**：缩放更改会在导航时重置；在标签页中导航时，页面始终以其各自的缩放系数加载。 + +请参阅 {{WebExtAPIRef("tabs.ZoomSettingsScope")}} 。 ## manifest.json 键 -The main [manifest.json](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json) page includes a table describing browser support for manifest.json keys. Where there are caveats around support for a given key, this is indicated in the table with an asterisk "\*" and in the reference page for the key, the caveats are explained. +[`manifest.json`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json) 主页面包含一个表格，说明浏览器对 `manifest.json` 键的支持情况。如果对某个键的支持存在注意事项，则会在表中用星号"\*"表示。选择星号会展开表格，显示解释注意事项的说明。 + +这些表格是根据 [GitHub 中的 JSON 文件](https://github.com/mdn/browser-compat-data)中存储的兼容性数据生成的。 -These tables are generated from compatibility data stored as [JSON files in GitHub](https://github.com/mdn/browser-compat-data). +## 原生通信 -## Native messaging +### 基于连接的信息传递参数 -### Command-line arguments +**在 Linux 和 Mac 上**：Chrome 浏览器会向本地应用程序传递一个参数，即启动它的扩展的来源，其形式为 `chrome-extension://"extensionID/"`（需要使用斜线）。这样，应用程序就能识别扩展。 -On Linux and Mac, Chrome passes one argument to the native app, which is the origin of the extension that started it, in the form: `chrome-extension://[extensionID]`. This enables the app to identify the extension. +**在 Windows 上**：Chrome 浏览器会传递两个参数： -On Windows, Chrome passes two arguments: the first is the origin of the extension, and the second is a handle to the Chrome native window that started the app. +1. 扩展的源 +2. 启动应用程序的 Chrome 浏览器本地窗口的句柄 ### allowed_extensions -In Chrome, the `allowed_extensions` key in the app manifest is called `allowed_origins` instead. +- **在 Firefox 中**：清单键名为 `allowed_extensions`。 +- **在 Chrome 中**：清单键名为 `allowed_origins`。 + +### 应用清单位置 + +- **在 Chrome 中**：应用程序清单预计会放在不同的位置。请参阅 Chrome 文档中的[本地消息主机位置](https://developer.chrome.com/docs/apps/nativeMessaging/#native-messaging-host-location)。 + +### 应用持久化 + +- **在 Firefox 中**：本机消息传输连接关闭时，如果子进程没有脱离，Firefox 会将其杀死。在 Windows 系统中，浏览器会将本机应用程序的进程放入[作业对象]()并杀死该作业。假设本地应用程序启动了其他进程，并希望这些进程在本地应用程序被杀死后继续打开。在这种情况下，本地应用程序必须使用 `CreateProcess` 而不是 `ShellExecute` 来启动其他进程，并使用 [`CREATE_BREAKAWAY_FROM_JOB`]() 标志。 + +## 数据克隆算法 + +某些扩展 API 允许扩展从扩展的一部分向另一部分发送数据，例如 {{WebExtAPIRef("runtime.sendMessage()")}}、{{WebExtAPIRef("tabs.sendMessage()")}}、{{WebExtAPIRef("runtime.onMessage")}}、{{WebExtAPIRef("runtime.port")}} 的 `postMessage()` 方法和 {{WebExtAPIRef("tabs.executeScript()")}}。 + +- **在 Firefox 中**：使用[结构化克隆算法](/zh-CN/docs/Web/API/Web_Workers_API/Structured_clone_algorithm)。 +- **在 Chrome 中**：使用 [JSON 序列化算法](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify#描述)。将来可能会切换到结构化克隆（[issue 248548](https://crbug.com/248548)）。 -### App manifest location +结构化克隆算法比 JSON 序列化算法支持更多类型。一个明显的例外是具有 `toJSON` 方法的（DOM）对象。DOM 对象默认情况下不可克隆，也不可进行 JSON 序列化，但使用 `toJSON()` 方法，这些对象可以进行 JSON 序列化（但仍不能使用结构化克隆算法进行克隆）。不可结构化克隆的 JSON 序列化对象示例包括 {{domxref("URL")}} 和 {{domxref("PerformanceEntry")}} 的实例。 -Chrome expects to find the app manifest in a different place. See [Native messaging host location](https://developer.chrome.com/extensions/nativeMessaging#native-messaging-host-location) in the Chrome docs. +依赖于 JSON 序列化算法中的 `toJSON()` 方法的扩展可使用 {{jsxref("JSON.stringify()")}} 后接 {{jsxref("JSON.parse()")}} 来确保可以交换消息，因为解析后的 JSON 值在结构上始终是可克隆的。 diff --git a/files/zh-cn/mozilla/add-ons/webextensions/manifest.json/browser_specific_settings/index.md b/files/zh-cn/mozilla/add-ons/webextensions/manifest.json/browser_specific_settings/index.md index 0a38cda62d82a9..81b35eadd3786a 100644 --- a/files/zh-cn/mozilla/add-ons/webextensions/manifest.json/browser_specific_settings/index.md +++ b/files/zh-cn/mozilla/add-ons/webextensions/manifest.json/browser_specific_settings/index.md @@ -1,5 +1,5 @@ --- -title: applications +title: browser_specific_settings slug: Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_settings --- @@ -17,19 +17,19 @@ slug: Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_settings 强制性 通常不做强制性要求（详细参见When do you need an Add-on ID?)。在 Firefox 48 版本之前为强制要求。 + href="https://extensionworkshop.com/documentation/develop/extensions-and-the-add-on-id/#when-do-you-need-an-add-on-id" + >什么时候需要附加组件 ID？。）如果扩展 ID 不能确定，则必需，参见 browser_specific_settings.gecko.id。 示例 
-"applications": {
+"browser_specific_settings": {
   "gecko": {
     "id": "addon@example.com",
     "strict_min_version": "42.0"
@@ -41,30 +41,36 @@ slug: Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_settings
   
 
 
-`applications` key 包含特定于主机应用程序的键。
+## 描述
 
-目前只包含了一个 key：`gecko`，其中包含了 4 个 attributes:
+`browser_specific_settings` 键包含特定于主机应用程序的键。
 
-- `id`即[extension ID](/zh-CN/Add-ons/Install_Manifests#id)。从 Firefox 48 起为可选项，在此之前为强制必须项。参看[WebExtensions and the Add-on ID](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/WebExtensions_and_the_Add-on_ID)来确认何时需要定义附加组件 ID。
+### Firefox（Gecko）属性
+
+- `id` 即扩展 ID。从 Firefox 48 起为可选项，在此之前为强制必须项。参见 [WebExtensions 和附加组件 ID](https://extensionworkshop.com/documentation/develop/extensions-and-the-add-on-id/) 来确认何时需要定义附加组件 ID。
 - `strict_min_version`: Gecko 所能支持的最小版本号。不允许使用"\*"来定义版本号。默认值为 "42a1"。
 - `strict_max_version`: Gecko 所能支持的最大版本号。如果安装或运行附加组件的 Firefox 版本号高于这个最大版本号，附加组件将不能运行或不允许被安装。默认值为"\*"，意思为不对最大版本号做检查。
-- `update_url`为链接到[add-on update manifest](/zh-CN/Add-ons/Updates)的链接。注意链接必须以"https"开头。这是为了使你自己就能够管理附加组件的更新 (如不通过 AMO)。
-
-## Chrome 不兼容性
-
-你不能在 Chrome 附加组件中使用这个 key。
+- `update_url` 为链接到[扩展更新清单](https://extensionworkshop.com/documentation/manage/updating-your-extension/)的链接。注意链接必须以“https”开头。这是为了使你自己就能够管理附加组件的更新（如不通过 AMO）。
 
 ## 示例
 
-示例中包含了所有可能的 key。注意你通常不会包含`strict_max_version`或`update_url`key 在大部分附加组件中。
+示例中包含了所有可能的 key。注意你通常不会在大部分附加组件中包含 `strict_max_version` 和 `update_url`。
 
 ```json
-"applications": {
+"browser_specific_settings": {
   "gecko": {
     "id": "addon@example.com",
     "strict_min_version": "42.0",
     "strict_max_version": "50.*",
     "update_url": "https://example.com/updates.json"
+  },
+  "safari": {
+    "strict_min_version": "14",
+    "strict_max_version": "20"
   }
 }
 ```
+
+## 浏览器兼容性
+
+{{Compat}}

From 1289cfd63daf16a16ad6688333898626a2e5f439 Mon Sep 17 00:00:00 2001
From: hanyujie2002 
Date: Wed, 15 Nov 2023 17:33:04 +0800
Subject: [PATCH 067/141] zh-cn: init the translation of mathml table (#16963)

Co-authored-by: Allo 
---
 .../learn/mathml/first_steps/tables/index.md  | 311 ++++++++++++++++++
 1 file changed, 311 insertions(+)
 create mode 100644 files/zh-cn/learn/mathml/first_steps/tables/index.md

diff --git a/files/zh-cn/learn/mathml/first_steps/tables/index.md b/files/zh-cn/learn/mathml/first_steps/tables/index.md
new file mode 100644
index 00000000000000..1696365f5602bb
--- /dev/null
+++ b/files/zh-cn/learn/mathml/first_steps/tables/index.md
@@ -0,0 +1,311 @@
+---
+title: MathML 表格
+slug: Learn/MathML/First_steps/Tables
+---
+
+{{LearnSidebar}}{{PreviousMenuNext("Learn/MathML/First_steps/Scripts", "Learn/MathML/First_steps/Three_famous_mathematical_formulas", "Learn/MathML/First_steps")}}
+
+掌握了所有基本的数学符号后，接下来要考虑的是用于矩阵式表达和其他高级数学布局的表格布局。
+
+
+  
+    
+      
+      
+    
+    
+      
+      
+    
+  
+
前提：
+        基本的计算机操作能力，安装基本软件，基本的文件操作知识，以及 HTML 基础知识（学习 HTML 简介和 HTML 表格）
+      
目标：
+        了解 MathML 表格元素，并了解一些使用案例。
+      

+
+## MathML 表格元素
+
+MathML 表格元素与 [HTML 表格](/zh-CN/docs/Learn/HTML/Tables)的元素类似：`` 元素表示数学表格，它的子元素是 `` 元素（表示行），每个 `` 元素都有 `` 元素作为其子元素（表示单元格）。`` 元素可以在 MathML 公式的任何位置插入。`` 元素可以包含任意数量的 MathML 子元素，并将它们布局为 `` 容器。
+
+表格通常用于矩阵式表达式（包括向量）。以下是一个基本示例，该示例取自[有关 CSS `matrix()` 函数的文章](/zh-CN/docs/Web/CSS/transform-function/matrix)：
+
+```html hidden
+
+```
+
+```html
+
+  
+    (
+    
+      
+        
+          a
+        
+        
+          c
+        
+        
+          0
+        
+        
+          
+            t
+            x
+          
+        
+      
+      
+        
+          b
+        
+        
+          d
+        
+        
+          0
+        
+        
+          
+            t
+            y
+          
+        
+      
+      
+        
+          0
+        
+        
+          0
+        
+        
+          1
+        
+        
+          0
+        
+      
+      
+        
+          0
+        
+        
+          0
+        
+        
+          0
+        
+        
+          1
+        
+      
+    
+    )
+  
+
+```
+
+{{ EmbedLiveSample('MathML 表格元素', 700, 200) }}
+
+## 允许单元格跨多行多列
+
+与 [HTML 表格](/zh-CN/docs/Learn/HTML/Tables/Basics#allowing_cells_to_span_multiple_rows_and_columns)类似，`` 元素具有 `columnspan` 和 `rowspan` 属性，以指示单元格跨多行和多列。下面的内部矩阵跨越外部矩阵的两列：
+
+```html hidden
+
+
+  
+    
+    横跨多列的矩阵
+    
+  
+  
+    
+      
+        (
+        
+          
+            
+              
+                (
+                
+                  
+                    
+                      a
+                    
+                    
+                      c
+                    
+                  
+                  
+                    
+                      b
+                    
+                    
+                      d
+                    
+                  
+                
+                )
+              
+            
+            
+              0
+            
+            
+              T
+            
+          
+          
+            
+              0
+            
+            
+              0
+            
+            
+              1
+            
+            
+              0
+            
+          
+          
+            
+              0
+            
+            
+              0
+            
+            
+              0
+            
+            
+              1
+            
+          
+        
+        )
+      
+    
+  
+
+```
+
+{{EmbedLiveSample('允许单元格横跨多行多列', 700, 200)}}
+
+> **备注：** 出于历史原因，MathML 中用于跨列的属性被称为 `columnspan` 而不是 `colspan`。
+
+## 高级布局用法
+
+除了表示类似矩阵的对象外，MathML 表格有时也用于数学公式中的高级布局，例如在[维基百科对勒让德符号的定义](https://zh.wikipedia.org/wiki/勒让德符号)中，公式被分隔在三行中，而值和条件则分隔于两列。
+
+```html
+
+
+  
+    
+    第一个矩阵
+    
+  
+  
+    
+      
+        
+          (
+          
+            a
+            b
+          
+          )
+        
+        =
+        
+          {
+          
+            
+              
+                1
+              
+              
+                如果 
+                a
+                 是模 
+                p
+                 的二次剩余且不是 
+                p
+                 的倍数 
+                ；
+              
+            
+            
+              
+                −
+                1
+              
+              
+                如果 
+                a
+                 是模 
+                p
+                 的非二次剩余 
+                ；
+              
+            
+            
+              
+                0
+              
+              
+                如果 
+                a
+                 是 
+                p
+                 的倍数 
+                。
+              
+            
+          
+        
+      
+    
+  
+
+```
+
+{{ EmbedLiveSample('高级布局用法', 700, 200) }}
+
+> **警告：** [``](/zh-CN/docs/Web/MathML/Element/mtable) 文档中记录了更多高级布局选项，如对齐或间距等特殊属性。这些属性起源于 CSS 一类事物之前，最初设计用于不支持 CSS 的渲染器。然而，并非所有浏览器都实现了这些属性。将来，可能会用基于 CSS 的替代方案取代仅用于布局目的（即非实际矩阵对象）的 `` 的用法。
+
+## 总结
+
+在本文中，我们回顾了 ``、`` 和 `` 元素，它们是用于表格的 HTML 元素的等效元素。我们学习了如何使用它们表示类似矩阵的对象，以及如何用它们实现高级布局。
+
+你已经接近完成本单元了——我们只剩下最后一件事要做。在[三个著名数学公式测验](/zh-CN/docs/Learn/MathML/First_steps/Three_famous_mathematical_formulas)中，你需要运用新学到的知识，使用 HTML 和 MathML 重写一个小型数学文章。
+
+{{LearnSidebar}}{{PreviousMenuNext("Learn/MathML/First_steps/Scripts", "Learn/MathML/First_steps/Three_famous_mathematical_formulas", "Learn/MathML/First_steps")}}
+
+## 参见
+
+- [学习 HTML 表格](/zh-CN/docs/Learn/HTML/Tables)
+- [`` 元素](/zh-CN/docs/Web/MathML/Element/mtable)
+- [`` 元素](/zh-CN/docs/Web/MathML/Element/mtr)
+- [`` 元素](/zh-CN/docs/Web/MathML/Element/mtd)

From 25aaeb19fa8fae627f18289d001b291e7df05e4b Mon Sep 17 00:00:00 2001
From: MDN Web Docs GitHub Bot <108879845+mdn-bot@users.noreply.github.com>
Date: Wed, 15 Nov 2023 14:06:24 +0100
Subject: [PATCH 068/141] [zh-tw] sync translated content (#16971)

Co-authored-by: Allo 
---
 files/zh-tw/_redirects.txt                          |  1 +
 files/zh-tw/_wikihistory.json                       |  2 +-
 .../api/console/{assert => assert_static}/index.md  | 13 +++++++++----
 3 files changed, 11 insertions(+), 5 deletions(-)
 rename files/zh-tw/web/api/console/{assert => assert_static}/index.md (92%)

diff --git a/files/zh-tw/_redirects.txt b/files/zh-tw/_redirects.txt
index 517795de7b7537..3e3a65f2ca2b40 100644
--- a/files/zh-tw/_redirects.txt
+++ b/files/zh-tw/_redirects.txt
@@ -427,6 +427,7 @@
 /zh-TW/docs/Web/API/WindowOrWorkerGlobalScope/setInterval	/zh-TW/docs/Web/API/setInterval
 /zh-TW/docs/Web/API/XMLHttpRequest/FormData	/zh-TW/docs/Web/API/FormData
 /zh-TW/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest	/zh-TW/docs/Web/API/XMLHttpRequest_API/Using_XMLHttpRequest
+/zh-TW/docs/Web/API/console/assert	/zh-TW/docs/Web/API/console/assert_static
 /zh-TW/docs/Web/Apps/Progressive	/zh-TW/docs/Web/Progressive_web_apps
 /zh-TW/docs/Web/CSS/-moz-border-image	/zh-TW/docs/Web/CSS/border-image
 /zh-TW/docs/Web/CSS/@viewport	/zh-TW/docs/Web/CSS
diff --git a/files/zh-tw/_wikihistory.json b/files/zh-tw/_wikihistory.json
index 7287408b8301f7..ac9ae2cfc23ae8 100644
--- a/files/zh-tw/_wikihistory.json
+++ b/files/zh-tw/_wikihistory.json
@@ -2400,7 +2400,7 @@
     "modified": "2020-10-15T22:03:31.329Z",
     "contributors": ["Syihoy", "porfirion"]
   },
-  "Web/API/console/assert": {
+  "Web/API/console/assert_static": {
     "modified": "2020-10-15T22:03:27.482Z",
     "contributors": ["lin826", "iigmir"]
   },
diff --git a/files/zh-tw/web/api/console/assert/index.md b/files/zh-tw/web/api/console/assert_static/index.md
similarity index 92%
rename from files/zh-tw/web/api/console/assert/index.md
rename to files/zh-tw/web/api/console/assert_static/index.md
index 4d0eb05d8dfcd9..c0d03894bbec7a 100644
--- a/files/zh-tw/web/api/console/assert/index.md
+++ b/files/zh-tw/web/api/console/assert_static/index.md
@@ -1,6 +1,6 @@
 ---
 title: Console.assert()
-slug: Web/API/console/assert
+slug: Web/API/console/assert_static
 ---
 
 {{APIRef("Console API")}}
@@ -13,9 +13,14 @@ slug: Web/API/console/assert
 
 ## 語法
 
-```plain
-console.assert(assertion, obj1 [, obj2, ..., objN]);
-console.assert(assertion, msg [, subst1, ..., substN]); // c-like message formatting
+```js-nolint
+assert(assertion, obj1)
+assert(assertion, obj1, obj2)
+assert(assertion, obj1, obj2, /* …, */ objN)
+
+assert(assertion, msg)
+assert(assertion, msg, subst1)
+assert(assertion, msg, subst1, /* …, */ substN)
 ```
 
 ### 參數

From b95aeed709d457c334a288bb25a664786e4a5769 Mon Sep 17 00:00:00 2001
From: MDN Web Docs GitHub Bot <108879845+mdn-bot@users.noreply.github.com>
Date: Wed, 15 Nov 2023 14:51:21 +0100
Subject: [PATCH 069/141] [zh-cn] sync translated content (#16975)

* zh-cn: sync translated content

* zh-cn: sync upstream changes

ref: mdn/content#30065

---------

Co-authored-by: Allo 
---
 files/zh-cn/_redirects.txt                    | 44 ++++++---
 files/zh-cn/_wikihistory.json                 | 44 ++++-----
 .../{assert => assert_static}/index.md        | 10 +-
 .../console/{clear => clear_static}/index.md  |  6 +-
 .../console/{count => count_static}/index.md  |  6 +-
 .../index.md                                  | 15 +--
 .../console/{debug => debug_static}/index.md  |  4 +-
 .../api/console/{dir => dir_static}/index.md  |  6 +-
 .../{dirxml => dirxml_static}/index.md        |  4 +-
 .../console/{error => error_static}/index.md  |  5 +-
 .../console/{group => group_static}/index.md  |  4 +-
 .../index.md                                  |  4 +-
 .../{groupend => groupend_static}/index.md    | 14 +--
 files/zh-cn/web/api/console/index.md          | 96 +++++++++----------
 .../console/{info => info_static}/index.md    | 12 ++-
 .../api/console/{log => log_static}/index.md  |  4 +-
 .../{profile => profile_static}/index.md      | 12 +--
 .../index.md                                  | 18 ++--
 .../console/{table => table_static}/index.md  |  4 +-
 .../console/{time => time_static}/index.md    | 15 +--
 .../{timeend => timeend_static}/index.md      | 11 ++-
 .../{timelog => timelog_static}/index.md      | 13 ++-
 .../{timestamp => timestamp_static}/index.md  | 20 ++--
 .../console/{trace => trace_static}/index.md  | 15 +--
 .../console/{warn => warn_static}/index.md    | 14 +--
 25 files changed, 216 insertions(+), 184 deletions(-)
 rename files/zh-cn/web/api/console/{assert => assert_static}/index.md (76%)
 rename files/zh-cn/web/api/console/{clear => clear_static}/index.md (80%)
 rename files/zh-cn/web/api/console/{count => count_static}/index.md (92%)
 rename files/zh-cn/web/api/console/{countreset => countreset_static}/index.md (88%)
 rename files/zh-cn/web/api/console/{debug => debug_static}/index.md (94%)
 rename files/zh-cn/web/api/console/{dir => dir_static}/index.md (89%)
 rename files/zh-cn/web/api/console/{dirxml => dirxml_static}/index.md (88%)
 rename files/zh-cn/web/api/console/{error => error_static}/index.md (92%)
 rename files/zh-cn/web/api/console/{group => group_static}/index.md (89%)
 rename files/zh-cn/web/api/console/{groupcollapsed => groupcollapsed_static}/index.md (89%)
 rename files/zh-cn/web/api/console/{groupend => groupend_static}/index.md (79%)
 rename files/zh-cn/web/api/console/{info => info_static}/index.md (86%)
 rename files/zh-cn/web/api/console/{log => log_static}/index.md (96%)
 rename files/zh-cn/web/api/console/{profile => profile_static}/index.md (83%)
 rename files/zh-cn/web/api/console/{profileend => profileend_static}/index.md (56%)
 rename files/zh-cn/web/api/console/{table => table_static}/index.md (97%)
 rename files/zh-cn/web/api/console/{time => time_static}/index.md (76%)
 rename files/zh-cn/web/api/console/{timeend => timeend_static}/index.md (85%)
 rename files/zh-cn/web/api/console/{timelog => timelog_static}/index.md (89%)
 rename files/zh-cn/web/api/console/{timestamp => timestamp_static}/index.md (75%)
 rename files/zh-cn/web/api/console/{trace => trace_static}/index.md (66%)
 rename files/zh-cn/web/api/console/{warn => warn_static}/index.md (76%)

diff --git a/files/zh-cn/_redirects.txt b/files/zh-cn/_redirects.txt
index e21a7737fc0bc5..47f9de86039c7e 100644
--- a/files/zh-cn/_redirects.txt
+++ b/files/zh-cn/_redirects.txt
@@ -304,11 +304,11 @@
 /zh-CN/docs/DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data	/zh-CN/docs/Web/API/XMLHttpRequest_API/Sending_and_Receiving_Binary_Data
 /zh-CN/docs/DOM/XMLHttpRequest/Synchronous_and_Asynchronous_Requests	/zh-CN/docs/Web/API/XMLHttpRequest_API/Synchronous_and_Asynchronous_Requests
 /zh-CN/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest	/zh-CN/docs/Web/API/XMLHttpRequest_API/Using_XMLHttpRequest
-/zh-CN/docs/DOM/console.dir	/zh-CN/docs/Web/API/console/dir
-/zh-CN/docs/DOM/console.group	/zh-CN/docs/Web/API/console/group
-/zh-CN/docs/DOM/console.groupCollapsed	/zh-CN/docs/Web/API/console/groupCollapsed
-/zh-CN/docs/DOM/console.log	/zh-CN/docs/Web/API/console/log
-/zh-CN/docs/DOM/console.trace	/zh-CN/docs/Web/API/console/trace
+/zh-CN/docs/DOM/console.dir	/zh-CN/docs/Web/API/console/dir_static
+/zh-CN/docs/DOM/console.group	/zh-CN/docs/Web/API/console/group_static
+/zh-CN/docs/DOM/console.groupCollapsed	/zh-CN/docs/Web/API/console/groupcollapsed_static
+/zh-CN/docs/DOM/console.log	/zh-CN/docs/Web/API/console/log_static
+/zh-CN/docs/DOM/console.trace	/zh-CN/docs/Web/API/console/trace_static
 /zh-CN/docs/DOM/document	/zh-CN/docs/Web/API/Document
 /zh-CN/docs/DOM/document.URL	/zh-CN/docs/Web/API/Document/URL
 /zh-CN/docs/DOM/document.activeElement	/zh-CN/docs/Web/API/Document/activeElement
@@ -1915,12 +1915,34 @@
 /zh-CN/docs/Web/API/XMLHttpRequestEventTarget/onload	/zh-CN/docs/Web/API/XMLHttpRequest/load_event
 /zh-CN/docs/Web/API/XMLHttpRequestEventTarget/onloadstart	/zh-CN/docs/Web/API/XMLHttpRequest/loadstart_event
 /zh-CN/docs/Web/API/XMLHttpRequestEventTarget/onprogress	/zh-CN/docs/Web/API/XMLHttpRequest/progress_event
-/zh-CN/docs/Web/API/console.dir	/zh-CN/docs/Web/API/console/dir
-/zh-CN/docs/Web/API/console.group	/zh-CN/docs/Web/API/console/group
-/zh-CN/docs/Web/API/console.groupCollapsed	/zh-CN/docs/Web/API/console/groupCollapsed
-/zh-CN/docs/Web/API/console.log	/zh-CN/docs/Web/API/console/log
-/zh-CN/docs/Web/API/console.time	/zh-CN/docs/Web/API/console/time
-/zh-CN/docs/Web/API/console.trace	/zh-CN/docs/Web/API/console/trace
+/zh-CN/docs/Web/API/console.dir	/zh-CN/docs/Web/API/console/dir_static
+/zh-CN/docs/Web/API/console.group	/zh-CN/docs/Web/API/console/group_static
+/zh-CN/docs/Web/API/console.groupCollapsed	/zh-CN/docs/Web/API/console/groupcollapsed_static
+/zh-CN/docs/Web/API/console.log	/zh-CN/docs/Web/API/console/log_static
+/zh-CN/docs/Web/API/console.time	/zh-CN/docs/Web/API/console/time_static
+/zh-CN/docs/Web/API/console.trace	/zh-CN/docs/Web/API/console/trace_static
+/zh-CN/docs/Web/API/console/assert	/zh-CN/docs/Web/API/console/assert_static
+/zh-CN/docs/Web/API/console/clear	/zh-CN/docs/Web/API/console/clear_static
+/zh-CN/docs/Web/API/console/count	/zh-CN/docs/Web/API/console/count_static
+/zh-CN/docs/Web/API/console/countReset	/zh-CN/docs/Web/API/console/countreset_static
+/zh-CN/docs/Web/API/console/debug	/zh-CN/docs/Web/API/console/debug_static
+/zh-CN/docs/Web/API/console/dir	/zh-CN/docs/Web/API/console/dir_static
+/zh-CN/docs/Web/API/console/dirxml	/zh-CN/docs/Web/API/console/dirxml_static
+/zh-CN/docs/Web/API/console/error	/zh-CN/docs/Web/API/console/error_static
+/zh-CN/docs/Web/API/console/group	/zh-CN/docs/Web/API/console/group_static
+/zh-CN/docs/Web/API/console/groupCollapsed	/zh-CN/docs/Web/API/console/groupcollapsed_static
+/zh-CN/docs/Web/API/console/groupEnd	/zh-CN/docs/Web/API/console/groupend_static
+/zh-CN/docs/Web/API/console/info	/zh-CN/docs/Web/API/console/info_static
+/zh-CN/docs/Web/API/console/log	/zh-CN/docs/Web/API/console/log_static
+/zh-CN/docs/Web/API/console/profile	/zh-CN/docs/Web/API/console/profile_static
+/zh-CN/docs/Web/API/console/profileEnd	/zh-CN/docs/Web/API/console/profileend_static
+/zh-CN/docs/Web/API/console/table	/zh-CN/docs/Web/API/console/table_static
+/zh-CN/docs/Web/API/console/time	/zh-CN/docs/Web/API/console/time_static
+/zh-CN/docs/Web/API/console/timeEnd	/zh-CN/docs/Web/API/console/timeend_static
+/zh-CN/docs/Web/API/console/timeLog	/zh-CN/docs/Web/API/console/timelog_static
+/zh-CN/docs/Web/API/console/timeStamp	/zh-CN/docs/Web/API/console/timestamp_static
+/zh-CN/docs/Web/API/console/trace	/zh-CN/docs/Web/API/console/trace_static
+/zh-CN/docs/Web/API/console/warn	/zh-CN/docs/Web/API/console/warn_static
 /zh-CN/docs/Web/API/document.URL	/zh-CN/docs/Web/API/Document/URL
 /zh-CN/docs/Web/API/document.activeElement	/zh-CN/docs/Web/API/Document/activeElement
 /zh-CN/docs/Web/API/document.anchors	/zh-CN/docs/Web/API/Document/anchors
diff --git a/files/zh-cn/_wikihistory.json b/files/zh-cn/_wikihistory.json
index 804f95d2103b78..316a781e06e56e 100644
--- a/files/zh-cn/_wikihistory.json
+++ b/files/zh-cn/_wikihistory.json
@@ -16159,7 +16159,7 @@
       "jiereal"
     ]
   },
-  "Web/API/console/assert": {
+  "Web/API/console/assert_static": {
     "modified": "2020-10-15T21:49:40.751Z",
     "contributors": [
       "zhangchen",
@@ -16169,51 +16169,51 @@
       "ZhangKaiqiang"
     ]
   },
-  "Web/API/console/clear": {
+  "Web/API/console/clear_static": {
     "modified": "2020-01-12T03:19:48.000Z",
     "contributors": ["853419196", "ZhangKaiqiang"]
   },
-  "Web/API/console/count": {
+  "Web/API/console/count_static": {
     "modified": "2019-08-15T04:00:38.089Z",
     "contributors": ["teemoooo", "gaowhen"]
   },
-  "Web/API/console/countReset": {
+  "Web/API/console/countreset_static": {
     "modified": "2020-10-15T22:08:08.444Z",
     "contributors": ["Paapaapa", "807573515"]
   },
-  "Web/API/console/debug": {
+  "Web/API/console/debug_static": {
     "modified": "2020-10-15T22:15:26.417Z",
     "contributors": ["hefang"]
   },
-  "Web/API/console/dir": {
+  "Web/API/console/dir_static": {
     "modified": "2019-10-08T07:08:14.257Z",
     "contributors": ["SphinxKnight", "teoli", "AshfaqHossain", "ziyunfei"]
   },
-  "Web/API/console/dirxml": {
+  "Web/API/console/dirxml_static": {
     "modified": "2019-03-23T22:11:46.371Z",
     "contributors": ["zzw918"]
   },
-  "Web/API/console/error": {
+  "Web/API/console/error_static": {
     "modified": "2019-08-15T04:02:05.738Z",
     "contributors": ["pluwen", "kameii"]
   },
-  "Web/API/console/group": {
+  "Web/API/console/group_static": {
     "modified": "2019-03-24T00:18:26.661Z",
     "contributors": ["teoli", "khalid32", "ziyunfei"]
   },
-  "Web/API/console/groupCollapsed": {
+  "Web/API/console/groupcollapsed_static": {
     "modified": "2019-03-24T00:18:28.377Z",
     "contributors": ["teoli", "khalid32", "ziyunfei"]
   },
-  "Web/API/console/groupEnd": {
+  "Web/API/console/groupend_static": {
     "modified": "2019-03-18T21:46:40.075Z",
     "contributors": ["hhxxhg", "luohe"]
   },
-  "Web/API/console/info": {
+  "Web/API/console/info_static": {
     "modified": "2020-02-02T00:13:13.877Z",
     "contributors": ["Headog", "tsingwong", "Jaanai-Ewain", "yogoshary"]
   },
-  "Web/API/console/log": {
+  "Web/API/console/log_static": {
     "modified": "2020-07-27T04:01:25.975Z",
     "contributors": [
       "alan10332000",
@@ -16228,19 +16228,19 @@
       "ziyunfei"
     ]
   },
-  "Web/API/console/profile": {
+  "Web/API/console/profile_static": {
     "modified": "2019-03-18T21:41:07.871Z",
     "contributors": ["clwm01"]
   },
-  "Web/API/console/profileEnd": {
+  "Web/API/console/profileend_static": {
     "modified": "2020-10-15T22:04:42.916Z",
     "contributors": ["JQ_Chan"]
   },
-  "Web/API/console/table": {
+  "Web/API/console/table_static": {
     "modified": "2020-10-15T21:54:27.285Z",
     "contributors": ["RainSlide", "dondevi", "eeeeeeeason", "zzw918"]
   },
-  "Web/API/console/time": {
+  "Web/API/console/time_static": {
     "modified": "2020-10-15T21:27:17.192Z",
     "contributors": [
       "zhangchen",
@@ -16251,23 +16251,23 @@
       "freemen"
     ]
   },
-  "Web/API/console/timeEnd": {
+  "Web/API/console/timeend_static": {
     "modified": "2020-10-15T21:50:04.648Z",
     "contributors": ["luisleee", "hhxxhg", "Dcfm", "regiondavid"]
   },
-  "Web/API/console/timeLog": {
+  "Web/API/console/timelog_static": {
     "modified": "2020-10-15T22:16:19.657Z",
     "contributors": ["lifankohome", "Reaper622"]
   },
-  "Web/API/console/timeStamp": {
+  "Web/API/console/timestamp_static": {
     "modified": "2019-03-23T22:08:57.552Z",
     "contributors": ["tsingwong", "ershing"]
   },
-  "Web/API/console/trace": {
+  "Web/API/console/trace_static": {
     "modified": "2020-10-15T21:04:54.511Z",
     "contributors": ["zhangchen", "airt", "teoli", "jsx", "ziyunfei"]
   },
-  "Web/API/console/warn": {
+  "Web/API/console/warn_static": {
     "modified": "2019-03-23T22:12:15.122Z",
     "contributors": ["pluwen", "choukin"]
   },
diff --git a/files/zh-cn/web/api/console/assert/index.md b/files/zh-cn/web/api/console/assert_static/index.md
similarity index 76%
rename from files/zh-cn/web/api/console/assert/index.md
rename to files/zh-cn/web/api/console/assert_static/index.md
index 703ecf547b4fd9..c94220b568556d 100644
--- a/files/zh-cn/web/api/console/assert/index.md
+++ b/files/zh-cn/web/api/console/assert_static/index.md
@@ -1,6 +1,6 @@
 ---
-title: Console.assert()
-slug: Web/API/console/assert
+title: console：assert() 静态方法
+slug: Web/API/console/assert_static
 ---
 
 {{APIRef("Console API")}}
@@ -9,7 +9,7 @@ slug: Web/API/console/assert
 
 {{AvailableInWorkers}}
 
-`console.assert()`方法在 Node.js 中的实现和浏览器中可用的`console.assert()`方法实现是不同的。在浏览器中当`console.assert()`方法接受到一个值为假断言的时候，会向控制台输出传入的内容，但是并不会中断代码的执行，而在 Node.js v10.0.0 之前，一个值为假的断言也将会导致一个`AssertionError`被抛出，使得代码执行被打断。v10.0.0 修复了此差异，所以现在`console.assert()`在 Node 和浏览器中执行行为相同。
+`console.assert()` 方法在 Node.js 中的实现和浏览器中可用的 `console.assert()` 方法实现是不同的。在浏览器中当 `console.assert()` 方法接受到一个值为假断言的时候，会向控制台输出传入的内容，但是并不会中断代码的执行，而在 Node.js v10.0.0 之前，一个值为假的断言也将会导致一个 `AssertionError` 被抛出，使得代码执行被打断。v10.0.0 修复了此差异，所以现在 `console.assert()` 在 Node 和浏览器中执行行为相同。
 
 ## 语法
 
@@ -57,7 +57,7 @@ console.log("the word is %s try number %d", "foo", 123);
 // 输出：the word is foo try number 123
 ```
 
-`但是 console.assert` 在不同浏览器中可能获得不同的效果：
+但是 `console.assert` 在不同浏览器中可能获得不同的效果：
 
 ```js
 console.assert(false, "the word is %s", "foo");
@@ -69,7 +69,7 @@ console.assert(false, "the word is %s", "foo");
 // Assertion failed: the word is %s foo
 ```
 
-有关详细信息，请参阅 {{Domxref("console")}} 文档中的 [输出文本到控制台](/zh-CN/docs/Web/API/Console#%E8%BE%93%E5%87%BA%E6%96%87%E6%9C%AC%E5%88%B0%E6%8E%A7%E5%88%B6%E5%8F%B0)。
+有关详细信息，请参阅 {{Domxref("console")}} 文档中的 [输出文本到控制台](/zh-CN/docs/Web/API/console#输出文本到控制台)。
 
 ## 规范
 
diff --git a/files/zh-cn/web/api/console/clear/index.md b/files/zh-cn/web/api/console/clear_static/index.md
similarity index 80%
rename from files/zh-cn/web/api/console/clear/index.md
rename to files/zh-cn/web/api/console/clear_static/index.md
index 8bf0077a2411ce..b185676776baaa 100644
--- a/files/zh-cn/web/api/console/clear/index.md
+++ b/files/zh-cn/web/api/console/clear_static/index.md
@@ -1,6 +1,6 @@
 ---
-title: clear()
-slug: Web/API/console/clear
+title: console：clear() 静态方法
+slug: Web/API/console/clear_static
 ---
 
 {{APIRef("Console API")}}
@@ -19,7 +19,7 @@ clear();
 
 ### 返回值
 
-无 ({{jsxref("undefined")}})。
+无（{{jsxref("undefined")}}）。
 
 ## 规范
 
diff --git a/files/zh-cn/web/api/console/count/index.md b/files/zh-cn/web/api/console/count_static/index.md
similarity index 92%
rename from files/zh-cn/web/api/console/count/index.md
rename to files/zh-cn/web/api/console/count_static/index.md
index ae8187136457b4..483b7cb3df8b09 100644
--- a/files/zh-cn/web/api/console/count/index.md
+++ b/files/zh-cn/web/api/console/count_static/index.md
@@ -1,6 +1,6 @@
 ---
-title: console：count() 方法
-slug: Web/API/console/count
+title: console：count() 静态方法
+slug: Web/API/console/count_static
 ---
 
 {{APIRef("Console API")}}
@@ -23,7 +23,7 @@ count(label)
 
 ### 返回值
 
-无 ({{jsxref("undefined")}})。
+无（{{jsxref("undefined")}}）。
 
 ## 示例
 
diff --git a/files/zh-cn/web/api/console/countreset/index.md b/files/zh-cn/web/api/console/countreset_static/index.md
similarity index 88%
rename from files/zh-cn/web/api/console/countreset/index.md
rename to files/zh-cn/web/api/console/countreset_static/index.md
index 54502e6ac4984f..8c63bd1629faed 100644
--- a/files/zh-cn/web/api/console/countreset/index.md
+++ b/files/zh-cn/web/api/console/countreset_static/index.md
@@ -1,6 +1,6 @@
 ---
-title: Console.countReset()
-slug: Web/API/console/countReset
+title: console：countReset() 静态方法
+slug: Web/API/console/countreset_static
 ---
 
 {{APIRef("Console API")}}
@@ -15,8 +15,9 @@ slug: Web/API/console/countReset
 
 ## 语法
 
-```
-console.countReset([label]);
+```js-nolint
+countReset()
+countReset(label)
 ```
 
 ### 参数
@@ -41,7 +42,7 @@ default: 0
 
 ### 异常情况
 
-若传入一个不存在的 `label`, `countReset` 返回下面的警告信息：
+若传入一个不存在的 `label`，`countReset` 返回下面的警告信息：
 
 ```
 Counter "counter-name" doesn’t exist.
@@ -119,10 +120,10 @@ console.count("alice");
 
 调用 countReset("bod") 只是重置了 "bob" 的计数器值 而 "alice" 的计数器值没有改变。
 
-## Specifications
+## 规范
 
 {{Specifications}}
 
-## Browser compatibility
+## 浏览器兼容性
 
 {{Compat}}
diff --git a/files/zh-cn/web/api/console/debug/index.md b/files/zh-cn/web/api/console/debug_static/index.md
similarity index 94%
rename from files/zh-cn/web/api/console/debug/index.md
rename to files/zh-cn/web/api/console/debug_static/index.md
index 2ae3d6824438af..d87fd3a7b5ccc1 100644
--- a/files/zh-cn/web/api/console/debug/index.md
+++ b/files/zh-cn/web/api/console/debug_static/index.md
@@ -1,6 +1,6 @@
 ---
-title: Console.debug()
-slug: Web/API/console/debug
+title: console：debug() 静态方法
+slug: Web/API/console/debug_static
 ---
 
 {{APIRef("Console API")}}
diff --git a/files/zh-cn/web/api/console/dir/index.md b/files/zh-cn/web/api/console/dir_static/index.md
similarity index 89%
rename from files/zh-cn/web/api/console/dir/index.md
rename to files/zh-cn/web/api/console/dir_static/index.md
index dff09f53c7ea06..62ca929c126050 100644
--- a/files/zh-cn/web/api/console/dir/index.md
+++ b/files/zh-cn/web/api/console/dir_static/index.md
@@ -1,6 +1,6 @@
 ---
-title: console.dir
-slug: Web/API/console/dir
+title: console：dir() 静态方法
+slug: Web/API/console/dir_static
 ---
 
 {{APIRef("Console API")}}
@@ -26,7 +26,7 @@ dir(object);
 
 ### 返回值
 
-无 ({{jsxref("undefined")}})。
+无（{{jsxref("undefined")}}）。
 
 ## 规范
 
diff --git a/files/zh-cn/web/api/console/dirxml/index.md b/files/zh-cn/web/api/console/dirxml_static/index.md
similarity index 88%
rename from files/zh-cn/web/api/console/dirxml/index.md
rename to files/zh-cn/web/api/console/dirxml_static/index.md
index c7ff2caccb68c4..b1ead6e81f6fb1 100644
--- a/files/zh-cn/web/api/console/dirxml/index.md
+++ b/files/zh-cn/web/api/console/dirxml_static/index.md
@@ -1,6 +1,6 @@
 ---
-title: Console.dirxml()
-slug: Web/API/console/dirxml
+title: console：dirxml() 静态方法
+slug: Web/API/console/dirxml_static
 ---
 
 {{APIRef("Console API")}}{{Non-standard_header}}
diff --git a/files/zh-cn/web/api/console/error/index.md b/files/zh-cn/web/api/console/error_static/index.md
similarity index 92%
rename from files/zh-cn/web/api/console/error/index.md
rename to files/zh-cn/web/api/console/error_static/index.md
index 147febb5218a9f..1814fa69b0c3c9 100644
--- a/files/zh-cn/web/api/console/error/index.md
+++ b/files/zh-cn/web/api/console/error_static/index.md
@@ -1,6 +1,7 @@
 ---
-title: Console.error()
-slug: Web/API/console/error
+title: console：error() 静态方法
+slug: Web/API/console/error_static
+original_slug: Web/API/console/error
 ---
 
 {{APIRef("Console API")}}
diff --git a/files/zh-cn/web/api/console/group/index.md b/files/zh-cn/web/api/console/group_static/index.md
similarity index 89%
rename from files/zh-cn/web/api/console/group/index.md
rename to files/zh-cn/web/api/console/group_static/index.md
index 726447227ed76d..15a2b8864d0931 100644
--- a/files/zh-cn/web/api/console/group/index.md
+++ b/files/zh-cn/web/api/console/group_static/index.md
@@ -1,6 +1,6 @@
 ---
-title: console.group()
-slug: Web/API/console/group
+title: console：group() 静态方法
+slug: Web/API/console/group_static
 ---
 
 {{APIRef("Console API")}}
diff --git a/files/zh-cn/web/api/console/groupcollapsed/index.md b/files/zh-cn/web/api/console/groupcollapsed_static/index.md
similarity index 89%
rename from files/zh-cn/web/api/console/groupcollapsed/index.md
rename to files/zh-cn/web/api/console/groupcollapsed_static/index.md
index a00857c5c39c9d..3c3f39e62356dc 100644
--- a/files/zh-cn/web/api/console/groupcollapsed/index.md
+++ b/files/zh-cn/web/api/console/groupcollapsed_static/index.md
@@ -1,6 +1,6 @@
 ---
-title: console.groupCollapsed()
-slug: Web/API/console/groupCollapsed
+title: console：groupCollapsed() 静态方法
+slug: Web/API/console/groupcollapsed_static
 ---
 
 {{APIRef("Console API")}}
diff --git a/files/zh-cn/web/api/console/groupend/index.md b/files/zh-cn/web/api/console/groupend_static/index.md
similarity index 79%
rename from files/zh-cn/web/api/console/groupend/index.md
rename to files/zh-cn/web/api/console/groupend_static/index.md
index 36e579e8d08269..3dacb21745aafd 100644
--- a/files/zh-cn/web/api/console/groupend/index.md
+++ b/files/zh-cn/web/api/console/groupend_static/index.md
@@ -1,6 +1,6 @@
 ---
-title: Console.groupEnd()
-slug: Web/API/console/groupEnd
+title: console：groupEnd() 静态方法
+slug: Web/API/console/groupend_static
 ---
 
 {{APIRef("Console API")}}
@@ -11,15 +11,15 @@ slug: Web/API/console/groupEnd
 
 ## 语法
 
-```plain
-console.groupEnd();
+```js-nolint
+groupEnd()
 ```
 
 ## 参数
 
-None.
+无。
 
-## Specifications
+## 规范
 
 {{Specifications}}
 
@@ -27,6 +27,6 @@ None.
 
 {{Compat}}
 
-## See also
+## 参见
 
 - [Opera Dragonfly documentation: Console](http://www.opera.com/dragonfly/documentation/console/)
diff --git a/files/zh-cn/web/api/console/index.md b/files/zh-cn/web/api/console/index.md
index a1d761035e7278..6e4a2ae71d460e 100644
--- a/files/zh-cn/web/api/console/index.md
+++ b/files/zh-cn/web/api/console/index.md
@@ -1,78 +1,76 @@
 ---
-title: Console
+title: console
 slug: Web/API/console
 ---
 
 {{APIRef("Console API")}}
 
-**`Console`** 对象提供了浏览器控制台调试的接口（如：Firefox 的 [Web Console](/zh-CN/docs/Tools/Web_Console)）。在不同浏览器上它的工作方式可能不一样，但通常都会提供一套共性的功能。
+**`console`** 对象提供了浏览器控制台调试的接口（如：Firefox 的 [Web console](https://firefox-source-docs.mozilla.org/devtools-user/web_console/index.html)）。在不同浏览器上它的工作方式可能不一样，但通常都会提供一套共性的功能。
 
-`Console` 对象可以从任何全局对象中访问到，如 浏览器作用域上的 {{domxref("Window")}}，以及通过属性控制台作为 workers 中的特定变体的 {{domxref("WorkerGlobalScope")}}。可以通过 {{domxref("Window.console")}} 引用，也可以简单的通过 `console` 引用。例：
+`console` 对象可以从任何全局对象中访问到，如 浏览器作用域上的 {{domxref("Window")}}，以及通过属性控制台作为 worker 中的特定变体的 {{domxref("WorkerGlobalScope")}}。可以通过 {{domxref("Window.console")}} 引用，也可以简单的通过 `console` 引用。例：
 
 ```js
 console.log("Failed to open the specified link");
 ```
 
-本页面记录了 `Console` 对象上的[方法](#方法)并给出了几个 [Usage](#usage) （用例）。
+本页面记录了 `console` 对象上的[方法](#方法)并给出了几个 [Usage](#usage) （用例）。
 
 {{AvailableInWorkers}}
 
-> **备注：** 实际的 `console` 接口被定义为全小写的形式（比如不是这种形式 `Console` ），这是历史原因导致的。
-
 ## 方法
 
-- {{domxref("Console.assert()")}}
+- {{domxref("console/assert_static", "console.assert()")}}
   - : 如果第一个参数为 `false` ，则将消息和堆栈跟踪记录到控制台。
-- {{domxref("Console.clear()")}}
+- {{domxref("console.clear_static", "console.clear()")}}
   - : 清空控制台，并输出 `Console was cleared`。
-- {{domxref("Console.count()")}}
+- {{domxref("console.count_static", "console.count()")}}
   - : 以参数为标识记录调用的次数，调用时在控制台打印标识以及调用次数。
-- {{domxref("Console.countReset()")}}
+- {{domxref("console.countreset_static", "console.countReset()")}}
   - : 重置指定标签的计数器值。
-- {{domxref("Console.debug()")}}
+- {{domxref("console.debug_static", "console.debug()")}}
   - : 在控制台打印一条 `"debug"` 级别的消息。
-- {{domxref("Console.dir()")}}
-  - : 显示一个由特定的 Javascript 对象列表组成的可交互列表。这个列表可以使用三角形隐藏和显示来审查子对象的内容。.
-- {{domxref("Console.dirxml()")}}
+- {{domxref("console.dir_static", "console.dir()")}}
+  - : 显示一个由特定的 Javascript 对象列表组成的可交互列表。这个列表可以使用三角形隐藏和显示来审查子对象的内容。
+- {{domxref("console.dirxml_static", "console.dirxml()")}}
   - : 打印 XML/HTML 元素表示的指定对象，否则显示 JavaScript 对象视图。
-- {{domxref("Console.error()")}}
-  - : 打印一条错误信息，使用方法可以参考 [string substitution](/zh-CN/docs/Web/API/console#Using_string_substitutions)。
-- {{domxref("Console.exception()")}} {{Non-standard_inline}} {{deprecated_inline}}
+- {{domxref("console.error_static", "console.error()")}}
+  - : 打印一条错误信息，使用方法可以参考[使用字符串替换](#使用字符串替换)。
+- `console.exception()` {{Non-standard_inline}} {{deprecated_inline}}
   - : `error()` 方法的别称。
-- {{domxref("Console.group()")}}
-  - : 创建一个新的内联 [group](/zh-CN/docs/Web/API/console#Using_groups_in_the_console), 后续所有打印内容将会以子层级的形式展示。调用 `groupEnd()`来闭合组。
-- {{domxref("Console.groupCollapsed()")}}
-  - : 创建一个新的内联 [group](/zh-CN/docs/Web/API/console#Using_groups_in_the_console)。使用方法和 `group()` 相同，不同的是，`groupCollapsed()` 方法打印出来的内容默认是折叠的。调用`groupEnd()`来闭合组。
-- {{domxref("Console.groupEnd()")}}
-  - : 闭合当前内联 [group](/zh-CN/docs/Web/API/console#Using_groups_in_the_console)。
-- {{domxref("Console.info()")}}
-  - : 打印资讯类说明信息，使用方法可以参考 [string substitution](/zh-CN/docs/Web/API/console#Using_string_substitutions)。
-- {{domxref("Console.log()")}}
-  - : 打印内容的通用方法，使用方法可以参考 [string substitution](/zh-CN/docs/Web/API/console#Using_string_substitutions)。
-- {{domxref("Console.profile()")}} {{Non-standard_inline}}
-  - : Starts the browser's built-in profiler (for example, the [Firefox performance tool](/zh-CN/docs/Tools/Performance)). You can specify an optional name for the profile.
-- {{domxref("Console.profileEnd()")}} {{Non-standard_inline}}
-  - : Stops the profiler. You can see the resulting profile in the browser's performance tool (for example, the [Firefox performance tool](/zh-CN/docs/Tools/Performance)).
-- {{domxref("Console.table()")}}
+- {{domxref("console.group_static", "console.group()")}}
+  - : 创建一个新的内联[分组](#在_console_中使用编组), 后续所有打印内容将会以子层级的形式展示。调用 `groupEnd()`来闭合组。
+- {{domxref("console.groupcollapsed_static", "console.groupCollapsed()")}}
+  - : 创建一个新的内联[分组](#在_console_中使用编组)。使用方法和 `group()` 相同，不同的是，`groupCollapsed()` 方法打印出来的内容默认是折叠的。调用`groupEnd()`来闭合组。
+- {{domxref("console.groupend_static", "console.groupEnd()")}}
+  - : 闭合当前内联[分组](#在_console_中使用编组)。
+- {{domxref("console.info_static", "console.info()")}}
+  - : 打印资讯类说明信息，使用方法可以参考[使用字符串替换](#使用字符串替换)。
+- {{domxref("console.log_static", "console.log()")}}
+  - : 打印内容的通用方法，使用方法可以参考[使用字符串替换](#使用字符串替换)。
+- {{domxref("console.profile_static", "console.profile()")}} {{Non-standard_inline}}
+  - : Starts the browser's built-in profiler (for example, the [Firefox performance tool](https://firefox-source-docs.mozilla.org/devtools-user/performance/index.html)). You can specify an optional name for the profile.
+- {{domxref("console.profileend_static", "console.profileEnd()")}} {{Non-standard_inline}}
+  - : Stops the profiler. You can see the resulting profile in the browser's performance tool (for example, the [Firefox performance tool](https://firefox-source-docs.mozilla.org/devtools-user/performance/index.html)).
+- {{domxref("console.table_static", "console.table()")}}
   - : 将列表型的数据打印成表格。
-- {{domxref("Console.time()")}}
-  - : 启动一个以入参作为特定名称的[计时器](/zh-CN/docs/Web/API/console#Timers)，在显示页面中可同时运行的计时器上限为 10,000.
-- {{domxref("Console.timeEnd()")}}
-  - : 结束特定的 [计时器](/zh-CN/docs/Web/API/console#Timers) 并以毫秒打印其从开始到结束所用的时间。
-- {{domxref("Console.timeLog()")}}
-  - : 打印特定 [计时器](/zh-CN/docs/Web/API/console#Timers) 所运行的时间。
-- {{domxref("Console.timeStamp()")}} {{Non-standard_inline}}
-  - : 添加一个标记到浏览器的 [Timeline](https://developer.chrome.com/devtools/docs/timeline) 或 [Waterfall](/zh-CN/docs/Tools/Performance/Waterfall) 工具。
-- {{domxref("Console.trace()")}}
-  - : 输出一个 [stack trace](/zh-CN/docs/Web/API/console#Stack_traces)。
-- {{domxref("Console.warn()")}}
-  - : 打印一个警告信息，可以使用 [string substitution](/zh-CN/docs/Web/API/console#Using_string_substitutions) 和额外的参数。
+- {{domxref("console.time_static", "console.time()")}}
+  - : 启动一个以入参作为特定名称的[定时器](#定时器)，在显示页面中可同时运行的定时器上限为 10,000.
+- {{domxref("console.timeend_static", "console.timeEnd()")}}
+  - : 结束特定的[定时器](#定时器)并以毫秒打印其从开始到结束所用的时间。
+- {{domxref("console.timelog_static", "console.timeLog()")}}
+  - : 打印特定[定时器](#定时器)所运行的时间。
+- {{domxref("console.timestamp_static", "console.timeStamp()")}} {{Non-standard_inline}}
+  - : 添加一个标记到浏览器的 [Timeline](https://developer.chrome.com/devtools/docs/timeline) 或 [Waterfall](https://profiler.firefox.com/docs/) 工具。
+- {{domxref("console.trace_static", "console.trace()")}}
+  - : 输出[堆栈跟踪](#堆栈跟踪)。
+- {{domxref("console.warn_static", "console.warn()")}}
+  - : 打印一个警告信息，可以使用[字符串替换](#使用字符串替换)和额外的参数。
 
 ## 示例
 
 ### 输出文本到控制台
 
-console 对象中较多使用的主要有四个方法 {{domxref("console.log()")}}, {{domxref("console.info()")}}, {{domxref("console.warn()")}}, 和{{domxref("console.error()")}}。每一个结果在日志中都有不同的样式，可以使用浏览器控制台的日志筛选功能筛选出感兴趣的日志信息。
+console 对象中较多使用的主要有四个方法 {{domxref("console.log_static", "console.log()")}}、{{domxref("console.info_static", "console.info()")}}、{{domxref("console.warn_static", "console.warn()")}} 和{{domxref("console.error_static", "console.error()")}}。每一个结果在日志中都有不同的样式，可以使用浏览器控制台的日志筛选功能筛选出感兴趣的日志信息。
 
 有两种途径使用这些方法，可以简单的传入一组对象，其中的字符串对象会被连接到一起，输出到控制台。或者可以传入包含零个或多个的替换的字符串，后面跟着被替换的对象列表。
 
@@ -221,7 +219,7 @@ console.timeEnd("answer time");
 
 ### 堆栈跟踪
 
-控制台也支持输出堆栈，其将会显示到调用 {{domxref("console.trace()")}} 的点的调用路径。如下所示：
+控制台也支持输出堆栈，其将会显示到调用 {{domxref("console.trace_static")}} 的点的调用路径。如下所示：
 
 ```js
 function foo() {
@@ -252,9 +250,9 @@ foo();
 
 ## 相关文档
 
-- [Tools](/zh-CN/docs/Tools)
-- [Web Console](/zh-CN/docs/Tools/Web_Console) - Firefox 浏览器控制台如何处理 console API 的调用
-- [Remote debugging](/zh-CN/docs/Tools/Remote_Debugging) - 如何在调试移动设备时查看控制台输出。
+- [Tools](https://firefox-source-docs.mozilla.org/devtools-user/index.html)
+- [Web Console](https://firefox-source-docs.mozilla.org/devtools-user/web_console/index.html) - Firefox 浏览器控制台如何处理 console API 的调用
+- [Remote debugging](https://profiler.firefox.com/docs/) - 如何在调试移动设备时查看控制台输出。
 
 ### 其他实现
 
diff --git a/files/zh-cn/web/api/console/info/index.md b/files/zh-cn/web/api/console/info_static/index.md
similarity index 86%
rename from files/zh-cn/web/api/console/info/index.md
rename to files/zh-cn/web/api/console/info_static/index.md
index fc95d614c605e4..f4b7d143526abe 100644
--- a/files/zh-cn/web/api/console/info/index.md
+++ b/files/zh-cn/web/api/console/info_static/index.md
@@ -1,6 +1,6 @@
 ---
-title: Console.info()
-slug: Web/API/console/info
+title: console：info() 静态方法
+slug: Web/API/console/info_static
 ---
 
 {{APIRef("Console API")}}
@@ -11,9 +11,11 @@ slug: Web/API/console/info
 
 ## 语法
 
-```
-console.info(obj1 [, obj2, ..., objN]);
-console.info(msg [, subst1, ..., substN]);
+```js-nolint
+info(obj1)
+info(obj1, /* …, */ objN)
+info(msg)
+info(msg, subst1, /* …, */ substN)
 ```
 
 ## 参数
diff --git a/files/zh-cn/web/api/console/log/index.md b/files/zh-cn/web/api/console/log_static/index.md
similarity index 96%
rename from files/zh-cn/web/api/console/log/index.md
rename to files/zh-cn/web/api/console/log_static/index.md
index b14dd46ac23657..0dadf0e1eae23b 100644
--- a/files/zh-cn/web/api/console/log/index.md
+++ b/files/zh-cn/web/api/console/log_static/index.md
@@ -1,6 +1,6 @@
 ---
-title: console.log
-slug: Web/API/console/log
+title: console：log() 静态方法
+slug: Web/API/console/log_static
 ---
 
 {{APIRef("Console API")}}
diff --git a/files/zh-cn/web/api/console/profile/index.md b/files/zh-cn/web/api/console/profile_static/index.md
similarity index 83%
rename from files/zh-cn/web/api/console/profile/index.md
rename to files/zh-cn/web/api/console/profile_static/index.md
index 3fe1bb39616120..04fcc4d6aa58ff 100644
--- a/files/zh-cn/web/api/console/profile/index.md
+++ b/files/zh-cn/web/api/console/profile_static/index.md
@@ -1,6 +1,6 @@
 ---
-title: Console.profile()
-slug: Web/API/console/profile
+title: console：profile() 静态方法
+slug: Web/API/console/profile_static
 ---
 
 {{APIRef("Console API")}}{{Non-standard_header}}
@@ -13,13 +13,13 @@ slug: Web/API/console/profile
 
 {{AvailableInWorkers}}
 
-## Syntax
+## 语法
 
-```plain
-console.profile(profileName);
+```js-nolint
+profile(profileName)
 ```
 
-## Parameters
+## 参数
 
 - `profileName`
   - : 描述信息的名字。可选。
diff --git a/files/zh-cn/web/api/console/profileend/index.md b/files/zh-cn/web/api/console/profileend_static/index.md
similarity index 56%
rename from files/zh-cn/web/api/console/profileend/index.md
rename to files/zh-cn/web/api/console/profileend_static/index.md
index 0c1df7f4443542..84abcd6d46b027 100644
--- a/files/zh-cn/web/api/console/profileend/index.md
+++ b/files/zh-cn/web/api/console/profileend_static/index.md
@@ -1,26 +1,26 @@
 ---
-title: Console.profileEnd()
-slug: Web/API/console/profileEnd
+title: console：profileEnd() 静态方法
+slug: Web/API/console/profileend_static
 ---
 
 {{APIRef("Console API")}}{{Non-standard_header}}
 
-> **警告：** 在 console.profile() 之后立刻调用此 API 可能会导致其无法工作.。为解决此问题，请在 setTimeOut 中至少延迟 5 毫秒后再调用。请看 [bug #1173588](https://bugzilla.mozilla.org/show_bug.cgi?id=1173588)。
+> **警告：** 在 console.profile() 之后立刻调用此 API 可能会导致其无法工作。为解决此问题，请在 setTimeOut 中至少延迟 5 毫秒后再调用。请看 [bug #1173588](https://bugzilla.mozilla.org/show_bug.cgi?id=1173588)。
 
-profileEnd 方法会停止记录之前已经由{{domxref("Console.profile()")}}开始记录的性能描述信息
+profileEnd 方法会停止记录之前已经由{{domxref("console.profile()")}}开始记录的性能描述信息
 
 你可以选择提供一个参数来命名需要记录的描述信息。这使得你在记录多个描述信息的时候可以停止记录特定的描述信息。
 
-- `如果 Console.profileEnd()` 传了描述信息名字，并且它与正在记录的描述信息的名字相匹配，则此描述信息将会停止。
-- `如果 Console.profileEnd()` 传了描述信息名字，并且它与正在记录的描述信息的名字不匹配，则不会进行更改。
-- `如果 Console.profileEnd()` 没有传描述信息名字，最近启动记录的描述信息将会停止。
+- 如果 `console.profileEnd()` 传了描述信息名字，并且它与正在记录的描述信息的名字相匹配，则此描述信息将会停止。
+- 如果 `console.profileEnd()` 传了描述信息名字，并且它与正在记录的描述信息的名字不匹配，则不会进行更改。
+- 如果 `console.profileEnd()` 没有传描述信息名字，最近启动记录的描述信息将会停止。
 
 {{AvailableInWorkers}}
 
 ## 语法
 
-```
-console.profileEnd(profileName);
+```js-nolint
+profileEnd(profileName)
 ```
 
 ## 参数
diff --git a/files/zh-cn/web/api/console/table/index.md b/files/zh-cn/web/api/console/table_static/index.md
similarity index 97%
rename from files/zh-cn/web/api/console/table/index.md
rename to files/zh-cn/web/api/console/table_static/index.md
index cef454ea915019..f46d589066bc40 100644
--- a/files/zh-cn/web/api/console/table/index.md
+++ b/files/zh-cn/web/api/console/table_static/index.md
@@ -1,6 +1,6 @@
 ---
-title: Console.table()
-slug: Web/API/console/table
+title: console：table() 静态方法
+slug: Web/API/console/table_static
 ---
 
 {{APIRef("Console API")}}
diff --git a/files/zh-cn/web/api/console/time/index.md b/files/zh-cn/web/api/console/time_static/index.md
similarity index 76%
rename from files/zh-cn/web/api/console/time/index.md
rename to files/zh-cn/web/api/console/time_static/index.md
index 39af3fac198836..0b46746e66df51 100644
--- a/files/zh-cn/web/api/console/time/index.md
+++ b/files/zh-cn/web/api/console/time_static/index.md
@@ -1,9 +1,9 @@
 ---
-title: console.time
-slug: Web/API/console/time
+title: console：time() 静态方法
+slug: Web/API/console/time_static
 ---
 
-{{ ApiRef() }}
+{{APIRef("Console API")}}
 
 你可以启动一个计时器来跟踪某一个操作的占用时长。每一个计时器必须拥有唯一的名字，页面中最多能同时运行 10,000 个计时器。当以此计时器名字为参数调用 {{ domxref("console.timeEnd()") }} 时，浏览器将以毫秒为单位，输出对应计时器所经过的时间。
 
@@ -13,14 +13,15 @@ slug: Web/API/console/time
 
 ## 语法
 
-```plain
-console.time(timerName);
+```js-nolint
+time()
+time(label)
 ```
 
 ## 参数
 
-- `timerName`
-  - : 新计时器的名字。用来标记这个计时器，作为参数调用 {{ domxref("console.timeEnd()") }}可以停止计时并将经过的时间在终端中打印出来。
+- `label`
+  - : 新计时器的名字。用来标记这个计时器，作为参数调用 {{domxref("console.timeEnd()")}} 可以停止计时并将经过的时间在终端中打印出来。
 
 ## 规范
 
diff --git a/files/zh-cn/web/api/console/timeend/index.md b/files/zh-cn/web/api/console/timeend_static/index.md
similarity index 85%
rename from files/zh-cn/web/api/console/timeend/index.md
rename to files/zh-cn/web/api/console/timeend_static/index.md
index 4ec71b4ece570f..2b0d408bd99b5f 100644
--- a/files/zh-cn/web/api/console/timeend/index.md
+++ b/files/zh-cn/web/api/console/timeend_static/index.md
@@ -1,6 +1,6 @@
 ---
-title: Console.timeEnd()
-slug: Web/API/console/timeEnd
+title: console：timeEnd() 静态方法
+slug: Web/API/console/timeend_static
 ---
 
 {{APIRef("Console API")}}{{Non-standard_header}}
@@ -17,8 +17,9 @@ slug: Web/API/console/timeEnd
 
 ## 语法
 
-```js
-console.timeEnd(label);
+```js-nolint
+timeEnd()
+timeEnd(label)
 ```
 
 ### 参数
@@ -26,7 +27,7 @@ console.timeEnd(label);
 - `label`
   - : 需要停止的计时器名字。一旦停止，计时器所经过的时间会被自动输出到控制台。
 
-## Specifications
+## 规范
 
 {{Specifications}}
 
diff --git a/files/zh-cn/web/api/console/timelog/index.md b/files/zh-cn/web/api/console/timelog_static/index.md
similarity index 89%
rename from files/zh-cn/web/api/console/timelog/index.md
rename to files/zh-cn/web/api/console/timelog_static/index.md
index f0e5e80f7d22e0..69dac303a9aefb 100644
--- a/files/zh-cn/web/api/console/timelog/index.md
+++ b/files/zh-cn/web/api/console/timelog_static/index.md
@@ -1,6 +1,6 @@
 ---
-title: Console.timeLog()
-slug: Web/API/console/timeLog
+title: console：timeLog() 静态方法
+slug: Web/API/console/timelog_static
 ---
 
 {{APIRef("Console API")}}
@@ -13,8 +13,11 @@ slug: Web/API/console/timeLog
 
 ## 语法
 
-```plain
-console.timeLog(label);
+```js-nolint
+timeLog()
+timeLog(label)
+timeLog(label, val1)
+timeLog(label, val1, /* …, */ valN)
 ```
 
 ### 参数
@@ -74,6 +77,6 @@ console.timeEnd("answer time");
 
 {{Compat}}
 
-## 相关文档
+## 参见
 
 - [Opera Dragonfly documentation: Console](http://www.opera.com/dragonfly/documentation/console/)
diff --git a/files/zh-cn/web/api/console/timestamp/index.md b/files/zh-cn/web/api/console/timestamp_static/index.md
similarity index 75%
rename from files/zh-cn/web/api/console/timestamp/index.md
rename to files/zh-cn/web/api/console/timestamp_static/index.md
index 49102e608808b7..01dd90bca5125a 100644
--- a/files/zh-cn/web/api/console/timestamp/index.md
+++ b/files/zh-cn/web/api/console/timestamp_static/index.md
@@ -1,6 +1,6 @@
 ---
-title: Console.timeStamp()
-slug: Web/API/console/timeStamp
+title: console：timeStamp() 静态方法
+slug: Web/API/console/timestamp_static
 ---
 
 {{APIRef("Console API")}}{{Non-standard_header}}
@@ -11,23 +11,23 @@ slug: Web/API/console/timeStamp
 
 {{AvailableInWorkers}}
 
-## Syntax
+## 语法
 
-```plain
-console.timeStamp(label);
+```js-nolint
+timeStamp(label)
 ```
 
-## Parameters
+## 参数
 
 - `label`
   - : Label for the timestamp. Optional.
 
-## Browser compatibility
+## 浏览器兼容性
 
 {{Compat}}
 
-## See also
+## 参见
 
-- {{domxref("Console.time()")}}
-- {{domxref("Console.timeEnd()")}}
+- {{domxref("console.time()")}}
+- {{domxref("console.timeEnd()")}}
 - [Adding timestamps to the Waterfall](/zh-CN/docs/Tools/Performance/Waterfall#Timestamp_markers)
diff --git a/files/zh-cn/web/api/console/trace/index.md b/files/zh-cn/web/api/console/trace_static/index.md
similarity index 66%
rename from files/zh-cn/web/api/console/trace/index.md
rename to files/zh-cn/web/api/console/trace_static/index.md
index 6d2bf9b3ea85d4..d53f2355c732bf 100644
--- a/files/zh-cn/web/api/console/trace/index.md
+++ b/files/zh-cn/web/api/console/trace_static/index.md
@@ -1,20 +1,21 @@
 ---
-title: console.trace
-slug: Web/API/console/trace
+title: console：trace() 静态方法
+slug: Web/API/console/trace_static
 ---
 
 {{APIRef("Console API")}}
 
-{{domxref("console")}} 的 **`trace()` 方法**向 [Web 控制台](/zh-CN/Tools/Web_Console) 输出一个堆栈跟踪。
+{{domxref("console")}} 的 **`trace()`** 方法向 [Web 控制台](https://firefox-source-docs.mozilla.org/devtools-user/web_console/index.html)输出一个堆栈跟踪。
 
 {{AvailableInWorkers}}
 
-在页面{{ domxref("console") }}文档中查看[堆栈跟踪](/zh-CN/docs/Web/API/console#堆栈跟踪)的详细介绍和示例。
+在页面 {{domxref("console")}} 文档中查看[堆栈跟踪](/zh-CN/docs/Web/API/console#堆栈跟踪)的详细介绍和示例。
 
 ## 语法
 
-```plain
-console.trace( [...any, ...data ]);
+```js-nolint
+trace()
+trace(object1, /* …, */ objectN)
 ```
 
 ### 参数
@@ -51,6 +52,6 @@ foo
 
 {{Compat}}
 
-## See also
+## 参见
 
 - [Opera Dragonfly documentation: Console](http://www.opera.com/dragonfly/documentation/console/)
diff --git a/files/zh-cn/web/api/console/warn/index.md b/files/zh-cn/web/api/console/warn_static/index.md
similarity index 76%
rename from files/zh-cn/web/api/console/warn/index.md
rename to files/zh-cn/web/api/console/warn_static/index.md
index f38c3396e0f7e5..daecb7013a1f09 100644
--- a/files/zh-cn/web/api/console/warn/index.md
+++ b/files/zh-cn/web/api/console/warn_static/index.md
@@ -1,6 +1,6 @@
 ---
-title: Console.warn()
-slug: Web/API/console/warn
+title: console：warn() 静态方法
+slug: Web/API/console/warn_static
 ---
 
 {{APIRef("Console API")}}
@@ -13,9 +13,11 @@ slug: Web/API/console/warn
 
 ## 语法
 
-```plain
-console.warn(obj1 [, obj2, ..., objN]);
-console.warn(msg [, subst1, ..., substN]);
+```js-nolint
+warn(obj1)
+warn(obj1, /* …, */ objN)
+warn(msg)
+warn(msg, subst1, /* …, */ substN)
 ```
 
 ## 参数
@@ -27,7 +29,7 @@ console.warn(msg [, subst1, ..., substN]);
 - `subst1` ... `substN`
   - : 零个或多个 Javascript 对象 依次替换 msg 中的替代字符串，你可以在替代字符串中指定对象的输出格式。
 
-查看 [向控制台输出文本](/zh-CN/docs/Web/API/Console) 来了解更多 {{domxref("console")}} 的用法。
+查看[向控制台输出文本](/zh-CN/docs/Web/API/console)来了解更多 {{domxref("console")}} 的用法。
 
 ## 规范
 

From 56d2ab4e2bdebde9710ce18ec60d6507fb77e0cb Mon Sep 17 00:00:00 2001
From: MDN Web Docs GitHub Bot <108879845+mdn-bot@users.noreply.github.com>
Date: Wed, 15 Nov 2023 15:13:32 +0100
Subject: [PATCH 070/141] Markdownlint auto-cleanup for ja (#16923)

---
 .../reference/global_objects/array/reduceright/index.md          | 1 +
 .../web/javascript/reference/global_objects/array/some/index.md  | 1 +
 2 files changed, 2 insertions(+)

diff --git a/files/ja/web/javascript/reference/global_objects/array/reduceright/index.md b/files/ja/web/javascript/reference/global_objects/array/reduceright/index.md
index 8f30c099289915..f8dae97d248627 100644
--- a/files/ja/web/javascript/reference/global_objects/array/reduceright/index.md
+++ b/files/ja/web/javascript/reference/global_objects/array/reduceright/index.md
@@ -32,6 +32,7 @@ reduceRight(callbackFn, initialValue)
     - `currentIndex`
       - : `currentValue` のインデックス位置です。初回の呼び出しでは、 `initialValue` が指定された場合は `array.length - 1`、そうでない場合は `array.length - 2` です。
       - : `reduceRight()` が呼び出された配列です。
+
 - `initialValue` {{optional_inline}}
   - : `callbackFn` の最初の呼び出しのときに、アキュームレーターとして使用する値です。初期値がが渡されなかった場合は、配列の最後の要素が適用され、その要素が飛ばされます。また、 `reduceRight()` を空の配列に対して初期値なしで呼び出すと `TypeError` になります。
 
diff --git a/files/ja/web/javascript/reference/global_objects/array/some/index.md b/files/ja/web/javascript/reference/global_objects/array/some/index.md
index bf6f6f68b3037d..37f88952c2622c 100644
--- a/files/ja/web/javascript/reference/global_objects/array/some/index.md
+++ b/files/ja/web/javascript/reference/global_objects/array/some/index.md
@@ -21,6 +21,7 @@ some(callbackFn, thisArg)
 ### 引数
 
 - `callbackFn`
+
   - : 配列のそれぞれの要素に対して実行する関数です。この関数は、要素がテストに合格したことを示すには[真値](/ja/docs/Glossary/Truthy)を、そうでない場合は[偽値](/ja/docs/Glossary/Falsy)を返します。この関数は以下の引数で呼び出されます。
     - `element`
       - : 配列内で処理中の現在の要素です。

From d50715fe38688466943849457f22d312b344a432 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Tala=C3=AFa?=
 <115425910+ratala321@users.noreply.github.com>
Date: Wed, 15 Nov 2023 10:11:51 -0500
Subject: [PATCH 071/141] Fixed broken link (#16982)

On issue #16967
---
 .../js13kgames/re-engageable_notifications_push/index.md        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/fr/web/progressive_web_apps/tutorials/js13kgames/re-engageable_notifications_push/index.md b/files/fr/web/progressive_web_apps/tutorials/js13kgames/re-engageable_notifications_push/index.md
index 17ccedc3c40fcc..a3155ae6c2851b 100644
--- a/files/fr/web/progressive_web_apps/tutorials/js13kgames/re-engageable_notifications_push/index.md
+++ b/files/fr/web/progressive_web_apps/tutorials/js13kgames/re-engageable_notifications_push/index.md
@@ -69,7 +69,7 @@ Une nouvelle notification est créée au hasard toutes les 30 secondes, jusqu'à
 
 Les messages poussés (push messages ou push) sont plus compliqués à mettre en œuvre que les notifications. Nous avons besoin de nous abonner à un serveur qui enverra ensuite les données à l'application. Le service worker de l'application recevra les données du serveur qui les a poussées et pourra ensuite les afficher en utilisant le système de notifications (ou tout autre mécanisme).
 
-La technologie en est à ses débuts. Certains exemples fonctionnels utilisent la plateforme Cloud de messagerie de Google, mais elles sont en cours de réécriture pour prendre en charge [VAPID](https://blog.mozilla.org/services/2016/08/23/sending-vapid-identified-webpush-notifications-via-mozillas-push-service/) (Voluntary Application Identification) qui offre une couche de sécurité supplémentaire. Vous pouvez étudier [les exemples du livre de recettes des service workers](https://github.com/mdn/serviceworker-cookbook/push-payload.html), essayer de mettre en place un serveur d'émission de messages utilisant [Firebase](https://firebase.google.com/) ou construire votre propre serveur (en utilisant Node.js par exemple).
+La technologie en est à ses débuts. Certains exemples fonctionnels utilisent la plateforme Cloud de messagerie de Google, mais elles sont en cours de réécriture pour prendre en charge [VAPID](https://blog.mozilla.org/services/2016/08/23/sending-vapid-identified-webpush-notifications-via-mozillas-push-service/) (Voluntary Application Identification) qui offre une couche de sécurité supplémentaire. Vous pouvez étudier [les exemples du livre de recettes des service workers](https://github.com/mdn/serviceworker-cookbook/tree/master/push-payload), essayer de mettre en place un serveur d'émission de messages utilisant [Firebase](https://firebase.google.com/) ou construire votre propre serveur (en utilisant Node.js par exemple).
 
 Comme mentionné précédemment, pour être capable de recevoir des messages poussés, vous devez avoir un service worker (voir les fondamentaux expliqués dans l'article [Fonctionnement hors connexion des PWA grâce aux service workers](/fr/docs/Web/Apps/Progressive/Offline_Service_workers)). Au sein du service worker, on peut créer un mécanisme d'abonnement au service push en appelant la méthode [`getSubscription()`](/fr/docs/Web/API/PushManager/getSubscription) de l'interface [`PushManager`](/fr/docs/Web/API/PushManager).
 

From f2c91b5358aab99894720c8d68b3cadbd43c35fa Mon Sep 17 00:00:00 2001
From: SphinxKnight 
Date: Wed, 15 Nov 2023 21:01:35 +0100
Subject: [PATCH 072/141] `fr` - Initial translation for Glossary/UUID and
 crypto/randomuuid() (#16908)

* Initial translation for Glossary/uuid and crypto/randomuuid

* Minor typofix

---------

Co-authored-by: cw118 
---
 files/fr/glossary/uuid/index.md             | 21 +++++++++
 files/fr/web/api/crypto/randomuuid/index.md | 49 +++++++++++++++++++++
 2 files changed, 70 insertions(+)
 create mode 100644 files/fr/glossary/uuid/index.md
 create mode 100644 files/fr/web/api/crypto/randomuuid/index.md

diff --git a/files/fr/glossary/uuid/index.md b/files/fr/glossary/uuid/index.md
new file mode 100644
index 00000000000000..cd1c6929ab3175
--- /dev/null
+++ b/files/fr/glossary/uuid/index.md
@@ -0,0 +1,21 @@
+---
+title: UUID
+slug: Glossary/UUID
+l10n:
+  sourceCommit: 59adb56b83da91ee1744b723f2f7a37195c2ec82
+---
+
+{{GlossarySidebar}}
+
+Un **identifiant universel unique** (dont l'acronyme anglais est **UUID** pour Universally Unique Identifier) est un libellé utilisé pour identifier de façon unique une ressource parmi toutes les autres ressources du même type.
+
+Les systèmes informatiques génèrent des UUID localement en utilisant de très grands nombres aléatoires. En théorie, ces identifiants n'ont pas à être globalement uniques, même si la probabilité d'obtenir des doublons est très faible. Si un ou des systèmes ont besoin d'identifiants absolument uniques, ceux-ci doivent alors être émis par une autorité centrale.
+
+Les UUID sont des valeurs sur 128 bits qui sont représentées généralement comme une chaîne de 36 caractères au format `123e4567-e89b-12d3-a456-426614174000` (soit 5 chaînes de chiffres hexadécimaux, séparées par des tirets). Il existe plusieurs versions et formats qui dépendent du mode de calcul, certains UUID incluent par exemple une information temporelle.
+
+La définition formelle d'un UUID peut être trouvée dans [la RFC4122](https://www.rfc-editor.org/rfc/rfc4122).
+
+## Voir aussi
+
+- [UUID](https://fr.wikipedia.org/wiki/Universally_unique_identifier) sur Wikipédia
+- [`Crypto.randomUUID()`](/fr/docs/Web/API/Crypto/randomUUID)
diff --git a/files/fr/web/api/crypto/randomuuid/index.md b/files/fr/web/api/crypto/randomuuid/index.md
new file mode 100644
index 00000000000000..0811d8b5f538ca
--- /dev/null
+++ b/files/fr/web/api/crypto/randomuuid/index.md
@@ -0,0 +1,49 @@
+---
+title: "Crypto : méthode randomUUID()"
+slug: Web/API/Crypto/randomUUID
+l10n:
+  sourceCommit: 59adb56b83da91ee1744b723f2f7a37195c2ec82
+---
+
+{{APIRef("Web Crypto API")}}{{SecureContext_header}}
+
+La méthode **`randomUUID()`**, rattachée à l'interface [`Crypto`](/fr/docs/Web/API/Crypto), est utilisée pour générer un [UUID](/fr/docs/Glossary/UUID) v4 en utilisant un générateur de nombres aléatoires sécurisé.
+
+## Syntaxe
+
+```js-nolint
+randomUUID()
+```
+
+### Paramètres
+
+Aucun.
+
+### Valeur de retour
+
+Une chaîne de caractères générées aléatoirement et qui est un UUID au format v4 sur 36 caractères.
+
+## Exemples
+
+On accède à cette méthode à l'aide de la propriété globale [`crypto`](/fr/docs/Web/API/crypto_property).
+
+```js
+/* Si self.crypto.randomUUID() est bien disponible : */
+
+const uuid = self.crypto.randomUUID();
+console.log(uuid); // par exemple "36b8f84d-df4e-4d49-b662-bcde71a8764f"
+```
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- [L'API Web Crypto](/fr/docs/Web/API/Web_Crypto_API)
+- La propriété globale [`crypto`](/fr/docs/Web/API/crypto_property) qui permet d'obtenir un objet [`Crypto`](/fr/docs/Web/API/Crypto).
+- [`Crypto.getRandomValues()`](/fr/docs/Web/API/Crypto/getRandomValues) qui permet d'obtenir des valeurs aléatoires sécurisées sur autant d'octets que souhaité.

From 83f520c3ea11a2c80f41e8ae20d825f312535468 Mon Sep 17 00:00:00 2001
From: SphinxKnight 
Date: Wed, 15 Nov 2023 21:10:40 +0100
Subject: [PATCH 073/141]  `fr` - Glossary - Initial translation for E entries
 (#16962)

* Initial translation - Glossary - E

* Typofixes and nitpicking

---------

Co-authored-by: cw118 
---
 files/fr/glossary/enumerated/index.md | 32 +++++++++++++++++
 files/fr/glossary/etld/index.md       | 50 +++++++++++++++++++++++++++
 2 files changed, 82 insertions(+)
 create mode 100644 files/fr/glossary/enumerated/index.md
 create mode 100644 files/fr/glossary/etld/index.md

diff --git a/files/fr/glossary/enumerated/index.md b/files/fr/glossary/enumerated/index.md
new file mode 100644
index 00000000000000..92476705188865
--- /dev/null
+++ b/files/fr/glossary/enumerated/index.md
@@ -0,0 +1,32 @@
+---
+title: Type énuméré
+slug: Glossary/Enumerated
+l10n:
+  sourceCommit: cdb0dad4aeabda32b85c397f5e45304f95edc0d1
+---
+
+{{GlossarySidebar}}
+
+En informatique, un type **énuméré** est un type de données qui consiste en un ensemble restreint de valeurs nommées.
+
+## Les attributs HTML énumérés
+
+En HTML, [les attributs énumérés (parfois appelés à valeur contrainte)](https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#enumerated-attribute) sont des attributs dont les valeurs possibles sont un ensemble prédéfini de chaînes de caractères. Ainsi, l'attribut HTML universel [`dir`](/fr/docs/Web/HTML/Global_attributes/dir) possède trois valeurs valides : `ltr`, `rtl`, et `auto`.
+
+Chaque attribut énuméré possède une valeur par défaut lorsque l'attribut est présent sans sa valeur et une valeur par défaut lorsqu'une valeur invalide lui est associée. À la différence des attributs HTML [booléens](/fr/docs/Glossary/Boolean) qui valent toujours vrai que la valeur soit présente, omise ou invalide, les attributs HTML énumérés peuvent avoir une valeur par défaut différente en fonction que la valeur est omise ou invalide. Par exemple, l'attribut HTML universel [`contenteditable`](/fr/docs/Web/HTML/Global_attributes/contenteditable) n'a que deux valeurs valides : `true` et `false`. Si l'attribut est présent, mais qu'aucune valeur n'est indiquée, la valeur par défaut sera `true`. En revanche, si une valeur invalide est utilisée (par exemple `contenteditable="contenteditable"`), la valeur utilisée effectivement correspondra à un troisième état, `inherit`.
+
+## Les attributs ARIA énumérés
+
+Les états et propriétés ARIA font partie de HTML et ont également des attributs énumérés. Si un attribut ARIA peut prendre la valeur `true` ou `false`, on considèrera généralement qu'un attribut omis vaut `false` et qu'une valeur invalide vaut `true` (la valeur par défaut pour l'utilisation d'une valeur omise ou d'une chaîne de caractères vide comme valeur dépendra de l'attribut).
+
+L'attribut `aria-current` accepte par exemple une liste de valeurs limitée qui contient `page`, `step`, `location`, `date`, `time`, `true`, et `false`. Dans ce cas, si l'attribut est absent, vaut la chaîne de caractères vide, est présent sans valeur ou est paramétré avec `aria-current="false"`, l'attribut sera considéré comme faux et ne sera pas exposé. Toute valeur qui est une chaîne de caractères non vide et qui ne fait pas partie de la liste indiquée sera considérée comme équivalente à l'utilisation de `aria-current="true"`.
+
+## Les propriétés JavaScript énumérables
+
+En JavaScript, les propriétés énumérables sont les propriétés dont le marqueur interne `enumerable` est vrai (ce qui est le comportement par défaut pour les propriétés créées avec une affectation simple ou un initialisateur de propriétés. La plupart des mécanismes d'itération (comme les boucles [`for…in`](/fr/docs/Web/JavaScript/Reference/Statements/for...in) ou la méthode [`Object.keys()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/keys)) ne parcourent que les clés énumérables.
+
+## Voir aussi
+
+- [Booléen](/fr/docs/Glossary/Boolean)
+- [Les types et structures de données en JavaScript](/fr/docs/Web/JavaScript/Data_structures)
+- [Les attributs énumérés HTML dans le standard HTML (en anglais)](https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#enumerated-attribute)
diff --git a/files/fr/glossary/etld/index.md b/files/fr/glossary/etld/index.md
new file mode 100644
index 00000000000000..891da76428f4d0
--- /dev/null
+++ b/files/fr/glossary/etld/index.md
@@ -0,0 +1,50 @@
+---
+title: eTLD
+slug: Glossary/eTLD
+l10n:
+  sourceCommit: cdb0dad4aeabda32b85c397f5e45304f95edc0d1
+---
+
+{{GlossarySidebar}}
+
+L'acronyme **eTLD** signifie « effective top-level domain  (soit « domaine de plus haut niveau effectif » en français) et correspond au domaine sous lequel d'autres domaines peuvent être par une organisation.
+
+Un domaine de plus haut niveau (top level domain, ou TLD) correspond au domaine qui suit le point final. Ainsi, le domaine de de plus haut niveau pour `crookedtimber.org` est `org`.
+
+Si tous les domaines situés juste en dessous des domaines de plus haut niveau pouvaient être enregistrés par des organisations, on pourra avoir les domaines suivants, appartenant à la même organisation :
+
+```plain
+    xyz.org
+abc.xyz.org
+def.xyz.org
+```
+
+Toutfois, cela ne fonctionne pas toujours ainsi et certains bureaux d'enregistrement permettent aux organisations d'enregistrer des domaines en dessous du niveau le plus haut. Par exemple, `sussex.ac.uk` et `aber.ac.uk` sont enregistrés par des organisations différentes.
+
+Cette gestion des niveaux dépend des règles de gestion du bureau d'enregistrement et il est donc impossible d'utiliser un algorithme pour déterminer si un suffixe donné (comme `ac.uk`) permet un enregistrement de domaine public ou non. La [liste des suffixes publics](https://publicsuffix.org/) est une liste maintenue de l'ensemble des suffixes sous lesquels des organisations peuvent enregistrer des noms de domaines. Autrement dit, il s'agit d'une liste d'eTLD.
+
+La notion associée **eTLD+1** signifie l'eTLD associée à la partie inférieure du nom de domaine. Tous les domaines d'un même eTLD+1 appartiennent à une même organisation.
+
+Les domaines qui suivent sont des exemples de domaines eTLD+1 :
+
+- `crookedtimber.org`
+- `theguardian.com`
+- `sussex.ac.uk`
+- `aber.ac.uk`
+
+Cela signifie que tous les domaines sous chacun de ces domaines appartiennent à la même organisation. Par exemple :
+
+```plain
+ film.theguardian.com
+music.theguardian.com
+```
+
+```plain
+      news.sussex.ac.uk
+      blog.sussex.ac.uk
+admissions.sussex.ac.uk
+```
+
+## Voir aussi
+
+- [La liste des suffixes publics (en anglais)](https://publicsuffix.org/)

From eb7e01891ddf38e0f9d9a42f9223f02b1ba0e048 Mon Sep 17 00:00:00 2001
From: SphinxKnight 
Date: Wed, 15 Nov 2023 21:28:31 +0100
Subject: [PATCH 074/141]  `fr` - Glossary - Initial translation for C entries
 (#16940)

* Initial translation for missing Glossary pages starting with C

* Small fixes/nitpicking

---------

Co-authored-by: cw118 
---
 files/fr/glossary/camel_case/index.md         | 30 +++++++++++++
 files/fr/glossary/code_unit/index.md          | 39 ++++++++++++++++
 .../fr/glossary/composite_operation/index.md  | 26 +++++++++++
 .../cors-safelisted_request_header/index.md   | 36 +++++++++++++++
 .../cors-safelisted_response_header/index.md  | 45 +++++++++++++++++++
 5 files changed, 176 insertions(+)
 create mode 100644 files/fr/glossary/camel_case/index.md
 create mode 100644 files/fr/glossary/code_unit/index.md
 create mode 100644 files/fr/glossary/composite_operation/index.md
 create mode 100644 files/fr/glossary/cors-safelisted_request_header/index.md
 create mode 100644 files/fr/glossary/cors-safelisted_response_header/index.md

diff --git a/files/fr/glossary/camel_case/index.md b/files/fr/glossary/camel_case/index.md
new file mode 100644
index 00000000000000..c22f12b3357cc0
--- /dev/null
+++ b/files/fr/glossary/camel_case/index.md
@@ -0,0 +1,30 @@
+---
+title: Camel case
+slug: Glossary/Camel_case
+l10n:
+  sourceCommit: 4e8db9b4072e90e349f3c18b2c6edfe898cfe6a2
+---
+
+{{GlossarySidebar}}
+
+Le **camel case** (généralement utilisé en anglais, qu'on pourrait traduire en « casse de chameau ») est une façon d'écrire des suites de mots sans espace, en mettant en majuscule la première lettre de chaque mot en majuscule (à l'exception de la toute première lettre de la séquence qui pourra être en minuscule ou en majuscule). Le nom de cette notation provient de la ressemblance entre la graphie de CamelCase et le dos d'un chameau (où les deux bosses reprennent la forme des C majuscules).
+
+Cette notation est généralement utilisée comme convention pour le nommage des variables et est par exemple utilisée en JavaScript. Voici des exemples de noms écrits en camel case :
+
+- [`console`](/fr/docs/Web/API/console)
+- [`crossOriginIsolated`](/fr/docs/Web/API/crossOriginIsolated)
+- [`encodeURIComponent`](/fr/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent)
+- [`ArrayBuffer`](/fr/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer)
+- [`HTMLElement`](/fr/docs/Web/API/HTMLElement)
+
+Si la séquence de mots contient des acronymes (comme `URI` et `HTML`), les pratiques peuvent varier. Parfois, on garde l'ensemble de l'acronyme en majuscules (voir `encodeURIComponent` ci-avant). Si plusieurs acronymes se suivent, cela peut réduire la lisibilité et être source de confusion, par exemple avec `XMLHTTPRequest` et certains préfèrent n'écrire que la première lettre de chaque mot en majuscule (`XmlHttpRequest`). Pour cet exemple, la variable globale actuelle, [`XMLHttpRequest`](/fr/docs/Web/API/XMLHttpRequest), utilise une combinaison des deux.
+
+Lorsque la première lettre de la séquence est toujours écrite en majuscule, on parlera de Pascal case (également utilisé tel quel en français).
+
+Le camel case est utilisé par convention en JavaScript, Java et dans d'autres langages de programmation.
+
+## Voir aussi
+
+- [Le snake case qui consiste à utiliser des tirets bas comme séparateurs (`snake_case`)](/fr/docs/Glossary/Snake_case)
+- [Le kebab case qui consiste à utiliser des tirets comme séparateurs (`kebab-case`)](/fr/docs/Glossary/Kebab_case)
+- [La règle `naming-convention` de typescript-eslint](https://typescript-eslint.io/rules/naming-convention/)
diff --git a/files/fr/glossary/code_unit/index.md b/files/fr/glossary/code_unit/index.md
new file mode 100644
index 00000000000000..0894092682b378
--- /dev/null
+++ b/files/fr/glossary/code_unit/index.md
@@ -0,0 +1,39 @@
+---
+title: Codet (code unit)
+slug: Glossary/Code_unit
+l10n:
+  sourceCommit: 4e8db9b4072e90e349f3c18b2c6edfe898cfe6a2
+---
+
+{{GlossarySidebar}}
+
+Un **codet** (code unit en anglais) correspond au composant élémentaire utilisé par un système d'encodage des caractères (comme UTF-8 ou UTF-16). Un système d'encodage des caractères utilise un ou plusieurs codets pour encoder un [point de code](/fr/docs/Glossary/Code_point) Unicode.
+
+En UTF-16 (le système d'encodage utilisé pour les chaînes de caractères en JavaScript), les codets sont des valeurs sur 16 bits. Cela signifie que les opérations pour manipuler les index ou obtenir la longueur d'une chaîne de caractères manipulent ces codets de 16 bits. Toutefois, ces unités ne correspondent pas toujours exactement à ce que nous interprétons comme étant des caractères.
+
+Par exemple, certains caractères avec des diacritiques comme des accents peuvent être représentés en UTF-16 à l'aide de deux codets :
+
+```js
+const maChaine = "\u006E\u0303";
+console.log(maChaine); // ñ
+console.log(maChaine.length); // 2
+```
+
+De plus, 16 bits ne suffisent pas à exprimer tous les points de code définis par Unicode. De nombreux points de code Unicode sont encodés à l'aide d'une paire de deux codets UTF-16 (parfois appelés demi-codets ou surrogate pair en anglais) :
+
+```js
+const visage = "🥵";
+console.log(visage.length); // 2
+```
+
+La méthode JavaScript [`codePointAt()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/codePointAt) de l'objet [`String`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String) permet de récupérer les codets Unicode à partir de la forme encodée :
+
+```js
+const visage = "🥵";
+console.log(visage.codePointAt(0)); // 129397 soit 0x1F975 en hexadécimal
+```
+
+## Voir aussi
+
+- [Gestion des caractères UTF-16, points de code Unicode et groupes de graphèmes](/fr/docs/Web/JavaScript/Reference/Global_Objects/String#caractères_utf-16_points_de_code_Unicode_et_groupes_de_graphèmes)
+- [La FAQ sur l'encodage Unicode (en anglais)](https://www.unicode.org/faq/utf_bom.html)
diff --git a/files/fr/glossary/composite_operation/index.md b/files/fr/glossary/composite_operation/index.md
new file mode 100644
index 00000000000000..b11419f7f08c15
--- /dev/null
+++ b/files/fr/glossary/composite_operation/index.md
@@ -0,0 +1,26 @@
+---
+title: Opération composite
+slug: Glossary/Composite_operation
+l10n:
+  sourceCommit: 4e8db9b4072e90e349f3c18b2c6edfe898cfe6a2
+---
+
+{{GlossarySidebar}}
+
+En CSS, la valeur d'une propriété dans une règle CSS est la _valeur sous-jacente_ de cette propriété, pour cette même propriété, la valeur dans [une étape d'animation (keyframe)](/fr/docs/Web/CSS/@keyframes) est sa _valeur effective_.
+
+L'_opération composite_ est l'opération qui permet de combiner la valeur effective et la valeur sous-jacente pour produire la valeur effective finale pour l'étape d'animation. Il existe trois types d'opérations composites :
+
+- Remplacement
+  - : La valeur effective remplace la valeur sous-jacente. La valeur effective finale correspond à la valeur effective originelle.
+- Ajout
+  - : La valeur effective est ajoutée à la valeur sous-jacente.
+- Accumulation
+  - : La valeur effective est combinée à la valeur sous-jacente.
+
+> **Note :** En CSS, l'opération composite s'applique uniquement aux opérations.
+
+## Voir aussi
+
+- [`animation-composition`](/fr/docs/Web/CSS/animation-composition)
+- [`KeyframeEffect.composite`](/fr/docs/Web/API/KeyframeEffect/composite)
diff --git a/files/fr/glossary/cors-safelisted_request_header/index.md b/files/fr/glossary/cors-safelisted_request_header/index.md
new file mode 100644
index 00000000000000..082281d1dc32cd
--- /dev/null
+++ b/files/fr/glossary/cors-safelisted_request_header/index.md
@@ -0,0 +1,36 @@
+---
+title: En-tête de requête sûr pour le CORS
+slug: Glossary/CORS-safelisted_request_header
+l10n:
+  sourceCommit: 4e8db9b4072e90e349f3c18b2c6edfe898cfe6a2
+---
+
+{{GlossarySidebar}}
+
+Un [en-tête de requêtes sûr pour le CORS (CORS-safelisted request header)](https://fetch.spec.whatwg.org/#cors-safelisted-request-header) est l'un des [en-têtes HTTP](/fr/docs/Web/HTTP/Headers) suivants :
+
+- [`Accept`](/fr/docs/Web/HTTP/Headers/Accept)
+- [`Accept-Language`](/fr/docs/Web/HTTP/Headers/Accept-Language)
+- [`Content-Language`](/fr/docs/Web/HTTP/Headers/Content-Language)
+- [`Content-Type`](/fr/docs/Web/HTTP/Headers/Content-Type)
+- [`Range`](/fr/docs/Web/HTTP/Headers/Range)
+
+Lorsqu'une requête ne contient que ces en-têtes (et répond aux critères indiqués après), il n'y a pas besoin d'une [requête préalable (preflight request)](/fr/docs/Glossary/Preflight_request) dans le contexte du [CORS](/fr/docs/Glossary/CORS).
+
+Il est possible d'indiquer d'autres en-têtes comme sûrs à l'aide de l'en-tête [`Access-Control-Allow-Headers`](/fr/docs/Web/HTTP/Headers/Access-Control-Allow-Headers). `Access-Control-Allow-Headers` permet également de lister les en-têtes précédents pour contourner les restrictions supplémentaires décrites ensuite.
+
+## Restrictions supplémentaires
+
+Les en-têtes sûr pour le CORS doivent également respecter ces critères :
+
+- Les valeurs pour [`Accept-Language`](/fr/docs/Web/HTTP/Headers/Accept-Language) et [`Content-Language`](/fr/docs/Web/HTTP/Headers/Content-Language) ne peuvent contenir que les caractères `0-9`, `A-Z`, `a-z`, espace ou `*,-.;=`.
+- [`Accept`](/fr/docs/Web/HTTP/Headers/Accept) et [`Content-Type`](/fr/docs/Web/HTTP/Headers/Content-Type) ne peuvent pas contenir un octet d'en-tête non-sûr : `0x00-0x1F` (exception faite de `0x09 (HT)` qui est autorisé), `"():<>?@[\]{}`, et `0x7F (DEL)`.
+- [`Content-Type`](/fr/docs/Web/HTTP/Headers/Content-Type) doit être un type MIME qui (lorsqu'on ignore les paramètres) vaut `application/x-www-form-urlencoded`, ou `multipart/form-data`, ou `text/plain`.
+- La valeur de [`Range`](/fr/docs/Web/HTTP/Headers/Range) doit être un seul intervalle d'octets sous la forme `bytes=[0-9]+-[0-9]*`. Voir la documentation de [`Range`](/fr/docs/Web/HTTP/Headers/Range) pour plus de détails.
+- Pour n'importe quel en-tête, la longueur de la valeur ne peut excéder 128.
+
+## Voir aussi
+
+- [En-tête de réponse sûr pour le CORS](/fr/docs/Glossary/CORS-safelisted_response_header)
+- [Nom d'en-tête interdit](/fr/docs/Glossary/Forbidden_header_name)
+- [En-tête de requête](/fr/docs/Glossary/Request_header)
diff --git a/files/fr/glossary/cors-safelisted_response_header/index.md b/files/fr/glossary/cors-safelisted_response_header/index.md
new file mode 100644
index 00000000000000..6e823b4ed51629
--- /dev/null
+++ b/files/fr/glossary/cors-safelisted_response_header/index.md
@@ -0,0 +1,45 @@
+---
+title: En-tête de réponse sûr pour le CORS
+slug: Glossary/CORS-safelisted_response_header
+l10n:
+  sourceCommit: 4e8db9b4072e90e349f3c18b2c6edfe898cfe6a2
+---
+
+{{GlossarySidebar}}
+
+Un _en-tête de réponse sûr pour le CORS_ est un [en-tête HTTP](/fr/docs/Web/HTTP/Headers) d'une réponse [CORS](/fr/docs/Web/HTTP/CORS) dont on considère qu'il est sûr et peut être exposé aux scripts côté client. Seuls les en-têtes de réponse sûrs sont disponibles pour les pages web.
+
+Par défaut, la liste des en-têtes de réponse sûrs contient :
+
+- [`Cache-Control`](/fr/docs/Web/HTTP/Headers/Cache-Control)
+- [`Content-Language`](/fr/docs/Web/HTTP/Headers/Content-Language)
+- [`Content-Length`](/fr/docs/Web/HTTP/Headers/Content-Length)
+- [`Content-Type`](/fr/docs/Web/HTTP/Headers/Content-Type)
+- [`Expires`](/fr/docs/Web/HTTP/Headers/Expires)
+- [`Last-Modified`](/fr/docs/Web/HTTP/Headers/Last-Modified)
+- [`Pragma`](/fr/docs/Web/HTTP/Headers/Pragma)
+
+Des en-têtes supplémentaires peuvent être indiqués comme sûr à l'aide de l'en-tête [`Access-Control-Expose-Headers`](/fr/docs/Web/HTTP/Headers/Access-Control-Expose-Headers).
+
+> **Note :** Initialement, [`Content-Length`](/fr/docs/Web/HTTP/Headers/Content-Length) ne faisait pas partie de la liste par défaut des en-têtes de réponse sûrs (voir [la pull request 626 du dépôt Fetch](https://github.com/whatwg/fetch/pull/626)).
+
+## Exemples
+
+### Étendre la liste sûre
+
+La liste des en-têtes de réponse sûrs pour le CORS peut être étendue à l'aide de l'en-tête [`Access-Control-Expose-Headers`](/fr/docs/Web/HTTP/Headers/Access-Control-Expose-Headers) :
+
+```http
+Access-Control-Expose-Headers: X-Custom-Header, Content-Encoding
+```
+
+## Voir aussi
+
+- [HTTP](/fr/docs/Web/HTTP)
+- [En-têtes HTTP](/fr/docs/Web/HTTP/Headers)
+- [`Access-Control-Expose-Headers`](/fr/docs/Web/HTTP/Headers/Access-Control-Expose-Headers)
+- Entrées du [glossaire](/fr/docs/Glossary)
+  - [CORS](/fr/docs/Glossary/CORS)
+  - [En-tête de requête sûr pour le CORS](/fr/docs/Glossary/CORS-safelisted_request_header)
+  - [Nom d'en-tête interdit](/fr/docs/Glossary/Forbidden_header_name)
+  - [En-tête de requête](/fr/docs/Glossary/Request_header)

From ad3df2b875b158baca0f93b093ba20f446b1a422 Mon Sep 17 00:00:00 2001
From: SphinxKnight 
Date: Wed, 15 Nov 2023 23:29:06 +0100
Subject: [PATCH 075/141] fr: Initial translation for CycleTracker Manifest
 file (#16766)

* Initial translation

* Fix lint
---
 .../cycletracker/manifest_file/circle.svg     |   1 +
 .../manifest_file/debugger_devtools.png       | Bin 0 -> 7398 bytes
 .../cycletracker/manifest_file/index.md       | 270 ++++++++++++++++++
 .../manifest_file/manifest_firefox.png        | Bin 0 -> 9818 bytes
 .../manifest_file/manifest_icons.png          | Bin 0 -> 12934 bytes
 .../manifest_identity_and_presentation.png    | Bin 0 -> 18296 bytes
 .../cycletracker/manifest_file/tire.svg       |   1 +
 .../cycletracker/manifest_file/wheel.svg      |  45 +++
 8 files changed, 317 insertions(+)
 create mode 100644 files/fr/web/progressive_web_apps/tutorials/cycletracker/manifest_file/circle.svg
 create mode 100644 files/fr/web/progressive_web_apps/tutorials/cycletracker/manifest_file/debugger_devtools.png
 create mode 100644 files/fr/web/progressive_web_apps/tutorials/cycletracker/manifest_file/index.md
 create mode 100644 files/fr/web/progressive_web_apps/tutorials/cycletracker/manifest_file/manifest_firefox.png
 create mode 100644 files/fr/web/progressive_web_apps/tutorials/cycletracker/manifest_file/manifest_icons.png
 create mode 100644 files/fr/web/progressive_web_apps/tutorials/cycletracker/manifest_file/manifest_identity_and_presentation.png
 create mode 100644 files/fr/web/progressive_web_apps/tutorials/cycletracker/manifest_file/tire.svg
 create mode 100644 files/fr/web/progressive_web_apps/tutorials/cycletracker/manifest_file/wheel.svg

diff --git a/files/fr/web/progressive_web_apps/tutorials/cycletracker/manifest_file/circle.svg b/files/fr/web/progressive_web_apps/tutorials/cycletracker/manifest_file/circle.svg
new file mode 100644
index 00000000000000..ca1480bfa478fe
--- /dev/null
+++ b/files/fr/web/progressive_web_apps/tutorials/cycletracker/manifest_file/circle.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/files/fr/web/progressive_web_apps/tutorials/cycletracker/manifest_file/debugger_devtools.png b/files/fr/web/progressive_web_apps/tutorials/cycletracker/manifest_file/debugger_devtools.png
new file mode 100644
index 0000000000000000000000000000000000000000..346be7eccc59a5812fc95cfdd174f849846543f9
GIT binary patch
literal 7398
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
RHy@V-%JLd=?-Aw^{|CIX`_2FW

literal 0
HcmV?d00001

diff --git a/files/fr/web/progressive_web_apps/tutorials/cycletracker/manifest_file/index.md b/files/fr/web/progressive_web_apps/tutorials/cycletracker/manifest_file/index.md
new file mode 100644
index 00000000000000..27cc833fdac2bb
--- /dev/null
+++ b/files/fr/web/progressive_web_apps/tutorials/cycletracker/manifest_file/index.md
@@ -0,0 +1,270 @@
+---
+title: "CycleTracker : manifeste et iconographie"
+short-title: Manifeste et iconographie
+slug: Web/Progressive_web_apps/Tutorials/CycleTracker/Manifest_file
+l10n:
+  sourceCommit: fb87bd19f165cf4d743c0959c556c2f6d8bec676
+---
+
+{{PreviousMenuNext("Web/Progressive_web_apps/Tutorials/CycleTracker/JavaScript_functionality", "Web/Progressive_web_apps/Tutorials/CycleTracker/Service_workers", "Web/Progressive_web_apps/Tutorials/CycleTracker")}}
+
+{{PWASidebar}}
+
+Le manifeste d'une PWA est un fichier JSON qui fournit des informations à propos des caractéristiques de l'application afin qu'elle puisse ressembler et se comporter comme une application native une fois installée sur un appareil. Le manifeste contient des métadonnées à propos de l'application comme son nom, ses icônes, ainsi que des directives d'affichage.
+
+Bien que la spécification considère l'ensemble des champs du manifeste comme facultatifs, certains navigateurs, systèmes d'exploitation ou outils de distribution imposent [certains champs obligatoires](/fr/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable#required_manifest_members) pour qu'une application web soit une PWA. En incluant un nom ou un nom court, l'URL initiale, une icône respectant certains critères, le type de zone d'affichage dans laquelle l'application devrait être vue, votre application respectera les critères liés au manifeste pour être une PWA.
+
+Voici un exemple de manifeste minimaliste pour notre application de suivi des cycles menstruels :
+
+```js
+{
+  "short_name": "CT",
+  "start_url" : "/",
+  "icons": [
+    {
+      "src": "icon-512.png",
+      "sizes": "512x512"
+    }
+  ],
+  "display": "standalone"
+}
+```
+
+Avant d'enregistrer le fichier du manifeste et d'inclure un pointeur vers celui-ci depuis notre document HTML, nous allons enrichir cet objet JSON afin qu'il reste concis, mais fournisse plus d'informations sur l'identité, la présentation et l'iconographie de la PWA. La version minimale ci-avant peut tout à fait fonctionner, mais voyons quelques autres propriétés qui aideront à mieux définir l'apparence de notre PWA CycleTracker.
+
+## Identité de l'application
+
+Pour identifier notre PWA, le document JSON doit inclure les propriétés `name` (nom) ou `short_name` (nom court), ou les deux. On peut également inclure un champ `description`.
+
+- [`name`](/fr/docs/Web/Manifest/name)
+  - : Le nom de la PWA. Il s'agit du nom utilisé lorsque le système d'exploitation liste les applications, comme le libellé situé à côté de l'icône de l'application, etc.
+- [`short_name`](/fr/docs/Web/Manifest/short_name)
+  - : Le nom de la PWA qui est affiché s'il n'y a pas suffisamment d'espace pour `name`. Cette valeur est utilisée comme libellé pour les icônes sur les écrans de smartphones, et, par exemple, dans la boîte de dialogue « Ajouter à l'écran d'accueil » sur iOS.
+
+Lorsque `name` et `short_name` sont tous les deux renseignés, la valeur de `name` est utilisée dans la plupart des cas, tandis que `short_name` est utilisé lorsque l'espace d'affichage est limité.
+
+- [`description`](/fr/docs/Web/Manifest/description)
+  - : Une explication de ce que fait l'application. Elle fournit [une description accessible](/fr/docs/Web/Accessibility/ARIA/Attributes/aria-description) de l'objectif et des fonctionnalités de l'application.
+
+### Tâche
+
+Écrivez les premières lignes de votre fichier de manifeste. Vous pouvez utiliser le texte qui suit ou utiliser des valeurs plus descriptives ou discrètes, et une description de votre choix.
+
+### Exemple de solution
+
+```js
+{
+  "name": "CycleTracker : application de suivi menstruel",
+  "short_name": "CT",
+  "description": "Enregistrez de façon sécurisée et confidentielle vos cycles menstruels. Saisissez les dates de début et de fin de vos cycles, et enregistrez vos données privées dans votre navigateur sur votre appareil, sans qu'elles soient divulguées par ailleurs."
+}
+```
+
+## Présentation de l'application
+
+L'apparence de la PWA lors de son installation ou de son utilisation hors-ligne est définie dans le manifeste. Les champs du manifeste relatifs à cette apparence incluent notamment `start_url` et `display`, ainsi que d'autres champs permettant de [personnaliser les couleurs de votre application](/fr/docs/Web/Progressive_web_apps/How_to/Customize_your_app_colors), comme `theme_color` et `background_color`.
+
+- [`start_url`](/fr/docs/Web/Manifest/start_url)
+  - : La page de démarrage lorsque la PWA est lancée.
+- [`display`](/fr/docs/Web/Manifest/display)
+  - : Contrôle le mode d'affichage de l'application. Ce champ peut valoir `fullscreen`, `standalone` ([la PWA est alors affichée dans une fenêtre dédiée](/fr/docs/Web/Progressive_web_apps/How_to/Create_a_standalone_app)), `minimal-ui` (semblable à la vue `standalone`, mais avec certains éléments d'interface pour la navigation), et `browser`, qui ouvre l'application dans une fenêtre de navigateur classique.
+
+Il existe également un champ [`orientation`](/fr/docs/Web/Manifest/orientation) qui définit l'orientation par défaut de la PWA et qui peut valoir `portrait` ou `landscape` (paysage). Comme notre application fonctionne dans les deux orientations, nous n'inclurons pas cette propriété.
+
+### Couleurs
+
+- [`theme_color`](/fr/docs/Web/Manifest/theme_color)
+  - : [La couleur par défaut des éléments d'interface du système d'exploitation ou du navigateur](/fr/docs/Web/Progressive_web_apps/How_to/Customize_your_app_colors#define_a_theme_color) comme la barre d'état sur certains mobiles et la barre du titre d'application sur les systèmes d'exploitation de bureau.
+- [`background_color`](/fr/docs/Web/Manifest/background_color)
+  - : Une couleur de substitution qui peut être affichée [comme arrière-plan de l'application](/fr/docs/Web/Progressive_web_apps/How_to/Customize_your_app_colors#customize_the_app_window_background_color) jusqu'à ce que le CSS soit chargé. Pour créer une transition fluide entre le lancement de l'application et la fin du chargement, mieux vaudra utiliser [la couleur](/fr/docs/Web/CSS/color_value) déclarée pour [l'arrière-plan (propriété CSS `background-color`)](/fr/docs/Web/CSS/background-color) de l'application.
+
+### Tâche
+
+Ajouter les définitions de présentation au fichier de manifeste que vous avez initié lors de l'exercice précédent.
+
+### Exemple de solution
+
+Comme notre application d'exemple fonctionne sur une seule page, on pourra utiliser `"/"` comme valeur pour `start_url`, voire omettre ce champ. De même, nous pouvons afficher l'application sans l'interface utilisateur du navigateur en utilisant `standalone` comme valeur pour `display`.
+
+Dans [notre fichier CSS](/fr/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/HTML_and_CSS#contenu_css), nous appliquons `background-color: #efe;` sur le sélecteur de l'élément `body`. Aussi, nous utilisons ici `#eeffee` pour `background_color` afin d'obtenir une transition fluide lors du chargement de l'application.
+
+```js
+{
+  "name": "…",
+  "short_name": "…",
+  "description": "…",
+  "start_url": "/",
+  "theme_color": "#eeffee",
+  "background_color": "#eeffee",
+  "display": "standalone"
+}
+```
+
+## Iconographie de l'application
+
+Les icônes d'une PWA aident à identifier l'application parmi les autres, aident à la rendre visuellement attractive et plus facilement découvrable. L'icône d'une PWA apparaît sur les écrans d'accueil, lanceurs d'application ou dans les résultats des magasins d'application. La taille de l'image affichée et les contraintes sur les fichiers utilisés varient selon le système et le contexte d'affichage. C'est dans le manifeste qu'on définit les images des différentes icônes.
+
+Dans l'objet JSON qui représente le manifeste, le champ `icons` est un tableau d'un ou plusieurs objets représentant des icônes, chacun avec les propriétés `src` et `sizes`, et pouvant également inclure les propriétés optionnelles `type` et `purpose`. La propriété `src` de chaque objet icône indique la source d'un seul fichier image. La propriété `sizes` fournit une liste de tailles prises en charge pour cette image, séparées par des espaces, ou le mot-clé `any` (la valeur est analogue à l'attribut [`sizes`](/fr/docs/Web/HTML/Element/link#sizes) de l'élément HTML [``](/fr/docs/Web/HTML/Element/link)). La propriété `type` indique le type MIME de l'image.
+
+```js
+{
+  "name": "MonAppli",
+  "icons": [
+    {
+      "src": "icones/minuscule.webp",
+      "sizes": "48x48"
+    },
+    {
+      "src": "icones/petite.png",
+      "sizes": "72x72 96x96 128x128 256x256",
+      "purpose": "maskable"
+    },
+    {
+      "src": "icones/grande.png",
+      "sizes": "512x512"
+    },
+    {
+      "src": "icones/vectorielle.svg",
+      "sizes": "any"
+    }
+  ]
+}
+```
+
+Toutes les icônes devraient avoir le même aspect afin que votre application soit reconnaissable quelle que soit la taille utilisée. Plus l'icône est grande, plus elle pourra contenir de détails. Bien que tous les fichiers d'icônes soient des images carrées, certains systèmes d'exploitation pourront les afficher avec une autre forme, en coupant certaines sections ou en appliquant un masque sur l'icône pour obtenir une homogénéité entre les applications, voire en les réduisant, en les centrant et en ajoutant un arrière-plan si l'icône n'est pas masquable. La [zone sûre](/fr/docs/Web/Progressive_web_apps/How_to/Define_app_icons#support-masking), celle qui sera affichée sans perte comme un cercle correspond aux 80% intérieurs de l'image. Les icônes qui peuvent recevoir un masque sans problème peuvent être identifiées avec la propriété `purpose` dotée de la valeur `maskable` (voir [les icônes adaptatives sur web.dev (en anglais)](https://web.dev/articles/maskable-icon)).
+
+Dans Safari (et donc sur iOS et iPadOS), si vous incluez des éléments [``](/fr/docs/Web/HTML/Element/link) pour [les ressources non-standards `apple-touch-icon`](/fr/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#ajouter_des_icônes_personnalisées_à_un_site) dans l'élément [``](/fr/docs/Web/HTML/Element/head), ces icônes remplaceront celles déclarées dans le manifeste.
+
+### Tâche
+
+Ajoutez des icônes au manifeste construit dans les exercices précédents.
+
+En jouant sur le mot « cycle » de CycleTracker et la couleur verte choisie comme thème, nos icônes peuvent être des carrés vert clair avec un cercle vert. Notre icône la plus petite, `circle.ico`, est un simple cercle représentant un point sur un carré utilisant la couleur du thème. Les images intermédiaires `circle.svg`, `tire.svg`, et `wheel.svg`, ajoutent progressivement plus de détails pour passer d'un cercle simple à une roue de plus en plus complexe, avec des rayons et un moyeu. Ceci étant écrit, la conception d'icônes est un sujet à part entière, que nous ne pouvons détailler pleinement dans ce tutoriel.
+
+```html hidden
+

+  un cercle vert
+  une roue simple
+  une roue plus élaborée
+

+```
+
+```css hidden
+div {
+  display: flex;
+  gap: 5px;
+}
+img {
+  width: 33%;
+}
+```
+
+{{EmbedLiveSample("", 600, 250)}}
+
+### Exemple de solution
+
+```js
+{
+  "name": "...",
+  "short_name": "...",
+  "description": "...",
+  "start_url": "...",
+  "theme_color": "...",
+  "background_color": "...",
+  "display": "...",
+  "icons": [
+        {
+      "src": "circle.ico",
+      "sizes": "48x48"
+    },
+    {
+      "src": "icons/circle.svg",
+      "sizes": "72x72 96x96",
+      "purpose": "maskable"
+    },
+    {
+      "src": "icons/tire.svg",
+      "sizes": "128x128 256x256"
+    },
+    {
+      "src": "icons/wheel.svg",
+      "sizes": "512x512"
+    }
+  ]
+}
+```
+
+## Ajouter le manifeste à l'application
+
+Nous avons désormais un fichier de manifeste utilisable. Il est temps de l'enregistrer et d'y faire référence depuis notre fichier HTML.
+
+L'extension utilisée pour le fichier du manifeste peut être `.webappmanifest`, comme indiqué dans la spécification. Comme il s'agit d'un fichier JSON, on peut également l'enregistrer avec l'extension `.json`.
+
+Pour une PWA, le manifeste doit être référencé dans le document HTML de l'application. Nous avons une application web fonctionnelle, mais ce n'est pas encore une PWA, car il n'y a pas encore de référence à notre manifeste JSON. Pour inclure la ressource JSON externe, on utilise un élément `` avec l'attribut `rel="manifest"`, et on renseigne l'attribut `href` pour qu'il pointe vers le manifeste.
+
+```html
+
+```
+
+L'élément `` sert généralement à référencer les feuilles de style, et dans le cas des PWA, le manifeste. On l'utilise aussi, entre autres, pour [les icônes d'un site](/fr/docs/Web/HTML/Attributes/rel#icon) (qu'il s'agisse des « favicons » et des icônes pour les écrans d'accueil sur mobile).
+
+```html
+
+```
+
+Si vous utilisez l'extension `.webmanifest`, il faut préciser `type="application/manifest+json"` si votre serveur ne gère pas automatiquement cette extension et son type MIME.
+
+#### Tâche
+
+Enregistrez le fichier de manifeste que vous avez créé jusqu'à présent, puis reliez-le depuis le fichier `index.html`.
+
+Comme exercice facultatif, vous pouvez également ajouter un lien vers une icône depuis le document HTML.
+
+#### Exemple de solution
+
+L'élément [``](/fr/docs/Web/HTML/Element/head) de votre fichier `index.html` pourra ressembler à :
+
+```html
+
+  
+  
+  Cycle Tracker
+  
+  
+  
+
+```
+
+Vous pouvez voir [le fichier `cycletracker.json` (en anglais)](https://mdn.github.io/pwa-examples/cycletracker/manifest_file/cycletracker.json) et [le code source du projet à ce stade](https://github.com/mdn/pwa-examples/tree/main/cycletracker/manifest_file) sur GitHub.
+
+Lorsqu'un fichier manifeste est présent, Safari reconnaîtra votre site comme une application web. Toutefois, pour que l'application soit pleinement une PWA, il faut lui ajouter un service worker.
+
+## Déboguer des fichiers manifeste
+
+Certains outils de développement dans les navigateurs permettent d'inspecter les manifestes. Pour Edge, Firefox, et Chrome, les propriétés du manifeste et leur valeur sont visibles dans le panneau « Application ».
+
+![Capture d'écran des outils de développement, où on voit le panneau gauche incluant un lien vers le manifeste. Sur la partie droite, on peut lire Manifeste d'application et voir le nom du fichier sous forme d'un lien vers le fichier JSON.](debugger_devtools.png)
+
+Le panneau relatif au manifeste fournit un lien vers le fichier, et des sections sur l'identité, la présentation et les icônes.
+
+![Les propriétés relatives à l'identité et à la présentation, avec leurs valeurs si elles sont présentes.](manifest_identity_and_presentation.png)
+
+Les propriétés du manifeste qui sont prises en charge sont affichées avec leur valeur. Dans cette capture d'écran, on peut voir les propriétés `orientation` et `id` apparaître, même si elles ne font pas partie de notre manifeste. Le panneau Applications peut être utilisé pour voir les propriétés et même apprendre certaines informations. Dans cet exemple, on peut voir que pour indiquer un identifiant d'application qui correspond à l'identité actuelle, il faut que la propriété `id` soit renseignée avec "/".
+
+Chrome et Edge fournissent également des erreurs et des avertissements, les gestionnaires de protocole et des informations pour améliorer le manifeste et les icônes.
+
+Notre application ne dispose pas de gestionnaires de protocole et nous n'aborderons pas ce sujet dans ce tutoriel. S'il y en avait eu d'inclus, ils auraient été listés dans la section correspondante. Cette section étant vide, les outils de développement fournissent des liens pour des informations à ce sujet.
+
+![Les quatre icônes incluses dans le manifeste, avec l'arrière-plan retiré car l'option « Affichez (sic) uniquement la zone de sécurité minimale pour les icônes masquables » est cochée.](manifest_icons.png)
+
+Le panneau relatif au manifeste inclut également des informations sur les zones sûres des icônes masquables et un lien vers [un billet de blog (en anglais) sur ce sujet](https://web.dev/articles/maskable-icon). Pour créer des icônes, vous pouvez utiliser l'outil [imageGenerator (en anglais)](https://www.pwabuilder.com/imageGenerator) qui crée plus de 100 images carrées en PNG pour Android, Apple, et Windows, ainsi qu'un fichier JSON contenant l'ensemble des chemins des images avec leur taille. Celles-ci pourront ne pas toutes vous servir, mais cet outil vous permettra de voir la diversité des configurations utilisées pour servir une PWA.
+
+Les outils de développement sont utiles pour identifier les champs de manifeste pris en charge. On notera par exemple que les outils de développement de Firefox affichent `dir`, `lang`, `orientation`, `scope`, et `id`, même si notre fichier de manifeste ne contient pas ces champs. Firefox inclut également la valeur de la propriété `purpose` pour chaque icône, en affichant `any` par défaut.
+
+![Le panneau du manifeste dans les outils de développement de Firefox, affichant des valeurs pour les propriétés qui ne sont pas incluses dans notre manifeste comme dir, scope, et id members, ainsi que les propriétés lang et orientation sans leur valeur associée.](manifest_firefox.png)
+
+## Pour la suite
+
+Pour que notre application bénéficie des avantages d'une PWA pour l'ensemble des navigateurs et des systèmes d'exploitation, nous devons lui [ajouter un service worker](/fr/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/Service_workers). Dans le prochain article, nous verrons comment faire, sans utiliser de framework.
+
+{{PreviousMenuNext("Web/Progressive_web_apps/Tutorials/CycleTracker/JavaScript_functionality", "Web/Progressive_web_apps/Tutorials/CycleTracker/Service_workers", "Web/Progressive_web_apps/Tutorials/CycleTracker")}}
diff --git a/files/fr/web/progressive_web_apps/tutorials/cycletracker/manifest_file/manifest_firefox.png b/files/fr/web/progressive_web_apps/tutorials/cycletracker/manifest_file/manifest_firefox.png
new file mode 100644
index 0000000000000000000000000000000000000000..37d47703f8b9ed611c4d4bb53719507481b96ae7
GIT binary patch
literal 9818
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
a_m_986gt`R@>cQxKto1C5nLx`4E;auP1Z30

literal 0
HcmV?d00001

diff --git a/files/fr/web/progressive_web_apps/tutorials/cycletracker/manifest_file/manifest_icons.png b/files/fr/web/progressive_web_apps/tutorials/cycletracker/manifest_file/manifest_icons.png
new file mode 100644
index 0000000000000000000000000000000000000000..ec9e9529318f471ba6feab1f99558361861805e6
GIT binary patch
literal 12934
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

literal 0
HcmV?d00001

diff --git a/files/fr/web/progressive_web_apps/tutorials/cycletracker/manifest_file/manifest_identity_and_presentation.png b/files/fr/web/progressive_web_apps/tutorials/cycletracker/manifest_file/manifest_identity_and_presentation.png
new file mode 100644
index 0000000000000000000000000000000000000000..4a8da196d91409728c9eccaccb082f892cb84322
GIT binary patch
literal 18296
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
X=HC9Xb_uWqU|{fc^>bP0l+XkK&GUs$

literal 0
HcmV?d00001

diff --git a/files/fr/web/progressive_web_apps/tutorials/cycletracker/manifest_file/tire.svg b/files/fr/web/progressive_web_apps/tutorials/cycletracker/manifest_file/tire.svg
new file mode 100644
index 00000000000000..a69dfdcbb0a309
--- /dev/null
+++ b/files/fr/web/progressive_web_apps/tutorials/cycletracker/manifest_file/tire.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/files/fr/web/progressive_web_apps/tutorials/cycletracker/manifest_file/wheel.svg b/files/fr/web/progressive_web_apps/tutorials/cycletracker/manifest_file/wheel.svg
new file mode 100644
index 00000000000000..e6270fa640da6c
--- /dev/null
+++ b/files/fr/web/progressive_web_apps/tutorials/cycletracker/manifest_file/wheel.svg
@@ -0,0 +1,45 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file

From dfefb25790fbf3645296fa9265ea4a890eda5fc7 Mon Sep 17 00:00:00 2001
From: mdn-bot <108879845+mdn-bot@users.noreply.github.com>
Date: Wed, 15 Nov 2023 01:26:55 +0000
Subject: [PATCH 076/141] ja: sync translated content

---
 files/ja/_redirects.txt                       |  40 ++++++++++++++----
 files/ja/_wikihistory.json                    |  32 +++++++-------
 .../{assert => assert_static}/index.md        |   5 +--
 .../console/{clear => clear_static}/index.md  |   5 +--
 .../console/{count => count_static}/index.md  |   5 +--
 .../index.md                                  |   5 +--
 .../console/{debug => debug_static}/index.md  |   5 +--
 .../api/console/{dir => dir_static}/index.md  |   5 +--
 .../{dirxml => dirxml_static}/index.md        |   5 +--
 .../console/{error => error_static}/index.md  |   5 +--
 .../console/{group => group_static}/index.md  |   5 +--
 .../index.md                                  |   5 +--
 .../{groupend => groupend_static}/index.md    |   5 +--
 .../console/{info => info_static}/index.md    |   5 +--
 .../api/console/{log => log_static}/index.md  |   3 +-
 .../{profile => profile_static}/index.md      |   5 +--
 .../index.md                                  |   5 +--
 .../console-table-array-of-array.png          | Bin
 ...-table-array-of-objects-firstname-only.png | Bin
 .../console-table-array-of-objects.png        | Bin
 .../console-table-array.png                   | Bin
 .../console-table-object-of-objects.png       | Bin
 .../console-table-simple-object.png           | Bin
 .../console/{table => table_static}/index.md  |   5 +--
 .../console/{time => time_static}/index.md    |   5 +--
 .../{timeend => timeend_static}/index.md      |   5 +--
 .../{timelog => timelog_static}/index.md      |   5 +--
 .../{timestamp => timestamp_static}/index.md  |   5 +--
 .../console/{trace => trace_static}/index.md  |   5 +--
 .../console/{warn => warn_static}/index.md    |   5 +--
 30 files changed, 91 insertions(+), 89 deletions(-)
 rename files/ja/web/api/console/{assert => assert_static}/index.md (95%)
 rename files/ja/web/api/console/{clear => clear_static}/index.md (87%)
 rename files/ja/web/api/console/{count => count_static}/index.md (94%)
 rename files/ja/web/api/console/{countreset => countreset_static}/index.md (95%)
 rename files/ja/web/api/console/{debug => debug_static}/index.md (95%)
 rename files/ja/web/api/console/{dir => dir_static}/index.md (93%)
 rename files/ja/web/api/console/{dirxml => dirxml_static}/index.md (88%)
 rename files/ja/web/api/console/{error => error_static}/index.md (94%)
 rename files/ja/web/api/console/{group => group_static}/index.md (95%)
 rename files/ja/web/api/console/{groupcollapsed => groupcollapsed_static}/index.md (91%)
 rename files/ja/web/api/console/{groupend => groupend_static}/index.md (88%)
 rename files/ja/web/api/console/{info => info_static}/index.md (94%)
 rename files/ja/web/api/console/{log => log_static}/index.md (97%)
 rename files/ja/web/api/console/{profile => profile_static}/index.md (91%)
 rename files/ja/web/api/console/{profileend => profileend_static}/index.md (94%)
 rename files/ja/web/api/console/{table => table_static}/console-table-array-of-array.png (100%)
 rename files/ja/web/api/console/{table => table_static}/console-table-array-of-objects-firstname-only.png (100%)
 rename files/ja/web/api/console/{table => table_static}/console-table-array-of-objects.png (100%)
 rename files/ja/web/api/console/{table => table_static}/console-table-array.png (100%)
 rename files/ja/web/api/console/{table => table_static}/console-table-object-of-objects.png (100%)
 rename files/ja/web/api/console/{table => table_static}/console-table-simple-object.png (100%)
 rename files/ja/web/api/console/{table => table_static}/index.md (97%)
 rename files/ja/web/api/console/{time => time_static}/index.md (93%)
 rename files/ja/web/api/console/{timeend => timeend_static}/index.md (94%)
 rename files/ja/web/api/console/{timelog => timelog_static}/index.md (95%)
 rename files/ja/web/api/console/{timestamp => timestamp_static}/index.md (93%)
 rename files/ja/web/api/console/{trace => trace_static}/index.md (92%)
 rename files/ja/web/api/console/{warn => warn_static}/index.md (94%)

diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt
index d119cae958c550..e72b4b491ce860 100644
--- a/files/ja/_redirects.txt
+++ b/files/ja/_redirects.txt
@@ -697,10 +697,10 @@
 /ja/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects	/ja/docs/Web/API/XMLHttpRequest_API/Using_FormData_Objects
 /ja/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest	/ja/docs/Web/API/XMLHttpRequest_API/Using_XMLHttpRequest
 /ja/docs/DOM/console	/ja/docs/Web/API/console
-/ja/docs/DOM/console.dir	/ja/docs/Web/API/Console/dir
-/ja/docs/DOM/console.log	/ja/docs/Web/API/Console/log
-/ja/docs/DOM/console.time	/ja/docs/Web/API/Console/time
-/ja/docs/DOM/console.timeEnd	/ja/docs/Web/API/Console/timeEnd
+/ja/docs/DOM/console.dir	/ja/docs/Web/API/console/dir_static
+/ja/docs/DOM/console.log	/ja/docs/Web/API/console/log_static
+/ja/docs/DOM/console.time	/ja/docs/Web/API/console/time_static
+/ja/docs/DOM/console.timeEnd	/ja/docs/Web/API/console/timeend_static
 /ja/docs/DOM/dispatchEvent_example	/ja/docs/Web/Events/Creating_and_triggering_events
 /ja/docs/DOM/document	/ja/docs/Web/API/Document
 /ja/docs/DOM/document.URL	/ja/docs/Web/API/Document/URL
@@ -2650,7 +2650,12 @@
 /ja/docs/Web/API/Canvas_API/Tutorial/Compositing/Example	/ja/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
 /ja/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility	/ja/docs/orphaned/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility
 /ja/docs/Web/API/CloseEvent/initCloseEvent	/ja/docs/conflicting/Web/API/CloseEvent
-/ja/docs/Web/API/Console.error	/ja/docs/Web/API/Console/error
+/ja/docs/Web/API/Console.error	/ja/docs/Web/API/console/error_static
+/ja/docs/Web/API/Console/dir	/ja/docs/Web/API/console/dir_static
+/ja/docs/Web/API/Console/error	/ja/docs/Web/API/console/error_static
+/ja/docs/Web/API/Console/log	/ja/docs/Web/API/console/log_static
+/ja/docs/Web/API/Console/time	/ja/docs/Web/API/console/time_static
+/ja/docs/Web/API/Console/timeEnd	/ja/docs/Web/API/console/timeend_static
 /ja/docs/Web/API/Constraint_validation	/ja/docs/Learn/Forms/Form_validation
 /ja/docs/Web/API/Coordinates	/ja/docs/Web/API/GeolocationCoordinates
 /ja/docs/Web/API/DOMPoint/fromPoint	/ja/docs/Web/API/DOMPoint/fromPoint_static
@@ -3237,10 +3242,27 @@
 /ja/docs/Web/API/XRTargetRayMode	/ja/docs/Web/API/XRInputSource/targetRayMode
 /ja/docs/Web/API/XSLTProcessor/Browser_Differences	/ja/docs/orphaned/Web/API/XSLTProcessor/Browser_Differences
 /ja/docs/Web/API/XSLTProcessor/Resources	/ja/docs/Web/API/XSLTProcessor
-/ja/docs/Web/API/console.dir	/ja/docs/Web/API/Console/dir
-/ja/docs/Web/API/console.log	/ja/docs/Web/API/Console/log
-/ja/docs/Web/API/console.time	/ja/docs/Web/API/Console/time
-/ja/docs/Web/API/console.timeEnd	/ja/docs/Web/API/Console/timeEnd
+/ja/docs/Web/API/console.dir	/ja/docs/Web/API/console/dir_static
+/ja/docs/Web/API/console.log	/ja/docs/Web/API/console/log_static
+/ja/docs/Web/API/console.time	/ja/docs/Web/API/console/time_static
+/ja/docs/Web/API/console.timeEnd	/ja/docs/Web/API/console/timeend_static
+/ja/docs/Web/API/console/assert	/ja/docs/Web/API/console/assert_static
+/ja/docs/Web/API/console/clear	/ja/docs/Web/API/console/clear_static
+/ja/docs/Web/API/console/count	/ja/docs/Web/API/console/count_static
+/ja/docs/Web/API/console/countReset	/ja/docs/Web/API/console/countreset_static
+/ja/docs/Web/API/console/debug	/ja/docs/Web/API/console/debug_static
+/ja/docs/Web/API/console/dirxml	/ja/docs/Web/API/console/dirxml_static
+/ja/docs/Web/API/console/group	/ja/docs/Web/API/console/group_static
+/ja/docs/Web/API/console/groupCollapsed	/ja/docs/Web/API/console/groupcollapsed_static
+/ja/docs/Web/API/console/groupEnd	/ja/docs/Web/API/console/groupend_static
+/ja/docs/Web/API/console/info	/ja/docs/Web/API/console/info_static
+/ja/docs/Web/API/console/profile	/ja/docs/Web/API/console/profile_static
+/ja/docs/Web/API/console/profileEnd	/ja/docs/Web/API/console/profileend_static
+/ja/docs/Web/API/console/table	/ja/docs/Web/API/console/table_static
+/ja/docs/Web/API/console/timeLog	/ja/docs/Web/API/console/timelog_static
+/ja/docs/Web/API/console/timeStamp	/ja/docs/Web/API/console/timestamp_static
+/ja/docs/Web/API/console/trace	/ja/docs/Web/API/console/trace_static
+/ja/docs/Web/API/console/warn	/ja/docs/Web/API/console/warn_static
 /ja/docs/Web/API/document.URL	/ja/docs/Web/API/Document/URL
 /ja/docs/Web/API/document.activeElement	/ja/docs/Web/API/Document/activeElement
 /ja/docs/Web/API/document.adoptNode	/ja/docs/Web/API/Document/adoptNode
diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json
index 808aeaafee5102..91c724afa8e6fd 100644
--- a/files/ja/_wikihistory.json
+++ b/files/ja/_wikihistory.json
@@ -15100,67 +15100,67 @@
       "saneyuki_s"
     ]
   },
-  "Web/API/console/assert": {
+  "Web/API/console/assert_static": {
     "modified": "2020-11-27T14:41:08.119Z",
     "contributors": ["yumetodo", "takamin", "yyss"]
   },
-  "Web/API/console/clear": {
+  "Web/API/console/clear_static": {
     "modified": "2020-11-27T13:49:44.683Z",
     "contributors": ["yumetodo", "853419196", "yyss"]
   },
-  "Web/API/console/count": {
+  "Web/API/console/count_static": {
     "modified": "2020-11-27T14:24:35.469Z",
     "contributors": ["yumetodo", "yyss"]
   },
-  "Web/API/console/countReset": {
+  "Web/API/console/countreset_static": {
     "modified": "2020-11-27T14:37:31.289Z",
     "contributors": ["yumetodo"]
   },
-  "Web/API/console/debug": {
+  "Web/API/console/debug_static": {
     "modified": "2020-11-27T14:40:02.073Z",
     "contributors": ["yumetodo", "silverskyvicto"]
   },
-  "Web/API/console/dirxml": {
+  "Web/API/console/dirxml_static": {
     "modified": "2019-03-23T22:34:53.031Z",
     "contributors": ["yyss"]
   },
-  "Web/API/console/group": {
+  "Web/API/console/group_static": {
     "modified": "2020-10-15T21:45:35.788Z",
     "contributors": ["munieru_jp", "dskmori", "yyss"]
   },
-  "Web/API/console/groupCollapsed": {
+  "Web/API/console/groupcollapsed_static": {
     "modified": "2019-03-23T22:34:55.714Z",
     "contributors": ["yyss"]
   },
-  "Web/API/console/groupEnd": {
+  "Web/API/console/groupend_static": {
     "modified": "2019-03-23T22:34:56.119Z",
     "contributors": ["yyss"]
   },
-  "Web/API/console/info": {
+  "Web/API/console/info_static": {
     "modified": "2020-10-15T21:45:37.023Z",
     "contributors": ["u_7cc", "yyss"]
   },
-  "Web/API/console/profile": {
+  "Web/API/console/profile_static": {
     "modified": "2019-03-23T22:34:55.973Z",
     "contributors": ["yyss"]
   },
-  "Web/API/console/profileEnd": {
+  "Web/API/console/profileend_static": {
     "modified": "2019-03-23T22:34:42.618Z",
     "contributors": ["yyss"]
   },
-  "Web/API/console/table": {
+  "Web/API/console/table_static": {
     "modified": "2019-03-23T22:34:44.337Z",
     "contributors": ["yyss"]
   },
-  "Web/API/console/timeStamp": {
+  "Web/API/console/timestamp_static": {
     "modified": "2019-03-23T22:34:51.368Z",
     "contributors": ["yyss"]
   },
-  "Web/API/console/trace": {
+  "Web/API/console/trace_static": {
     "modified": "2020-10-15T21:45:37.860Z",
     "contributors": ["YujiSoftware", "woodmix", "yyss"]
   },
-  "Web/API/console/warn": {
+  "Web/API/console/warn_static": {
     "modified": "2019-03-23T22:34:47.743Z",
     "contributors": ["yyss"]
   },
diff --git a/files/ja/web/api/console/assert/index.md b/files/ja/web/api/console/assert_static/index.md
similarity index 95%
rename from files/ja/web/api/console/assert/index.md
rename to files/ja/web/api/console/assert_static/index.md
index 617e8a91e0a318..f3779cd4f8b089 100644
--- a/files/ja/web/api/console/assert/index.md
+++ b/files/ja/web/api/console/assert_static/index.md
@@ -1,8 +1,7 @@
 ---
 title: console.assert()
-slug: Web/API/console/assert
-l10n:
-  sourceCommit: b40b71d87ab041f2f36a4675bc09af983b22422a
+slug: Web/API/console/assert_static
+original_slug: Web/API/console/assert
 ---
 
 {{APIRef("Console API")}}
diff --git a/files/ja/web/api/console/clear/index.md b/files/ja/web/api/console/clear_static/index.md
similarity index 87%
rename from files/ja/web/api/console/clear/index.md
rename to files/ja/web/api/console/clear_static/index.md
index 78acbc190624f9..e3aa3a99b200a1 100644
--- a/files/ja/web/api/console/clear/index.md
+++ b/files/ja/web/api/console/clear_static/index.md
@@ -1,8 +1,7 @@
 ---
 title: console.clear()
-slug: Web/API/console/clear
-l10n:
-  sourceCommit: 2de88eb1e77c52ea86d46b003e913a8a5337c5d2
+slug: Web/API/console/clear_static
+original_slug: Web/API/console/clear
 ---
 
 {{APIRef("Console API")}}
diff --git a/files/ja/web/api/console/count/index.md b/files/ja/web/api/console/count_static/index.md
similarity index 94%
rename from files/ja/web/api/console/count/index.md
rename to files/ja/web/api/console/count_static/index.md
index 3ba4c000d1b11a..09941b3cb6516b 100644
--- a/files/ja/web/api/console/count/index.md
+++ b/files/ja/web/api/console/count_static/index.md
@@ -1,8 +1,7 @@
 ---
 title: console.count()
-slug: Web/API/console/count
-l10n:
-  sourceCommit: 710132ffea066697d23e1978478d36090fb448d7
+slug: Web/API/console/count_static
+original_slug: Web/API/console/count
 ---
 
 {{APIRef("Console API")}}
diff --git a/files/ja/web/api/console/countreset/index.md b/files/ja/web/api/console/countreset_static/index.md
similarity index 95%
rename from files/ja/web/api/console/countreset/index.md
rename to files/ja/web/api/console/countreset_static/index.md
index a886ea93569d7e..b9877ad3ae550e 100644
--- a/files/ja/web/api/console/countreset/index.md
+++ b/files/ja/web/api/console/countreset_static/index.md
@@ -1,8 +1,7 @@
 ---
 title: console.countReset()
-slug: Web/API/console/countReset
-l10n:
-  sourceCommit: 710132ffea066697d23e1978478d36090fb448d7
+slug: Web/API/console/countreset_static
+original_slug: Web/API/console/countReset
 ---
 
 {{APIRef("Console API")}}
diff --git a/files/ja/web/api/console/debug/index.md b/files/ja/web/api/console/debug_static/index.md
similarity index 95%
rename from files/ja/web/api/console/debug/index.md
rename to files/ja/web/api/console/debug_static/index.md
index f53d2774652639..f7bf601dae74cf 100644
--- a/files/ja/web/api/console/debug/index.md
+++ b/files/ja/web/api/console/debug_static/index.md
@@ -1,8 +1,7 @@
 ---
 title: console.debug()
-slug: Web/API/console/debug
-l10n:
-  sourceCommit: d19d68bf6078c23d527b6e1355925795e745d124
+slug: Web/API/console/debug_static
+original_slug: Web/API/console/debug
 ---
 
 {{APIRef("Console API")}}
diff --git a/files/ja/web/api/console/dir/index.md b/files/ja/web/api/console/dir_static/index.md
similarity index 93%
rename from files/ja/web/api/console/dir/index.md
rename to files/ja/web/api/console/dir_static/index.md
index 853fa16fbb1ee9..a0c47dbcfcc5b6 100644
--- a/files/ja/web/api/console/dir/index.md
+++ b/files/ja/web/api/console/dir_static/index.md
@@ -1,8 +1,7 @@
 ---
 title: console.dir()
-slug: Web/API/console/dir
-l10n:
-  sourceCommit: 4fd581de2e31ac303a4628354c80f476ba9fd0e2
+slug: Web/API/console/dir_static
+original_slug: Web/API/console/dir
 ---
 
 {{APIRef("Console API")}}
diff --git a/files/ja/web/api/console/dirxml/index.md b/files/ja/web/api/console/dirxml_static/index.md
similarity index 88%
rename from files/ja/web/api/console/dirxml/index.md
rename to files/ja/web/api/console/dirxml_static/index.md
index 3de221f6cb0072..ba28803a6414ed 100644
--- a/files/ja/web/api/console/dirxml/index.md
+++ b/files/ja/web/api/console/dirxml_static/index.md
@@ -1,8 +1,7 @@
 ---
 title: console.dirxml()
-slug: Web/API/console/dirxml
-l10n:
-  sourceCommit: 4fd581de2e31ac303a4628354c80f476ba9fd0e2
+slug: Web/API/console/dirxml_static
+original_slug: Web/API/console/dirxml
 ---
 
 {{APIRef("Console API")}}
diff --git a/files/ja/web/api/console/error/index.md b/files/ja/web/api/console/error_static/index.md
similarity index 94%
rename from files/ja/web/api/console/error/index.md
rename to files/ja/web/api/console/error_static/index.md
index 47461b5cb66bb2..8304557863d26e 100644
--- a/files/ja/web/api/console/error/index.md
+++ b/files/ja/web/api/console/error_static/index.md
@@ -1,8 +1,7 @@
 ---
 title: console.error()
-slug: Web/API/console/error
-l10n:
-  sourceCommit: d19d68bf6078c23d527b6e1355925795e745d124
+slug: Web/API/console/error_static
+original_slug: Web/API/console/error
 ---
 
 {{APIRef("Console API")}}
diff --git a/files/ja/web/api/console/group/index.md b/files/ja/web/api/console/group_static/index.md
similarity index 95%
rename from files/ja/web/api/console/group/index.md
rename to files/ja/web/api/console/group_static/index.md
index f4004842cce88d..2546bc3bfc6eeb 100644
--- a/files/ja/web/api/console/group/index.md
+++ b/files/ja/web/api/console/group_static/index.md
@@ -1,8 +1,7 @@
 ---
 title: console.group()
-slug: Web/API/console/group
-l10n:
-  sourceCommit: 4fd581de2e31ac303a4628354c80f476ba9fd0e2
+slug: Web/API/console/group_static
+original_slug: Web/API/console/group
 ---
 
 {{APIRef("Console API")}}
diff --git a/files/ja/web/api/console/groupcollapsed/index.md b/files/ja/web/api/console/groupcollapsed_static/index.md
similarity index 91%
rename from files/ja/web/api/console/groupcollapsed/index.md
rename to files/ja/web/api/console/groupcollapsed_static/index.md
index ee12de3a114416..e14630748cf5a4 100644
--- a/files/ja/web/api/console/groupcollapsed/index.md
+++ b/files/ja/web/api/console/groupcollapsed_static/index.md
@@ -1,8 +1,7 @@
 ---
 title: console.groupCollapsed()
-slug: Web/API/console/groupCollapsed
-l10n:
-  sourceCommit: 4fd581de2e31ac303a4628354c80f476ba9fd0e2
+slug: Web/API/console/groupcollapsed_static
+original_slug: Web/API/console/groupCollapsed
 ---
 
 {{APIRef("Console API")}}
diff --git a/files/ja/web/api/console/groupend/index.md b/files/ja/web/api/console/groupend_static/index.md
similarity index 88%
rename from files/ja/web/api/console/groupend/index.md
rename to files/ja/web/api/console/groupend_static/index.md
index 18a7c17f329c2b..6985af2858db28 100644
--- a/files/ja/web/api/console/groupend/index.md
+++ b/files/ja/web/api/console/groupend_static/index.md
@@ -1,8 +1,7 @@
 ---
 title: console.groupEnd()
-slug: Web/API/console/groupEnd
-l10n:
-  sourceCommit: 4fd581de2e31ac303a4628354c80f476ba9fd0e2
+slug: Web/API/console/groupend_static
+original_slug: Web/API/console/groupEnd
 ---
 
 {{APIRef("Console API")}}
diff --git a/files/ja/web/api/console/info/index.md b/files/ja/web/api/console/info_static/index.md
similarity index 94%
rename from files/ja/web/api/console/info/index.md
rename to files/ja/web/api/console/info_static/index.md
index d4923de2ef7f49..6dd6cbc4d34448 100644
--- a/files/ja/web/api/console/info/index.md
+++ b/files/ja/web/api/console/info_static/index.md
@@ -1,8 +1,7 @@
 ---
 title: console.info()
-slug: Web/API/console/info
-l10n:
-  sourceCommit: d19d68bf6078c23d527b6e1355925795e745d124
+slug: Web/API/console/info_static
+original_slug: Web/API/console/info
 ---
 
 {{APIRef("Console API")}}
diff --git a/files/ja/web/api/console/log/index.md b/files/ja/web/api/console/log_static/index.md
similarity index 97%
rename from files/ja/web/api/console/log/index.md
rename to files/ja/web/api/console/log_static/index.md
index 1086671d3e643b..9cd3e296604f5f 100644
--- a/files/ja/web/api/console/log/index.md
+++ b/files/ja/web/api/console/log_static/index.md
@@ -1,6 +1,7 @@
 ---
 title: console.log()
-slug: Web/API/console/log
+slug: Web/API/console/log_static
+original_slug: Web/API/console/log
 ---
 
 {{APIRef("Console API")}}
diff --git a/files/ja/web/api/console/profile/index.md b/files/ja/web/api/console/profile_static/index.md
similarity index 91%
rename from files/ja/web/api/console/profile/index.md
rename to files/ja/web/api/console/profile_static/index.md
index c3279602df1a41..2ca922070b3f52 100644
--- a/files/ja/web/api/console/profile/index.md
+++ b/files/ja/web/api/console/profile_static/index.md
@@ -1,8 +1,7 @@
 ---
 title: console.profile()
-slug: Web/API/console/profile
-l10n:
-  sourceCommit: 6c498a447fb5e776a67af7f9801a3aa407fc4d1c
+slug: Web/API/console/profile_static
+original_slug: Web/API/console/profile
 ---
 
 {{APIRef("Console API")}}{{Non-standard_header}}
diff --git a/files/ja/web/api/console/profileend/index.md b/files/ja/web/api/console/profileend_static/index.md
similarity index 94%
rename from files/ja/web/api/console/profileend/index.md
rename to files/ja/web/api/console/profileend_static/index.md
index 84a2e3469e86e2..a598fd0b3c16e4 100644
--- a/files/ja/web/api/console/profileend/index.md
+++ b/files/ja/web/api/console/profileend_static/index.md
@@ -1,8 +1,7 @@
 ---
 title: console.profileEnd()
-slug: Web/API/console/profileEnd
-l10n:
-  sourceCommit: 6c498a447fb5e776a67af7f9801a3aa407fc4d1c
+slug: Web/API/console/profileend_static
+original_slug: Web/API/console/profileEnd
 ---
 
 {{APIRef("Console API")}}{{Non-standard_header}}
diff --git a/files/ja/web/api/console/table/console-table-array-of-array.png b/files/ja/web/api/console/table_static/console-table-array-of-array.png
similarity index 100%
rename from files/ja/web/api/console/table/console-table-array-of-array.png
rename to files/ja/web/api/console/table_static/console-table-array-of-array.png
diff --git a/files/ja/web/api/console/table/console-table-array-of-objects-firstname-only.png b/files/ja/web/api/console/table_static/console-table-array-of-objects-firstname-only.png
similarity index 100%
rename from files/ja/web/api/console/table/console-table-array-of-objects-firstname-only.png
rename to files/ja/web/api/console/table_static/console-table-array-of-objects-firstname-only.png
diff --git a/files/ja/web/api/console/table/console-table-array-of-objects.png b/files/ja/web/api/console/table_static/console-table-array-of-objects.png
similarity index 100%
rename from files/ja/web/api/console/table/console-table-array-of-objects.png
rename to files/ja/web/api/console/table_static/console-table-array-of-objects.png
diff --git a/files/ja/web/api/console/table/console-table-array.png b/files/ja/web/api/console/table_static/console-table-array.png
similarity index 100%
rename from files/ja/web/api/console/table/console-table-array.png
rename to files/ja/web/api/console/table_static/console-table-array.png
diff --git a/files/ja/web/api/console/table/console-table-object-of-objects.png b/files/ja/web/api/console/table_static/console-table-object-of-objects.png
similarity index 100%
rename from files/ja/web/api/console/table/console-table-object-of-objects.png
rename to files/ja/web/api/console/table_static/console-table-object-of-objects.png
diff --git a/files/ja/web/api/console/table/console-table-simple-object.png b/files/ja/web/api/console/table_static/console-table-simple-object.png
similarity index 100%
rename from files/ja/web/api/console/table/console-table-simple-object.png
rename to files/ja/web/api/console/table_static/console-table-simple-object.png
diff --git a/files/ja/web/api/console/table/index.md b/files/ja/web/api/console/table_static/index.md
similarity index 97%
rename from files/ja/web/api/console/table/index.md
rename to files/ja/web/api/console/table_static/index.md
index a983b406b20a39..bbf5c864bd9594 100644
--- a/files/ja/web/api/console/table/index.md
+++ b/files/ja/web/api/console/table_static/index.md
@@ -1,8 +1,7 @@
 ---
 title: console.table()
-slug: Web/API/console/table
-l10n:
-  sourceCommit: 49b07e57dba92be3982e3c0035bc48e7a5036f97
+slug: Web/API/console/table_static
+original_slug: Web/API/console/table
 ---
 
 {{APIRef("Console API")}}
diff --git a/files/ja/web/api/console/time/index.md b/files/ja/web/api/console/time_static/index.md
similarity index 93%
rename from files/ja/web/api/console/time/index.md
rename to files/ja/web/api/console/time_static/index.md
index 84ef80ecde0c55..e78295d3a214e0 100644
--- a/files/ja/web/api/console/time/index.md
+++ b/files/ja/web/api/console/time_static/index.md
@@ -1,8 +1,7 @@
 ---
 title: console.time()
-slug: Web/API/console/time
-l10n:
-  sourceCommit: 6c498a447fb5e776a67af7f9801a3aa407fc4d1c
+slug: Web/API/console/time_static
+original_slug: Web/API/console/time
 ---
 
 {{APIRef("Console API")}}
diff --git a/files/ja/web/api/console/timeend/index.md b/files/ja/web/api/console/timeend_static/index.md
similarity index 94%
rename from files/ja/web/api/console/timeend/index.md
rename to files/ja/web/api/console/timeend_static/index.md
index 6dccdeeb8037b3..843f52fe9a787f 100644
--- a/files/ja/web/api/console/timeend/index.md
+++ b/files/ja/web/api/console/timeend_static/index.md
@@ -1,8 +1,7 @@
 ---
 title: console.timeEnd()
-slug: Web/API/console/timeEnd
-l10n:
-  sourceCommit: 71aac3e50b8bc5afea791d69d232dab98e1c5c0d
+slug: Web/API/console/timeend_static
+original_slug: Web/API/console/timeEnd
 ---
 
 {{APIRef("Console API")}}
diff --git a/files/ja/web/api/console/timelog/index.md b/files/ja/web/api/console/timelog_static/index.md
similarity index 95%
rename from files/ja/web/api/console/timelog/index.md
rename to files/ja/web/api/console/timelog_static/index.md
index af47a8ebdd681a..27ea03f7406c78 100644
--- a/files/ja/web/api/console/timelog/index.md
+++ b/files/ja/web/api/console/timelog_static/index.md
@@ -1,8 +1,7 @@
 ---
 title: console.timeLog()
-slug: Web/API/console/timeLog
-l10n:
-  sourceCommit: 71aac3e50b8bc5afea791d69d232dab98e1c5c0d
+slug: Web/API/console/timelog_static
+original_slug: Web/API/console/timeLog
 ---
 
 {{APIRef("Console API")}}
diff --git a/files/ja/web/api/console/timestamp/index.md b/files/ja/web/api/console/timestamp_static/index.md
similarity index 93%
rename from files/ja/web/api/console/timestamp/index.md
rename to files/ja/web/api/console/timestamp_static/index.md
index 6d2f5788a1ed08..ff0506d753e347 100644
--- a/files/ja/web/api/console/timestamp/index.md
+++ b/files/ja/web/api/console/timestamp_static/index.md
@@ -1,8 +1,7 @@
 ---
 title: console.timeStamp()
-slug: Web/API/console/timeStamp
-l10n:
-  sourceCommit: a6c0c23f7972d85c4bdba384f79c9c6a79f07c13
+slug: Web/API/console/timestamp_static
+original_slug: Web/API/console/timeStamp
 ---
 
 {{APIRef("Console API")}}{{Non-standard_header}}
diff --git a/files/ja/web/api/console/trace/index.md b/files/ja/web/api/console/trace_static/index.md
similarity index 92%
rename from files/ja/web/api/console/trace/index.md
rename to files/ja/web/api/console/trace_static/index.md
index 52e2312790722f..55c0b09cf209fc 100644
--- a/files/ja/web/api/console/trace/index.md
+++ b/files/ja/web/api/console/trace_static/index.md
@@ -1,8 +1,7 @@
 ---
 title: console.trace()
-slug: Web/API/console/trace
-l10n:
-  sourceCommit: 71aac3e50b8bc5afea791d69d232dab98e1c5c0d
+slug: Web/API/console/trace_static
+original_slug: Web/API/console/trace
 ---
 
 {{APIRef("Console API")}}
diff --git a/files/ja/web/api/console/warn/index.md b/files/ja/web/api/console/warn_static/index.md
similarity index 94%
rename from files/ja/web/api/console/warn/index.md
rename to files/ja/web/api/console/warn_static/index.md
index c94a118c4db556..c94baa426bb374 100644
--- a/files/ja/web/api/console/warn/index.md
+++ b/files/ja/web/api/console/warn_static/index.md
@@ -1,8 +1,7 @@
 ---
 title: console.warn()
-slug: Web/API/console/warn
-l10n:
-  sourceCommit: d19d68bf6078c23d527b6e1355925795e745d124
+slug: Web/API/console/warn_static
+original_slug: Web/API/console/warn
 ---
 
 {{APIRef("Console API")}}

From 65f4616380de9c42dfb449dd347e0d7933d39940 Mon Sep 17 00:00:00 2001
From: "y.takahashi" 
Date: Wed, 15 Nov 2023 18:38:10 +0900
Subject: [PATCH 077/141] fix typo
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

可能用に -> かのように
---
 .../ja/web/javascript/reference/global_objects/number/index.md  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/ja/web/javascript/reference/global_objects/number/index.md b/files/ja/web/javascript/reference/global_objects/number/index.md
index fa97a3fffc0a73..34b3e3fd0d9b05 100644
--- a/files/ja/web/javascript/reference/global_objects/number/index.md
+++ b/files/ja/web/javascript/reference/global_objects/number/index.md
@@ -64,7 +64,7 @@ JavaScript の数値 (`Number`) 型は [IEEE 754 の倍精度 64ビットバイ
 - [`undefined`](/ja/docs/Web/JavaScript/Reference/Global_Objects/undefined) は [`NaN`](/ja/docs/Web/JavaScript/Reference/Global_Objects/NaN) になります。
 - [`null`](/ja/docs/Web/JavaScript/Reference/Operators/null) は `0` になります。
 - `true` は `1` に、`false` は `0` になります。
-- 文字列は、[数値リテラル](/ja/docs/Web/JavaScript/Reference/Lexical_grammar#数値リテラル)が入っている可能用に解釈して変換されます。解釈に失敗した場合は `NaN` が返されます。実際の数値リテラルと比較すると、いくつかの異なる点があります。
+- 文字列は、[数値リテラル](/ja/docs/Web/JavaScript/Reference/Lexical_grammar#数値リテラル)が入っているかのように解釈して変換されます。解釈に失敗した場合は `NaN` が返されます。実際の数値リテラルと比較すると、いくつかの異なる点があります。
   - 先頭および末尾のホワイトスペース/改行文字は無視されます。
   - 先頭が数字 `0` である場合、数値が 8 進数のリテラルとなる（または厳格モードで拒否される）ことはありません。
   - 文字列の始めには、符号を示すために `+` と `-` を置くことができます。（実際のコードでは、これらはリテラルの一部に「見える」のですが、実際には別個の単項演算子です。）ただし、符号は一度しか現れず、空白が続いてはいけません。

From 6c69a0702d995dba944c0697850b4f923084cc16 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Sat, 11 Nov 2023 11:36:03 +0900
Subject: [PATCH 078/141] =?UTF-8?q?2023/09/15=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../global_objects/typedarray/fill/index.md    | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/fill/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/fill/index.md
index bca49f685b9941..733e2b7d1b2ee3 100644
--- a/files/ja/web/javascript/reference/global_objects/typedarray/fill/index.md
+++ b/files/ja/web/javascript/reference/global_objects/typedarray/fill/index.md
@@ -2,14 +2,14 @@
 title: TypedArray.prototype.fill()
 slug: Web/JavaScript/Reference/Global_Objects/TypedArray/fill
 l10n:
-  sourceCommit: 194d3e00cb93a6e5ea44812548f4131cb17f0381
+  sourceCommit: d9e66eca59d82c65166c65e7946332650da8f48f
 ---
 
 {{JSRef}}
 
-**`fill()`** メソッドは、型付き配列の開始位置から終了位置までのすべての要素を固定値で埋めます。このメソッドのアルゴリズムは {{jsxref("Array.prototype.fill()")}} と同じです。ここで _TypedArray_ は、[型付き配列型](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#typedarray_オブジェクト)のうちの 1 つです。
+**`fill()`** は {{jsxref("TypedArray")}} インスタンスのメソッドで、型付き配列のある範囲のインデックスにあるすべての要素を固定値で埋めます。これは変更された型付き配列を返します。このメソッドのアルゴリズムは {{jsxref("Array.prototype.fill()")}} と同じです。
 
-{{EmbedInteractiveExample("pages/js/typedarray-fill.html","shorter")}}
+{{EmbedInteractiveExample("pages/js/typedarray-fill.html", "shorter")}}
 
 ## 構文
 
@@ -24,9 +24,9 @@ fill(value, start, end)
 - `value`
   - : 型付き配列を埋める値です。
 - `start` {{optional_inline}}
-  - : 開始位置です。既定値は 0 です。
+  - : 埋まる範囲の開始点を表すゼロ基点のインデックスで、[整数に変換されます](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#整数への変換)。
 - `end` {{optional_inline}}
-  - : 終了位置（の次の位置）です既定値は `this.length` です。
+  - : 埋まる範囲の終了点を表すゼロ基点のインデックスで、[整数に変換されます](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#整数への変換)。 `fill()` は `end` の手前までを埋めます。
 
 ### 返値
 
@@ -34,11 +34,7 @@ fill(value, start, end)
 
 ## 解説
 
-埋める区間は \[`start`, `end`) です。
-
-**`fill()`** メソッドは `value`, `start`, `end` の 3 つまでの引数を取ります。 `start` と `end` の各引数は省略可能で、既定値はそれぞれ `0` と、 `this` オブジェクトの `length` です。
-
-`start` が負の数であった場合は、 `length+start` (`length` は配列の長さ) として扱われます。 `end` が負の数であった場合は、 `length+end` として扱われます。
+詳細については、 {{jsxref("Array.prototype.fill()")}} をご覧ください。このメソッドは汎用的ではなく、型付き配列インスタンスに対してのみ呼び出すことができます。
 
 ## 例
 
@@ -63,4 +59,6 @@ new Uint8Array([1, 2, 3]).fill(4, -3, -2); // Uint8Array [4, 2, 3]
 ## 関連情報
 
 - [`TypedArray.prototype.fill` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-typed-arrays)
+- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)ガイド
+- {{jsxref("TypedArray")}}
 - {{jsxref("Array.prototype.fill()")}}

From 5907253cf5f2ba319f869bae73e799cc1685b90f Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Sat, 11 Nov 2023 13:21:20 +0900
Subject: [PATCH 079/141] =?UTF-8?q?2023/09/15=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../global_objects/typedarray/filter/index.md | 61 ++++++-------------
 1 file changed, 17 insertions(+), 44 deletions(-)

diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/filter/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/filter/index.md
index 738e6ec4beea85..407d9a226a196b 100644
--- a/files/ja/web/javascript/reference/global_objects/typedarray/filter/index.md
+++ b/files/ja/web/javascript/reference/global_objects/typedarray/filter/index.md
@@ -2,65 +2,42 @@
 title: TypedArray.prototype.filter()
 slug: Web/JavaScript/Reference/Global_Objects/TypedArray/filter
 l10n:
-  sourceCommit: 194d3e00cb93a6e5ea44812548f4131cb17f0381
+  sourceCommit: d9e66eca59d82c65166c65e7946332650da8f48f
 ---
 
 {{JSRef}}
 
-**`filter()`** メソッドは、提供された関数によって実装されたテストに合格したすべての要素を含む新しい型付き配列を生成します。このメソッドのアルゴリズムは {{jsxref("Array.prototype.filter()")}} と同じです。ここで _TypedArray_ は、[型付き配列型](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#typedarray_オブジェクト)のうちの 1 つです。
+**`filter()`** は {{jsxref("TypedArray")}} インスタンスのメソッドで、指定された関数で実装されているテストに合格した要素だけにフィルタリングされた、指定された型付き配列の一部のコピーを作成します。このメソッドのアルゴリズムは {{jsxref("Array.prototype.filter()")}} と同じです。
 
 {{EmbedInteractiveExample("pages/js/typedarray-filter.html")}}
 
 ## 構文
 
 ```js-nolint
-// アロー関数
-filter((element) => { /* ... */ } )
-filter((element, index) => { /* ... */ } )
-filter((element, index, array) => { /* ... */ } )
-
-// コールバック関数
 filter(callbackFn)
 filter(callbackFn, thisArg)
-
-// インラインコールバック関数
-filter(function(element) { /* ... */ })
-filter(function(element, index) { /* ... */ })
-filter(function(element, index, array){ /* ... */ })
-filter(function(element, index, array) { /* ... */ }, thisArg)
 ```
 
 ### 引数
 
 - `callbackFn`
-
-  - : 型付き配列の各要素をテストする関数です。
-
-    `(element, index, array)` の引数で呼び出されます。
-    `true` を返すと要素を維持し、それでなければ `false` を返します。
-
+  - : 配列のそれぞれの要素に対して実行する関数です。要素がテストに合格した場合は[真値](/ja/docs/Glossary/Truthy)を返し、そうでなければ[偽値](/ja/docs/Glossary/Falsy)を返す必要があります。この関数は以下の引数で呼び出されます。
+    - `element`
+      - : 現在処理されている型付き配列の要素です。
+    - `index`
+      - : 現在処理されている型付き配列の要素の添字です。
+    - `array`
+      - : `filter()` が実行されている型付き配列です。
 - `thisArg` {{optional_inline}}
-  - : `callbackFn` を実行するときに `this` として使用する値です。
+  - : `callbackFn` を実行する際に `this` として使用する値。[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)を参照してください。
 
 ### 返値
 
-テストに合格した要素を持つ新しい型付き配列。
+テストに合格した要素だけを格納した、指定された型付き配列のコピー。テストに合格する要素がない場合は、空の型付き配列を返します。
 
 ## 解説
 
-`filter()` は、与えられた `callbackFn` 関数を型付き配列の各要素に対して一度ずつ呼び出し、`callbackFn` が[真値](/ja/docs/Glossary/Truthy)を返したすべての要素からなる新しい型付き配列を生成します。`callbackFn` は値が代入されている型付き配列の添字に対してのみ呼び出されます。つまり、すでに削除された添字や、まだ値が代入されていない添字に対しては呼び出されません。`callbackFn` によるテストに合格しなかった型付き配列の要素は単純にスキップされ、新しい型付き配列には含まれません。
-
-`callbackFn` は 3 つの引数で呼び出されます。
-
-1. 要素の値
-2. 要素の添字
-3. 走査中の型付き配列オブジェクト
-
-引数 `thisArg` が `filter()` に与えられた場合、そのオブジェクトは `callbackFn` が呼び出された際に `this` 値として使われます。そうでない場合、 `undefined` が `this` 値として使われます。`callbackFn` 関数内の最終的な `this` 値は[関数内の `this` を決定する一般的ルール](/ja/docs/Web/JavaScript/Reference/Operators/this)に従って決められます。
-
-`filter()` は呼び出された型付き配列を変化させません。
-
-`filter()` によって処理される要素の範囲は `callbackFn` が最初の呼び出し前に設定されます。 `filter()` の呼び出しが始まった後で型付き配列に追加された要素は `callbackFn` によって処理されません。型付き配列の存在している要素が変更されたり、削除された場合、 `callbackFn` に渡される値は、 `filter()` が処理する直前の値になります。
+詳細については、 {{jsxref("Array.prototype.filter()")}} をご覧ください。このメソッドは汎用的ではなく、型付き配列インスタンスに対してのみ呼び出すことができます。
 
 ## 例
 
@@ -76,15 +53,6 @@ new Uint8Array([12, 5, 8, 130, 44]).filter(isBigEnough);
 // Uint8Array [ 12, 130, 44 ]
 ```
 
-### アロー関数を使用して型付き配列の要素をフィルターする
-
-[アロー関数](/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions)によって、同じテストをより短い構文で実現できます。
-
-```js
-new Uint8Array([12, 5, 8, 130, 44]).filter((elem) => elem >= 10);
-// Uint8Array [ 12, 130, 44 ]
-```
-
 ## 仕様書
 
 {{Specifications}}
@@ -96,6 +64,11 @@ new Uint8Array([12, 5, 8, 130, 44]).filter((elem) => elem >= 10);
 ## 関連情報
 
 - [`TypedArray.prototype.filter` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-typed-arrays)
+- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)ガイド
+- {{jsxref("TypedArray")}}
+- {{jsxref("TypedArray.prototype.forEach()")}}
 - {{jsxref("TypedArray.prototype.every()")}}
+- {{jsxref("TypedArray.prototype.map()")}}
 - {{jsxref("TypedArray.prototype.some()")}}
+- {{jsxref("TypedArray.prototype.reduce()")}}
 - {{jsxref("Array.prototype.filter()")}}

From 4d7ea7503a5c629254ddb86d262f008a9de24db6 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Sat, 11 Nov 2023 13:32:45 +0900
Subject: [PATCH 080/141] =?UTF-8?q?2023/09/07=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../global_objects/typedarray/find/index.md   | 53 ++++++-------------
 1 file changed, 17 insertions(+), 36 deletions(-)

diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/find/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/find/index.md
index dc5e1c5ce5204a..46003d46b47fcc 100644
--- a/files/ja/web/javascript/reference/global_objects/typedarray/find/index.md
+++ b/files/ja/web/javascript/reference/global_objects/typedarray/find/index.md
@@ -2,53 +2,34 @@
 title: TypedArray.prototype.find()
 slug: Web/JavaScript/Reference/Global_Objects/TypedArray/find
 l10n:
-  sourceCommit: 194d3e00cb93a6e5ea44812548f4131cb17f0381
+  sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de
 ---
 
 {{JSRef}}
 
-**`find()`** メソッドは、型付き配列のある要素の値が与えられたテスト関数を満たした場合、その値を返します。そうでなければ {{jsxref("undefined")}} を返します。ここで _TypedArray_ は[型付き配列型](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#typedarray_オブジェクト)のうちの一つです。
-
-{{jsxref("TypedArray.findIndex", "findIndex()")}} メソッドも参照してください。こちらはそのメソッドは値のかわりに型付き配列で見つかった要素の**添字**を返します。
+**`find()`** は {{jsxref("TypedArray")}} インスタンスのメソッドで、型付き配列のある要素の値が与えられたテスト関数を満たした場合、その値を返します。そうでなければ {{jsxref("undefined")}} を返します。このメソッドのアルゴリズムは {{jsxref("Array.prototype.find()")}} と同じです。
 
 {{EmbedInteractiveExample("pages/js/typedarray-find.html")}}
 
 ## 構文
 
 ```js-nolint
-// アロー関数
-find((element) => { /* ... */ } )
-find((element, index) => { /* ... */ } )
-find((element, index, array) => { /* ... */ } )
-
-// コールバック関数
 find(callbackFn)
 find(callbackFn, thisArg)
-
-// インラインコールバック関数
-find(function(element) { /* ... */ })
-find(function(element, index) { /* ... */ })
-find(function(element, index, array){ /* ... */ })
-find(function(element, index, array) { /* ... */ }, thisArg)
 ```
 
 ### 引数
 
 - `callbackFn`
-
-  - : 型付き配列の要素に対するテストに使用する関数です。
-
-    この関数は以下の引数で呼び出されます。
-
+  - : 配列のそれぞれの要素に対して実行する関数です。要素がテストに合格した場合は[真値](/ja/docs/Glossary/Truthy)を返し、そうでなければ[偽値](/ja/docs/Glossary/Falsy)を返す必要があります。この関数は以下の引数で呼び出されます。
     - `element`
-      - : 型付き配列内で現在処理されている要素。
+      - : 現在処理されている型付き配列の要素です。
     - `index`
-      - : 型付き配列内で現在処理されている要素の位置。
+      - : 現在処理されている型付き配列の要素の添字です。
     - `array`
-      - : `find()` が呼び出された配列。
-
+      - : `find()` が実行されている型付き配列です。
 - `thisArg` {{optional_inline}}
-  - : `callbackFn` を実行するときに `this` として使用するオブジェクト。
+  - : `callbackFn` を実行する際に `this` として使用する値。[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)を参照してください。
 
 ### 返値
 
@@ -56,21 +37,13 @@ find(function(element, index, array) { /* ... */ }, thisArg)
 
 ## 解説
 
-`find()` メソッドは `callbackFn` 関数が true 値を返す要素を見つけるまで、型付き配列内に存在している各要素に対して一度ずつ `callbackFn` 関数を実行します。そのような要素が見つかったら、 `find()` はすぐに要素の値を返します。さもなければ、 `find()` は {{jsxref("undefined")}} を返します。 `callbackFn` は型付き配列の値を割り当てた位置に対してのみ呼び出されます。つまり、削除されたり、値が割り当てられて位置に対しては呼び出されません。
-
-`callbackFn` は、要素の値、要素の添字、走査中の型付き配列の 3 つの引数とともに呼び出されます。
-
-`thisArg` 引数が `find()` に与えられた場合、 `callbackFn` の各呼び出しで `this` として使用されます。与えられなかった場合は、 {{jsxref("undefined")}}が使用されます。
-
-`find()` は呼び出されている型付き配列を変更しません。
-
-`find()` によって処理される要素の範囲は、最初に `callbackFn` が呼び出される前に設定されます。 `find()` の呼び出しが始まったあとで型付き配列に追加された要素は、 `callbackFn` メソッドによって処理されません。存在していて、処理されていない型付き配列の要素が `callbackFn` によって変更された場合、処理している `callbackFn` 関数に渡される値は、 `find()` が要素の位置を処理する直前の値です。削除された要素は処理されません。
+詳細については、 {{jsxref("Array.prototype.find()")}} をご覧ください。このメソッドは汎用的ではなく、型付き配列インスタンスに対してのみ呼び出すことができます。
 
 ## 例
 
 ### 型付き配列内の素数を探す
 
-次の例では、型付き配列内で素数である要素を探します (または、素数がない場合は {{jsxref("undefined")}} を返します)。
+次の例では、型付き配列内で素数である要素を探します（または、素数がない場合は {{jsxref("undefined")}} を返します）。
 
 ```js
 function isPrime(element, index, array) {
@@ -98,5 +71,13 @@ console.log(uint8.find(isPrime)); // 5
 ## 関連情報
 
 - [`TypedArray.prototype.find` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-typed-arrays)
+- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)ガイド
+- {{jsxref("TypedArray")}}
 - {{jsxref("TypedArray.prototype.findIndex()")}}
+- {{jsxref("TypedArray.prototype.findLast()")}}
+- {{jsxref("TypedArray.prototype.findLastIndex()")}}
+- {{jsxref("TypedArray.prototype.includes()")}}
+- {{jsxref("TypedArray.prototype.filter()")}}
 - {{jsxref("TypedArray.prototype.every()")}}
+- {{jsxref("TypedArray.prototype.some()")}}
+- {{jsxref("Array.prototype.find()")}}

From 942256d9d0ab9ca49d23aefbd03b3fd20e2f065c Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Sat, 11 Nov 2023 15:28:41 +0900
Subject: [PATCH 081/141] =?UTF-8?q?2023/09/15=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../typedarray/findindex/index.md             | 49 ++++++-------------
 1 file changed, 15 insertions(+), 34 deletions(-)

diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/findindex/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/findindex/index.md
index bd4762447f6ef4..9d4401b1c33aa0 100644
--- a/files/ja/web/javascript/reference/global_objects/typedarray/findindex/index.md
+++ b/files/ja/web/javascript/reference/global_objects/typedarray/findindex/index.md
@@ -2,67 +2,42 @@
 title: TypedArray.prototype.findIndex()
 slug: Web/JavaScript/Reference/Global_Objects/TypedArray/findIndex
 l10n:
-  sourceCommit: 194d3e00cb93a6e5ea44812548f4131cb17f0381
+  sourceCommit: d9e66eca59d82c65166c65e7946332650da8f48f
 ---
 
 {{JSRef}}
 
-**`findIndex()`** メソッドは、型付き配列内の要素が与えられたテスト関数を満たす場合、型付き配列内の**添字**を返します。さもなければ、 -1 が返されます。
-
-{{jsxref("TypedArray.find", "find()")}} メソッドも参照してください。これは型付き配列内の見つかった要素の添字の代わりに**値**を返します。
+**`findIndex()`** は {{jsxref("TypedArray")}} インスタンスのメソッドで、指定されたテスト関数を満たす型付き配列の最初の要素のインデックスを返します。テスト関数を満たす要素がない場合、 -1 を返します。このメソッドのアルゴリズムは {{jsxref("Array.prototype.findIndex()")}} と同じです。
 
 {{EmbedInteractiveExample("pages/js/typedarray-findindex.html")}}
 
 ## 構文
 
 ```js-nolint
-// アロー関数
-findIndex((element) => { /* ... */ } )
-findIndex((element, index) => { /* ... */ } )
-findIndex((element, index, array) => { /* ... */ } )
-
-// コールバック関数
 findIndex(callbackFn)
 findIndex(callbackFn, thisArg)
-
-// インラインコールバック関数
-findIndex(function(element) { /* ... */ })
-findIndex(function(element, index) { /* ... */ })
-findIndex(function(element, index, array){ /* ... */ })
-findIndex(function(element, index, array) { /* ... */ }, thisArg)
 ```
 
 ### 引数
 
 - `callbackFn`
-
-  - : 型付き配列の各要素で実行する関数。3 つの引数を取ります。
-
+  - : 配列のそれぞれの要素に対して実行する関数です。要素がテストに合格した場合は[真値](/ja/docs/Glossary/Truthy)を返し、そうでなければ[偽値](/ja/docs/Glossary/Falsy)を返す必要があります。この関数は以下の引数で呼び出されます。
     - `element`
-      - : 型付き配列内で現在処理されている要素。
+      - : 現在処理されている型付き配列の要素です。
     - `index`
-      - : 型付き配列内で現在処理されている要素の位置。
+      - : 現在処理されている型付き配列の要素の添字です。
     - `array`
-      - : `findIndex()` を呼び出した元の配列。
-
+      - : `findIndex()` が実行されている型付き配列です。
 - `thisArg` {{optional_inline}}
-  - : `callbackFn` を実行するときに `this` として使用するオブジェクト。
+  - : `callbackFn` を実行する際に `this` として使用する値。[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)を参照してください。
 
 ### 返値
 
-テストを満たした配列の要素の位置を返します。それ以外の場合は、 `-1` を返します。
+テストを通った配列の要素の位置を返します。それ以外の場合は、 `-1` を返します。
 
 ## 解説
 
-`findIndex()` メソッドは、 `callbackFn` 関数が true 値を返す要素を見つけるまで、型付き配列内に存在している各要素に対して一度ずつ `callbackFn` 関数を実行します。そのような要素が見つかったら、 `findIndex()` はすぐに要素の添字を返します。さもなければ、 `findIndex()` メソッドは -1 を返します。 `callbackFn` は型付き配列の値を割り当てた位置に対してのみ呼び出されます。つまり、削除されたり、値が割り当てられていない位置に対しては呼び出されません。
-
-`callbackFn` は、要素の値、要素の添字、走査中の型付き配列の 3 つの引数とともに呼び出されます。
-
-`thisArg` 引数が `findIndex()` に与えられた場合、 `callbackFn` の各呼び出しで `this` として使用されます。`thisArg` 引数が与えられなかった場合は、 {{jsxref("undefined")}} が使用されます。
-
-`findIndex()` メソッドは呼び出される型付き配列を変更しません。
-
-`findIndex()` によって処理される要素の範囲は、最初に `callbackFn` が呼び出される前に設定されます。 `findIndex()` の呼び出しが始まったあとで型付き配列に追加された要素は、 `callbackFn` メソッドによって処理されません。存在していて、処理されていない型付き配列の要素が `callbackFn` によって変更された場合、処理している `callbackFn` 関数に渡される値は、 `findIndex()` が要素の位置を処理する直前の値です。削除された要素は処理されません。
+詳細については、 {{jsxref("Array.prototype.findIndex()")}} をご覧ください。このメソッドは汎用的ではなく、型付き配列インスタンスに対してのみ呼び出すことができます。
 
 ## 例
 
@@ -99,5 +74,11 @@ console.log(uint16.findIndex(isPrime)); // 2
 ## 関連情報
 
 - [`TypedArray.prototype.findIndex` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-typed-arrays)
+- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)ガイド
+- {{jsxref("TypedArray")}}
 - {{jsxref("TypedArray.prototype.find()")}}
+- {{jsxref("TypedArray.prototype.findLast()")}}
+- {{jsxref("TypedArray.prototype.findLastIndex()")}}
 - {{jsxref("TypedArray.prototype.indexOf()")}}
+- {{jsxref("TypedArray.prototype.lastIndexOf()")}}
+- {{jsxref("Array.prototype.findIndex()")}}

From fdc897e32386e65d9a577145d72d293e577f6afe Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Sat, 11 Nov 2023 15:52:58 +0900
Subject: [PATCH 082/141] =?UTF-8?q?2023/09/15=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../typedarray/findlast/index.md              | 73 ++++++-------------
 1 file changed, 21 insertions(+), 52 deletions(-)

diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/findlast/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/findlast/index.md
index 798c8746dda7d3..a807762e13277b 100644
--- a/files/ja/web/javascript/reference/global_objects/typedarray/findlast/index.md
+++ b/files/ja/web/javascript/reference/global_objects/typedarray/findlast/index.md
@@ -2,86 +2,48 @@
 title: TypedArray.prototype.findLast()
 slug: Web/JavaScript/Reference/Global_Objects/TypedArray/findLast
 l10n:
-  sourceCommit: 194d3e00cb93a6e5ea44812548f4131cb17f0381
+  sourceCommit: d9e66eca59d82c65166c65e7946332650da8f48f
 ---
 
 {{JSRef}}
 
-**`findLast()`** メソッドは、[型付き配列](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#typedarray_オブジェクト)を逆順で反復処理し、指定したテスト関数を満たす最初の要素の値を返します。
-テスト関数を満たす値がなかった場合は、{{jsxref("undefined")}} を返します。
-
-{{jsxref("TypedArray.findLastIndex()", "findLastIndex()")}} メソッドも参照してください。こちらは見つかった要素の値ではなく添字を返します。
+**`findLast()`** は {{jsxref("TypedArray")}} インスタンスのメソッドで、型付き配列を逆順に反復処理し、指定されたテスト関数を満たす最初の要素の値を返します。テスト関数を満たす要素がない場合は {{jsxref("undefined")}} を返します。このメソッドのアルゴリズムは {{jsxref("Array.prototype.findLast()")}} と同じです。
 
 {{EmbedInteractiveExample("pages/js/typedarray-findlast.html")}}
 
 ## 構文
 
 ```js-nolint
-// アロー関数
-findLast((element) => { /* ... */ } )
-findLast((element, index) => { /* ... */ } )
-findLast((element, index, array) => { /* ... */ } )
-
-// コールバック関数
 findLast(callbackFn)
 findLast(callbackFn, thisArg)
-
-// インラインコールバック関数
-findLast(function(element) { /* ... */ })
-findLast(function(element, index) { /* ... */ })
-findLast(function(element, index, array){ /* ... */ })
-findLast(function(element, index, array) { /* ... */ }, thisArg)
 ```
 
 ### 引数
 
 - `callbackFn`
-
-  - : 型付き配列の要素に対するテストに使用する関数です。
-
-    この関数は以下の引数で呼び出されます。
-
+  - : 配列のそれぞれの要素に対して実行する関数です。要素がテストに合格した場合は[真値](/ja/docs/Glossary/Truthy)を返し、そうでなければ[偽値](/ja/docs/Glossary/Falsy)を返す必要があります。この関数は以下の引数で呼び出されます。
     - `element`
-      - : 型付き配列内で処理されている現在の要素。
+      - : 現在処理されている型付き配列の要素です。
     - `index`
-      - : 型付き配列内で処理されている現在の要素の添字（位置）。
+      - : 現在処理されている型付き配列の要素の添字です。
     - `array`
-      - : `findLast()` が呼び出されている型付き配列。
-
-    コールバック関数は、適切な要素が見つかった際には[真値](/ja/docs/Glossary/Truthy)を返す必要があります。
-    この要素の値が `findLast()` から返されます。
-
+      - : `findLast()` が実行されている型付き配列です。
 - `thisArg` {{optional_inline}}
-  - : オプション。 `callbackFn` を実行するときに {{jsxref("Operators/this", "this")}} として使用する値。
+  - : `callbackFn` を実行する際に `this` として使用する値。[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)を参照してください。
 
 ### 返値
 
-指定されたテスト関数を満たす、最も大きな添字を持つ型付き配列の要素です。一致する値が見つからない場合は {{jsxref("undefined")}} です。
+指定されたテスト関数を満たす、最後の（最も大きなインデックスを持つ）型付き配列の要素です。一致する値が見つからない場合は {{jsxref("undefined")}} です。
 
 ## 解説
 
-`findLast()` メソッドは、`callbackFn` が[真値](/ja/docs/Glossary/Truthy)を返すまで、型付き配列の各要素に対して、添字の降順に 1 回ずつ `callbackFn` 関数を実行します。
-`findLast()` はその要素の添字を返し、配列のイテレーターを反復処理するのを止めます。
-もし `callbackFn` が真値を返さなかった場合、 `findLast()` は {{jsxref("undefined")}} を返します。
-
-`callbackFn` は、要素の値、要素の添字、走査されている型付き配列の 3 つの引数で呼び出されます。
-
-`thisArg` 引数が `findLast()` に指定された場合、それが `callbackFn` を呼び出すたびに `this` として使用されます。
-指定されなかった場合は、{{jsxref("undefined")}}が使用されます。
-
-`findLast()` メソッドは呼び出された型付き配列を変更しませんが、`callbackFn` に指定された関数からは変更することができます。
-
-`findLast()` が処理する要素の範囲は、`callbackFn` が最初に呼び出される前に設定されています。
-`findLast()` の呼び出しを始めた後に型付き配列に追加された要素は、`callbackFn` が処理する対象にはなりません。
-型付き配列に存在する未処理の要素が `callbackFn` によって変更された場合、処理する `callbackFn` に渡されるその値は、`findLast()` がその要素の要素を処理した時点の値になります。
-
-> **警告:** 上記のように変更を同時進行で行うと、理解しにくいコードになることが多いので、（特別な場合を除き）一般的には避けるべきです。
+詳細については、 {{jsxref("Array.prototype.findLast()")}} をご覧ください。このメソッドは汎用的ではなく、型付き配列インスタンスに対してのみ呼び出すことができます。
 
 ## 例
 
 ### 型付き配列から素数の添字を探す
 
-以下の例では、型付き配列から素数である値のうち、最後の値を探します（素数がない場合は{{jsxref("undefined")}}を返します）。
+以下の例では、型付き配列から素数である値のうち、最後の値を返します（素数がない場合は {{jsxref("undefined")}} を返します）。
 
 ```js
 function isPrime(element) {
@@ -97,7 +59,7 @@ function isPrime(element) {
 }
 
 let uint8 = new Uint8Array([4, 6, 8, 12]);
-console.log(uint8.findLast(isPrime)); // undefined (no primes in array)
+console.log(uint8.findLast(isPrime)); // undefined （配列に素数がない）
 uint8 = new Uint8Array([4, 5, 7, 8, 9, 11, 12]);
 console.log(uint8.findLast(isPrime)); // 11
 ```
@@ -134,7 +96,7 @@ uint8.findLast((value, index) => {
 // Visited index 2 with value 0
 // Visited index 1 with value 1
 // Visited index 0 with value 0
-// Deleting uint8[5] with value 5
+// Set uint8[3] to 44
 // Visited index 6 with value 6
 // Visited index 5 with value 5
 // Visited index 4 with value 0
@@ -154,7 +116,14 @@ uint8.findLast((value, index) => {
 
 ## 関連情報
 
-- [`TypedArray.prototype.findLast()` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-typed-arrays)
-- {{jsxref("TypedArray.prototype.findLastIndex()")}}
+- [`TypedArray.prototype.findLast` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#array-find-from-last)
+- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)ガイド
+- {{jsxref("TypedArray")}}
 - {{jsxref("TypedArray.prototype.find()")}}
+- {{jsxref("TypedArray.prototype.findIndex()")}}
+- {{jsxref("TypedArray.prototype.findLastIndex()")}}
+- {{jsxref("TypedArray.prototype.includes()")}}
+- {{jsxref("TypedArray.prototype.filter()")}}
 - {{jsxref("TypedArray.prototype.every()")}}
+- {{jsxref("TypedArray.prototype.some()")}}
+- {{jsxref("Array.prototype.findLast()")}}

From 1192ac57e6250ccfc67cffc77d503357996efc4d Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Sat, 11 Nov 2023 17:02:07 +0900
Subject: [PATCH 083/141] =?UTF-8?q?2023/09/15=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../typedarray/findlastindex/index.md         | 71 +++++--------------
 1 file changed, 19 insertions(+), 52 deletions(-)

diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/findlastindex/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/findlastindex/index.md
index 63c1c11a1c00ba..686f9e5d08b668 100644
--- a/files/ja/web/javascript/reference/global_objects/typedarray/findlastindex/index.md
+++ b/files/ja/web/javascript/reference/global_objects/typedarray/findlastindex/index.md
@@ -2,87 +2,49 @@
 title: TypedArray.prototype.findLastIndex()
 slug: Web/JavaScript/Reference/Global_Objects/TypedArray/findLastIndex
 l10n:
-  sourceCommit: 194d3e00cb93a6e5ea44812548f4131cb17f0381
+  sourceCommit: d9e66eca59d82c65166c65e7946332650da8f48f
 ---
 
 {{JSRef}}
 
-**`findLastIndex()`** メソッドは、[型付き配列](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#typedarray_オブジェクト)を逆順で反復処理し、指定したテスト関数を満たす最初の要素の添字を返します。
-テスト関数を満たす値がなかった場合は、-1 を返します。
-
-{{jsxref("TypedArray.findLast()", "findLast()")}} メソッドも参照してください。こちらは見つかった要素の添字ではなく値を返します。
+**`findLastIndex()`** は {{jsxref("TypedArray")}} インスタンスのメソッドで、型付き配列を逆順で反復処理し、指定したテスト関数を満たす最初の要素のインデックスを返します。テスト関数を満たす値がなかった場合は、-1 を返します。このメソッドのアルゴリズムは {{jsxref("Array.prototype.findLastIndex()")}} と同じです。
 
 {{EmbedInteractiveExample("pages/js/typedarray-findlastindex.html")}}
 
 ## 構文
 
 ```js-nolint
-// アロー関数
-findLastIndex((element) => { /* ... */ } )
-findLastIndex((element, index) => { /* ... */ } )
-findLastIndex((element, index, array) => { /* ... */ } )
-
-// コールバック関数
 findLastIndex(callbackFn)
 findLastIndex(callbackFn, thisArg)
-
-// インラインコールバック関数
-findLastIndex(function(element) { /* ... */ })
-findLastIndex(function(element, index) { /* ... */ })
-findLastIndex(function(element, index, array){ /* ... */ })
-findLastIndex(function(element, index, array) { /* ... */ }, thisArg)
 ```
 
 ### 引数
 
 - `callbackFn`
-
-  - : 型付き配列の要素に対するテストに使用する関数です。
-
-    この関数は以下の引数で呼び出されます。
-
+  - : 配列のそれぞれの要素に対して実行する関数です。要素がテストに合格した場合は[真値](/ja/docs/Glossary/Truthy)を返し、そうでなければ[偽値](/ja/docs/Glossary/Falsy)を返す必要があります。この関数は以下の引数で呼び出されます。
     - `element`
-      - : 型付き配列内で処理されている現在の要素。
+      - : 現在処理されている型付き配列の要素です。
     - `index`
-      - : 型付き配列内で処理されている現在の要素の添字（位置）。
+      - : 現在処理されている型付き配列の要素の添字です。
     - `array`
-      - : `findLastIndex()` が呼び出されている型付き配列。
-
-    コールバック関数は、適切な要素が見つかった際には[真値](/ja/docs/Glossary/Truthy)を返す必要があります。
-    この要素の添字が `findLastIndex()` から返されます。
-
+      - : `findLastIndex()` が実行されている型付き配列です。
 - `thisArg` {{optional_inline}}
-  - : オプション。 `callbackFn` を実行するときに {{jsxref("Operators/this", "this")}} として使用する値。
+  - : `callbackFn` を実行する際に `this` として使用する値。[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)を参照してください。
 
 ### 返値
 
-テストに合格した要素のうち、配列の最後（最も大きな添字）の要素の添字。
+テストに合格した要素のうち、配列の最後（最も大きなインデックス）の要素のインデックス。
 一致する要素が見つからなかった場合に -1 を返します。
 
 ## 解説
 
-`findLastIndex()` メソッドは、`callbackFn` が[真値](/ja/docs/Glossary/Truthy)を返すまで、型付き配列の各要素に対して、添字の降順に 1 回ずつ `callbackFn` 関数を実行します。
-`findLastIndex()` はその要素の添字を返し、配列のイテレーターを反復処理するのを止めます。
-もし `callbackFn` が真値を返さなかった場合、 `findLastIndex()` は {{jsxref("undefined")}} を返します。
-
-`callbackFn` は、要素の値、要素の添字、走査されている型付き配列の 3 つの引数で呼び出されます。
-
-`thisArg` 引数が `findLastIndex()` に指定された場合、それが `callbackFn` を呼び出すたびに `this` として使用されます。
-指定されなかった場合は、{{jsxref("undefined")}}が使用されます。
-
-`findLastIndex()` メソッドは呼び出された型付き配列を変更しませんが、`callbackFn` に指定された関数からは変更することができます。
-
-`findLastIndex()` が処理する要素の範囲は、`callbackFn` が最初に呼び出される前に設定されています。
-`findLastIndex()` の呼び出しを始めた後に型付き配列に追加された要素は、`callbackFn` が処理する対象にはなりません。
-型付き配列に存在する未処理の要素が `callbackFn` によって変更された場合、処理する `callbackFn` に渡されるその値は、`findLastIndex()` がその要素の要素を処理した時点の値になります。
-
-> **警告:** 上記のように変更を同時進行で行うと、理解しにくいコードになることが多いので、（特別な場合を除き）一般的には避けるべきです。
+詳細については、 {{jsxref("Array.prototype.findLastIndex()")}} をご覧ください。このメソッドは汎用的ではなく、型付き配列インスタンスに対してのみ呼び出すことができます。
 
 ## 例
 
 ### 型付き配列から素数の添字を探す
 
-以下の例では、配列の中で素数である最後の要素の添字を探します（素数がない場合は `-1` を返します）。
+以下の例では、配列の中で素数である最後の要素のインデックスを探します。素数がない場合は `-1` を返します。
 
 ```js
 function isPrime(element) {
@@ -99,10 +61,10 @@ function isPrime(element) {
 
 let uint8 = new Uint8Array([4, 6, 8, 12]);
 console.log(uint8.findLastIndex(isPrime));
-// -1 (no primes in array)
+// -1 （配列に素数がない）
 uint8 = new Uint8Array([4, 5, 7, 8, 9, 11, 12]);
 console.log(uint8.findLastIndex(isPrime));
-// 11
+// 5
 ```
 
 ## 仕様書
@@ -115,7 +77,12 @@ console.log(uint8.findLastIndex(isPrime));
 
 ## 関連情報
 
-- [`TypedArray.prototype.findLastIndex` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-typed-arrays)
-- {{jsxref("TypedArray.prototype.findLast()")}}
+- [`TypedArray.prototype.findLastIndex` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#array-find-from-last)
+- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)ガイド
+- {{jsxref("TypedArray")}}
+- {{jsxref("TypedArray.prototype.find()")}}
 - {{jsxref("TypedArray.prototype.findIndex()")}}
+- {{jsxref("TypedArray.prototype.findLast()")}}
 - {{jsxref("TypedArray.prototype.indexOf()")}}
+- {{jsxref("TypedArray.prototype.lastIndexOf()")}}
+- {{jsxref("Array.prototype.findLastIndex()")}}

From 9921b10861ed6713c82f7d757a8dc6e1902df16e Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Sat, 11 Nov 2023 17:11:51 +0900
Subject: [PATCH 084/141] =?UTF-8?q?2023/09/07=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../typedarray/foreach/index.md               | 53 ++++++-------------
 1 file changed, 15 insertions(+), 38 deletions(-)

diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/foreach/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/foreach/index.md
index 3f722853eec903..b67d81e2d1fc01 100644
--- a/files/ja/web/javascript/reference/global_objects/typedarray/foreach/index.md
+++ b/files/ja/web/javascript/reference/global_objects/typedarray/foreach/index.md
@@ -2,71 +2,42 @@
 title: TypedArray.prototype.forEach()
 slug: Web/JavaScript/Reference/Global_Objects/TypedArray/forEach
 l10n:
-  sourceCommit: 194d3e00cb93a6e5ea44812548f4131cb17f0381
+  sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de
 ---
 
 {{JSRef}}
 
-**`forEach()`** メソッドは、配列の要素ごとに一度与えられた関数を実行します。このメソッドは {{jsxref("Array.prototype.forEach()")}} と同じアルゴリズムを持っています。ここで _TypedArray_ は[型付き配列型](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#typedarray_オブジェクト)の一つです。
+**`forEach()`** は {{jsxref("TypedArray")}} インスタンスのメソッドで、型付き配列の要素ごとに一度与えられた関数を実行します。このメソッドのアルゴリズムは {{jsxref("Array.prototype.forEach()")}} と同じです。
 
 {{EmbedInteractiveExample("pages/js/typedarray-foreach.html")}}
 
 ## 構文
 
 ```js-nolint
-// アロー関数
-forEach((element) => { /* ... */ } )
-forEach((element, index) => { /* ... */ } )
-forEach((element, index, array) => { /* ... */ } )
-
-// コールバック関数
 forEach(callbackFn)
 forEach(callbackFn, thisArg)
-
-// インラインコールバック関数
-forEach(function(element) { /* ... */ })
-forEach(function(element, index) { /* ... */ })
-forEach(function(element, index, array){ /* ... */ })
-forEach(function(element, index, array) { /* ... */ }, thisArg)
 ```
 
 ### 引数
 
 - `callbackFn`
-
-  - : 新しい型付き配列の要素を生成する関数。
-
-    関数は以下の引数で呼び出されます。
-
+  - : 型付き配列のそれぞれの要素に対して実行する関数です。返値は破棄されます。この関数は以下の引数で呼び出されます。
     - `element`
-      - : 型付き配列内で処理される現在の要素。
+      - : 現在処理されている型付き配列の要素です。
     - `index`
-      - : 配列内で処理される現在の要素の添字。
+      - : 現在処理されている型付き配列の要素のインデックスです。
     - `array`
-      - : `forEach()` が呼び出される配列。
-
+      - : `forEach()` が呼び出されている型付き配列です。
 - `thisArg` {{optional_inline}}
-  - : `callbackFn` を実行するとき `this` として使用する値。
+  - : `callbackFn` を実行する際に `this` として使用する値。[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)を参照してください。
 
 ### 返値
 
-{{jsxref("undefined")}} です。
+なし ({{jsxref("undefined")}})。
 
 ## 解説
 
-`forEach()` メソッドは与えられた `callbackFn` を、型付き配列内に存在するそれぞれの要素に一度ずつ昇順に実行します。削除されたり、省略されたりしたインデックスに対しては呼び出されません。ただし、存在していて {{jsxref("undefined")}} の値を持つ要素に対しては実行されます。
-
-`callbackFn` は次の **3 つの引数**で呼び出されます。
-
-- **要素の値**
-- **要素の添字**
-- **走査中の型付き配列**
-
-`thisArg` 引数が `forEach()` に与えられた場合は、 `callbackFn` の呼び出し時にそのオブジェクトが `this` の値として使用されます。与えられなかった場合は、 {{jsxref("undefined")}} が `this` の値として使用するために渡されます。 `callbackFn` によって最終的に観測可能な `this` 値は[関数から見える `this` を特定する一般規則](/ja/docs/Web/JavaScript/Reference/Operators/this)に従います。
-
-`forEach()` によって処理される要素の範囲は `callbackFn` の最初の呼び出し前に設定されます。 `forEach()` の呼び出しが始まったあとで型付き配列に追加される要素は、 `callbackFn` によって処理されます。型付き配列内に存在している要素の値が変更されたら、 `callbackFn` に渡される値は、`forEach()`メソッドが処理する直前の値です。つまり、処理される前に削除されている要素は処理されません。
-
-`forEach()` は型付き配列の各要素ごとに一度 `callbackFn` 関数を実行します。 {{jsxref("TypedArray.prototype.every()", "every()")}} や {{jsxref("TypedArray.prototype.some()", "some()")}} とは異なり、常に、{{jsxref("undefined")}} 値を返します。
+詳細については、 {{jsxref("Array.prototype.forEach()")}} をご覧ください。このメソッドは汎用的ではなく、型付き配列インスタンスに対してのみ呼び出すことができます。
 
 ## 例
 
@@ -98,7 +69,13 @@ new Uint8Array([0, 1, 2, 3]).forEach(logArrayElements);
 ## 関連情報
 
 - [`TypedArray.prototype.forEach` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-typed-arrays)
+- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)ガイド
+- {{jsxref("TypedArray")}}
+- {{jsxref("TypedArray.prototype.find()")}}
 - {{jsxref("TypedArray.prototype.map()")}}
+- {{jsxref("TypedArray.prototype.filter()")}}
 - {{jsxref("TypedArray.prototype.every()")}}
 - {{jsxref("TypedArray.prototype.some()")}}
 - {{jsxref("Array.prototype.forEach()")}}
+- {{jsxref("Map.prototype.forEach()")}}
+- {{jsxref("Set.prototype.forEach()")}}

From 7dec1460b0edfbc8a2cf15be80d742c4d02f9d20 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Sat, 11 Nov 2023 17:24:43 +0900
Subject: [PATCH 085/141] =?UTF-8?q?2023/09/12=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../global_objects/typedarray/from/index.md   | 77 +++++++++++--------
 1 file changed, 43 insertions(+), 34 deletions(-)

diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/from/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/from/index.md
index 2cee02ea561a7c..15629e9d329357 100644
--- a/files/ja/web/javascript/reference/global_objects/typedarray/from/index.md
+++ b/files/ja/web/javascript/reference/global_objects/typedarray/from/index.md
@@ -2,31 +2,20 @@
 title: TypedArray.from()
 slug: Web/JavaScript/Reference/Global_Objects/TypedArray/from
 l10n:
-  sourceCommit: 194d3e00cb93a6e5ea44812548f4131cb17f0381
+  sourceCommit: c2445ce1dc3a0170e2fbfdbee10e18a7455c2282
 ---
 
 {{JSRef}}
 
 **`TypedArray.from()`** メソッドは、配列風オブジェクトや反復可能オブジェクトから新しい[型付き配列](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#typedarray_オブジェクト)を生成します。このメソッドは {{jsxref("Array.from()")}} とほぼ同じです。
 
-{{EmbedInteractiveExample("pages/js/typedarray-from.html","shorter")}}
+{{EmbedInteractiveExample("pages/js/typedarray-from.html", "shorter")}}
 
 ## 構文
 
 ```js-nolint
-// アロー関数
-TypedArray.from(arrayLike, (element) => { /* ... */ } )
-TypedArray.from(arrayLike, (element, index) => { /* ... */ } )
-
-// マッピング関数
 TypedArray.from(arrayLike, mapFn)
 TypedArray.from(arrayLike, mapFn, thisArg)
-
-// インラインマッピング関数
-TypedArray.from(arrayLike, function mapFn(element) { /* ... */ })
-TypedArray.from(arrayLike, function mapFn(element, index) { /* ... */ })
-TypedArray.from(arrayLike, function mapFn(element) { /* ... */ }, thisArg)
-TypedArray.from(arrayLike, function mapFn(element, index) { /* ... */ }, thisArg)
 ```
 
 ここで `TypedArray` は次のいずれかです。
@@ -46,37 +35,30 @@ TypedArray.from(arrayLike, function mapFn(element, index) { /* ... */ }, thisArg
 ### 引数
 
 - `arrayLike`
-  - : 型付き配列に変換する配列風オブジェクトまたは反復可能オブジェクトです。
+  - : 型付き配列に変換する反復可能または配列風オブジェクトです。
 - `mapFn` {{optional_inline}}
-  - : 型付き配列のすべての要素に適用されるマッピング関数。
+  - : 型付き配列の各要素に対して呼び出す関数です。指定された場合、配列に追加するすべての値は最初にこの関数に渡され、代わりに `mapFn` の返値が型付き配列に追加されます。この関数は以下の引数で呼び出されます。
+    - `element`
+      - : 現在処理されている型付き配列の要素です。
+    - `index`
+      - : 現在処理されている型付き配列の要素のインデックスです。
 - `thisArg` {{optional_inline}}
-  - : `mapFn` を実行するときに `this` として使う値。
+  - : `mapFn` を実行するときに `this` として使う値です。
 
 ### 返値
 
-新しい {{jsxref("TypedArray")}} インスタンス。
+新しい {{jsxref("TypedArray")}} インスタンスです。
 
 ## 解説
 
-`TypedArray.from()` によって下記から型付き配列を生成できます:
-
-- 配列風オブジェクト (`length` プロパティと、番号の振られた要素をもつオブジェクト)
-- [反復可能オブジェクト](/ja/docs/Web/JavaScript/Reference/Iteration_protocols) ({{jsxref("Map")}} や {{jsxref("Set")}} のように要素が取得できるオブジェクト)
-
-`TypedArray.from()` は省略可能な引数 `mapFn` を持ち、これは生成中の型付き配列 (またはサブクラスのオブジェクト) のそれぞれの要素に対して {{jsxref("Array.prototype.map", "map()")}} 関数を実行することができます。すなわち、以下のものと同等です。
+詳しくは {{jsxref("Array.from()")}} を娯楽んだ歳。
 
-- `TypedArray.from(obj, mapFn, thisArg)`
-- `TypedArray.from(Array.prototype.map.call(obj, mapFn, thisArg))`.
+{{jsxref("Array.from()")}} と `TypedArray.from()` の間には微妙な違いがあります（メモ: 下記で言及する `this` 値は `TypedArray.from()` が呼び出された `this` 値であり、 `mapFn` を呼び出すために用いた `thisArg` 引数ではありません）。
 
-`from()` メソッドの `length` プロパティは `1` です。
-
-### Array.from() との違い
-
-{{jsxref("Array.from()")}} と `TypedArray.from()` の間には、いくつかの微妙な違いがあります。
-
-- `TypedArray.from()` に渡された `thisArg` の値がコンストラクターではなかった場合、 `TypedArray.from()` で {{jsxref("TypeError")}} が発生します。これは `Array.from()` が既定で新しい {{jsxref("Array")}} を生成するためです。
+- `TypedArray.from()` に渡された `this` の値がコンストラクターではなかった場合、 `TypedArray.from()` で {{jsxref("TypeError")}} が発生します。それに対して `Array.from()` が既定で新しい {{jsxref("Array")}} を生成します。
+- `this` で構築されるオブジェクトは `TypedArray` インスタンスでなければなりませんが、 `Array.from()` は `this` の値を任意のオブジェクトに構築することができます。
+- 引数 `source` がイテレーターの場合、 `TypedArray.from()` は最初にイテレーターからすべての値を収集し、次にそのカウントを使用して `this` のインスタンスを作成し、最後にそのインスタンスに値を設定します。 `Array.from()` はイテレーターから値を受け取るとそれぞれの値を設定し、最後に `length` を設定します。
 - `TypedArray.from()` は `[[Set]]` を使用します。 `Array.from()` は `[[DefineOwnProperty]]` を使用します。 従って {{jsxref("Proxy")}} オブジェクトを使っている場合は、新しい要素を追加するときに [`handler.set()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/set) が [`handler.defineProperty()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/defineProperty) の代わりに呼び出されます。
-- `arrayLike` 引数がイテレーターであった場合、 `TypedArray.from()` は最初にイテレーターからすべての値を集め、その数の大きさを持つ `thisArg` のインスタンスを生成し、そのインスタンスに値を設定します。 `Array.from()` はイテレーターから取得して各値を設定し、最後に `length` を設定します。
 - `Array.from()` がイテレーターではない配列風オブジェクトを受け取ったときは、穴をそのまま残します。 `TypedArray.from()` は必ず密配列 (dense array) を生成します。
 
 ## 例
@@ -112,6 +94,31 @@ Uint8Array.from({ length: 5 }, (v, k) => k);
 // Uint8Array [ 0, 1, 2, 3, 4 ]
 ```
 
+### TypedArray 以外のコンストラクターに対する from() の呼び出し
+
+`from()` の `this` 値は `TypedArray` インスタンスを返すコンストラクターでなければなりません。
+
+```js
+function NotArray(len) {
+  console.log("NotArray called with length", len);
+}
+
+Int8Array.from.call({}, []); // TypeError: # is not a constructor
+Int8Array.from.call(NotArray, []);
+// NotArray called with length 0
+// TypeError: Method %TypedArray%.from called on incompatible receiver #
+```
+
+```js
+function NotArray2(len) {
+  console.log("NotArray2 called with length", len);
+  return new Uint8Array(len);
+}
+console.log(Int8Array.from.call(NotArray2, [1, 2, 3]));
+// NotArray2 called with length 3
+// Uint8Array(3) [ 1, 2, 3 ]
+```
+
 ## 仕様書
 
 {{Specifications}}
@@ -123,6 +130,8 @@ Uint8Array.from({ length: 5 }, (v, k) => k);
 ## 関連情報
 
 - [`TypedArray.from` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-typed-arrays)
+- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)ガイド
+- {{jsxref("TypedArray")}}
 - {{jsxref("TypedArray.of()")}}
+- {{jsxref("TypedArray.prototype.map()")}}
 - {{jsxref("Array.from()")}}
-- {{jsxref("Array.prototype.map()")}}

From 574b0c2e5344557d5837e4c9f40d8d821631a09d Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Sat, 11 Nov 2023 17:29:37 +0900
Subject: [PATCH 086/141] =?UTF-8?q?=E3=80=8C=E3=82=A4=E3=83=B3=E3=83=87?=
 =?UTF-8?q?=E3=83=83=E3=82=AF=E3=82=B9=E3=80=8D=E3=81=AE=E7=94=A8=E8=AA=9E?=
 =?UTF-8?q?=E3=82=92=E7=B5=B1=E4=B8=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../reference/global_objects/typedarray/filter/index.md     | 2 +-
 .../reference/global_objects/typedarray/find/index.md       | 2 +-
 .../reference/global_objects/typedarray/findindex/index.md  | 2 +-
 .../reference/global_objects/typedarray/findlast/index.md   | 6 +++---
 .../global_objects/typedarray/findlastindex/index.md        | 4 ++--
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/filter/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/filter/index.md
index 407d9a226a196b..3d11e9b955a41d 100644
--- a/files/ja/web/javascript/reference/global_objects/typedarray/filter/index.md
+++ b/files/ja/web/javascript/reference/global_objects/typedarray/filter/index.md
@@ -25,7 +25,7 @@ filter(callbackFn, thisArg)
     - `element`
       - : 現在処理されている型付き配列の要素です。
     - `index`
-      - : 現在処理されている型付き配列の要素の添字です。
+      - : 現在処理されている型付き配列の要素のインデックスです。
     - `array`
       - : `filter()` が実行されている型付き配列です。
 - `thisArg` {{optional_inline}}
diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/find/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/find/index.md
index 46003d46b47fcc..8fc41333b93b37 100644
--- a/files/ja/web/javascript/reference/global_objects/typedarray/find/index.md
+++ b/files/ja/web/javascript/reference/global_objects/typedarray/find/index.md
@@ -25,7 +25,7 @@ find(callbackFn, thisArg)
     - `element`
       - : 現在処理されている型付き配列の要素です。
     - `index`
-      - : 現在処理されている型付き配列の要素の添字です。
+      - : 現在処理されている型付き配列の要素のインデックスです。
     - `array`
       - : `find()` が実行されている型付き配列です。
 - `thisArg` {{optional_inline}}
diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/findindex/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/findindex/index.md
index 9d4401b1c33aa0..b7706d0dd65c75 100644
--- a/files/ja/web/javascript/reference/global_objects/typedarray/findindex/index.md
+++ b/files/ja/web/javascript/reference/global_objects/typedarray/findindex/index.md
@@ -25,7 +25,7 @@ findIndex(callbackFn, thisArg)
     - `element`
       - : 現在処理されている型付き配列の要素です。
     - `index`
-      - : 現在処理されている型付き配列の要素の添字です。
+      - : 現在処理されている型付き配列の要素のインデックスです。
     - `array`
       - : `findIndex()` が実行されている型付き配列です。
 - `thisArg` {{optional_inline}}
diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/findlast/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/findlast/index.md
index a807762e13277b..f3744b4a9b9023 100644
--- a/files/ja/web/javascript/reference/global_objects/typedarray/findlast/index.md
+++ b/files/ja/web/javascript/reference/global_objects/typedarray/findlast/index.md
@@ -25,7 +25,7 @@ findLast(callbackFn, thisArg)
     - `element`
       - : 現在処理されている型付き配列の要素です。
     - `index`
-      - : 現在処理されている型付き配列の要素の添字です。
+      - : 現在処理されている型付き配列の要素のインデックスです。
     - `array`
       - : `findLast()` が実行されている型付き配列です。
 - `thisArg` {{optional_inline}}
@@ -41,7 +41,7 @@ findLast(callbackFn, thisArg)
 
 ## 例
 
-### 型付き配列から素数の添字を探す
+### 型付き配列から素数のインデックスを探す
 
 以下の例では、型付き配列から素数である値のうち、最後の値を返します（素数がない場合は {{jsxref("undefined")}} を返します）。
 
@@ -69,7 +69,7 @@ console.log(uint8.findLast(isPrime)); // 11
 以下は、すべての要素が処理され、コールバック値に渡された値が処理時の値であることを示す例です。
 
 ```js
-// 添字 2, 3, 4 に要素のない配列を宣言。
+// インデックス 2, 3, 4 に要素のない配列を宣言。
 // 欠落した要素はゼロに初期化されます。
 const uint8 = new Uint8Array([0, 1, , , , 5, 6]);
 
diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/findlastindex/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/findlastindex/index.md
index 686f9e5d08b668..6956689e24d9f2 100644
--- a/files/ja/web/javascript/reference/global_objects/typedarray/findlastindex/index.md
+++ b/files/ja/web/javascript/reference/global_objects/typedarray/findlastindex/index.md
@@ -25,7 +25,7 @@ findLastIndex(callbackFn, thisArg)
     - `element`
       - : 現在処理されている型付き配列の要素です。
     - `index`
-      - : 現在処理されている型付き配列の要素の添字です。
+      - : 現在処理されている型付き配列の要素のインデックスです。
     - `array`
       - : `findLastIndex()` が実行されている型付き配列です。
 - `thisArg` {{optional_inline}}
@@ -42,7 +42,7 @@ findLastIndex(callbackFn, thisArg)
 
 ## 例
 
-### 型付き配列から素数の添字を探す
+### 型付き配列から素数のインデックスを探す
 
 以下の例では、配列の中で素数である最後の要素のインデックスを探します。素数がない場合は `-1` を返します。
 

From c81c755e5178cf6a5011ea0a0ef2f03c53d4a70c Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Sat, 11 Nov 2023 21:52:10 +0900
Subject: [PATCH 087/141] =?UTF-8?q?2023/09/15=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../typedarray/includes/index.md               | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/includes/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/includes/index.md
index 31860907fc4a4f..61872ee18ec68f 100644
--- a/files/ja/web/javascript/reference/global_objects/typedarray/includes/index.md
+++ b/files/ja/web/javascript/reference/global_objects/typedarray/includes/index.md
@@ -2,12 +2,12 @@
 title: TypedArray.prototype.includes()
 slug: Web/JavaScript/Reference/Global_Objects/TypedArray/includes
 l10n:
-  sourceCommit: 194d3e00cb93a6e5ea44812548f4131cb17f0381
+  sourceCommit: d9e66eca59d82c65166c65e7946332650da8f48f
 ---
 
 {{JSRef}}
 
-**`includes()`** メソッドは、型付き配列が特定の要素を含んでいるかどうかを判断し、その結果に応じて `true` か `false` を返します。このメソッドは {{jsxref("Array.prototype.includes()")}} と同じアルゴリズムです。 _TypedArray_ は、ここでは [型付き配列型](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#typedarray_オブジェクト)のうちの一つです。
+**`includes()`** は {{jsxref("TypedArray")}} インスタンスのメソッドで、型付き配列の項目内に特定の値が含まれているかどうかを判断し、その結果に応じて `true` か `false` を返します。このメソッドは {{jsxref("Array.prototype.includes()")}} と同じアルゴリズムです。
 
 {{EmbedInteractiveExample("pages/js/typedarray-includes.html")}}
 
@@ -23,11 +23,15 @@ includes(searchElement, fromIndex)
 - `searchElement`
   - : 探す対象の要素
 - `fromIndex` {{optional_inline}}
-  - : オプション。`searchElement`を探し始める配列内の位置。既定では 0 です。
+  - : 検索を始める位置を示すゼロ基点のインデックスで、[整数に変換されます](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#整数への変換)。
 
 ### 返値
 
-論理値です。
+論理値で、型付き配列（指定する場合はインデックス `fromIndex` で示される型付き配列の一部）内で値 `searchElement` が見つかった場合に `true` なります。
+
+## 解説
+
+詳細については、 {{jsxref("Array.prototype.includes()")}} をご覧ください。このメソッドは汎用的ではなく、型付き配列インスタンスに対してのみ呼び出すことができます。
 
 ## 例
 
@@ -56,6 +60,10 @@ new Float64Array([NaN]).includes(NaN); // true;
 ## 関連情報
 
 - [`TypedArray.prototype.includes` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-typed-arrays)
+- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)ガイド
+- {{jsxref("TypedArray")}}
+- {{jsxref("TypedArray.prototype.indexOf()")}}
+- {{jsxref("TypedArray.prototype.find()")}}
+- {{jsxref("TypedArray.prototype.findIndex()")}}
 - {{jsxref("Array.prototype.includes()")}}
 - {{jsxref("String.prototype.includes()")}}
-- {{jsxref("TypedArray.prototype.indexOf()")}}

From f4732d0f772314f440f15a9b4ec3a0937d73844a Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Sat, 11 Nov 2023 21:58:12 +0900
Subject: [PATCH 088/141] =?UTF-8?q?2023/09/15=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../global_objects/typedarray/indexof/index.md  | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/indexof/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/indexof/index.md
index 55fad6bdebd700..147a6711481fc9 100644
--- a/files/ja/web/javascript/reference/global_objects/typedarray/indexof/index.md
+++ b/files/ja/web/javascript/reference/global_objects/typedarray/indexof/index.md
@@ -2,12 +2,12 @@
 title: TypedArray.prototype.indexOf()
 slug: Web/JavaScript/Reference/Global_Objects/TypedArray/indexOf
 l10n:
-  sourceCommit: 194d3e00cb93a6e5ea44812548f4131cb17f0381
+  sourceCommit: d9e66eca59d82c65166c65e7946332650da8f48f
 ---
 
 {{JSRef}}
 
-**`indexOf()`** メソッドは、指定された要素が型付き配列内で見つかった最初の添字を返し、存在しなければ -1 を返します。このメソッドは {{jsxref("Array.prototype.indexOf()")}} と同じアルゴリズムです。 _TypedArray_ は、ここでは[型付き配列型](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#typedarray_オブジェクト)のうちの一つです。
+**`indexOf()`** は {{jsxref("TypedArray")}} インスタンスのメソッドで、指定された要素が型付き配列内で見つかった最初のインデックスを返し、存在しなければ -1 を返します。このメソッドは {{jsxref("Array.prototype.indexOf()")}} と同じアルゴリズムです。
 
 {{EmbedInteractiveExample("pages/js/typedarray-indexof.html")}}
 
@@ -23,19 +23,19 @@ indexOf(searchElement, fromIndex)
 - `searchElement`
   - : 型付き配列内を検索する要素。
 - `fromIndex` {{optional_inline}}
-  - : 検索開始位置の添字。添字が型付き配列の長さ以上なら、 -1 が返り、これは型付き配列が検索されなかったことを意味します。与えられた添字が負の数の場合、型付き配列の最後からのオフセット値として扱われます。注意: 指定された添字が負の数であっても、型付き配列は前から後ろに向けて検索されます。計算された添字が 0 未満になった場合は、型付き配列の全体が検索されます。既定値: 0 （型付き配列全体が検索されます）。
+  - : 検索を始める位置を示すゼロ基点のインデックスで、[整数に変換されます](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#整数への変換)。
 
 ### 返値
 
-配列内の要素の最初の添字です。見つからなかったら `-1` になります。
+型付き配列内の最初の `searchElement` のインデックスです。見つからなかったら `-1` になります。
 
 ## 解説
 
-`indexOf` は `searchElement` と型付き配列の要素を、[厳密等価](/ja/docs/Web/JavaScript/Equality_comparisons_and_sameness#_による厳密な等価性) (===、イコール 3 つの演算子と同じ方法) を使用して比較します。
+詳細については、 {{jsxref("Array.prototype.indexOf()")}} をご覧ください。このメソッドは汎用的ではなく、型付き配列インスタンスに対してのみ呼び出すことができます。
 
 ## 例
 
-### indexOf の使用
+### indexOf() の使用
 
 ```js
 const uint8 = new Uint8Array([2, 5, 9]);
@@ -57,5 +57,10 @@ uint8.indexOf(2, -3); // 0
 ## 関連情報
 
 - [`TypedArray.prototype.indexOf` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-typed-arrays)
+- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)ガイド
+- {{jsxref("TypedArray")}}
+- {{jsxref("TypedArray.prototype.findIndex()")}}
+- {{jsxref("TypedArray.prototype.findLastIndex()")}}
 - {{jsxref("TypedArray.prototype.lastIndexOf()")}}
 - {{jsxref("Array.prototype.indexOf()")}}
+- {{jsxref("String.prototype.indexOf()")}}

From 8daf1da02dcc3a96dd7e81081ec4639ab5c2511c Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Sun, 12 Nov 2023 00:26:38 +0900
Subject: [PATCH 089/141] =?UTF-8?q?2023/09/15=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../global_objects/typedarray/join/index.md         | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/join/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/join/index.md
index 6ba5aa519fbdae..4a6872b7c958f1 100644
--- a/files/ja/web/javascript/reference/global_objects/typedarray/join/index.md
+++ b/files/ja/web/javascript/reference/global_objects/typedarray/join/index.md
@@ -2,12 +2,12 @@
 title: TypedArray.prototype.join()
 slug: Web/JavaScript/Reference/Global_Objects/TypedArray/join
 l10n:
-  sourceCommit: 194d3e00cb93a6e5ea44812548f4131cb17f0381
+  sourceCommit: d9e66eca59d82c65166c65e7946332650da8f48f
 ---
 
 {{JSRef}}
 
-**`join()`** メソッドは、配列のすべての要素を 1 本の文字列に結合します。このメソッドのアルゴリズムは {{jsxref("Array.prototype.join()")}} と同じです。ここで _TypedArray_ は、[型付き配列型](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#typedarray_オブジェクト)のうちの 1 つです。
+**`join()`** は {{jsxref("TypedArray")}} インスタンスのメソッドで、この型付き配列のすべての要素を、カンマまたは指定する区切り文字で連結して新しい文字列を作成して返します。型付き配列に 1 つの項目しかない場合、その項目は区切り文字を使用せずに返します。このメソッドのアルゴリズムは {{jsxref("Array.prototype.join()")}} と同じです。
 
 {{EmbedInteractiveExample("pages/js/typedarray-join.html")}}
 
@@ -25,7 +25,11 @@ join(separator)
 
 ### 返値
 
-配列のすべての要素が結合された文字列です。
+型付き配列の要素をすべて連結した文字列です。 `array.length` が `0` の場合は空文字列を返します。
+
+## 解説
+
+詳細については、 {{jsxref("Array.prototype.join()")}} をご覧ください。このメソッドは汎用的ではなく、型付き配列インスタンスに対してのみ呼び出すことができます。
 
 ## 例
 
@@ -49,5 +53,8 @@ uint8.join(""); // '123'
 ## 関連情報
 
 - [`TypedArray.prototype.join` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-typed-arrays)
+- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)ガイド
 - {{jsxref("TypedArray")}}
+- {{jsxref("TypedArray.prototype.toString()")}}
 - {{jsxref("Array.prototype.join()")}}
+- {{jsxref("String.prototype.split()")}}

From a292d6a6ca50c5c844a558fc1b704dffd3c490f7 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Sun, 12 Nov 2023 00:44:12 +0900
Subject: [PATCH 090/141] =?UTF-8?q?2023/09/07=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../global_objects/typedarray/keys/index.md   | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/keys/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/keys/index.md
index 08967301d497ac..72b581fff0e7c4 100644
--- a/files/ja/web/javascript/reference/global_objects/typedarray/keys/index.md
+++ b/files/ja/web/javascript/reference/global_objects/typedarray/keys/index.md
@@ -2,12 +2,12 @@
 title: TypedArray.prototype.keys()
 slug: Web/JavaScript/Reference/Global_Objects/TypedArray/keys
 l10n:
-  sourceCommit: 194d3e00cb93a6e5ea44812548f4131cb17f0381
+  sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de
 ---
 
 {{JSRef}}
 
-**`keys()`** メソッドは、配列内の各添字に対するキーを含む新しい配列イテレーターオブジェクトを返します。
+**`keys()`** は {{jsxref("TypedArray")}} インスタンスのメソッドで、配列内の各インデックスに対するキーを含む新しい[配列イテレーター](/ja/docs/Web/JavaScript/Reference/Global_Objects/Iterator)オブジェクトを返します。このメソッドのアルゴリズムは {{jsxref("Array.prototype.keys()")}} と同じです。
 
 {{EmbedInteractiveExample("pages/js/typedarray-keys.html")}}
 
@@ -17,9 +17,17 @@ l10n:
 keys()
 ```
 
+### 引数
+
+なし。
+
 ### 返値
 
-新しい配列イテレーターオブジェクトです。
+新しい[配列イテレーターオブジェクト](/ja/docs/Web/JavaScript/Reference/Global_Objects/Iterator)です。
+
+## 解説
+
+詳細については、 {{jsxref("Array.prototype.keys()")}} をご覧ください。このメソッドは汎用的ではなく、型付き配列インスタンスに対してのみ呼び出すことができます。
 
 ## 例
 
@@ -56,10 +64,10 @@ console.log(arrKeys.next().value); // 4
 ## 関連情報
 
 - [`TypedArray.prototype.keys` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-typed-arrays)
-- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Typed_arrays)
+- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)
 - {{jsxref("TypedArray")}}
 - {{jsxref("TypedArray.prototype.entries()")}}
 - {{jsxref("TypedArray.prototype.values()")}}
-- {{jsxref("TypedArray.prototype.@@iterator()", "TypedArray.prototype[@@iterator]()")}}
-- [for...of](/ja/docs/Web/JavaScript/Reference/Statements/for...of)
+- [`TypedArray.prototype[@@iterator]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/@@iterator)
+- {{jsxref("Array.prototype.keys()")}}
 - [反復処理プロトコル](/ja/docs/Web/JavaScript/Reference/Iteration_protocols)

From 4bccad696a079a8a59d3405ea4774a4885e8974d Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Sun, 12 Nov 2023 00:48:23 +0900
Subject: [PATCH 091/141] =?UTF-8?q?2023/09/15=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../typedarray/lastindexof/index.md           | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/lastindexof/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/lastindexof/index.md
index c6861ad34ccdaa..31c0a4e79b5b75 100644
--- a/files/ja/web/javascript/reference/global_objects/typedarray/lastindexof/index.md
+++ b/files/ja/web/javascript/reference/global_objects/typedarray/lastindexof/index.md
@@ -2,12 +2,12 @@
 title: TypedArray.prototype.lastIndexOf()
 slug: Web/JavaScript/Reference/Global_Objects/TypedArray/lastIndexOf
 l10n:
-  sourceCommit: 194d3e00cb93a6e5ea44812548f4131cb17f0381
+  sourceCommit: d9e66eca59d82c65166c65e7946332650da8f48f
 ---
 
 {{JSRef}}
 
-**`lastIndexOf()`** メソッドは、指定された要素が型付き配列内で見つかった最後の位置の添字を返し、存在しなければ -1 を返します。型付き配列は `fromIndex` で始まる位置から逆方向に検索されます。 このメソッドは {{jsxref("Array.prototype.lastIndexOf()")}} と同じアルゴリズムです。 _TypedArray_ は、ここでは[型付き配列型](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#typedarray_オブジェクト)のうちの一つです。
+**`lastIndexOf()`** は {{jsxref("TypedArray")}} インスタンスのメソッドで、指定された要素が型付き配列内で見つかった最後の位置のインデックスを返し、存在しなければ -1 を返します。型付き配列は `fromIndex` で始まる位置から逆方向に検索されます。 このメソッドは {{jsxref("Array.prototype.lastIndexOf()")}} と同じアルゴリズムです。
 
 {{EmbedInteractiveExample("pages/js/typedarray-lastindexof.html")}}
 
@@ -22,20 +22,20 @@ lastIndexOf(searchElement, fromIndex)
 
 - `searchElement`
   - : 型付き配列内で検索する要素。
-- `fromIndex`
-  - : オプション。逆方向に検索を開始する位置の添字。既定値は型付き配列の長さで、すなわち型付き配列全体が検索されます。添字が型付き配列の長さ以上の場合、型付き配列全体が検索されます。添字が負の数の場合、型付き配列の末尾からのオフセットとして扱われます。添字が負の数であっても、型付き配列は末尾から先頭に向けて検索されます。計算された添字が 0 未満になった場合は、 -1 が返され、すなわち型付き配列は検索されません。
+- `fromIndex` {{optional_inline}}
+  - : 検索を始める位置を示すゼロ基点のインデックスで、[整数に変換されます](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#整数への変換)。
 
 ### 返値
 
-配列内の要素の最後の添字です。見つからなかったら `-1` になります。
+型付き配列内における最後の `searchElement` のインデックスです。見つからなかったら `-1` になります。
 
 ## 解説
 
-`lastIndexOf` は `searchElement` と型付き配列の要素を、[厳密等価](/ja/docs/Web/JavaScript/Equality_comparisons_and_sameness#_による厳密な等価性) (===、イコール 3 つの演算子と同じ方法) を使用して比較します。
+詳細については、 {{jsxref("Array.prototype.lastIndexOf()")}} をご覧ください。このメソッドは汎用的ではなく、型付き配列インスタンスに対してのみ呼び出すことができます。
 
 ## 例
 
-### lastIndexOf の使用
+### lastIndexOf() の使用
 
 ```js
 const uint8 = new Uint8Array([2, 5, 9, 2]);
@@ -58,5 +58,10 @@ uint8.lastIndexOf(2, -1); // 3
 ## 関連情報
 
 - [`TypedArray.prototype.lastIndexOf` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-typed-arrays)
+- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)
+- {{jsxref("TypedArray")}}
+- {{jsxref("TypedArray.prototype.findIndex()")}}
+- {{jsxref("TypedArray.prototype.findLastIndex()")}}
 - {{jsxref("TypedArray.prototype.indexOf()")}}
 - {{jsxref("Array.prototype.lastIndexOf()")}}
+- {{jsxref("String.prototype.lastIndexOf()")}}

From 0c31eacce365af74a1cd118ac071c3b4026cecc6 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Sun, 12 Nov 2023 00:57:28 +0900
Subject: [PATCH 092/141] =?UTF-8?q?2023/09/07=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../global_objects/typedarray/map/index.md    | 52 ++++++-------------
 1 file changed, 15 insertions(+), 37 deletions(-)

diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/map/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/map/index.md
index b95a37b5c5fd0a..2fd0e6d7504140 100644
--- a/files/ja/web/javascript/reference/global_objects/typedarray/map/index.md
+++ b/files/ja/web/javascript/reference/global_objects/typedarray/map/index.md
@@ -2,69 +2,43 @@
 title: TypedArray.prototype.map()
 slug: Web/JavaScript/Reference/Global_Objects/TypedArray/map
 l10n:
-  sourceCommit: 194d3e00cb93a6e5ea44812548f4131cb17f0381
+  sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de
 ---
 
 {{JSRef}}
 
-**`map()`** メソッドは、与えられた関数を型付き配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。このメソッドは、{{jsxref("Array.prototype.map()")}} と同じアルゴリズムです。 _TypedArray_ は、ここでは[型付き配列型](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#typedarray_オブジェクト)の一つです。
+**`map()`** は {{jsxref("TypedArray")}} インスタンスのメソッドで、与えられた関数を呼び出された型付き配列のすべての要素に対して呼び出し、その結果からなる新しい型付き配列を生成します。このメソッドは、 {{jsxref("Array.prototype.map()")}} と同じアルゴリズムです。
 
 {{EmbedInteractiveExample("pages/js/typedarray-map.html", "shorter")}}
 
 ## 構文
 
 ```js-nolint
-// アロー関数
-map((currentValue) => { /* ... */ } )
-map((currentValue, index) => { /* ... */ } )
-map((currentValue, index, array) => { /* ... */ } )
-
-// コールバック関数
 map(callbackFn)
 map(callbackFn, thisArg)
-
-// インラインコールバック関数
-map(function(currentValue) { /* ... */ })
-map(function(currentValue, index) { /* ... */ })
-map(function(currentValue, index, array){ /* ... */ })
-map(function(currentValue, index, array) { /* ... */ }, thisArg)
 ```
 
 ### 引数
 
 - `callbackFn`
-
-  - : 新しい型付き配列の要素を生み出すコールバック関数です。
-
-    この関数は、以下の引数で呼び出されます。
-
-    - `currentValue`
-      - : 現在処理中の要素の値です。
+  - : 型付き配列のそれぞれの要素に対して実行する関数。その返値は、新しい型付き配列の単一の要素として追加されます。この関数は以下の引数で呼び出されます。
+    - `element`
+      - : 型付き配列で現在処理されている要素です。
     - `index`
-      - : 現在処理中の要素の型付き配列内における添字です。
+      - : 現在処理中の要素の型付き配列内におけるインデックスです。
     - `array`
-      - : `map()` が実行されている型付き配列です。
+      - : `map()` が呼び出されてた型付き配列です。
 
 - `thisArg` {{optional_inline}}
-  - : `callbackFn` を実行するときに `this` として使う値です。
+  - : `callbackFn` を実行する際に `this` として使用する値。[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)を参照してください。
 
 ### 返値
 
-新しい型付き配列です。
+各要素がコールバック関数の結果である新しい型付き配列です。
 
 ## 解説
 
-`map()` は、与えられたコールバック関数 (`callbackFn`) を型付き配列の各要素に対して、順番通りに一度ずつ呼び出し、その結果から新しい配列を生成します。
-
-`callbackFn` は型付き配列のインデックスのうち、値が割り当てられているものにのみ呼び出しす。 `undefined` であるインデックス、すなわち削除されたか値が割り当てられたことがないインデックスには呼び出しません。
-
-`callbackFn` は、要素の値、要素の添字、走査中の型付き配列オブジェクトという 3 つの引数をともなって呼び出されます。
-
-`thisArg` 引数が `map()` に与えられた場合は、それが `callbackFn` の呼び出し時に渡され、 `this` として使用されます。そうでない場合は、 {{jsxref("undefined")}} が `this` の値として使用されます。 `callbackFn` から最終的に見える `this` の値は、[関数における通常の `this` を決定するルール](/ja/docs/Web/JavaScript/Reference/Operators/this)に従って決まります。
-
-`map()` は呼び出された型付き配列を変化させません（ただし、 `callbackFn` が呼び出されたあ愛は、変更する可能性はあります）。
-
-`map()` によって処理される要素の範囲は、 `callbackFn` が最初に呼び出される前に設定されます。 `map()` の呼び出しが開始された後に追加された要素に対しては、 `callbackFn` は実行されません。既存の配列要素が変更されたり、削除された場合、 `callbackFn` に渡される値は `map()` がそれらを訪れた時点での値になり、削除された要素を訪問することはありません。
+詳細については、 {{jsxref("Array.prototype.map()")}} をご覧ください。このメソッドは汎用的ではなく、型付き配列インスタンスに対してのみ呼び出すことができます。
 
 ## 例
 
@@ -101,5 +75,9 @@ const doubles = numbers.map((num) => num * 2);
 ## 関連情報
 
 - [`TypedArray.prototype.map` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-typed-arrays)
-- {{jsxref("TypedArray.prototype.filter()")}}
+- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)ガイド
+- {{jsxref("TypedArray")}}
+- {{jsxref("TypedArray.prototype.forEach()")}}
+- {{jsxref("TypedArray.from()")}}
 - {{jsxref("Array.prototype.map()")}}
+- {{jsxref("Map")}}

From 039a251fb09a4cc0d32904d8a462d0b9bc4913d3 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Sun, 12 Nov 2023 01:04:11 +0900
Subject: [PATCH 093/141] =?UTF-8?q?2023/09/12=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../global_objects/typedarray/of/index.md     | 21 +++++++++++--------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/of/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/of/index.md
index f1952c02dde1a3..87f71340d1ff8d 100644
--- a/files/ja/web/javascript/reference/global_objects/typedarray/of/index.md
+++ b/files/ja/web/javascript/reference/global_objects/typedarray/of/index.md
@@ -2,21 +2,22 @@
 title: TypedArray.of()
 slug: Web/JavaScript/Reference/Global_Objects/TypedArray/of
 l10n:
-  sourceCommit: 194d3e00cb93a6e5ea44812548f4131cb17f0381
+  sourceCommit: c2445ce1dc3a0170e2fbfdbee10e18a7455c2282
 ---
 
 {{JSRef}}
 
 **`TypedArray.of()`** メソッドは、引数の変数番号から新しい[型付き配列](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#typedarray_オブジェクト)を生成します。このメソッドは {{jsxref("Array.of()")}} とほぼ同じです。
 
-{{EmbedInteractiveExample("pages/js/typedarray-of.html","shorter")}}
+{{EmbedInteractiveExample("pages/js/typedarray-of.html", "shorter")}}
 
 ## 構文
 
 ```js-nolint
-TypedArray.of(element0)
-TypedArray.of(element0, element1)
-TypedArray.of(element0, element1, /* ... ,*/ elementN)
+TypedArray.of()
+TypedArray.of(element1)
+TypedArray.of(element1, element2)
+TypedArray.of(element1, element2, /* …, */ elementN)
 ```
 
 ここで `TypedArray` は次のいずれかです。
@@ -35,8 +36,8 @@ TypedArray.of(element0, element1, /* ... ,*/ elementN)
 
 ### 引数
 
-- `elementN`
-  - : 型付き配列を生成するときの構成する要素。
+- `element1`, …, `elementN`
+  - : 型付き配列を作成するのに使われる要素です。
 
 ### 返値
 
@@ -44,9 +45,9 @@ TypedArray.of(element0, element1, /* ... ,*/ elementN)
 
 ## 解説
 
-{{jsxref("Array.of()")}} と `TypedArray.of()` との間にいくつかの微妙な違いがあります。
+詳細については、 {{jsxref("Array.of()")}} をご覧ください。 {{jsxref("Array.of()")}} と `TypedArray.of()` との間にはいくつか微妙な違いがあります。
 
-- `TypedArray.of()` に渡された `this` の値がコンストラクターではなかった場合、 `TypedArray.of()` で {{jsxref("TypeError")}} が発生します。これは `Array.of()` が既定で新しい {{jsxref("Array")}} を生成するためです。
+- `TypedArray.of()` に渡された `this` の値がコンストラクターではなかった場合、 `TypedArray.of()` では {{jsxref("TypeError")}} が発生します。一方、 `Array.of()` は既定で新しい {{jsxref("Array")}} を生成します。
 - `TypedArray.of()` は `[[Set]]` を使用するのに対し、 `Array.of()` は `[[DefineProperty]]` を使用します。従って {{jsxref("Proxy")}} オブジェクトを使っている場合は、新しい要素を追加するときに [`handler.set()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/set) が [`handler.defineProperty()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/defineProperty) の代わりに呼び出されます。
 
 ## 例
@@ -71,5 +72,7 @@ Int16Array.of(undefined); // Int16Array [ 0 ]
 ## 関連情報
 
 - [`TypedArray.of` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-typed-arrays)
+- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)ガイド
+- {{jsxref("TypedArray")}}
 - {{jsxref("TypedArray.from()")}}
 - {{jsxref("Array.of()")}}

From ee9eb6ddc9e8b771451d52835e4cc2a6cb12022b Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Sun, 12 Nov 2023 01:10:46 +0900
Subject: [PATCH 094/141] Update
 files/ja/web/javascript/reference/global_objects/typedarray/map/index.md

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .../javascript/reference/global_objects/typedarray/map/index.md  | 1 +
 1 file changed, 1 insertion(+)

diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/map/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/map/index.md
index 2fd0e6d7504140..062ed309515bb4 100644
--- a/files/ja/web/javascript/reference/global_objects/typedarray/map/index.md
+++ b/files/ja/web/javascript/reference/global_objects/typedarray/map/index.md
@@ -21,6 +21,7 @@ map(callbackFn, thisArg)
 ### 引数
 
 - `callbackFn`
+
   - : 型付き配列のそれぞれの要素に対して実行する関数。その返値は、新しい型付き配列の単一の要素として追加されます。この関数は以下の引数で呼び出されます。
     - `element`
       - : 型付き配列で現在処理されている要素です。

From 2f5f1e6251e2220d4d25a40ac644e7fdcb364712 Mon Sep 17 00:00:00 2001
From: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com>
Date: Thu, 16 Nov 2023 09:16:59 +0800
Subject: [PATCH 095/141] sync Notification API (#16927)

Co-authored-by: A1lo 
---
 .../zh-cn/web/api/notifications_api/index.md  |  53 +++++++++---------
 .../notifications_api/notification-bubble.png | Bin 26544 -> 0 bytes
 2 files changed, 25 insertions(+), 28 deletions(-)
 delete mode 100644 files/zh-cn/web/api/notifications_api/notification-bubble.png

diff --git a/files/zh-cn/web/api/notifications_api/index.md b/files/zh-cn/web/api/notifications_api/index.md
index b2f0a4b2cca3ac..b35b2905004f2a 100644
--- a/files/zh-cn/web/api/notifications_api/index.md
+++ b/files/zh-cn/web/api/notifications_api/index.md
@@ -3,43 +3,50 @@ title: Notifications API
 slug: Web/API/Notifications_API
 ---
 
-{{DefaultAPISidebar("Web Notifications")}}
+{{DefaultAPISidebar("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}
 
-**Notifications API** 允许网页控制向最终用户显示系统通知 —这些都在顶级浏览上下文视口之外，因此即使用户已经切换标签页或移动到不同的应用程序，也可以显示。该 API 被设计成与不同平台上的现有通知系统兼容。
+**Notifications API** 允许网页控制向最终用户显示系统通知——这些都在顶级浏览上下文视口之外，因此即使用户已经切换标签页或移动到不同的应用程序，也可以显示。该 API 被设计成与不同平台上的现有通知系统兼容。
 
 ## 概念和用法
 
-在支持该接口的平台上，显示一个系统通知通常涉及两件事。首先，用户需要授予当前源的权限以显示系统通知，这通常在应用或站点初始化时，使用{{domxref("Notification.requestPermission()")}} 方法来完成。
+在支持该接口的平台上，显示一个系统通知通常涉及两件事。首先，用户需要为当前来源授予权限以显示系统通知，这通常在应用或站点初始化时，使用 {{domxref("Notification.requestPermission()")}} 方法来完成。这应该通过响应用户交互来完成，例如单击按钮，例如：
 
-这将产生一个请求对话框，沿着以下几行：
+```js
+btn.addEventListener("click", () => {
+  let promise = Notification.requestPermission();
+  // 等待授权
+});
+```
+
+这不仅是最佳实践——你不应该向用户发送他们不同意的通知——并且未来的浏览器将明确禁止未响应用户交互而触发的通知。例如，Firefox 从 72 版本开始就已经这样做了。
 
-![](notification-bubble.png)
+这将产生一个请求对话框，内容如下：
 
-从这里，用户可以选择允许来自此来源的通知，阻止来自此来源的通知，或不选择此点。一旦做出选择，该设置通常将持续用于当前会话。
+![一个对话框，要求用户允许来自该源的通知。有一些选项可以禁止或允许通知](screen_shot_2019-12-11_at_9.59.14_am.png)
 
-> **备注：** 从 Firefox 44 开始，通知（Notifications）和推送（[Push](/zh-CN/docs/Web/API/Push_API)）的权限已合并。如果为通知授予权限，推送也将启用。
+从这里，用户可以选择允许来自此来源的通知或阻止来自此来源的通知。一旦做出选择，该设置通常将持续用于当前会话。
 
-接下来，使用 {{domxref("Notification.Notification","Notification()")}} 构造函数创建一个新通知。这个方法可以传入两个参数。这必须传递一个标题参数，并可以选择性地传递一个选项对象来指定选项，如文本方向，正文，显示图标，通知声音播放，等等。
+> **备注：** 从 Firefox 44 开始，通知（Notification）和推送（[Push](/zh-CN/docs/Web/API/Push_API)）的权限已合并。如果为通知授予权限，推送也将启用。
 
-{{AvailableInWorkers}}
+接下来，使用 {{domxref("Notification.Notification","Notification()")}} 构造函数创建一个新通知。这个函数必须传递一个标题参数，并且可以选择传递一个选项对象来指定选项，例如文本方向、正文、要显示的图标、要播放的通知声音等等。
 
-此外， **Notifications API** 规范对 [ServiceWorker API](/zh-CN/docs/Web/API/ServiceWorker_API)指定了多个添加，以允许 service workers 发送通知。
+此外，Notifications API 规范对 [ServiceWorker API](/zh-CN/docs/Web/API/ServiceWorker_API) 指定了多个添加，以允许 Service Worker 发送通知。
 
-> **备注：** 想了解怎么在你的应用里使用通知接口，请阅读 [Using the Notifications API](/zh-CN/docs/Web/API/Notifications_API/Using_the_Notifications_API)。
+> **备注：** 想了解怎么在你的应用里使用通知接口，请阅读[使用 Notifications API](/zh-CN/docs/Web/API/Notifications_API/Using_the_Notifications_API)。
 
-## 接口（Notifications interfaces）
+## Notifications 接口
 
 - {{domxref("Notification")}}
-  - : 定义的通知对象
+  - : 定义的通知对象。
 
-### 附加参数（Service worker additions）
+### Service worker 附加内容
 
 - {{domxref("ServiceWorkerRegistration")}}
   - : 该对象包含 {{domxref("ServiceWorkerRegistration.showNotification()")}} 和 {{domxref("ServiceWorkerRegistration.getNotifications()")}} 方法，用于控制通知的显示。
 - {{domxref("ServiceWorkerGlobalScope")}}
-  - : 该对象包含 {{domxref("ServiceWorkerGlobalScope.onnotificationclick")}} 事件处理函数，用于通知被点击的时候触发绑定的事件处理函数。
+  - : 该对象包含 {{domxref("ServiceWorkerGlobalScope.notificationclick_event", "onnotificationclick")}} 事件处理器，用于通知被点击的时候触发自定义函数。
 - {{domxref("NotificationEvent")}}
-  - : 该对象是功能明确的事件对象，表示一个通知事件被触发了，继承自{{domxref("ExtendableEvent")}}。
+  - : 该对象是功能明确的事件对象，表示一个被触发的通知事件，继承自 {{domxref("ExtendableEvent")}}。
 
 ## 规范
 
@@ -49,16 +56,6 @@ slug: Web/API/Notifications_API
 
 {{Compat}}
 
-## Firefox OS permissions
-
-当你在 Firefox OS app 中使用通知时，请确保在 manifest 文件中添加了`desktop-notification` 权限。Notifications can be used at any permission level, hosted or above:
-
-```json
-"permissions": {
-  "desktop-notification": {}
-}
-```
-
-## See also
+## 参见
 
-- [Using the Notifications API](/zh-CN/docs/Web/API/Notifications_API/Using_the_Notifications_API)
+- [使用 Notifications API](/zh-CN/docs/Web/API/Notifications_API/Using_the_Notifications_API)
diff --git a/files/zh-cn/web/api/notifications_api/notification-bubble.png b/files/zh-cn/web/api/notifications_api/notification-bubble.png
deleted file mode 100644
index 4b175cd07ae807f3de39923f8179ae4c9e023a86..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 26544
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


From 2b3352e7701f18b92205b82746aaa851600c00af Mon Sep 17 00:00:00 2001
From: Jason Lam 
Date: Thu, 16 Nov 2023 13:47:48 +0800
Subject: [PATCH 096/141] [zh-cn]: update the translation of ArrayBuffer
 overview (#16977)

Co-authored-by: A1lo 
---
 .../global_objects/arraybuffer/index.md       | 47 +++++++++++++++----
 1 file changed, 37 insertions(+), 10 deletions(-)

diff --git a/files/zh-cn/web/javascript/reference/global_objects/arraybuffer/index.md b/files/zh-cn/web/javascript/reference/global_objects/arraybuffer/index.md
index 2e60373f88d3c3..5572c183450d3f 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/arraybuffer/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/arraybuffer/index.md
@@ -5,7 +5,7 @@ slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer
 
 {{JSRef}}
 
-**`ArrayBuffer`** 对象用来表示通用的、固定长度的原始二进制数据缓冲区。
+**`ArrayBuffer`** 对象用来表示通用的原始二进制数据缓冲区。
 
 它是一个字节数组，通常在其他语言中称为“byte array”。你不能直接操作 `ArrayBuffer` 中的内容；而是要通过[类型化数组对象](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/TypedArray)或 {{jsxref("DataView")}} 对象来操作，它们会将缓冲区中的数据表示为特定的格式，并通过这些格式来读写缓冲区的内容。
 
@@ -21,32 +21,59 @@ slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer
 
 这些特性使得调整 `ArrayBuffer` 的大小更加高效——否则，你必须使用新的大小创建一个缓冲副本。这也使得 JavaScript 在这方面与 WebAssembly 相当（Wasm 线性内存可以使用 [`WebAssembly.Memory.prototype.grow()`](/zh-CN/docs/WebAssembly/JavaScript_interface/Memory/grow) 调整大小）。
 
+### 传输 ArrayBuffer
+
+`ArrayBuffer` 对象可以在不同的执行上下文之间传输，就像 [Web Worker](/zh-CN/docs/Web/API/Web_Workers_API) 或 [Service Worker](/zh-CN/docs/Web/API/Service_Worker_API) 那样，使用[结构化克隆算法](/zh-CN/docs/Web/API/Web_Workers_API/Structured_clone_algorithm)。这可以通过在 {{domxref("Worker.postMessage()")}} 或 {{domxref("ServiceWorker.postMessage()")}} 的调用中传入 `ArrayBuffer` 对象作为[可转移对象](/zh-CN/docs/Web/API/Web_Workers_API/Transferable_objects)来完成。在纯 JavaScript 中，也可以使用 {{jsxref("ArrayBuffer/transfer", "transfer()")}} 或 {{jsxref("ArrayBuffer/transferToFixedLength", "transferToFixedLength()")}} 方法来转移内存的所有权。
+
+当一个 `ArrayBuffer` 对象被传输时，它原来的副本会被*分离（detached）*，这意味着它不再可用。在任何时候，只有一个 `ArrayBuffer` 的副本实际拥有底层内存。分离的缓冲区具有以下行为：
+
+- {{jsxref("ArrayBuffer/byteLength", "byteLength")}} 变为 0（在缓冲区和关联的类型化数组视图中）。
+- 所有实例方法，比如 {{jsxref("ArrayBuffer/resize", "resize()")}} 和 {{jsxref("ArrayBuffer/slice", "slice()")}}，会在调用时抛出 {{jsxref("TypeError")}}。关联的类型化数组视图的方法也会抛出 `TypeError`。
+
+你可以通过其 {{jsxref("ArrayBuffer/detached", "detached")}} 属性来检查 `ArrayBuffer` 是否已分离。
+
 ## 构造函数
 
-- {{jsxref("ArrayBuffer.ArrayBuffer", "ArrayBuffer()")}}
+- {{jsxref("ArrayBuffer/ArrayBuffer", "ArrayBuffer()")}}
   - : 创建一个新的 `ArrayBuffer` 对象。
 
 ## 静态属性
 
-- {{jsxref("ArrayBuffer.@@species", "get ArrayBuffer[@@species]")}}
+- {{jsxref("ArrayBuffer/@@species", "ArrayBuffer[@@species]")}}
   - : 用于创建派生对象的构造函数。
 
 ## 静态方法
 
 - {{jsxref("ArrayBuffer.isView()")}}
-  - : 如果 `arg` 是 ArrayBuffer 视图之一，则返回 `true`，例如[类型化数组对象](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/TypedArray)或者{{jsxref("DataView")}}。否则返回 `false`。
+  - : 如果 `arg` 是 ArrayBuffer 视图之一，则返回 `true`，例如[类型化数组对象](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/TypedArray)或者 {{jsxref("DataView")}}。否则返回 `false`。
 
 ## 实例属性
 
-- `ArrayBuffer.prototype[@@toStringTag]`
-  - : [`@@toStringTag`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag) 属性的初始值是 `"ArrayBuffer"` 字符串。该属性在 {{jsxref("Object.prototype.toString()")}} 中被使用。
+这些属性在 `ArrayBuffer.prototype` 上定义，并由所有 `ArrayBuffer` 实例共享。
+
 - {{jsxref("ArrayBuffer.prototype.byteLength")}}
-  - : `ArrayBuffer` 的只读大小（以字节为单位）。这是在数组构建时确定的，无法更改。
+  - : `ArrayBuffer` 的大小，以字节为单位。它在构造时确定，并且只有在 `ArrayBuffer` 可调整大小的情况下才能通过 {{jsxref("ArrayBuffer.prototype.resize()")}} 方法进行改变。
+- {{jsxref("Object/constructor", "ArrayBuffer.prototype.constructor")}}
+  - : 创建实例对象的构造函数。对于 `ArrayBuffer` 实例，初始值为 {{jsxref("ArrayBuffer/ArrayBuffer", "ArrayBuffer")}} 构造函数。
+- {{jsxref("ArrayBuffer.prototype.detached")}} {{experimental_inline}}
+  - : 只读。如果 `ArrayBuffer` 已分离（传输），则返回 `true`，否则返回 `false`。
+- {{jsxref("ArrayBuffer.prototype.maxByteLength")}}
+  - : 只读，`ArrayBuffer` 可以调整到的最大字节长度。它在构造时确定，并且无法更改。
+- {{jsxref("ArrayBuffer.prototype.resizable")}}
+  - : 只读。如果 `ArrayBuffer` 可调整大小，则返回 `true`，否则返回 `false`。
+- `ArrayBuffer.prototype[@@toStringTag]`
+  - : [`@@toStringTag`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag) 属性的初始值是字符串 `"ArrayBuffer"`。它用于 {{jsxref("Object.prototype.toString()")}}。
 
 ## 实例方法
 
+- {{jsxref("ArrayBuffer.prototype.resize()")}}
+  - : 将 `ArrayBuffer` 调整为指定大小，以字节为单位。
 - {{jsxref("ArrayBuffer.prototype.slice()")}}
-  - : 返回一个新的 `ArrayBuffer`，它的内容是该 `ArrayBuffer` 从 `begin`（包括）到 `end`（不包括）字节的拷贝。如果 `begin` 或 `end` 是负数，它则指的是从数组末尾开始的索引，而不是从头开始的索引。
+  - : 返回一个新的 `ArrayBuffer` 对象，其内容是从 `begin`（包含）到 `end`（不包含）的 `ArrayBuffer` 的字节内容的副本。如果 `begin` 或 `end` 为负数，则它将从数组的末尾开始计算索引，而非从数组的开头。
+- {{jsxref("ArrayBuffer.prototype.transfer()")}} {{experimental_inline}}
+  - : 创建一个新的 `ArrayBuffer` 对象，其内容是与此缓冲区相同的字节内容，然后分离此缓冲区。
+- {{jsxref("ArrayBuffer.prototype.transferToFixedLength()")}} {{experimental_inline}}
+  - : 创建一个新的不可调整大小的 `ArrayBuffer` 对象，其内容与此缓冲区相同，然后分离此缓冲区。
 
 ## 示例
 
@@ -69,7 +96,7 @@ const view = new Int32Array(buffer);
 
 ## 参见
 
-- [`core-js` 中的 `ArrayBuffer` Polyfill](https://github.com/zloirock/core-js#ecmascript-typed-arrays)
+- [`core-js` 中 `ArrayBuffer` 的 polyfill](https://github.com/zloirock/core-js#ecmascript-typed-arrays)
 - [JavaScript 类型化数组](/zh-CN/docs/Web/JavaScript/Guide/Typed_arrays)
 - {{jsxref("SharedArrayBuffer")}}
-- [RangeError：无效的数组长度](/zh-CN/docs/Web/JavaScript/Reference/Errors/Invalid_array_length)
+- [RangeError: invalid array length](/zh-CN/docs/Web/JavaScript/Reference/Errors/Invalid_array_length)

From f6a25b9cf31fcafcba5193e310a6aa869aa18a32 Mon Sep 17 00:00:00 2001
From: Rustam M <34323404+rustam-mukhametshin@users.noreply.github.com>
Date: Thu, 16 Nov 2023 11:08:53 +0500
Subject: [PATCH 097/141] ru: add embedded interactive example (#16729)

---
 .../javascript/reference/global_objects/object/assign/index.md  | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/files/ru/web/javascript/reference/global_objects/object/assign/index.md b/files/ru/web/javascript/reference/global_objects/object/assign/index.md
index e90782145f849a..52adae11397e6b 100644
--- a/files/ru/web/javascript/reference/global_objects/object/assign/index.md
+++ b/files/ru/web/javascript/reference/global_objects/object/assign/index.md
@@ -7,6 +7,8 @@ slug: Web/JavaScript/Reference/Global_Objects/Object/assign
 
 Метод **`Object.assign()`** используется для копирования значений всех собственных перечисляемых свойств из одного или более исходных объектов в целевой объект. После копирования он возвращает целевой объект.
 
+{{EmbedInteractiveExample("pages/js/object-assign.html")}}
+
 ## Синтаксис
 
 ```

From 3948f9debc64d8b4901817fc65307de83c826857 Mon Sep 17 00:00:00 2001
From: Rustam M <34323404+rustam-mukhametshin@users.noreply.github.com>
Date: Thu, 16 Nov 2023 11:13:13 +0500
Subject: [PATCH 098/141] ru: update Object description (#16730)

---
 .../reference/global_objects/object/index.md     | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/files/ru/web/javascript/reference/global_objects/object/index.md b/files/ru/web/javascript/reference/global_objects/object/index.md
index 919f81f0d1141a..c4b0fcc353170c 100644
--- a/files/ru/web/javascript/reference/global_objects/object/index.md
+++ b/files/ru/web/javascript/reference/global_objects/object/index.md
@@ -5,10 +5,14 @@ slug: Web/JavaScript/Reference/Global_Objects/Object
 
 {{JSRef("Global_Objects", "Object")}}
 
-## Сводка
-
 Тип **`Object`** представляет один из [типов данных JavaScript](/ru/docs/Web/JavaScript/Data_structures). Он используется для хранения различных коллекций с ключами и более сложных сущностей. Объекты могут быть созданы с использованием конструктора {{jsxref("Object/Object", "Object()")}} или [синтаксиса инициализатора / литерала объекта](/ru/docs/Web/JavaScript/Reference/Operators/Object_initializer).
 
+## Описание
+
+Почти все [объекты](/ru/docs/Web/JavaScript/Data_structures#объекты) в JavaScript являются экземплярами `Object`; типичный объект наследует свойства (включая методы) от `Object.prototype`, хотя эти свойства могут быть затенены (т.е. переопределены). Единственные объекты, которые не наследуют от `Object.prototype`, - это те, у которых [прототип `null`](#null-prototype_objects), или которые происходят от других объектов с прототипом `null`.
+
+Изменения в объекте `Object.prototype` видны всем объектам с помощью цепочки прототипов, если свойства и методы, подверженные этим изменениям, не переопределены дальше по цепочке прототипов. Это предоставляет очень мощный, хотя и потенциально опасный механизм для переопределения или расширения поведения объектов. Для обеспечения большей безопасности, `Object.prototype` - единственный объект в основном языке JavaScript, у которого [неизменяемый прототип](/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf#описание) - прототип `Object.prototype` всегда `null` и не может быть изменен.
+
 ## Синтаксис
 
 ```js
@@ -26,14 +30,6 @@ new Object([value])
 - `value`
   - : Любое значение.
 
-## Описание
-
-Конструктор `Object` создаёт объект-обёртку для переданного значения. Если значением является {{jsxref("Global_Objects/null", "null")}} или {{jsxref("Global_Objects/undefined", "undefined")}}, создаёт и возвращает пустой объект, в противном случае возвращает объект такого типа, который соответствует переданному значению. Если значение уже является объектом, конструктор вернёт это значение.
-
-При вызове в не-конструктором контексте, `Object` ведёт себя идентично коду `new Object()`.
-
-Так же смотрите {{jsxref("Operators/Object_initializer", "синтаксис инициализатора объекта / литеральный синтаксис", "", 1)}}.
-
 ## Свойства конструктора `Object`
 
 - `Object.length`

From 3f6b91d5af7b4f508d41e958199e5042b3575dbe Mon Sep 17 00:00:00 2001
From: Leonid Vinogradov 
Date: Thu, 16 Nov 2023 09:30:40 +0300
Subject: [PATCH 099/141] [ru]: fix links in docs/Web/CSS (#16787)

[ru]: fix links in docs/Web/CSS
---------

Co-authored-by: Artem Shibakov 
---
 files/ru/web/css/index.md | 51 ++++++++++++++++++++++++---------------
 1 file changed, 31 insertions(+), 20 deletions(-)

diff --git a/files/ru/web/css/index.md b/files/ru/web/css/index.md
index b37f282e08801a..3d472eb344a659 100644
--- a/files/ru/web/css/index.md
+++ b/files/ru/web/css/index.md
@@ -1,13 +1,13 @@
 ---
-title: CSS
+title: "CSS: каскадные таблицы стилей"
 slug: Web/CSS
 ---
 
 {{CSSRef}}
 
-**Cascading Style Sheets** (**CSS**) — это язык иерархических правил ([таблиц стилей](/ru/docs/DOM/stylesheet)), используемый для представления внешнего вида документа, написанного на [HTML](/ru/docs/HTML) или [XML](/ru/docs/XML) (включая различные языки XML, такие как [SVG](/ru/docs/SVG) и [XHTML](/ru/docs/XHTML)). CSS описывает, каким образом элемент должен отображаться на экране, на бумаге, голосом или с использованием других медиа средств.
+**Cascading Style Sheets** (**CSS**) — это язык иерархических правил ([таблиц стилей](/ru/docs/Web/API/StyleSheet)), используемый для представления внешнего вида документа, написанного на [HTML](/ru/docs/Web/HTML) или [XML](/ru/docs/Web/XML/XML_introduction) (включая различные языки XML, такие как [SVG](/ru/docs/Web/SVG) и {{Glossary("XHTML")}}. CSS описывает, каким образом элемент должен отображаться на экране, на бумаге, голосом или с использованием других медиа средств.
 
-**CSS** является одним из основных языков _свободной веб-разработки,_ который стандартизован [спецификацией W3C](http://w3.org/Style/CSS/#specs). Стандарт CSS делится на уровни: CSS1 в настоящее время устарел, CSS2.1 — рекомендован для применения, а [CSS3](/ru/docs/CSS/CSS3), разбитый на более мелкие модули, развивается на пути стандартизации.
+**CSS** является одним из основных языков _свободной веб-разработки,_ который стандартизован [спецификацией W3C](https://w3.org/Style/CSS/#specs). Стандарт CSS делится на уровни: CSS1 в настоящее время устарел, CSS2.1 — рекомендован для применения, а CSS3, разбитый на более мелкие модули, развивается на пути стандартизации.
 
 - Справочник по CSS
 
@@ -15,31 +15,42 @@ slug: Web/CSS
 
 - Самоучитель по CSS
 
-  [Пошаговое руководство](/Learn/CSS/Introduction_to_CSS) для помощи начинающим программистам CSS. Содержит все необходимые основы.
+  [Пошаговое руководство](/ru/docs/Learn/CSS/First_steps) для помощи начинающим программистам CSS. Содержит все необходимые основы.
 
 - Примеры CSS3
 
-  [Набор примеров](/ru/demos/tag/tech:css3) представляющий новейшие технологии CSS в действии: толчок к креативности.
+  [Набор примеров](/ru/docs/Web/Demos_of_open_web_technologies) представляющий новейшие технологии CSS в действии: толчок к креативности.
 
-## Документация и самоучители
+## Документация
 
-- Ключевые понятия CSS
-  - : Описание [синтаксиса и внешнего вида языка](/ru/docs/CSS/Syntax) и введение в фундаментальные понятия такие как [специфичность](/ru/docs/CSS/Specificity), [наследование(каскадирование)](/ru/docs/CSS/inheritance), блочная модель([box-model](/ru/docs//ru/docs/CSS/box_model)) и схлопывание отступов([margin-collapse](/ru/docs/CSS/margin_collapsing)), [наложение](/ru/docs/CSS/Understanding_z-index/The_stacking_context) и контекст форматирования([Block formatting context](/ru/docs/CSS/block_formatting_context)), начальное([initial](/ru/docs/CSS/initial_value)), вычисленное([computed](/ru/docs/CSS/computed_value)), используемое([used](/ru/docs/CSS/used_value)) и актуальное([actual](/ru/docs/CSS/actual_value)) значения. Кроме того, описана [краткая форма записи](/ru/docs/CSS/Shorthand_properties) свойств CSS.
-- [Руководство разработчика CSS](/ru/docs/Web/Guide/CSS)
-  - : Статьи, которые помогут вам узнать все: начиная от основ организации стилей в HTML, заканчивая различными методами языка CSS, чтобы сделать свой контент сияющим.
-- [Распространённые вопросы по CSS](/ru/docs/Web/CSS/Common_CSS_Questions)
-  - : Ответы на часто возникающие вопросы о **CSS**.
+- [Справочник CSS](/ru/docs/Web/CSS/Reference): исчерпывающий справочник для опытных веб-разработчиков, в котором описаны все свойства и понятия CSS.
+- Ключевые понятия CSS:
+  - [Описание синтаксиса и внешнего вида языка](/ru/docs/Web/CSS/Syntax)
+  - [Специфичность](/ru/docs/Web/CSS/Specificity), [наследование](/ru/docs/Web/CSS/Inheritance) и [каскадирование](/ru/docs/Web/CSS/Cascade)
+  - [Единицы измерения в CSS](/ru/docs/Web/CSS/CSS_Values_and_Units) и [функции в CSS](/ru/docs/Web/CSS/CSS_Functions)
+  - [Блоковая модель](/ru/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) и [схлопывание внешних отступов](/ru/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing)
+  - [Содержащий блок](/ru/docs/Web/CSS/Containing_block)
+  - [Контекст наложения](/ru/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context) и [блочный контекст форматирования](/ru/docs/Web/Guide/CSS/Block_formatting_context)
+  - [Начальное](/ru/docs/Web/CSS/initial_value), [вычисленное](/ru/docs/Web/CSS/computed_value), [используемое](/ru/docs/Web/CSS/used_value) и [действительное](/ru/docs/Web/CSS/actual_value) значения
+  - [Краткая форма записи CSS свойств](/ru/docs/Web/CSS/Shorthand_properties)
+  - [Флексбокс-раскладка в CSS](/ru/docs/Web/CSS/CSS_flexible_box_layout)
+  - [Грид-раскладка в CSS](/ru/docs/Web/CSS/CSS_grid_layout)
+  - [CSS-селекторы](/ru/docs/Web/CSS/CSS_selectors)
+  - [Медиавыражения](/ru/docs/Web/CSS/CSS_media_queries)
+  - [Анимация](/ru/docs/Web/CSS/animation)
+
+## Книга рецептов
+
+В [Книге рецептов CSS разметки](/ru/docs/Web/CSS/Layout_cookbook) собраны примеры распространённых подходов, используемых для реализации разметки, которые вы сможете реализовать на своих сайтах. Эти рецепты также освещают различные способы использования спецификаций разметки и помогают сделать выбор нужной.
 
 ## Инструменты для разработки CSS
 
-- [Служба проверки W3C CSS](http://jigsaw.w3.org/css-validator/) проверяет правильность работы вашего CSS кода. Служба [OnlineWebCheck.com](//www.OnlineWebCheck.com/) делает то же самое. Это отличные инструменты для отладки.
-- [Инструменты разработчика Firefox](/ru/docs/Tools) позволяют рассматривать и изменять "на лету" CSS страницы с помощью инструментов [Инспектор](/ru/docs/Tools/Page_Inspector) и [Редактор таблиц стилей](/ru/docs/Tools/Style_Editor).
-- [Расширение Firebug](https://addons.mozilla.org/ru/firefox/addon/1843) для Firefox, популярное расширение для этого браузера, которое также позволяет редактировать "на лету" CSS код при просмотре сайтов. Помогает легко тестировать работу кода при внесении различных изменений. Помимо этого, расширение имеет другие полезные функции.
-- [Расширение Web Developer](https://addons.mozilla.org/ru/firefox/addon/60) для Firefox позволяет отслеживать и изменять "на лету" CSS код на просматриваемых сайтах. Проще чем Firebug, но обладает меньшей функциональностью.
-- [Прочие инструменты CSS.](/ru/docs/Web/CSS/Tools)
+- Используйте [Службу проверки W3C CSS](https://jigsaw.w3.org/css-validator/) для проверки правильности вашего CSS кода. Это отличный инструмент для отладки.
+- [Инструменты разработчика Firefox](https://firefox-source-docs.mozilla.org/devtools-user/index.html) позволяют просматривать и изменять «на лету» CSS страницы с помощью инструментов [Инспектор](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/index.html) и [Редактор стилей](https://firefox-source-docs.mozilla.org/devtools-user/style_editor/index.html).
+- [Расширение Web Developer](https://addons.mozilla.org/ru/firefox/addon/web-developer/) для Firefox позволяет отслеживать и изменять «на лету» CSS код на просматриваемых сайтах.
 
 ## Смотрите также
 
-- Изучение [CSS](/ru/docs/Learn/CSS) от Mozilla.
-- Веб-языки для которых часто применяется CSS: [HTML](/ru/docs/HTML), [SVG](/ru/docs/Web/SVG), [XHTML](/ru/docs/XHTML), [XML](/ru/docs/XML).
-- Технологии Mozilla, широко использующие CSS: [XUL](/ru/docs/Mozilla/Tech/XUL), [Firefox](/ru/Firefox), а также [Thunderbird](/ru/docs/Mozilla/Thunderbird) [расширения](/ru/docs/Extensions) и [темы](/ru/Add-ons/Themes).
+- [CSS демо](/ru/docs/Web/Demos#css): почерпните вдохновение, изучив примеры новейших технологий CSS в действии.
+- Веб-языки в которых часто применяется CSS: [HTML](/ru/docs/Web/HTML), [SVG](/ru/docs/Web/SVG), [MathML](/ru/docs/Web/MathML), {{Glossary("XHTML")}} и [XML](/ru/docs/Web/XML/XML_introduction).
+- [Вопросы о CSS на Stack Overflow](https://stackoverflow.com/questions/tagged/css)

From 42d229ad360babbf802ec835aaefee86d2305459 Mon Sep 17 00:00:00 2001
From: Leonid Vinogradov 
Date: Thu, 16 Nov 2023 09:44:13 +0300
Subject: [PATCH 100/141] [ru]: fix `EmbedLiveSample` macro usage on
 docs/Web/CSS/accent-color page (#16985)

* [ru]: fix link on docs/Web/CSS/accent-color page

* [ru]: fix 'EmbedLiveSample' macro usage on docs/Web/CSS/accent-color page
---
 files/ru/web/css/accent-color/index.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/files/ru/web/css/accent-color/index.md b/files/ru/web/css/accent-color/index.md
index 4b3d1ba58518d7..d245fb1e106366 100644
--- a/files/ru/web/css/accent-color/index.md
+++ b/files/ru/web/css/accent-color/index.md
@@ -79,7 +79,7 @@ input.custom {
 
 #### Результат
 
-{{EmbedLiveSample('Setting_a_custom_accent_color', 500, 200)}}
+{{EmbedLiveSample("Установка_пользовательского_акцентного_цвета", 500, 200)}}
 
 ## Спецификации
 
@@ -92,6 +92,6 @@ input.custom {
 ## Смотрите также
 
 - {{HTMLElement("input")}} элемент
-- [Применение цвета к HTML-элементам с помощью CSS](/ru/docs/Web/CSS/CSS_Colors/Applying_color)
+- [Применение цвета к HTML-элементам с помощью CSS](/ru/docs/Web/CSS/CSS_colors/Applying_color)
 - {{cssxref("<color>")}}
 - Другие свойства, связанные с цветом: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} и {{cssxref("column-rule-color")}}

From 7ae6424c218b9525f3ff7c4db721fcc1461c908f Mon Sep 17 00:00:00 2001
From: roose 
Date: Thu, 16 Nov 2023 12:47:26 +0600
Subject: [PATCH 101/141] [ru] Added missing words to the translation of the
 documentation for slice() (#16894)

---
 .../javascript/reference/global_objects/array/slice/index.md    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/ru/web/javascript/reference/global_objects/array/slice/index.md b/files/ru/web/javascript/reference/global_objects/array/slice/index.md
index 22ae159ae01161..16f1f443860c0b 100644
--- a/files/ru/web/javascript/reference/global_objects/array/slice/index.md
+++ b/files/ru/web/javascript/reference/global_objects/array/slice/index.md
@@ -35,7 +35,7 @@ arr.slice([begin[, end]])
 
     Если индекс отрицательный, `end` указывает смещение от конца последовательности. Вызов `slice(2, -1)` извлечёт из последовательности элементы начиная с третьего элемента с начала и заканчивая вторым с конца.
 
-    Если `end` опущен, `slice()` извлекает все элементы до конца последовательности (`arr.length`).
+    Если `end >= array.length` или `end` опущен, `slice()` извлекает все элементы до конца последовательности (`arr.length`).
 
 ### Возвращаемое значение
 

From c7ae74318c18ddc8e5f2c512b5aeb35042f87e07 Mon Sep 17 00:00:00 2001
From: Leonid Vinogradov 
Date: Thu, 16 Nov 2023 10:05:14 +0300
Subject: [PATCH 102/141] feat(ru): update "SVG fill-rule" translation (#16926)

Co-authored-by: A1lo 
---
 files/ru/web/svg/attribute/fill-rule/index.md | 107 ++++++++++--------
 1 file changed, 62 insertions(+), 45 deletions(-)

diff --git a/files/ru/web/svg/attribute/fill-rule/index.md b/files/ru/web/svg/attribute/fill-rule/index.md
index 005cb5b7d5a653..0a3f4a0445df4a 100644
--- a/files/ru/web/svg/attribute/fill-rule/index.md
+++ b/files/ru/web/svg/attribute/fill-rule/index.md
@@ -5,11 +5,21 @@ slug: Web/SVG/Attribute/fill-rule
 
 {{SVGRef}}
 
-The **`fill-rule`** этот атрибут представления, формулирует алгоритм, используемый для определения внутренней части фигуры.
+Атрибут `fill-rule` указывает алгоритм, используемый для определения внутренней части фигуры.
 
-> **Примечание:** Атрибут представления, `fill-rule` может быть использован как CSS-свойство.
+> **Примечание:** Как атрибут представления, `fill-rule` можно использовать в качестве CSS-свойства.
 
-Как атрибут представления, он может быть применён к следующим восьми элементам:: {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}
+Этот атрибут может быть применён к следующим SVG элементам:
+
+- {{SVGElement('path')}}
+- {{SVGElement('polygon')}}
+- {{SVGElement('polyline')}}
+- {{SVGElement('text')}}
+- {{SVGElement('textPath')}}
+- {{SVGElement('tref')}}
+- {{SVGElement('tspan')}}
+
+## Пример
 
 ```css hidden
 html,
@@ -21,17 +31,14 @@ svg {
 
 ```html
 
-  
+  
   
 
   
   
 ```
 
-{{EmbedLiveSample('topExample', '100%', 200)}}
+{{EmbedLiveSample("Пример", '100%', 200)}}
 
 ## Примечания по использованию
 
-| Значение              | `nonzero` \| `evenodd` |
-| --------------------- | ---------------------- |
-| Значение по умолчанию | `nonzero`              |
-| Анимируемый           | Да                     |
-
-The `fill-rule` attribute provides two options for how the inside (that is, the area to be filled) of a shape is determined:
+
+  
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+  
+
Значениеnonzero | evenodd
Значение по умолчаниюnonzero
Поддержка анимацииdiscrete

+
+Атрибут `fill-rule` предоставляет два варианта определения внутренней части фигуры (то есть области, подлежащей заливке):
 
 ### nonzero
 
-The value `nonzero` determines the "insideness" of a point in the shape by drawing a ray from that point to infinity in any direction, and then examining the places where a segment of the shape crosses the ray. Starting with a count of zero, add one each time a path segment crosses the ray from left to right and subtract one each time a path segment crosses the ray from right to left. After counting the crossings, if the result is zero then the point is outside the path. Otherwise, it is inside.
+Значение `nonzero` определяет принадлежность точки фигуры к внутренней части с помощью рисования луча от этой точки до бесконечности в любом направлении, а затем проверки мест, где сегмент фигуры пересекает луч. Начиная с нуля, каждый раз, когда луч пересекает сегмент фигуры слева направо, происходит увеличение счётчика на единицу, а когда справа налево, то уменьшение. Если после подсчёта пересечений результат равен нулю, то точка находится за пределами фигуры, в противном случае — внутри.
 
-#### Example
+#### Пример
 
 ```css hidden
 html,
@@ -67,33 +86,32 @@ svg {
 
 ```html
 
-  
+  
   
 
   
   
+    d="M110,0 h90 v90 h-90 z M130,20 h50 v50 h-50 z" />
 
   
   
+    d="M210,0 h90 v90 h-90 z M230,20 v50 h50 v-50 z" />
 
 ```
 
@@ -101,9 +119,9 @@ svg {
 
 ### evenodd
 
-The value `evenodd` determines the "insideness" of a point in the shape by drawing a ray from that point to infinity in any direction and counting the number of path segments from the given shape that the ray crosses. If this number is odd, the point is inside; if even, the point is outside.
+Значение `evenodd` определяет принадлежность точки фигуры к внутренней части с помощью рисования луча от этой точки до бесконечности в любом направлении и подсчёта количества сегментов фигуры, которые этот луч пересекает. Если это число нечётное, точка находится внутри, если чётное, то точка снаружи.
 
-#### Example
+#### Пример
 
 ```css hidden
 html,
@@ -115,42 +133,41 @@ svg {
 
 ```html
 
-  
+  
   
 
   
   
+    d="M110,0 h90 v90 h-90 z M130,20 h50 v50 h-50 z" />
 
   
   
+    d="M210,0 h90 v90 h-90 z M230,20 v50 h50 v-50 z" />
 
 ```
 
 {{EmbedLiveSample('evenodd', '100%', 200)}}
 
-## Browser compatibility
+## Спецификации
 
-{{Compat}}
+{{Specifications}}
 
-## Specification
+## Совместимость с браузерами
 
-{{Specifications}}
+{{Compat}}

From bcf40c66ff06bbc35d6e713940dde1d578b436a6 Mon Sep 17 00:00:00 2001
From: Qichao Zhong 
Date: Thu, 16 Nov 2023 15:37:15 +0800
Subject: [PATCH 103/141] [zh-cn]: fix typo in webgpu (#16991)

---
 files/zh-cn/web/api/webgpu_api/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/zh-cn/web/api/webgpu_api/index.md b/files/zh-cn/web/api/webgpu_api/index.md
index 14efd16c69f3f2..1aa4a286d44f79 100644
--- a/files/zh-cn/web/api/webgpu_api/index.md
+++ b/files/zh-cn/web/api/webgpu_api/index.md
@@ -13,7 +13,7 @@ WebGPU 是 {{domxref("WebGL_API", "WebGL", "", 1)}} 的继任者，为现代 GPU
 
 很公平地说，{{domxref("WebGL_API", "WebGL", "", 1)}} 在 2011 年左右首次出现后，在图形功能方面彻底改变了 web。WebGL 是 [OpenGL ES 2.0](https://registry.khronos.org/OpenGL-Refpages/es2.0/) 图形库的 JavaScript 端口，允许 web 页面直接将渲染计算传递给设备的 GPU，这会以非常高的速度处理，并在 {{htmlelement("canvas")}} 内渲染结果。
 
-WebGL 和用于编写 WebGL 着色器代码的 [GLSL]() 语言十分负责，因此创建了几个 WebGL 库，以便更轻松地编写 WebGL 应用程序：流行的示例包括 [Three.js](https://threejs.org/)、[Babylon.js](https://www.babylonjs.com/) 以及 [PlayCanvas](https://playcanvas.com/)。开发者可以使用这些工具去构建身临其境的基于 web 3D 的游戏、音乐视频、培训和建模工具、VR 和 AR 体验等。
+WebGL 和用于编写 WebGL 着色器代码的 [GLSL]() 语言十分复杂，因此创建了几个 WebGL 库，以便更轻松地编写 WebGL 应用程序：流行的示例包括 [Three.js](https://threejs.org/)、[Babylon.js](https://www.babylonjs.com/) 以及 [PlayCanvas](https://playcanvas.com/)。开发者可以使用这些工具去构建身临其境的基于 web 3D 的游戏、音乐视频、培训和建模工具、VR 和 AR 体验等。
 
 然而，WebGL 有一些需要解决的基本问题：
 

From 2ada93d1d5a8a76fed0778764f5799e05d7f1573 Mon Sep 17 00:00:00 2001
From: Leonid Vinogradov 
Date: Thu, 16 Nov 2023 10:42:30 +0300
Subject: [PATCH 104/141] fix(ru): `MacroLiveSampleError` errors part-1
 (#16968)

Co-authored-by: Sasha Sushko 
---
 files/ru/glossary/grid/index.md               |   6 +-
 .../canvas_api/tutorial/compositing/index.md  |   4 +-
 .../timing_element_visibility/index.md        |  52 ++++----
 .../recording_a_media_element/index.md        |  30 +++--
 files/ru/web/css/mix-blend-mode/index.md      |   4 +-
 .../web/svg/attribute/attributename/index.md  |   4 +-
 files/ru/web/svg/attribute/d/index.md         |   6 +-
 files/ru/web/svg/attribute/dur/index.md       |   4 +-
 files/ru/web/svg/attribute/id/index.md        |   4 +-
 files/ru/web/svg/attribute/r/index.md         |   4 +-
 files/ru/web/svg/attribute/rx/index.md        |   4 +-
 files/ru/web/svg/attribute/ry/index.md        |   4 +-
 .../svg/attribute/stroke-dashoffset/index.md  | 122 ++----------------
 .../web/svg/attribute/stroke-linecap/index.md |   4 +-
 files/ru/web/svg/attribute/viewbox/index.md   |  10 +-
 files/ru/web/svg/attribute/width/index.md     |   4 +-
 files/ru/web/svg/element/a/index.md           |  10 +-
 files/ru/web/svg/element/ellipse/index.md     |   6 +-
 .../ru/web/svg/element/foreignobject/index.md |   6 +-
 files/ru/web/svg/element/line/index.md        |   6 +-
 .../web/svg/element/lineargradient/index.md   |   4 +-
 files/ru/web/svg/element/path/index.md        |   6 +-
 files/ru/web/svg/element/pattern/index.md     |   6 +-
 files/ru/web/svg/element/polygon/index.md     |   6 +-
 files/ru/web/svg/element/use/index.md         |  10 +-
 25 files changed, 136 insertions(+), 190 deletions(-)

diff --git a/files/ru/glossary/grid/index.md b/files/ru/glossary/grid/index.md
index 0b7f232855b0e8..795e4f08b76459 100644
--- a/files/ru/glossary/grid/index.md
+++ b/files/ru/glossary/grid/index.md
@@ -13,6 +13,8 @@ If you place content outside of this explicit grid, or if you are relying on aut
 
 В примере ниже отображена _точная сетка_ из трёх колонок и двух рядов. The _third_ row on the grid is an _implicit grid_ row track, formed due to their being more than the six items which fill the explicit tracks.
 
+## Пример
+
 ```css hidden
 * {
   box-sizing: border-box;
@@ -54,7 +56,7 @@ If you place content outside of this explicit grid, or if you are relying on aut
 
 ```
 
-{{ EmbedLiveSample('example', '500', '330') }}
+{{ EmbedLiveSample('Пример', '500', '330') }}
 
 ## Дополнительные материалы
 
@@ -67,4 +69,4 @@ If you place content outside of this explicit grid, or if you are relying on aut
 
 ### Что почитать ещё
 
-- Руководство по CSS Grid: _[Базовые принципы CSS сеток](/ru/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)_
+- Руководство по CSS Grid: _[Базовые принципы CSS сеток](/ru/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout)_
diff --git a/files/ru/web/api/canvas_api/tutorial/compositing/index.md b/files/ru/web/api/canvas_api/tutorial/compositing/index.md
index 6ce44475fd33a6..c5936210d48285 100644
--- a/files/ru/web/api/canvas_api/tutorial/compositing/index.md
+++ b/files/ru/web/api/canvas_api/tutorial/compositing/index.md
@@ -16,8 +16,6 @@ slug: Web/API/Canvas_API/Tutorial/Compositing
 
 См. [примеры компоновки](/ru/docs/Web/API/Canvas_API/Tutorial/Compositing/Example) кода из следующих примеров.
 
-{{ EmbedLiveSample("Compositing_example", "100%", 6750, "" ,"Web/API/Canvas_API/Tutorial/Compositing/Example" )}}
-
 ## Обрезка контуров
 
 ![](canvas_clipping_path.png)Отсечённый контур похож на обычную форму холста, но он действует как маска, чтобы скрыть нежелательные части фигур. Это визуализируется на изображении справа. Форма красной звезды - наша отправочная дорожка. Все, что выходит за пределы этого пути, не будет нарисовано на холсте.
@@ -99,6 +97,6 @@ draw();
 
 Все, что нарисовано после создания отсечённого контура, появится только внутри этого пути. Вы можете видеть это чётко в линейном градиенте, который нарисован далее. После этого набирается набор из 50 случайно расположенных и масштабированных звёзд, используя `drawStar()`. Снова звезды появляются только в пределах определённого обтравочного контура.
 
-{{EmbedLiveSample("A_clip_example", "180", "180", "canvas_clip.png")}}
+{{EmbedLiveSample("Пример_обрезки", 180, 190, "canvas_clip.png")}}
 
 {{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}
diff --git a/files/ru/web/api/intersection_observer_api/timing_element_visibility/index.md b/files/ru/web/api/intersection_observer_api/timing_element_visibility/index.md
index 15a5c7cc0cc54e..86d28f84d1308c 100644
--- a/files/ru/web/api/intersection_observer_api/timing_element_visibility/index.md
+++ b/files/ru/web/api/intersection_observer_api/timing_element_visibility/index.md
@@ -13,9 +13,11 @@ slug: Web/API/Intersection_Observer_API/Timing_element_visibility
 
 Начнём!
 
-## Структура приложения: HTML
+## Создадим сайт
 
-Структура Web-приложений не очень сложна. Мы будем использовать [CSS Grid](/ru/docs/Web/CSS/CSS_Grid_Layout) для стилизации и макетирования, так что всё достаточно очевидно:
+### Структура приложения: HTML
+
+Структура Web-приложений не очень сложна. Мы будем использовать [CSS Grid](/ru/docs/Web/CSS/CSS_grid_layout) для стилизации и макетирования, так что всё достаточно очевидно:
 
 ```html
 

@@ -40,11 +42,11 @@ slug: Web/API/Intersection_Observer_API/Timing_element_visibility
 
 Это заготовка для приложения. В верхней части приложения находится блок {{HTMLElement("header")}}. Ниже - боковая панель {{HTMLElement("aside")}}, заполненная ссылками. В самом конце структуры - основное тело приложения. Приложение стартует с пустым элементом {{HTMLElement("main")}} - он будет заполнен позже с помощью JavaScript.
 
-## Стилизация приложения с помощью CSS
+### Стилизация приложения с помощью CSS
 
 После определения структуры приложения мы переходим к стилизации. Давайте рассмотрим каждый компонент по отдельности.
 
-### Основа
+#### Основа
 
 Мы создаём стили для {{HTMLElement("body")}} и {{HTMLElement("main")}} так, чтобы определить фоновый цвет и сеточную систему.
 
@@ -74,7 +76,7 @@ body {
 
 The wrapper's width is fixed at 700px so that it will fit in the available space when presented inline on MDN below.
 
-### Заголовок
+#### Заголовок
 
 Заголовок достаточно прост, так как в нашем примере он содержит небольшой текст.
 
@@ -88,7 +90,7 @@ header {
 
 Значение {{cssxref("grid-row")}} равно 1, так как мы хотим поместить заголовок в верхнюю строку сеточной системы. Более интересно использование {{cssxref("grid-column")}}; Мы указываем здесь, что блок занимает пространство с первой колонки до первой с конца (то есть последней).
 
-### Боковая панель
+#### Боковая панель
 
 Боковая панель используется для показа ссылок на другие страницы приложения. Ни одна из них не будет работать в нашем примере. Вся боковая панель нужна, чтобы просто приблизить внешний вид приложения к реальному блогу. Боковая панель создаётся с помощью элемента {{HTMLElement("aside")}}.
 
@@ -115,7 +117,7 @@ aside ul li a {
 
 Важно отметить, что значение {{cssxref("grid-column")}} здесь установлено в 1 для того, чтобы поместить панель в левую часть экрана. Если вы поменяете это значение на "-1", то панель переместится вправо, однако, в этом случае, вам понадобится немного изменить стили внутренних элементов. Значение {{cssxref("grid-row")}} равно 2, чтобы боковая панель заняла область вдоль области контента.
 
-### Область контента
+#### Область контента
 
 Контент будет содержаться в элементе {{HTMLElement("main")}}.
 
@@ -131,7 +133,7 @@ main {
 
 Главная особенность здесь - контент занимает вторую колонку и вторую строку.
 
-### Статьи
+#### Статьи
 
 Каждая статья состоит из элемента {{HTMLElement("article")}}:
 
@@ -152,7 +154,7 @@ article h2 {
 
 Эти стили создают область с белым фоном с небольшими отступами как внутри области, так и между областями.
 
-### Рекламные блоки
+#### Рекламные блоки
 
 Наконец, рекламные блоки. Нужно заметить, что каждый отдельный рекламный блок может изменять свои стили динамически (мы увидим это позже):
 
@@ -188,7 +190,7 @@ article h2 {
 
 Здесь нет никакой магии. Простой CSS.
 
-## Совмещаем с JavaScript
+### Совмещаем с JavaScript
 
 Перейдём к JavaScript-коду, который всё оживит. Начнём с глобальных переменных:
 
@@ -216,9 +218,9 @@ let refreshIntervalID = 0;
 - `adObserver`
   - : Содержит экземпляр {{domxref("IntersectionObserver")}}, используемый для вычисления наложения рекламных блоков и границ элемента `
`.
 - `refreshIntervalID`
-  - : Переменная для хранения ID интервала, который возвращается функцией {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}}. Этот интервал будет использоваться для запуска периодических обновлений рекламных блоков.
+  - : Переменная для хранения ID интервала, который возвращается функцией {{domxref("setInterval", "setInterval()")}}. Этот интервал будет использоваться для запуска периодических обновлений рекламных блоков.
 
-### Установка
+#### Установка
 
 Для первичного запуска приложения мы вызовем функцию `startup()`:
 
@@ -243,7 +245,7 @@ function startup() {
 }
 ```
 
-Вначале мы получаем элемент {{HTMLElement("main")}}, в который можем вставлять содержимое. Затем мы устанавливаем обработчик на событие {{event("visibilitychange")}}. Это событие срабатывает, когда документ меняет состояние между видим/невидим, например, когда пользователь переключается между табами. Intersection Observer API не должен засчитывать пересечение с элементом Main, если пользователь не будет в это время смотреть на вкладку. Таким образом, мы должны останавливать наши таймеры каждый раз, когда пользователь уходит со страницы. С помощью этого обработчика.
+Вначале мы получаем элемент {{HTMLElement("main")}}, в который можем вставлять содержимое. Затем мы устанавливаем обработчик на событие . Это событие срабатывает, когда документ меняет состояние между видим/невидим, например, когда пользователь переключается между табами. Intersection Observer API не должен засчитывать пересечение с элементом Main, если пользователь не будет в это время смотреть на вкладку. Таким образом, мы должны останавливать наши таймеры каждый раз, когда пользователь уходит со страницы. С помощью этого обработчика.
 
 Затем мы устанавливаем параметры для {{domxref("IntersectionObserver")}}. Параметры определяют, что IntersectionObserver должен отслеживать перекрытия с областью видимости документа (параметр `root` в значении `null`). У нас нет отступов для модификации корневой области; мы хотим отслеживать совпадение границ элементов и видимого документа именно для целей обнаружения перекрытий.
 
@@ -255,9 +257,9 @@ function startup() {
 
 В конце мы устанавливаем интервал, который каждую секунду запускает проверку - нужно ли что-то обновить. Нам необходимо второе обновление, так как в каждом отдельном рекламном блоке мы показываем таймер. В реальном приложении это не понадобится.
 
-### Обработка изменения видимости документа
+#### Обработка изменения видимости документа
 
-Давайте рассмотрим обработчик события {{event("visibilitychange")}}. Это событие срабатывает, когда документ становится видим или невидим. Как правило, это случается, когда пользователь переключается между табами. Так как Intersection Observer отслеживает только перекрытия элемента с корневым элементом, нам необходимо отдельно позаботиться о детекции видимости документа. Для этого мы используем [Page Visibility API](/ru/docs/Web/API/Page_Visibility_API).
+Давайте рассмотрим обработчик события . Это событие срабатывает, когда документ становится видим или невидим. Как правило, это случается, когда пользователь переключается между табами. Так как Intersection Observer отслеживает только перекрытия элемента с корневым элементом, нам необходимо отдельно позаботиться о детекции видимости документа. Для этого мы используем [Page Visibility API](/ru/docs/Web/API/Page_Visibility_API).
 
 ```js
 function handleVisibilityChange() {
@@ -286,7 +288,7 @@ function handleVisibilityChange() {
 
 Если документ стал видимым, мы выполняем обратный процесс: сначала мы проходим через коллекцию `previouslyVisibleAds`. Для каждого элемента мы присваиваем `dataset.lastViewStarted` значение, соответствующее текущему времени документа (в миллисекундах с момента создания документа). Это время можно узнать с помощью метода {{domxref("Performance.now", "performance.now()")}}. Затем мы присваиваем переменной `visibleAds` закешированное ранее значение `previouslyVisibleAds`, с обнулением последней переменной. Теперь рекламные блоки перезапущены и настроены, так что время простоя не будет учитываться.
 
-### Обработчик изменений наложения
+#### Обработчик изменений наложения
 
 При каждой итерации в браузерном event loop, каждый наблюдатель {{domxref("IntersectionObserver")}} проверяет, не прошёл ли какой-либо из элементов-целей через пороговые значения наблюдателя. Для каждого наблюдателя список таких целей собирается в один список и отправляется в колбэк-функцию наблюдателя. Каждый элемент списка - это {{domxref("IntersectionObserverEntry")}} объект. В нашем приложении `intersectionCallback()` выглядит так:
 
@@ -317,7 +319,7 @@ function intersectionCallback(entries) {
 
 Если рекламный блок уходит из зоны видимости, мы удаляем его из набор видимых элементов. Затем, в зависимости от значения {{domxref("IntersectionObserverEntry.intersectionRatio", "entry.ratio")}}, мы либо меняем рекламу, либо ставим на паузу. Так, если значение равно 0.0 и реклама уже была видна минимум минуту, мы вызываем функцию `replaceAd()` . В этом случае пользователь видит разные рекламные блоки, но сама реклама меняется незаметно для пользователя.
 
-### Обработка периодический событий
+#### Обработка периодический событий
 
 Каждую секунду у нас срабатывает интервал `handleRefreshInterval()`, который мы задали в функции `startup()`. Главная задача этого интервала - обновлять таймеры каждую секунду и перерисовывать значение таймеров.
 
@@ -350,7 +352,7 @@ function handleRefreshInterval() {
 
 И, наконец, если существует хоть один элемент, который нужно перерисовать, мы будем используем {{domxref("window.requestAnimationFrame", "requestAnimationFrame()")}}, чтобы отложить отрисовку каждого элемента на тот момент, когда будет формироваться следующий кадр.
 
-### Обновление таймера видимости рекламы
+#### Обновление таймера видимости рекламы
 
 Ранее мы уже видели, что если нам нужно обновить общее время видимости рекламы - мы вызываем функцию `updateAdTimer()`. Эта функция принимает в качестве аргумента объект {{domxref("HTMLDivElement")}}.
 
@@ -385,7 +387,7 @@ function updateAdTimer(adBox) {
 
 В конце мы присваиваем `lastViewStarted` текущее значение. Это делается вне зависимости от того, был ли элемент видим во время вызова функции или нет - это позволяет таймеру рекламных блоков срабатывать всегда, когда эта функция вызывается. Это имеет смысл, потому что вызов может сработать ровно в тот момент, когда реклама только появилась.
 
-### Показываем таймер рекламы
+#### Показываем таймер рекламы
 
 Внутри каждого рекламного блока мы отображаем текущее значение общего времени видимости в формате мин:сек. Для этого мы передаём в функцию `drawAdTimer` контейнер:
 
@@ -404,7 +406,7 @@ function drawAdTimer(adBox) {
 
 Метод {{jsxref("String.padStart()")}} используется для того, чтобы убедиться, что число секунд всегда состоят из двух цифр.
 
-### Строим содержимое страницы
+#### Строим содержимое страницы
 
 Функция `buildContents()` вызывается при старте приложения. Она формирует тело статьи и добавляет рекламные блоки:
 
@@ -435,7 +437,7 @@ function buildContents() {
 
 Рекламные блоки создаются с помощью функции `loadRandomAd()`. Эта функция создаёт и вставляет блоки одновременно. Как мы увидим позже, эта же функция может и заменить уже существующую рекламу. Но пока что просто добавим рекламу в существующий текст.
 
-### Создаём статью
+#### Создаём статью
 
 Для создания элемента статьи {{HTMLElement("article")}} и её содержимого мы используем функцию `createArticle()`, которая в качестве входных данных принимает строку-текст статьи.
 
@@ -458,7 +460,7 @@ function createArticle(contents) {
 
 Сперва, элемент `
` создаётся и ему присваивается уникальный ID `nextArticleID` (это просто счётчик от нуля до бесконечности). Затем мы создаём и добавляем элемент {{HTMLElement("h2")}} для заголовка и применяем HTML из переменной `contents`. Наконец, мы увеличиваем значение `nextArticleID` (таким образом, следующий элемент получит уникальный ID) и возвращаем элемент статьи обратно.
 
-### Создание рекламного блока
+#### Создание рекламного блока
 
 Функция `loadRandomAd()` имитирует загрузку рекламы и её добавление на страницу. Если вы не указываете значение для `replaceBox`, создаётся и применяется новый контейнер для рекламы. Если вы указали `replaceBox`, этот контейнер рассматривается, как уже существующий элемент. Вместо создания нового, существующий элемент изменяется, чтобы содержать актуальные данные. Это помогает избежать риска неэффективной перерисовки элементов, если вы сначала будете удалять элемент из DOM, а затем вставлять новый.
 
@@ -545,7 +547,7 @@ function loadRandomAd(replaceBox) {
 
 Если `replaceBox` содержит какое-то значение, мы рассматриваем его как элемент рекламного блока. Мы завершаем наблюдение за элементом с помощью {{domxref("IntersectionObserver.unobserve()")}}. Затем собираем в локальные переменные данные из каждого свойства элемента: заголовок, тело и таймер.
 
-Если никакое значение не указано для `replaceBox`, мы создаём новый элемент. Создаётся новый контейнер {{HTMLElement("div")}}. Его CSS-параметры задаются с помощью класса `"ad"`. Затем создаются заголовок рекламного блока, его текст и таймер. Соотстветвенно, это {{HTMLElement("h2")}}, {{HTMLElement("p")}} и {{HTMLElement("div")}}. Эти элементы применяются к контейнеру `adBox`.
+Если никакое значение не указано для `replaceBox`, мы создаём новый элемент. Создаётся новый контейнер {{HTMLElement("div")}}. Его CSS-параметры задаются с помощью класса `"ad"`. Затем создаются заголовок рекламного блока, его текст и таймер. Соответственно, это {{HTMLElement("h2")}}, {{HTMLElement("p")}} и {{HTMLElement("div")}}. Эти элементы применяются к контейнеру `adBox`.
 
 После этого разветвления наш код вновь возвращается к единому. Фоновый цвет рекламных блоков присваивается соответственно записям. Элементам присваиваются классы и содержимое.
 
@@ -555,7 +557,7 @@ function loadRandomAd(replaceBox) {
 
 Если мы создаём новую рекламу, мы должны применить элемент к страницы с помощью {{domxref("Node.appendChild", "Document.appendChild()")}}. Если мы лишь заменяем рекламный блок - он уже представлен в DOM и всё, что нам нужно сделать - это обновить его. Затем мы вызываем функцию {{domxref("IntersectionObserver.observe", "observe()")}}. `adObserver` начинает отслеживать изменения перекрытия элементов в видимой области приложения. С этого момента любой рекламный блок, который становится на 100% скрыт или хотя бы на один пиксель видим или преодолевает порог в 75% видимости в любом направлении, запускает вычисление таймингов и обновление содержимого таймеров.
 
-### Замена существующей рекламы
+#### Замена существующей рекламы
 
 Наша [функция обработки перекрытия](#handling_intersection_changes) отслеживает рекламные блоки. Когда они становятся на 100% и общее время их видимости достаточное для того, рекламный блок заменяется на новый. Когда это происходит, вызывается функция `replaceAd()`.
 
@@ -583,7 +585,7 @@ function replaceAd(adBox) {
 
 Вы можете увидеть результат в окне ниже. Попробуйте экспериментировать с прокруткой и понаблюдайте за тем, как изменение видимости затрагивает каждый таймер. Кроме того, обратите внимание, что каждый рекламный блок обновляется только в том случае, если он уже был видим в течение минуты.
 
-{{EmbedLiveSample("fullpage_example", 750, 800)}}
+{{EmbedLiveSample("Создадим_сайт", 750, 800)}}
 
 ## Смотрите также
 
diff --git a/files/ru/web/api/mediastream_recording_api/recording_a_media_element/index.md b/files/ru/web/api/mediastream_recording_api/recording_a_media_element/index.md
index d014b271732b57..5cb05a0e64aa7d 100644
--- a/files/ru/web/api/mediastream_recording_api/recording_a_media_element/index.md
+++ b/files/ru/web/api/mediastream_recording_api/recording_a_media_element/index.md
@@ -7,7 +7,9 @@ slug: Web/API/MediaStream_Recording_API/Recording_a_media_element
 
 В статье Использование интерфейса MediaStream Recording API демонстрируется использование объекта типа {{domxref("MediaRecorder")}} для захвата потока, представляющего объект типа {{domxref("MediaStream")}} , сгенерированного аппаратными средствами устройства и возвращаемого методом {{domxref("MediaDevices.getUserMedia()","navigator.mediaDevices.getUserMedia()")}}, но можно также использовать HTML медиа элемент (а именно {{HTMLElement("audio")}} или {{HTMLElement("video")}}) в качестве источника потока `MediaStream` для его записи. В этой статье рассматривается пример выполняющий это.
 
-## HTML содержимое
+## Пример записи с помощью медиа элемента
+
+### HTML
 
 ```html hidden
 

@@ -101,11 +103,11 @@ h2 {
 }
 ```
 
-## JavaScript
+### JavaScript
 
 Теперь давайте посмотрим на код JavaScript
 
-### Установка глобальных переменных
+#### Установка глобальных переменных
 
 Мы начнём с установления некоторых глобальных переменных, которые нам понадобятся.
 
@@ -122,7 +124,7 @@ let recordingTimeMS = 5000;
 
 Большинство из них являются ссылками на элементы, с которыми нам нужно работать. Последняя, `recordingTimeMS`, установлена на 5000 миллисекунд (5 секунд);.
 
-### Используемые функции
+#### Используемые функции
 
 Далее мы создадим несколько служебных функций, которые будут использованы позже.
 
@@ -142,7 +144,7 @@ function wait(delayInMS) {
 
 The `wait()` function returns a new {{jsxref("Promise")}} which resolves once the specified number of milliseconds have elapsed. It works by using an [arrow function](/ru/docs/Web/JavaScript/Reference/Functions/Arrow_functions) which calls {{domxref("window.setTimeout()")}}, specifying the promise's resolution handler as the timeout handler function. That lets us use promise syntax when using timeouts, which can be very handy when chaining promises, as we'll see later.
 
-### Starting media recording
+#### Starting media recording
 
 The `startRecording()` function handles starting the recording process:
 
@@ -173,9 +175,9 @@ function startRecording(stream, lengthInMS) {
 - Line 2
   - : Creates the `MediaRecorder` that will handle recording the input `stream`.
 - Line 3
-  - : Creates an empty array, `data`, which will be used to hold the {{domxref("Blob")}}s of media data provided to our {{domxref("MediaRecorder.ondataavailable", "ondataavailable")}} event handler.
+  - : Creates an empty array, `data`, which will be used to hold the {{domxref("Blob")}}s of media data provided to our {{domxref("MediaRecorder/dataavailable_event", "ondataavailable")}} event handler.
 - Line 5
-  - : Sets up the handler for the {{event("dataavailable")}} event. The received event's `data` property is a {{domxref("Blob")}} that contains the media data. The event handler simply pushes the `Blob` onto the `data` array.
+  - : Sets up the handler for the {{domxref("MediaRecorder.dataavailable_event", "dataavailable")}} event. The received event's `data` property is a {{domxref("Blob")}} that contains the media data. The event handler simply pushes the `Blob` onto the `data` array.
 - Lines 6-7
   - : Starts the recording process by calling {{domxref("MediaRecorder.start", "recorder.start()")}}, and outputs a message to the log with the updated state of the recorder and the number of seconds it will be recording.
 - Lines 9-12
@@ -185,7 +187,7 @@ function startRecording(stream, lengthInMS) {
 - Lines 18-22
   - : These lines create a new `Promise` which is fulfilled when both of the two `Promise`s (`stopped` and `recorded`) have resolved. Once that resolves, the array data is returned by `startRecording()` to its caller.
 
-### Stopping the input stream
+#### Stopping the input stream
 
 The `stop()` function simply stops the input media:
 
@@ -197,7 +199,7 @@ function stop(stream) {
 
 This works by calling {{domxref("MediaStream.getTracks()")}}, using {{jsxref("Array.forEach", "forEach()")}} to call {{domxref("MediaStreamTrack.stop()")}} on each track in the stream.
 
-### Getting an input stream and setting up the recorder
+#### Getting an input stream and setting up the recorder
 
 Now let's look at the most intricate piece of code in this example: our event handler for clicks on the start button:
 
@@ -238,7 +240,7 @@ startButton.addEventListener(
 );
 ```
 
-When a {{event("click")}} event occurs, here's what happens:
+When a {{domxref("Element/click_event", "click")}} event occurs, here's what happens:
 
 - Lines 2-4
   - : {{domxref("navigator.mediaDevices.getUserMedia()")}} is called to request a new {{domxref("MediaStream")}} that has both video and audio tracks. This is the stream we'll record.
@@ -248,7 +250,7 @@ When a {{event("click")}} event occurs, here's what happens:
   - : When the preview video begins to play, we know there's media to record, so we respond by calling the [`startRecording()`](#starting_media_recording) function we created earlier, passing in the preview video stream (as the source media to be recorded) and `recordingTimeMS` as the number of milliseconds of media to record. As mentioned before, `startRecording()` returns a {{jsxref("Promise")}} whose resolution handler is called (receiving as input an array of {{domxref("Blob")}} objects containing the chunks of recorded media data) once recording has completed.
 - Lines 11-15
 
-  - : The recording process's resolution handler receives as input an array of media data `Blob`s locally known as `recordedChunks`. The first thing we do is merge the chunks into a single {{domxref("Blob")}} whose MIME type is `"video/webm"` by taking advantage of the fact that the {{domxref("Blob.Blob", "Blob()")}} constructor concatenates arrays of objects into one object. Then {{domxref("URL.createObjectURL()")}} is used to create an URL that references the blob; this is then made the value of the recorded video playback element's [`src`](/ru/docs/Web/HTML/Element/video#src) attribute (so that you can play the video from the blob) as well as the target of the download button's link.
+  - : The recording process's resolution handler receives as input an array of media data `Blob`s locally known as `recordedChunks`. The first thing we do is merge the chunks into a single {{domxref("Blob")}} whose MIME type is `"video/webm"` by taking advantage of the fact that the {{domxref("Blob.Blob", "Blob()")}} constructor concatenates arrays of objects into one object. Then {{domxref("URL.createObjectURL_static", "URL.createObjectURL()")}} is used to create an URL that references the blob; this is then made the value of the recorded video playback element's [`src`](/ru/docs/Web/HTML/Element/video#src) attribute (so that you can play the video from the blob) as well as the target of the download button's link.
 
     Then the download button's [`download`](/ru/docs/Web/HTML/Element/a#download) attribute is set. While the `download` attribute can be a Boolean, you can also set it to a string to use as the name for the downloaded file. So by setting the download link's `download` attribute to "RecordedVideo.webm", we tell the browser that clicking the button should download a file named `"RecordedVideo.webm"` whose contents are the recorded video.
 
@@ -257,9 +259,9 @@ When a {{event("click")}} event occurs, here's what happens:
 - Line 20
   - : The `catch()` for all the `Promise`s outputs the error to the logging area by calling our `log()` function.
 
-### Handling the stop button
+#### Handling the stop button
 
-The last bit of code adds a handler for the {{event("click")}} event on the stop button using {{domxref("EventTarget.addEventListener", "addEventListener()")}}:
+The last bit of code adds a handler for the {{domxref("Element/click_event", "click")}} event on the stop button using {{domxref("EventTarget.addEventListener", "addEventListener()")}}:
 
 ```js
 stopButton.addEventListener(
@@ -277,7 +279,7 @@ This simply calls the [`stop()`](#stopping_the_input_stream) function we covered
 
 When put all together with the rest of the HTML and the CSS not shown above, it looks and works like this:
 
-{{ EmbedLiveSample('Example', 600, 440, "", "", "", "camera;microphone") }}
+{{ EmbedLiveSample("Пример_записи_с_помощью_медиа_элемента", 600, 440) }}
 
 You can {{LiveSampleLink("Example", "take a look at all the code")}}, including the parts hidden above because they aren't critical to the explanation of how the APIs are being used.
 
diff --git a/files/ru/web/css/mix-blend-mode/index.md b/files/ru/web/css/mix-blend-mode/index.md
index 36c8359ab5cffe..62e5d5d9b82440 100644
--- a/files/ru/web/css/mix-blend-mode/index.md
+++ b/files/ru/web/css/mix-blend-mode/index.md
@@ -47,6 +47,8 @@ mix-blend-mode: unset;
 
 ## Примеры
 
+### Влияние различных значений режима смешивания
+
 ```html hidden
 

   

@@ -624,7 +626,7 @@ body {
 }
 ```
 
-{{EmbedLiveSample("mix-blend-mode", "100%", 1600, "", "", "example-outcome-frame")}}
+{{EmbedLiveSample("Влияние_различных_значений_режима_смешивания", "100%", 1600)}}
 
 ### Пример HTML
 
diff --git a/files/ru/web/svg/attribute/attributename/index.md b/files/ru/web/svg/attribute/attributename/index.md
index 035796ff47e7b7..11f4b3d8d26fc0 100644
--- a/files/ru/web/svg/attribute/attributename/index.md
+++ b/files/ru/web/svg/attribute/attributename/index.md
@@ -9,6 +9,8 @@ slug: Web/SVG/Attribute/attributeName
 
 Четыре элемента используют данный атрибут: {{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateTransform")}} и {{SVGElement("set")}}
 
+## Пример
+
 ```css hidden
 html,
 body,
@@ -31,7 +33,7 @@ svg {
 
 ```
 
-{{EmbedLiveSample("topExample", "400", "250")}}
+{{EmbedLiveSample("Пример", 400, 250)}}
 
 ## Контекст использования
 
diff --git a/files/ru/web/svg/attribute/d/index.md b/files/ru/web/svg/attribute/d/index.md
index 359cc8d38ca00e..76e9f84051da79 100644
--- a/files/ru/web/svg/attribute/d/index.md
+++ b/files/ru/web/svg/attribute/d/index.md
@@ -7,10 +7,12 @@ slug: Web/SVG/Attribute/d
 
 Атрибут **`d`** предоставляет определение пути для рисования.
 
-Определение пути - это [список команд пути](#Path_commands), в которых каждая команда состоит из буквы и некоторых чисел, представляющих параметр команды. Ниже приведены все возможные команды.
+Определение пути - это [список команд пути](#path_commands), в которых каждая команда состоит из буквы и некоторых чисел, представляющих параметр команды. Ниже приведены все возможные команды.
 
 Три элемента используют этот атрибут: {{SVGElement("path")}}, {{SVGElement("glyph")}}, и {{SVGElement("missing-glyph")}}
 
+## Пример
+
 ```css hidden
 html,
 body,
@@ -32,7 +34,7 @@ svg {
 
 ```
 
-{{EmbedLiveSample('Example', '100%', 200)}}
+{{EmbedLiveSample("Пример", '100%', 200)}}
 
 ## path
 
diff --git a/files/ru/web/svg/attribute/dur/index.md b/files/ru/web/svg/attribute/dur/index.md
index c4292e841dae20..f537fb94150fb7 100644
--- a/files/ru/web/svg/attribute/dur/index.md
+++ b/files/ru/web/svg/attribute/dur/index.md
@@ -9,6 +9,8 @@ slug: Web/SVG/Attribute/dur
 
 Пять элементов используют данный атрибут: {{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, и {{SVGElement("set")}}
 
+## Пример
+
 ```css hidden
 html,
 body,
@@ -40,7 +42,7 @@ svg {
 
 ```
 
-{{EmbedLiveSample("topExample", "220", "150")}}
+{{EmbedLiveSample("Пример", 220, 150)}}
 
 ## Примечания к использованию
 
diff --git a/files/ru/web/svg/attribute/id/index.md b/files/ru/web/svg/attribute/id/index.md
index 6aeffd0a35cb4c..8f5c42a2688570 100644
--- a/files/ru/web/svg/attribute/id/index.md
+++ b/files/ru/web/svg/attribute/id/index.md
@@ -9,6 +9,8 @@ slug: Web/SVG/Attribute/id
 
 Этот атрибут используется всеми элементами.
 
+## Пример
+
 ```html
 
 ```
 
-{{EmbedLiveSample("topExample", "120", "120")}}
+{{EmbedLiveSample("Пример", 120, 120)}}
 
 ## Примечания по использованию
 
diff --git a/files/ru/web/svg/attribute/r/index.md b/files/ru/web/svg/attribute/r/index.md
index 452f2c80992371..c1d51f06bcd141 100644
--- a/files/ru/web/svg/attribute/r/index.md
+++ b/files/ru/web/svg/attribute/r/index.md
@@ -7,6 +7,8 @@ slug: Web/SVG/Attribute/r
 
 Этот атрибут используют два элемента: {{SVGElement("circle")}}, и {{SVGElement("radialGradient")}}
 
+## Пример
+
 ```css hidden
 html,
 body,
@@ -40,7 +42,7 @@ svg {
 
 ```
 
-{{EmbedLiveSample('topExample', '100%', 200)}}
+{{EmbedLiveSample("Пример", '100%', 200)}}
 
 ## circle
 
diff --git a/files/ru/web/svg/attribute/rx/index.md b/files/ru/web/svg/attribute/rx/index.md
index b5af6333d683ce..8373e170ba2889 100644
--- a/files/ru/web/svg/attribute/rx/index.md
+++ b/files/ru/web/svg/attribute/rx/index.md
@@ -9,6 +9,8 @@ slug: Web/SVG/Attribute/rx
 
 Два элемента используют этот атрибут: {{SVGElement("ellipse")}} и {{SVGElement("rect")}}
 
+## Пример
+
 ```css hidden
 html,
 body,
@@ -29,7 +31,7 @@ svg {
 
 ```
 
-{{EmbedLiveSample('topExample', '100%', 200)}}
+{{EmbedLiveSample("Пример", '100%', 200)}}
 
 ## ellipse
 
diff --git a/files/ru/web/svg/attribute/ry/index.md b/files/ru/web/svg/attribute/ry/index.md
index 24ef563a7919c1..1342e2cbdc8b9e 100644
--- a/files/ru/web/svg/attribute/ry/index.md
+++ b/files/ru/web/svg/attribute/ry/index.md
@@ -9,6 +9,8 @@ slug: Web/SVG/Attribute/ry
 
 Два элемента используют этот атрибут: [``](/ru/docs/Web/SVG/Element/ellipse) и [``](/ru/docs/Web/SVG/Element/rect)
 
+## Пример
+
 ```css hidden
 html,
 body,
@@ -29,7 +31,7 @@ svg {
 
 ```
 
-{{EmbedLiveSample('topExample', '100%', 200)}}
+{{EmbedLiveSample("Пример", '100%', 200)}}
 
 ## ellipse
 
diff --git a/files/ru/web/svg/attribute/stroke-dashoffset/index.md b/files/ru/web/svg/attribute/stroke-dashoffset/index.md
index 6110d13f5795cb..7294fecd7611f9 100644
--- a/files/ru/web/svg/attribute/stroke-dashoffset/index.md
+++ b/files/ru/web/svg/attribute/stroke-dashoffset/index.md
@@ -5,7 +5,7 @@ slug: Web/SVG/Attribute/stroke-dashoffset
 
 > **Примечание:** **Прежняя редакция:** « [Справочник SVG атрибутов](/ru/docs/Web/SVG/Attribute)
 > Этот атрибут определяет смещение обводки относительно начального положения.
-> При использовании [\](/ru/SVG/Content_type#Percentage), значение будет вычисляться от текущего viewport.
+> При использовании [\](/ru/docs/SVG/Content_type#percentage), значение будет вычисляться от текущего viewport.
 > Значение может быть отрицательным.
 
 {{SVGRef}}
@@ -15,6 +15,8 @@ slug: Web/SVG/Attribute/stroke-dashoffset
 
 Как атрибут представления, он может применяться к любому элементу, но влияет только на следующие одиннадцать элементов: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}
 
+## Пример
+
 ```css hidden
 html,
 body,
@@ -75,120 +77,20 @@ svg {
 
 ```
 
-{{EmbedLiveSample('topExample', '100%', 200)}}
+{{EmbedLiveSample("Пример", '100%', 200)}}
 
 ## Usage context
 
-| Категория         | Атрибут оформления                                                                                      |
-| ----------------- | ------------------------------------------------------------------------------------------------------- |
-| Значение          | [\](/en/SVG/Content_type#Percentage) \| [\](/en/SVG/Content_type#Length) \| inherit |
-| Исходное значение | 0                                                                                                       |
-| Анимируемый       | Да                                                                                                      |
-| Спецификация      | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG11/painting.html#StrokeDashoffsetProperty)              |
-
-## Пример
-
-### HTML
-
-```html
-
-
-  
-  
-  
-  
-  
-  
-
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  
-
-```
-
-### Результат
-
-{{EmbedLiveSample('Пример', '220', '240')}}
+| Категория         | Атрибут оформления                                                                              |
+| ----------------- | ----------------------------------------------------------------------------------------------- |
+| Значение          | [\](/ru/docs/Web/SVG#percentage) \| [\](/ru/docs/Web/SVG#length) \| inherit |
+| Исходное значение | 0                                                                                               |
+| Анимируемый       | Да                                                                                              |
+| Спецификация      | [SVG 1.1 (2nd Edition)](https://www.w3.org/TR/SVG11/painting.html#StrokeDashoffsetProperty)     |
 
 ## Элементы
 
 Следующие элементы могут использовать атрибут `stroke-dashoffset`
 
-- [Элементы форм](/ru/SVG/Element#Shape)
-- [Текстовые элементы](/ru/SVG/Element#TextContent)
+- [Элементы форм](/ru/docs/SVG/Element#shape)
+- [Текстовые элементы](/ru/docs/SVG/Element#textcontent)
diff --git a/files/ru/web/svg/attribute/stroke-linecap/index.md b/files/ru/web/svg/attribute/stroke-linecap/index.md
index d9b5295cce0afd..cbf2b7cc1ed4d4 100644
--- a/files/ru/web/svg/attribute/stroke-linecap/index.md
+++ b/files/ru/web/svg/attribute/stroke-linecap/index.md
@@ -11,6 +11,8 @@ slug: Web/SVG/Attribute/stroke-linecap
 
 В качестве атрибута представления он может применяться к любому элементу, но он влияет только на следующие семь элементов: {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polyline')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}
 
+## Пример
+
 ```css hidden
 html,
 body,
@@ -38,7 +40,7 @@ svg {
 
 ```
 
-{{EmbedLiveSample('topExample', '100%', 200)}}
+{{EmbedLiveSample("Пример", '100%', 200)}}
 
 ## Нотации
 
diff --git a/files/ru/web/svg/attribute/viewbox/index.md b/files/ru/web/svg/attribute/viewbox/index.md
index 71ec305a252096..6c487592ddc332 100644
--- a/files/ru/web/svg/attribute/viewbox/index.md
+++ b/files/ru/web/svg/attribute/viewbox/index.md
@@ -3,12 +3,14 @@ title: viewBox
 slug: Web/SVG/Attribute/viewBox
 ---
 
-« [SVG Attribute reference home](/en/SVG/Attribute)
+{{SVGRef}}
 
-`Аттрибут viewBox` определяет расположение и размеры окна отображения SVG.
+Аттрибут `viewBox` определяет расположение и размеры окна отображения SVG.
 
 Значение атрибута `viewBox` — это набор четырёх чисел: `min-x`, `min-y`, `width` и `height`, — разделённых пробелами и/или запятой, которые задают прямоугольник в пользовательском пространстве, стороны которого определяют границы окна отображения элемента SVG (не [браузера](/ru/docs/%D0%A1%D0%BB%D0%BE%D0%B2%D0%B0%D1%80%D1%8C/Viewport)).
 
+## Пример
+
 ```
 html, body, svg {
   height:100%
@@ -68,7 +70,7 @@ svg:not(:root) {
 
 ```
 
-{{EmbedLiveSample('topExample', '100%', 200)}}
+{{EmbedLiveSample("Пример", '100%', 200)}}
 
 На отображение с `viewBox` также влияет атрибут {{ SVGAttr("preserveAspectRatio") }}.
 
@@ -123,4 +125,4 @@ svg:not(:root) {
 
 ## Смотрите также
 
-- [SVG Getting Started: Positions](/en/SVG/Tutorial/Positions)
+- [SVG Getting Started: Positions](/ru/docs/Web/SVG/Tutorial/Positions)
diff --git a/files/ru/web/svg/attribute/width/index.md b/files/ru/web/svg/attribute/width/index.md
index c6df802c6d892b..8be336d23c922a 100644
--- a/files/ru/web/svg/attribute/width/index.md
+++ b/files/ru/web/svg/attribute/width/index.md
@@ -9,6 +9,8 @@ slug: Web/SVG/Attribute/width
 
 Двадцать пять элементов используют эти атрибуты: {{SVGElement('feBlend')}}, {{SVGElement('feColorMatrix')}}, {{SVGElement('feComponentTransfer')}}, {{SVGElement('feComposite')}}, {{SVGElement('feConvolveMatrix')}}, {{SVGElement('feDiffuseLighting')}}, {{SVGElement('feDisplacementMap')}}, {{SVGElement('feDropShadow')}}, {{SVGElement('feFlood')}}, {{SVGElement('feGaussianBlur')}}, {{SVGElement('feImage')}}, {{SVGElement('feMerge')}}, {{SVGElement('feMorphology')}}, {{SVGElement('feOffset')}}, {{SVGElement('feSpecularLighting')}}, {{SVGElement('feTile')}}, {{SVGElement('feTurbulence')}}, {{SVGElement('filter')}}, {{SVGElement('foreignObject')}}, {{SVGElement('image')}}, {{SVGElement('mask')}}, {{SVGElement('pattern')}}, {{SVGElement('rect')}}, {{SVGElement('svg')}}, and {{SVGElement('use')}}
 
+## Пример
+
 ```css hidden
 html,
 body,
@@ -26,7 +28,7 @@ svg {
 
 ```
 
-{{EmbedLiveSample('topExample', '100%', 200)}}
+{{EmbedLiveSample("Пример", '100%', 200)}}
 
 ## feBlend
 
diff --git a/files/ru/web/svg/element/a/index.md b/files/ru/web/svg/element/a/index.md
index b89ddf829ce41c..19424f026d606e 100644
--- a/files/ru/web/svg/element/a/index.md
+++ b/files/ru/web/svg/element/a/index.md
@@ -9,6 +9,8 @@ SVG элемент **\** создаёт гиперссылку на друг
 
 Элемент `` является контейнером. Это означает, что вы можете обернуть текст в ссылку (как в HTML). Таким же образом можно обернуть фигуру.
 
+## Пример
+
 ```css hidden
 @namespace svg url(http://www.w3.org/2000/svg);
 html,
@@ -55,9 +57,9 @@ svg|a:hover, svg|a:active {
 }
 ```
 
-{{EmbedLiveSample('Exemple', 100, 100)}}
+{{EmbedLiveSample("Пример", 100, 100)}}
 
-> **Предупреждение:** Поскольку этот элемент разделяет своё имя с [элементом HTML ``](/ru/docs/Web/HTML/Element/A), выбор `a` через CSS или [`querySelector`](/ru/docs/Web/API/Document/querySelector) может выбрать не тот тип элемента. Попробуйте [правило `@namespace`](/ru/docs/Web/CSS/@namespace), чтобы разделять их.
+> **Предупреждение:** Поскольку этот элемент разделяет своё имя с [элементом HTML ``](/ru/docs/Web/HTML/Element/a), выбор `a` через CSS или [`querySelector`](/ru/docs/Web/API/Document/querySelector) может выбрать не тот тип элемента. Попробуйте [правило `@namespace`](/ru/docs/Web/CSS/@namespace), чтобы разделять их.
 
 ## Атрибуты
 
@@ -74,7 +76,7 @@ svg|a:hover, svg|a:active {
   - : Разделённый пробелами список URL при переходе по которым браузер будет отправлять [`POST`](/ru/docs/Web/HTTP/Methods/POST) запросы с телом `PING` (в фоне). Обычно используется для трекинга.
     _Тип_: **[\](/docs/Web/SVG/Content_type#List-of-Ts)**; _Значение по умолчанию_: _none_; _Анимируем_: **нет**
 - [`referrerpolicy`](/ru/docs/Web/HTML/Element/a#referrerpolicy) {{experimental_inline}}
-  - : Какой [referrer](/ru/docs/Web/HTTP/Заголовки/Referer) отправить при получении {{Glossary("URL")}}.
+  - : Какой [referrer](/ru/docs/Web/HTTP/Headers/Referer) отправить при получении {{Glossary("URL")}}.
     _Тип_: `no-referrer`|`no-referrer-when-downgrade`|`same-origin`|`origin`|`strict-origin`|`origin-when-cross-origin`|`strict-origin-when-cross-origin`|`unsafe-url` ; _Значение по умолчанию_: _none_; _Анимируем_: **нет**
 - [`rel`](/ru/docs/Web/HTML/Element/a#rel) {{experimental_inline}}
   - : Отношение между целевым объектом и объектом link.
@@ -91,7 +93,7 @@ svg|a:hover, svg|a:active {
 
 ### Глобальные атрибуты
 
-- [Core Attributes](/docs/Web/SVG/Attribute/Core)
+- [Core Attributes](/ru/docs/Web/SVG/Attribute/Core)
   - : Наиболее используемые: {{SVGAttr('id')}}, {{SVGAttr('lang')}}, {{SVGAttr('tabindex')}}
 - [Styling Attributes](/docs/Web/SVG/Attribute/Styling)
   - : {{SVGAttr('class')}}, {{SVGAttr('style')}}
diff --git a/files/ru/web/svg/element/ellipse/index.md b/files/ru/web/svg/element/ellipse/index.md
index 2664417aad1dbe..fe739703cffe76 100644
--- a/files/ru/web/svg/element/ellipse/index.md
+++ b/files/ru/web/svg/element/ellipse/index.md
@@ -9,6 +9,8 @@ slug: Web/SVG/Element/ellipse
 
 > **Примечание:** Сам по себе элемент `ellipse` не позволяет задать точное его расположение (например, нельзя сразу отобразить эллипс, повёрнутый на 45**°**), однако его можно повернуть с помощью атрибута {{SVGAttr("transform")}}.
 
+## Пример
+
 ```css hidden
 html,
 body,
@@ -23,7 +25,7 @@ svg {
 
 ```
 
-{{EmbedLiveSample('LiveSample', 100, '100%')}}
+{{EmbedLiveSample("Пример", 100, '100%')}}
 
 ## Атрибуты
 
@@ -49,7 +51,7 @@ svg {
 
 ### Глобальные Атрибуты
 
-- [Основные атрибуты](/docs/Web/SVG/Attribute/Core)
+- [Основные атрибуты](/ru/docs/Web/SVG/Attribute/Core)
   - : Самые важные: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}
 - [Атрибуты стиля](/docs/Web/SVG/Attribute/Styling)
   - : {{SVGAttr('class')}}, {{SVGAttr('style')}}
diff --git a/files/ru/web/svg/element/foreignobject/index.md b/files/ru/web/svg/element/foreignobject/index.md
index 83a8da486b4bd0..fe93cef1fc88c1 100644
--- a/files/ru/web/svg/element/foreignobject/index.md
+++ b/files/ru/web/svg/element/foreignobject/index.md
@@ -7,6 +7,8 @@ slug: Web/SVG/Element/foreignObject
 Элемент **``** [SVG](/ru/docs/Web/SVG) позволяет включать другое пространство имён XML.
 В контексте браузера это, скорее всего, XHTML / HTML.
 
+## Пример
+
 ```css hidden
 html,
 body,
@@ -47,7 +49,7 @@ svg {
 
 ```
 
-{{EmbedLiveSample('Exemple', 150, '100%')}}
+{{EmbedLiveSample("Пример", 150, '100%')}}
 
 ## Атрибуты
 
@@ -70,7 +72,7 @@ svg {
 
 ### Глобальные атрибуты
 
-- [Core Attributes](/docs/Web/SVG/Attribute/Core)
+- [Core Attributes](/ru/docs/Web/SVG/Attribute/Core)
   - : Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}
 - [Styling Attributes](/docs/Web/SVG/Attribute/Styling)
   - : {{SVGAttr('class')}}, {{SVGAttr('style')}}
diff --git a/files/ru/web/svg/element/line/index.md b/files/ru/web/svg/element/line/index.md
index 0ad92c33b2c98a..ab49e9914f4904 100644
--- a/files/ru/web/svg/element/line/index.md
+++ b/files/ru/web/svg/element/line/index.md
@@ -7,6 +7,8 @@ slug: Web/SVG/Element/line
 
 Элемент **``** одна из базовых фигур SVG, используемая для создания линии, связывающей две точки.
 
+## Пример
+
 ```css hidden
 html,
 body,
@@ -24,7 +26,7 @@ svg {
 
 ```
 
-{{EmbedLiveSample('Example', 100, 100)}}
+{{EmbedLiveSample("Пример", 100, 100)}}
 
 ## Атрибуты
 
@@ -46,7 +48,7 @@ svg {
 
 ### Глобальные атрибуты
 
-- [Основные атрибуты](/docs/Web/SVG/Attribute/Core)
+- [Основные атрибуты](/ru/docs/Web/SVG/Attribute/Core)
   - : В первую очередь: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}
 - [Атрибуты оформления (стилей)](/docs/Web/SVG/Attribute/Styling)
   - : {{SVGAttr('class')}}, {{SVGAttr('style')}}
diff --git a/files/ru/web/svg/element/lineargradient/index.md b/files/ru/web/svg/element/lineargradient/index.md
index b3f69455cf5bdd..7fa69b21cc36eb 100644
--- a/files/ru/web/svg/element/lineargradient/index.md
+++ b/files/ru/web/svg/element/lineargradient/index.md
@@ -9,6 +9,8 @@ slug: Web/SVG/Element/linearGradient
 
 > **Примечание:** Не путайте с CSS {{cssxref('linear-gradient()')}}, CSS-градиенты могут быть применены только к HTML-элементам, тогда как SVG-градиент применим только к SVG-элементам.
 
+## Пример
+
 ```css hidden
 html,
 body,
@@ -34,7 +36,7 @@ svg {
 
 ```
 
-{{EmbedLiveSample('Example', 150, '100%')}}
+{{EmbedLiveSample("Пример", 150, '100%')}}
 
 ## Атрибуты
 
diff --git a/files/ru/web/svg/element/path/index.md b/files/ru/web/svg/element/path/index.md
index 4778d028e45806..62294ec20b8ba7 100644
--- a/files/ru/web/svg/element/path/index.md
+++ b/files/ru/web/svg/element/path/index.md
@@ -7,6 +7,8 @@ slug: Web/SVG/Element/path
 
 Элемент **``** является общим элементом для описания фигуры. Все базовые фигуры могут быть созданы с помощью элемента path.
 
+## Пример
+
 ```css hidden
 html,
 body,
@@ -26,7 +28,7 @@ svg {
 
 ```
 
-{{EmbedLiveSample('Example', 100, 100)}}
+{{EmbedLiveSample("Пример", 100, 100)}}
 
 ## Атрибуты
 
@@ -39,7 +41,7 @@ svg {
 
 ### Глобальные атрибуты
 
-- [Атрибуты ядра](/docs/Web/SVG/Attribute/Core)
+- [Атрибуты ядра](/ru/docs/Web/SVG/Attribute/Core)
   - : Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}
 - [Атрибуты стиля](/docs/Web/SVG/Attribute/Styling)
   - : {{SVGAttr('class')}}, {{SVGAttr('style')}}
diff --git a/files/ru/web/svg/element/pattern/index.md b/files/ru/web/svg/element/pattern/index.md
index 8113651313c2b9..b38b7ef5f57eaa 100644
--- a/files/ru/web/svg/element/pattern/index.md
+++ b/files/ru/web/svg/element/pattern/index.md
@@ -7,6 +7,8 @@ slug: Web/SVG/Element/pattern
 Элемент **``** определяет графический объект, который может быть перерисован с повторяющимися координатами **x** и **y** («мозаичным»), чтобы покрыть область.
 На ссылку `` ссылаются атрибуты {{SVGAttr("fill")}} и / или {{SVGAttr("stroke")}} на других [графических элементах](/ru/docs/Web/SVG/Tutorial/Basic_Shapes) , чтобы заполнить или обвести эти элементы указанным шаблоном.
 
+## Пример
+
 ```css hidden
 html,
 body,
@@ -34,7 +36,7 @@ svg {
 
 ```
 
-{{EmbedLiveSample('Exemple', 150, '100%')}}
+{{EmbedLiveSample("Пример", 150, '100%')}}
 
 ## Атрибуты
 
@@ -82,7 +84,7 @@ svg {
 
 ### Глобальные атрибуты
 
-- [Core Attributes](/docs/Web/SVG/Attribute/Core)
+- [Core Attributes](/ru/docs/Web/SVG/Attribute/Core)
   - : Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}
 - [Styling Attributes](/docs/Web/SVG/Attribute/Styling)
   - : {{SVGAttr('class')}}, {{SVGAttr('style')}}
diff --git a/files/ru/web/svg/element/polygon/index.md b/files/ru/web/svg/element/polygon/index.md
index e4aa50a4423231..25423ee4d775fe 100644
--- a/files/ru/web/svg/element/polygon/index.md
+++ b/files/ru/web/svg/element/polygon/index.md
@@ -7,6 +7,8 @@ slug: Web/SVG/Element/polygon
 
 Элемент **``** описывает замкнутую фигуру, состоящую из набора последовательно соединённых между собой прямых линий. Для создания незамкнутых фигур используется элемент {{SVGElement("polyline")}}.
 
+## Пример
+
 ```css hidden
 html,
 body,
@@ -25,7 +27,7 @@ svg {
 
 ```
 
-{{EmbedLiveSample('Exemple', 100, 100)}}
+{{EmbedLiveSample("Пример", 100, 100)}}
 
 ## Атрибуты
 
@@ -38,7 +40,7 @@ svg {
 
 ### Global attributes
 
-- [Основные атрибуты](/docs/Web/SVG/Attribute/Core)
+- [Основные атрибуты](/ru/docs/Web/SVG/Attribute/Core)
   - : Самые важные: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}
 - [Атрибуты стилизации](/docs/Web/SVG/Attribute/Styling)
   - : {{SVGAttr('class')}}, {{SVGAttr('style')}}
diff --git a/files/ru/web/svg/element/use/index.md b/files/ru/web/svg/element/use/index.md
index 01cf42c10787ff..761f13c435c34d 100644
--- a/files/ru/web/svg/element/use/index.md
+++ b/files/ru/web/svg/element/use/index.md
@@ -7,6 +7,8 @@ slug: Web/SVG/Element/use
 
 Элемент **``** берёт элементы из SVG-документа и дублирует их где-то ещё.
 
+## Пример
+
 ```css hidden
 html,
 body,
@@ -30,13 +32,13 @@ svg {
 
 ```
 
-{{EmbedLiveSample('Exemple', 100, 100)}}
+{{EmbedLiveSample("Пример", 100, 100)}}
 
 Эффект такой же, как если бы элементы были полностью склонированы в DOM, а затем расположены в месте, где находится элемент `use`, подобно элементам `