Array.prototype.toString() - JavaScript

Array.prototype.toString()
==========================

**`toString()`** は `Array` インスタンスのメソッドで、指定された配列とその要素を表す文字列を返します。

試してみましょう
--------

構文
--

```js
toString()
```

### 引数

なし。

### 返値

配列の要素の文字列表現です。

解説
--

`Array` オブジェクトは `Object` の `toString` メソッドをオーバーライドしています。配列の `toString` メソッドは内部的に `join()` を呼び出します。そちらで配列を結合し、配列のすべての要素をカンマで区切って一つの文字列に収めて返します。 `join` メソッドが利用できないか関数ではなかった場合、代わりに `Object.prototype.toString` が使用され、 `[object Array]` を返します。

```js
const arr = [];
arr.join = 1; // `join` を関数ではないものに再代入
console.log(arr.toString()); // [object Array] と出力

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() の使用

```js
const array1 = [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()` は汎用的です。このメソッドは `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]"
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-array.prototype.tostring |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* インデックス付きコレクションのガイド
* `Array`
* `Array.prototype.join()`
* `Array.prototype.toLocaleString()`
* `TypedArray.prototype.toString()`
* `String.prototype.toString()`


Array.prototype.pop() - JavaScript

Array.prototype.pop()
=====================

**`pop()`** メソッドは、配列から**最後**の要素を取り除き、その要素を返します。このメソッドは配列の長さを変化させます。

試してみましょう
--------

構文
--

```js
pop()
```

### 引数

なし。

### 返値

配列の最後の要素。配列が空だった場合は、`undefined`。

解説
--

`pop()` メソッドは配列の最後の要素を取り除き、呼び出し元にその値を返します。 `pop()` を空の配列に対して呼び出すと、 `undefined` を返します。

`Array.prototype.shift()` は `pop()` と同様の動作をしますが、配列の最初の要素に適用されます。

`pop()` は変更を行うメソッドです。 `this` の長さと内容を変更します。 `this` の値は変更せずに、最後の要素を取り除いた新しい配列を返したい場合は、代わりに `arr.slice(0, -1)` を使用することができます。

`pop()` メソッドは汎用的です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。文字列も配列風ですが、文字列は不変であるため、このメソッドを適用するのは適切ではありません。

例
-

### 配列の最後の要素を取り除く

以下のコードは、4 つの要素を含んだ配列 `myFish` を生成し、その後その最後の要素を取り除き、変数に代入しています。

```js
const myFish = ["angel", "clown", "mandarin", "sturgeon"];

const popped = myFish.pop();

console.log(myFish); // ['angel', 'clown', 'mandarin' ]

console.log(popped); // 'sturgeon'
```

### 配列以外のオブジェクトに対する pop() の呼び出し

`pop()` メソッドは `this` の `length` プロパティを読み込みます。正規化された長さが 0 の場合、`length` は再び `0` に設定されます（以前は負の値または `undefined` であった可能性があります）。そうでない場合は、`length - 1` のプロパティが返され、削除されます。

```js
const arrayLike = {
  length: 3,
  unrelated: "foo",
  2: 4,
};
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 }
```

### 配列風のオブジェクトの使用

`push` と `pop` は意図的に汎用的になっており、以下の例で示すように、それを使用して有利に進めることができます。

この例では、オブジェクトの集合を格納するために配列を作成していないことに注意してください。その代わりに、オブジェクト自体に集合を格納し、 `Array.prototype.push` と `Array.prototype.pop` で `call` を使用して、これらのメソッドが配列を使用していると考えるように仕向けています。

```js
const collection = {
  length: 0,
  addElements(...elements) {
    // obj.length は、要素が追加されるたびに
    // 自動的に増加します。

    // push が返す値を返します。つまり、
    // length プロパティの新しい値です。
    return [].push.call(this, ...elements);
  },
  removeElement() {
    // obj.length は、要素が削除されるたびに
    // 自動的にデクリメントされます。

    // push が返す値を返します。つまり、
    // 取り除かれた要素です。
    return [].pop.call(this);
  },
};

collection.addElements(10, 20, 30);
console.log(collection.length); // 3
collection.removeElement();
console.log(collection.length); // 2
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-array.prototype.pop |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* インデックス付きコレクションのガイド
* `Array.prototype.push()`
* `Array.prototype.shift()`
* `Array.prototype.unshift()`
* `Array.prototype.concat()`
* `Array.prototype.splice()`


Array.prototype.concat() - JavaScript

Array.prototype.concat()
========================

**`concat()`** は `Array` インスタンスのメソッドで、2 つ以上の配列を結合するために使用します。
 このメソッドは既存の配列を変更せず、新しい配列を返します。

試してみましょう
--------

構文
--

```js
concat()
concat(value1)
concat(value1, value2)
concat(value1, value2, /\* …, \*/ valueN)
```

### 引数

`value1`, …, `valueN` 省略可

 新しい配列に連結する配列や値です。
 すべての `valueN` 引数が省略された場合、 `concat` は呼び出された既存の配列のシャローコピーを返します。
 詳しくは下記の解説をお読みください。

### 返値

新しい `Array` インスタンス。

解説
--

`concat` メソッドは新しい配列を作成します。この配列には、まず、このメソッドが名付けられたオブジェクトの要素が入ります。それから、それぞれの引数に対して、その値が配列に追加されます。通常のオブジェクトやプリミティブの場合、引数自体が最終的な配列の要素になります。配列や 配列風のオブジェクトで `Symbol.isConcatSpreadable` プロパティを真値に設定している場合、各引数の要素は独立して最終的に配列に追加されます。 `concat` メソッドは入れ子になった配列の引数に再帰的にアクセスすることはありません。

`concat()` はコピーメソッドです。 `this` や引数として与えられた配列を変更せず、代わりに元の配列の要素と同じ要素を含むシャローコピーを返します。

`concat()` メソッドは、元の配列のいずれかが疎配列であった場合には空のスロットを維持します。

`concat()` メソッドは汎用的です。 `this` 値は他の引数と同じように扱われます（ただし、先にオブジェクトに変換されます）。つまり、素のオブジェクトは直接結果の配列に追加され、 `@isConcatSpreadable` を持つ配列風オブジェクトは結果の配列に展開されます。

例
-

### 2 つの配列の連結

以下のコードは 2 つの配列を連結させます。

```js
const letters = ["a", "b", "c"];
const numbers = [1, 2, 3];

const alphaNumeric = letters.concat(numbers);
console.log(alphaNumeric);
// results in ['a', 'b', 'c', 1, 2, 3]
```

### 3 つの配列の連結

以下のコードは 3 つの配列を連結させます。

```js
const num1 = [1, 2, 3];
const num2 = [4, 5, 6];
const num3 = [7, 8, 9];

const numbers = num1.concat(num2, num3);

console.log(numbers);
// results in [1, 2, 3, 4, 5, 6, 7, 8, 9]
```

### 配列に値を連結

以下のコードは配列に値を連結させます。

```js
const letters = ["a", "b", "c"];

const alphaNumeric = letters.concat(1, [2, 3]);

console.log(alphaNumeric);
// results in ['a', 'b', 'c', 1, 2, 3]
```

### ネストした配列の連結

以下のコードはネストした配列同士を連結させます。また、元の配列からの参照を保持しています。

```js
const num1 = [[1]];
const num2 = [2, [3]];

const numbers = num1.concat(num2);

console.log(numbers);
// results in [[1], 2, [3]]

// num1 の最初の要素を変更する
num1[0].push(4);

console.log(numbers);
// results in [[1, 4], 2, [3]]
```

### 配列風オブジェクトを Symbol.isConcatSpreadable で連結

`concat` は既定ですべての配列風オブジェクトを配列として扱いません。 `Symbol.isConcatSpreadable` が真値（`true` など）に設定された場合のみ、配列として扱います。

```js
const obj1 = { 0: 1, 1: 2, 2: 3, length: 3 };
const obj2 = { 0: 1, 1: 2, 2: 3, length: 3, [Symbol.isConcatSpreadable]: true };
console.log([0].concat(obj1, obj2));
// [ 0, { '0': 1, '1': 2, '2': 3, length: 3 }, 1, 2, 3 ]
```

### 疎配列に対する concat()

元の配列のいずれかが疎配列の場合、結果の配列も疎配列になります。

```js
console.log([1, , 3].concat([4, 5])); // [1, empty, 3, 4, 5]
console.log([1, 2].concat([3, , 5])); // [1, 2, 3, empty, 5]
```

### 配列ではないオブジェクトに対する concat() の呼び出し

もし `this` の値が配列でなければ、オブジェクトに変換され、 `concat()` の引数と同じように扱われます。この場合、返値は常に新しい素の配列になります。

```js
console.log(Array.prototype.concat.call({}, 1, 2, 3)); // [{}, 1, 2, 3]
console.log(Array.prototype.concat.call(1, 2, 3)); // [ [Number: 1], 2, 3 ]
const arrayLike = {
  [Symbol.isConcatSpreadable]: true,
  length: 2,
  0: 1,
  1: 2,
  2: 99, // length が 2 なので concat() からは無視される
};
console.log(Array.prototype.concat.call(arrayLike, 3, 4)); // [1, 2, 3, 4]
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-array.prototype.concat |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `Array.prototype.concat` のポリフィル (`core-js`)（`Symbol.isConcatSpreadable` の対応など、最近の動作の修正と実装付き）
* インデックス付きコレクションガイド
* `Array`
* `Array.prototype.push()`
* `Array.prototype.unshift()`
* `Array.prototype.splice()`
* `String.prototype.concat()`
* `Symbol.isConcatSpreadable`


Array.prototype.copyWithin() - JavaScript

Array.prototype.copyWithin()
============================

**`copyWithin()`** は `Array` インスタンスのメソッドで、この配列の一部を配列内の他の場所にシャローコピーし、この配列を長さを変更せずに返します。

試してみましょう
--------

構文
--

```js
copyWithin(target, start)
copyWithin(target, start, end)
```

### 引数

`target`

並びのコピー先となる 0 から始まるインデックスで、整数に変換されます。これは `start` にある要素がコピーされる場所に対応し、`start` から `end` までのすべての要素が後続のインデックスにコピーされます。

* 負のインデックスの場合は、配列の末尾から逆に数えます。 `target < 0` の場合は、 `target + array.length` が使用されます。
* `target < -array.length` の場合は、 `0` が使用されます。
* `target >= array.length` の場合は、何もコピーされません。
* `target` が正規化後の `start` の後に位置している場合、コピーは `array.length` の末尾までしか行われません（言い換えれば、 `copyWithin()` は配列を拡張しません）。

`start`

要素のコピー元の始まりを表す 0 から始まるインデックスで、整数に変換されます。

* 負のインデックスの場合は、配列の末尾から逆に数えます。 `start < 0` の場合は、 `start + array.length` が使用されます。
* `start < -array.length` の場合は、 `0` が使用されます。
* `start >= array.length` の場合は、何もコピーされません。

`end` 省略可

要素のコピー元の末尾を表す 0 から始まるインデックスで、整数に変換されます。 `copyWithin()` のコピーは `end` の手前まで行います。

* 負のインデックスの場合は、配列の末尾から逆に数えます。 `end < 0` の場合は、 `end + array.length` が使用されます。
* `end < -array.length` の場合は、 `0` が使用されます。
* `end >= array.length` の場合、または `end` が省略された場合は、 `array.length` が使用され、末尾までのすべての要素がコピーされます。
* 正規化後に `end` が `start` よりも前か同じ位置になったときは、何もコピーされません。

### 返値

変更された配列です。

解説
--

`copyWithin()` メソッドは C や C++ の `memmove` のような動きをし、 `Array` のデータを移動するための高いパフォーマンスのメソッドです。これは特に `TypedArray` の同名メソッドに当てはまります。データの並びがコピーされ貼り付けられる処理が一命令で行われます。コピー元と貼り付け先で領域が重なっていたとしても、貼り付け先の並びはコピーされた値になります。

`undefined` は整数に変換されると `0` になるため、 `start` 引数を省略すると `0` を渡したのと同じ効果があり、配列全体が対象とする位置にコピーされます（右の境界が切り取られ、左の境界が複製される右シフトと同じです）。この動作はコードの読み手を混乱させる可能性があるので、代わりに `start` として `0` を明示的に渡してください。

```js
console.log([1, 2, 3, 4, 5].copyWithin(2));
// [1, 2, 1, 2, 3]; すべての要素を右に 2 つずらす
```

`copyWithin()` は変更を行うメソッドです。 `this` の長さは変更しませんが、 `this` の内容を変更し、必要に応じて新しいプロパティを作成します。

`copyWithin()` メソッドは空のスロットを保持します。コピー元の範囲が疎配列であった場合、空のスロットに対応するインデックスは削除され、空のスロットになります。

`copyWithin()` メソッドは汎用的です。このメソッドは `this` の値に `length` プロパティと整数のキーを持ったプロパティがあることだけを求めます。文字列も配列風オブジェクトですが、文字列は不変なので、このメソッドを適用するのは適していません。

例
-

### copyWithin() の使用

```js
console.log([1, 2, 3, 4, 5].copyWithin(0, 3));
// [4, 5, 3, 4, 5]

console.log([1, 2, 3, 4, 5].copyWithin(0, 3, 4));
// [4, 2, 3, 4, 5]

console.log([1, 2, 3, 4, 5].copyWithin(-2, -3, -1));
// [1, 2, 3, 3, 4]
```

### 疎配列に対する copyWithin() の使用

`copyWithin()` は空のスロットを広めます。

```js
console.log([1, , 3].copyWithin(2, 1, 2)); // [1, empty, empty]
```

### 配列ではないオブジェクトに対する copyWithin() の呼び出し

`copyWithin()` メソッドは `this` の `length` プロパティを読み込んで、関係する整数のインデックスを操作します。

```js
const arrayLike = {
  length: 5,
  3: 1,
};
console.log(Array.prototype.copyWithin.call(arrayLike, 0, 3));
// { '0': 1, '3': 1, length: 5 }
console.log(Array.prototype.copyWithin.call(arrayLike, 3, 1));
// { '0': 1, length: 5 }
// コピー元が空のスロットであるため、 '3' プロパティは削除される
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-array.prototype.copywithin |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `Array.prototype.copyWithin` のポリフィル (`core-js`)
* インデックス付きコレクションガイド
* `Array`
* `TypedArray.prototype.copyWithin()`


Array.prototype.fill() - JavaScript

Array.prototype.fill()
======================

**`fill()`** は `Array` インスタンスのメソッドで、インデックスの範囲内にある配列のすべての要素を一定の値に変更します。これは変更した配列を返します。

試してみましょう
--------

構文
--

```js
fill(value)
fill(value, start)
fill(value, start, end)
```

### 引数

`value`

配列を埋める値。もし `value` がオブジェクトであれば、配列のそれぞれの要素はそのオブジェクトを参照します。

`start` 省略可

埋め始める位置のゼロから始まるインデックスで、整数に変換されます。

* インデックスが負の場合、配列の末尾からさかのぼって数えます。 `start < 0` の場合、 `start + array.length` が使用されます。
* `start < -array.length` または `start` が省略された場合は `0` が使用されます。
* `start >= array.length` の場合、埋められるインデックスはありません。

`end` 省略可

埋め終える位置のゼロから始まるインデックスで、整数に変換されます。 `fill()` は `end` を含まず、その直前までを埋めます。

* インデックスが負の場合、配列の末尾からさかのぼって数えます。 `end < 0` の場合、 `end + array.length` が使用されます。
* `end < -array.length` の場合は `0` が使用されます。
* `end >= array.length` または `end` が省略された場合、

### 返値

`value` で埋められて変更された配列です。

解説
--

`fill()` メソッドは変更メソッドです。これは `this` の長さは変更しませんが、 `this` のコンテンツは変更します。

`fill()` メソッドは疎配列の空のスロットを、 `value` で埋めます。

`every()` メソッドは汎用的です。このメソッドは `this` の値に `length` プロパティと整数のキーを持ったプロパティがあることだけを求めます。文字列も配列風のものですが、文字列は不変なので、このメソッドを適用するのは適していません。

**メモ:** `Array.prototype.fill()` を空の配列に対して使用すると、配列に変更するものがないので何も変更されません。
 配列を宣言する際に `Array.prototype.fill()` を使用する場合は、スロットを配列に割り当てるようにしてください。
 例はこちら。

例
-

### fill の使用

```js
console.log([1, 2, 3].fill(4)); // [4, 4, 4]
console.log([1, 2, 3].fill(4, 1)); // [1, 4, 4]
console.log([1, 2, 3].fill(4, 1, 2)); // [1, 4, 3]
console.log([1, 2, 3].fill(4, 1, 1)); // [1, 2, 3]
console.log([1, 2, 3].fill(4, 3, 3)); // [1, 2, 3]
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]

// 配列の各スロットから参照される、単一のオブジェクト。
const arr = Array(3).fill({}); // [{}, {}, {}]
arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]
```

### fill() を使用してすべて 1 の行列を作成

この例では、 Octave や MATLAB の `ones()` 関数のように、すべて 1 の行列を作成する方法を示しています。

```js
const arr = new Array(3);
for (let i = 0; i < arr.length; i++) {
  arr[i] = new Array(4).fill(1); // 大きさが 4、内容が 1 の配列を作成
}
arr[0][0] = 10;
console.log(arr[0][0]); // 10
console.log(arr[1][0]); // 1
console.log(arr[2][0]); // 1
```

### fill() を使用して空の配列を生成

 この例では、配列に値を入力し、すべての要素に詳細な値を設定する方法を示しています。
 `end` 引数を指定する必要はありません。

```js
const tempGirls = Array(5).fill("girl", 0);
```

配列は最初はインデックスが割り当てられていない疎配列であることに注意してください。 `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 }
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-array.prototype.fill |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `Array.prototype.fill` のポリフィル (`core-js`)
* インデックス付きコレクションガイド
* `Array`
* `TypedArray.prototype.fill()`


Array.prototype.findLast() - JavaScript

Array.prototype.findLast()
==========================

**`findLast()`** は `Array` インスタンスのメソッドで、配列を逆順に反復処理し、指定されたテスト関数を満たす最初の要素の値を返します。
 テスト関数を満たす要素がない場合は `undefined` が返されます。

検索を行う場合は以下のメソッドが必要です。

* 一致する最初の要素を得るには、 `find()` を使用してください。
* 配列内で一致する最後の位置を得るには、 `findLastIndex()` を使用してください。
* 値の位置を得るには、 `indexOf()` を使用してください。
 （これは `findIndex()` に似ていますが、テスト関数を使用するのではなく、それぞれの要素が値と等しいかどうかを調べます。）
* 配列に値が存在するかどうかを調べるには、 `includes()` を使用してください。
 こちらも、テスト関数を使用する代わりに、各要素が値と等しいかどうかを調べます。
* 指定されたテスト関数を満たす要素を得るには `some()` を使用してください。
試してみましょう
--------

構文
--

```js
findLast(callbackFn)
findLast(callbackFn, thisArg)
```

### 引数

`callbackFn`

配列のそれぞれの要素に対して実行する関数です。一致する要素が得られたことを示すには真値を返し、そうでなければ偽値を返してください。この関数は以下の引数で呼び出されます。

`element`

配列内で現在処理されている要素です。

`index`

配列内で現在処理されている要素のインデックス（位置）です。

`array`

`findLast()` を呼び出した元の配列です。

`thisArg` 省略可

`callbackFn` 内で `this` として使われるオブジェクトです。反復処理メソッドを参照してください。

### 返値

指定されたテスト関数を満たす、配列中の最も大きいインデックス値を持つ要素の値。一致する要素が見つからない場合は `undefined` となります。

解説
--

`findLast()` メソッドは反復処理メソッドです。配列の要素のそれぞれに対して、インデックスの降順に一度ずつ `callbackFn` 関数を実行し、`callbackFn` 関数が真値を返すまで繰り返します。 `findLast()` はその要素を返し、配列の反復処理を停止します。もし `callbackFn` が真値を返さない場合、 `find()` は `undefined` を返します。

`callbackFn` は、値が割り当てられているものに限らず、配列中の*すべて*のインデックスに対して呼び出されます。疎配列では、空のスロットは `undefined` と同じ動作をします。

`findLast()` は、呼び出した配列を変更 (mutate) しませんが、`callbackFn` で提供された関数は変更する可能性があります。しかし、配列の長さは最初に `callbackFn` が呼び出される*前に*設定されます。したがって、

* `callbackFn` は `findLast()` の呼び出しを始めたときの配列の長さを超えて追加された要素にはアクセスしません。
* 既に訪問した位置を変更しても、 `callbackFn` が再度呼び出されることはありません。
* まだ訪問していない既存の配列要素が `callbackFn` によって変更された場合、 `callbackFn` に渡される値はその要素が取得される時点の値になります。削除された 要素は `undefined` であるかのように処理されます。

**警告:** 前項で説明したような、参照中の配列の同時進行での変更は（特殊な場合を除いて）普通は避けるべきです。多くの場合、理解しにくいコードになります。

`findLast()` メソッドは汎用的です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。

例
-

### 要素のプロパティに一致する配列の最後のオブジェクトを探す

この例では、配列要素のプロパティに基づいたテストを作成する方法を示します。

```js
const inventory = [
  { name: "apples", quantity: 2 },
  { name: "bananas", quantity: 0 },
  { name: "fish", quantity: 1 },
  { name: "cherries", quantity: 5 },
];

// 在庫がない場合は真値を返す
function isNotEnough(item) {
  return item.quantity < 2;
}

console.log(inventory.findLast(isNotEnough));
// { name: "fish", quantity: 1 }
```

#### アロー関数と分割代入の使用

先の例は、アロー関数とオブジェクトの分割代入を使用して書くことができるかもしれません。

```js
const inventory = [
  { name: "apples", quantity: 2 },
  { name: "bananas", quantity: 0 },
  { name: "fish", quantity: 1 },
  { name: "cherries", quantity: 5 },
];

const result = inventory.findLast(({ quantity }) => quantity < 2);

console.log(result);
// { name: "fish", quantity: 1 }
```

### 配列中の最後の素数を探す

以下の例では、配列の最後の要素で素数の最後の要素を返します。素数がない場合は `undefined` を返しています。

```js
function isPrime(element) {
  if (element % 2 === 0 || element < 2) {
    return false;
  }
  for (let factor = 3; factor <= Math.sqrt(element); factor += 2) {
    if (element % factor === 0) {
      return false;
    }
  }
  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
```

### 存在しない要素や削除された要素に対しても呼び出される

疎配列の空のスロットは処理され、 `undefined` と同じように扱われます。

```js
// インデックス 2、3、4 に要素がない配列の宣言
const array = [0, 1, , , , 5, 6];

// 値が割り当てられているインデックスだけでなく、すべてのインデックスを表示
array.findLast((value, index) => {
  console.log(`Visited index ${index} with value ${value}`);
});
// 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];
  }
  // 要素 5 は削除されたにもかかわらず、処理される
  console.log(`Visited index ${index} with value ${value}`);
});
// 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
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-array.prototype.findlast |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `Array.prototype.findLast` のポリフィル (`core-js`)
* インデックス付きコレクションのガイド
* `Array`
* `Array.prototype.find()`
* `Array.prototype.findIndex()`
* `Array.prototype.findLastIndex()`
* `Array.prototype.includes()`
* `Array.prototype.filter()`
* `Array.prototype.every()`
* `Array.prototype.some()`
* `TypedArray.prototype.findLast()`


Array.prototype.join() - JavaScript

Array.prototype.join()
======================

**`join()`** は `Array` インスタンスのメソッドで、配列の全要素を順に連結した新しい文字列を返します。区切り文字はカンマ、または指定された文字列です。配列にアイテムが一つしかない場合は、区切り文字を使用せずにアイテムが返されます。

試してみましょう
--------

構文
--

```js
join()
join(separator)
```

### 引数

`separator` 省略可

配列の各要素を区切る文字列です。省略した場合、配列の要素はカンマ (",") で区切られます。

### 返値

配列の全要素が連結された文字列です。 `array.length` が `0` であった場合、空の文字列が返されます。

解説
--

配列のすべての要素を文字列に変換したものが、1 個の文字列に繋がれます。要素が `undefined` または `null` であった場合、 `"null"` や `"undefined"` ではなく空文字列に変換されます。

`join` メソッドは、内部的には `Array.prototype.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
```

疎配列で使用した場合、 `join()` メソッドは空のスロットを `undefined` という値があるかのように反復処理します。

`join()` メソッドは汎用的です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。

例
-

### 3 通りの異なる形で配列をつなぐ

以下の例は、3 個の要素を持つ配列 `a` を作成し、デフォルト引数、カンマとスペース、そして「と」と空文字を使った 4 パターンの結合を行っています。

```js
const a = ["風", "水", "火"];
a.join(); // '風,水,火'
a.join(", "); // '風, 水, 火'
a.join(" + "); // '風 + 水 + 火'
a.join(""); // '風水火'
```

### 疎配列に対する join() の使用

`join()` は空のスロットを `undefined` と同じように扱い、余分な区切り文字を生成します。

```js
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
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-array.prototype.join |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `Array.prototype.join` のポリフィル (`core-js`)
* インデックス付きコレクションのガイド
* `Array`
* `Array.prototype.toString()`
* `TypedArray.prototype.join()`
* `String.prototype.split()`


Array.fromAsync() - JavaScript

Array.fromAsync()
=================

**`Array.fromAsync()`** は静的メソッドで、非同期反復可能オブジェクト、反復可能オブジェクト、配列風のオブジェクトから、シャローコピーされた新しい配列インスタンスを作成します。

構文
--

```js
Array.fromAsync(arrayLike)
Array.fromAsync(arrayLike, mapFn)
Array.fromAsync(arrayLike, mapFn, thisArg)
```

### 引数

`arrayLike`

配列に変換する非同期反復可能、反復可能、配列風オブジェクトです。

`mapFn` 省略可

配列の各要素に対して呼び出す関数です。指定された場合は、配列に追加するすべての値が最初にこの関数に渡され、 `mapFn` の返値が（待機後に）配列に追加されます。この関数は以下の引数で呼び出されます。

`element`

配列内で現在処理中の要素です。すべての要素が最初に待機状態になるため、この値が thenable になることはありません。

`index`

配列の、現在処理中の要素のインデックスです。

`thisArg` 省略可

`mapFn` 実行時に `this` として使用する値です。

### 返値

新しい `Promise` で、その履行値は新しい `Array` インスタンスです。

解説
--

`Array.fromAsync()` により、以下のものから配列を作成することができます。

* 非同期反復可能オブジェクト（`ReadableStream` や `AsyncGenerator` などのオブジェクト）、または、オブジェクトが非同期反復可能ではない場合、
* 反復可能オブジェクト（`Map` や `Set` 等のオブジェクト）、または、オブジェクトが反復可能ではない場合、
* 配列風オブジェクト（`length` プロパティとインデックス値による要素を持つオブジェクト）。

`Array.fromAsync()` は `for await...of` にとてもよく似た方法で非同期反復可能オブジェクトを反復処理します。 `Array.fromAsync()` は、以下をの点除いて `Array.from()` とほぼ同じ動きをします。

* `Array.fromAsync()` は非同期反復可能オブジェクトを扱うことができます。
* `Array.fromAsync()` は配列インスタンスで履行される `Promise` を返します。
* `Array.fromAsync()` が非同期反復可能オブジェクトを指定して呼び出された場合、配列に追加する各要素が最初に待機されます。
* `mapFn` が指定された場合、入出力を内部的に待機します。

`Array.fromAsync()` と `Promise.all()` はどちらも、反復可能なプロミスを配列のプロミスに変換することができます。しかし、 2 つの重要な違いがあります。

* `Array.fromAsync()` はオブジェクトから得られる値を順番に待ちます。 `Promise.all()` はすべての値を同時に待ちます。
* `Array.fromAsync()` は反復可能オブジェクトを遅延的に反復処理し、現在の値が決定するまで次の値を取得しません。 `Promise.all()` はすべての値を事前に取得し、それを待ちます。
例
-

### 非同期反復可能オブジェクトから配列を取得

```js
const asyncIterable = (async function\* () {
  for (let i = 0; i < 5; i++) {
    await new Promise((resolve) => setTimeout(resolve, 10 \* i));
    yield i;
  }
})();

Array.fromAsync(asyncIterable).then((array) => console.log(array));
// [0, 1, 2, 3, 4]
```

### 同期反復可能オブジェクトから配列を取得

```js
Array.fromAsync(
  new Map([
    [1, 2],
    [3, 4],
  ]),
).then((array) => console.log(array));
// [[1, 2], [3, 4]]
```

### プロミスを生成する同期反復可能オブジェクトから配列を取得

```js
Array.fromAsync(
  new Set([Promise.resolve(1), Promise.resolve(2), Promise.resolve(3)]),
).then((array) => console.log(array));
// [1, 2, 3]
```

### プロミスの配列風オブジェクトから配列を取得

```js
Array.fromAsync({
  length: 3,
  0: Promise.resolve(1),
  1: Promise.resolve(2),
  2: Promise.resolve(3),
}).then((array) => console.log(array));
// [1, 2, 3]
```

### mapFn の使用

`mapFn` の入力と出力の両方について `Array.fromAsync()` は内部的に待機します。

```js
function delayedValue(v) {
  return new Promise((resolve) => setTimeout(() => resolve(v), 100));
}

Array.fromAsync(
  [delayedValue(1), delayedValue(2), delayedValue(3)],
  (element) => delayedValue(element \* 2),
).then((array) => console.log(array));
// [2, 4, 6]
```

### Promise.all() との比較

`Array.fromAsync()` はオブジェクトから得られる値を順番に待ちます。 `Promise.all()` はすべての値を同時に待ちます。

```js
function\* makeAsyncIterable() {
  for (let i = 0; i < 5; i++) {
    yield new Promise((resolve) => setTimeout(resolve, 100));
  }
}

(async () => {
  console.time("Array.fromAsync() time");
  await Array.fromAsync(makeAsyncIterable());
  console.timeEnd("Array.fromAsync() time");
  // Array.fromAsync() time: 503.610ms

  console.time("Promise.all() time");
  await Promise.all(makeAsyncIterable());
  console.timeEnd("Promise.all() time");
  // Promise.all() time: 101.728ms
})();
```

### 同期反復可能オブジェクトのエラー処理なし

`for await...of` と同様に、反復処理されるオブジェクトが同期反復可能オブジェクトで、反復処理中にエラーが発生した場合、基盤となるイテレーターの `return()` メソッドは呼び出されず、イテレーターは閉じられません。

```js
function\* generatorWithRejectedPromises() {
  try {
    yield 0;
    yield Promise.reject(3);
  } finally {
    console.log("called finally");
  }
}

(async () => {
  try {
    await Array.fromAsync(generatorWithRejectedPromises());
  } catch (e) {
    console.log("caught", e);
  }
})();
// caught 3
// No "called finally" message
```

イテレーターを閉じる必要がある場合は、代わりに `for...of` ループを使用して、各値を `await` する必要があります。

```js
(async () => {
  const arr = [];
  try {
    for (const val of generatorWithRejectedPromises()) {
      arr.push(await val);
    }
  } catch (e) {
    console.log("caught", e);
  }
})();
// called finally
// caught 3
```

仕様書
---

| Specification |
| --- |
| ES Array.fromAsync (2022) # sec-array.fromAsync |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `Array.fromAsync` のポリフィル (`core-js`)
* インデックス付きコレクションのガイド
* `Array`
* `Array()`
* `Array.of()`
* `Array.from()`
* `for await...of`


Array.prototype.reverse() - JavaScript

Array.prototype.reverse()
=========================

**`reverse()`** は `Array` のメソッドで、配列の要素をその場 (in-place) で反転させ、その配列への参照を返します。最初の要素が最後の要素に、最後の要素が最初の要素になります。言い換えれば、配列内の要素順序を、先に述べた方向とは逆に向かわせます。

元の配列を変更せずに配列の要素を反転させるには `toReversed()` を使用してください。

試してみましょう
--------

構文
--

```js
reverse()
```

### 引数

なし。

### 返値

元の配列を反転されたものへの参照です。なお、配列はその場 (in-place) で反転され、コピーは作られません。

解説
--

`reverse()` メソッドは、呼び出した配列オブジェクトの要素を反転し、書き換えられた配列の参照を返します。

`reverse()` メソッドは空のスロットを維持します。元の配列が疎配列である場合、空のスロットに対応する新しいインデックスは削除され、空のスロットになります。

`reverse()` メソッドは汎用的です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。文字列も配列風ですが、文字列は不変であるため、このメソッドを適用するのは適切ではありません。

例
-

### 配列の要素を反転させる

次の例は、3 つの要素を含む配列 `items` を作成し、その配列を反転させます。`reverse()` の呼び出しは、反転した配列 `items` への参照を返します。

```js
const items = [1, 2, 3];
console.log(items); // [1, 2, 3]

items.reverse();
console.log(items); // [3, 2, 1]
```

### reverse() メソッドは同じ配列への参照を返す

`reverse()` メソッドは元の配列への参照を返すので、返された配列を変更すると、元の配列も変更されます。

```js
const numbers = [3, 2, 4, 1, 5];
const reversed = numbers.reverse();
// numbers and reversed are both in reversed order [5, 1, 4, 2, 3]
reversed[0] = 5;
console.log(numbers[0]); // 5
```

`reverse()` で元の配列を変更せず、他の配列メソッド（`map()` など）が行うようにシャローコピーした配列を返すようにするには、 `toReversed()` メソッドを使用してください。他にも、 `reverse()` を呼び出す前にスプレッド構文か `Array.from()` を使用してシャローコピーを行っておくこともできます。

```js
const numbers = [3, 2, 4, 1, 5];
// [...numbers] はシャローコピーを作成するので、 reverse() は元の配列を変更しない
const reverted = [...numbers].reverse();
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 つのインデックスを入れ替えます。出力先のプロパティで、参照元のプロパティが存在しないものは削除します。

```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 は変更されない
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-array.prototype.reverse |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `Array.prototype.reverse` のポリフィル (`core-js`)
* インデックス付きコレクションのガイド
* `Array`
* `Array.prototype.join()`
* `Array.prototype.sort()`
* `Array.prototype.toReversed()`
* `TypedArray.prototype.reverse()`


Array.prototype.filter() - JavaScript

Array.prototype.filter()
========================

**`filter()`** は `Array` インスタンスのメソッドで、指定された配列の中から指定された関数で実装されているテストに合格した要素だけを抽出したシャローコピーを作成します。

試してみましょう
--------

構文
--

```js
filter(callbackFn)
filter(callbackFn, thisArg)
```

### 引数

`callbackFn`

配列のそれぞれの要素に対して実行する関数です。この関数は、配列の要素を保持する場合は真値、保持しない場合は偽値を返します。この関数は以下の引数で呼び出されます。

`element`

配列内で処理中の現在の要素です。

`index`

配列内で処理中の現在の要素のインデックスです。

`array`

`filter()` が呼び出された配列です。

`thisArg` 省略可

`callbackFn` を実行する際に `this` として使用される値。反復処理メソッドを参照してください。

### 返値

指定された配列の一部を、指定された関数で実装されたテストに合格した要素だけに絞り込んでシャローコピーしたものです。テストに合格した要素がない場合は、空の配列が返されます。

解説
--

`filter()` メソッドは反復処理メソッドです。指定された `callbackFn` 関数を配列の各要素に対して一度ずつ呼び出し、 `callbackFn` が真値を返したすべての要素からなる新しい配列を生成します。 `callbackFn` は値が代入されている配列の添字に対してのみ呼び出されます。

`callbackFn` は値が割り当てられている配列インデックスに対してのみ呼び出されます。疎配列の空のスロットに対しては呼び出されません。

`filter()` メソッドはコピーメソッドです。これは `this` を変更するのではなく、元の配列と同じ要素を格納したシャローコピーを返します。しかし、 `callbackFn` として指定された関数は配列を変更することができます。ただし、配列の長さは `callbackFn` を最初に呼び出す前に保存されることに注意してください。したがって、

* `callbackFn` は、 `every()` の呼び出しを始めたときの配列の長さを超えて追加された要素にはアクセスしません。
* 既に処理したインデックスを変更しても、 `callbackFn` が再度呼び出されることはありません。
* まだ処理していない既存の配列要素が `callbackFn` によって変更された場合、`callbackFn` に渡される値はその要素が取得された時点での値になります。削除された要素は処理されません。

**警告:** 上記のように進行中の配列に対して変更を行うと、理解しにくいコードになることが多いので、（特別な場合を除いて）避けるのが一般的です。

`filter()` メソッドは汎用的です。このメソッドは `this` の値に `length` プロパティと整数のキーを持ったプロパティがあることだけを求めます。

例
-

### 小さい値をすべて取り除く

次の例では、`filter()` を使って 10 未満の値を持つ要素をすべて取り除いた配列を生成します。

```js
function isBigEnough(value) {
  return value >= 10;
}

const filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]
```

### 配列内の素数をすべて検索する

以下の例は配列内のすべての素数を返します。

```js
const array = [-3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];

function isPrime(num) {
  for (let i = 2; num > i; i++) {
    if (num % i === 0) {
      return false;
    }
  }
  return num > 1;
}

console.log(array.filter(isPrime)); // [2, 3, 5, 7, 11, 13]
```

### JSON の不正な内容を取り除く

次の例では、`filter()` を使って `id` の数値が 0 以外の要素だけに絞った JSON を生成します。

```js
const arr = [
  { id: 15 },
  { id: -1 },
  { id: 0 },
  { id: 3 },
  { id: 12.2 },
  {},
  { id: null },
  { id: NaN },
  { id: "undefined" },
];

let invalidEntries = 0;

function filterByID(item) {
  if (Number.isFinite(item.id) && item.id !== 0) {
    return true;
  }
  invalidEntries++;
  return false;
}

const arrByID = arr.filter(filterByID);

console.log("Filtered Array\n", arrByID);
// Filtered Array
// [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }]

console.log("Number of Invalid Entries =", invalidEntries);
// Number of Invalid Entries = 5
```

### 配列内の検索

次の例では `filter()` を使って検索条件で配列の絞り込みをしています。

```js
const fruits = ["apple", "banana", "grapes", "mango", "orange"];

/\*\*
 \* Filter array items based on search criteria (query)
 \*/
function filterItems(arr, query) {
  return arr.filter((el) => el.toLowerCase().includes(query.toLowerCase()));
}

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
// それぞれの単語を変更
let words = ["spray", "limit", "exuberant", "destruction", "elite", "present"];

const modifiedWords = words.filter((word, index, arr) => {
  arr[index + 1] += " extra";
  return word.length < 6;
});

console.log(modifiedWords);
// 6 文字未満の語は 3 つあるが、変更されているので 1 つしか返されない
// ["spray"]

// new の単語を追加
words = ["spray", "limit", "exuberant", "destruction", "elite", "present"];
const appendedWords = words.filter((word, index, arr) => {
  arr.push("new");
  return word.length < 6;
});

console.log(appendedWords);
// `words` 自体には 6 文字未満の単語がたくさん増えたが、条件に合うのは 3 つだけ
// ["spray" ,"limit" ,"elite"]

// 単語の削除
words = ["spray", "limit", "exuberant", "destruction", "elite", "present"];
const deleteWords = words.filter((word, index, arr) => {
  arr.pop();
  return word.length < 6;
});

console.log(deleteWords);
// 'elite' はフィルターが取得する前に 'words' から取り出されているので、取得されていないことに注意
// ["spray" ,"limit"]
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-array.prototype.filter |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `Array.prototype.filter` のポリフィル (`core-js`)
* インデックス付きコレクションガイド
* `Array.prototype.forEach()`
* `Array.prototype.every()`
* `Array.prototype.map()`
* `Array.prototype.some()`
* `Array.prototype.reduce()`
* `TypedArray.prototype.filter()`


Array.prototype.findIndex() - JavaScript

Array.prototype.findIndex()
===========================

**`findIndex()`** は `Array` インスタンスのメソッドで、配列内の指定されたテスト関数に合格する最初の要素のインデックスを返します。
 テスト関数に合格する要素がなかった場合は `-1` を返します。

`find()` メソッドも参照してください。こちらのメソッドは、配列内で見つかった要素の位置ではなく、値を返します。

試してみましょう
--------

構文
--

```js
findIndex(callbackFn)
findIndex(callbackFn, thisArg)
```

### 引数

`callbackFn`

配列のそれぞれの要素に対して実行する関数です。一致する要素が得られたことを示すには真値を返し、そうでなければ偽値を返してください。この関数は以下の引数で呼び出されます。

`element`

配列内で現在処理されている要素です。

`index`

配列内で現在処理されている要素のインデックス（位置）です。

`array`

`findIndex()` を呼び出した元の配列です。

`thisArg` 省略可

`callbackFn` 内で `this` として使われるオブジェクトです。反復処理メソッドを参照してください。

### 返値

テストに合格した配列の要素の位置を返します。それ以外の場合は、 `-1` を返します。

解説
--

`findIndex()` メソッドは反復処理メソッドです。配列の要素のそれぞれに対して、インデックスの昇順に一度ずつ `callbackFn` 関数を実行し、`callbackFn` 関数が真値を返すまで繰り返します。 `findIndex()` はその要素を返し、配列の反復処理を停止します。もし `callbackFn` が真値を返さない場合、 `findIndex()` は `-1` を返します。

`callbackFn` は、値が割り当てられているものに限らず、配列中の*すべて*のインデックスに対して呼び出されます。疎配列では、空のスロットは `undefined` と同じ動作をします。

`findIndex()` は、呼び出した配列を変更 (mutate) しませんが、`callbackFn` で提供された関数は変更する可能性があります。しかし、配列の長さは最初に `callbackFn` が呼び出される*前に*設定されます。したがって、

* `callbackFn` は `findIndex()` の呼び出しを始めたときの配列の長さを超えて追加された要素にはアクセスしません。
* 既に訪問した位置を変更しても、 `callbackFn` が再度呼び出されることはありません。
* まだ訪問していない既存の配列要素が `callbackFn` によって変更された場合、 `callbackFn` に渡される値はその要素が取得される時点の値になります。削除された 要素は `undefined` であるかのように処理されます。

**警告:** 上で説明したような同時進行の変更は、理解しにくいコードになることが多いので、（特別な場合を除いて）避けるのが一般的です。

`findIndex()` メソッドは汎用的です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。

例
-

### 配列内の素数の位置を検索する

次の例では、配列の中で素数の入った最初の要素の位置を返し、素数が見つからなかった場合は `-1` を返します。

```js
function isPrime(element) {
  if (element % 2 === 0 || element < 2) {
    return false;
  }
  for (let factor = 3; factor <= Math.sqrt(element); factor += 2) {
    if (element % factor === 0) {
      return false;
    }
  }
  return true;
}

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
console.log([1, , 3].findIndex((x) => x === undefined)); // 1
```

### 配列でないオブジェクトに対する find() の呼び出し

`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
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-array.prototype.findindex |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `Array.prototype.findIndex` のポリフィル (`core-js`)
* インデックス付きコレクションのガイド
* `Array`
* `Array.prototype.find()`
* `Array.prototype.findLast()`
* `Array.prototype.findLastIndex()`
* `Array.prototype.indexOf()`
* `Array.prototype.lastIndexOf()`
* `TypedArray.prototype.findIndex()`


Array.prototype.toLocaleString() - JavaScript

Array.prototype.toLocaleString()
================================

**`toLocaleString()`** メソッドは、配列の要素を表す文字列を返します。配列の要素は、それぞれの `toLocaleString` メソッドを使い、ロケール固有の文字列に変換されます（例えばカンマ "," など）。

試してみましょう
--------

構文
--

```js
toLocaleString();
toLocaleString(locales);
toLocaleString(locales, options);
```

### 引数

`locales` 省略可

BCP 47 言語タグの文字列か、その配列です。`locales` 引数の一般的な形式と解釈については、ロケールの識別とネゴシエーションを参照してください。

`options` 省略可

設定プロパティのオブジェクトです。数値に関しては `Number.prototype.toLocaleString()` を、日付に関しては `Date.prototype.toLocaleString()` を見てください。

### 返値

配列の要素を表す文字列です。

解説
--

`Array.prototype.toLocaleString` メソッドは、その内容を走査し、すべての要素に対して `toLocaleString` メソッドを、引数 `locales` と `options` を指定して呼び出し、実装で定義された区切り文字 (",") でその結果を連結したものを返します。このメソッド自身は、この 2 つの引数を使用せず、各要素に対する `toLocaleString()` の呼び出しで渡すだけであることに注意してください。区切り文字列の選択はホストの現在のロケールに依存し、 `locales` 引数は使用しません。

例
-

### locales と options の使用

配列の要素は、その `toLocaleString` メソッドを使用して文字列に変換されます。

* `Object`: `Object.prototype.toLocaleString()`
* `Number`: `Number.prototype.toLocaleString()`
* `Date`: `Date.prototype.toLocaleString()`

`prices` 配列内の文字列と数値の通貨を常に表示します。

```js
const prices = ["￥7", 500, 8123, 12];
prices.toLocaleString("ja-JP", { style: "currency", currency: "JPY" });

// "￥7,￥500,￥8,123,￥12"
```

それ以外の例については、 `Intl.NumberFormat` や `Intl.DateTimeFormat` のページを参照してください。

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-array.prototype.tolocalestring |
| ECMAScript Internationalization API Specification # sup-array.prototype.tolocalestring |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `Array.prototype.toString()`
* `Intl`
* `Object.prototype.toLocaleString()`
* `Number.prototype.toLocaleString()`
* `Date.prototype.toLocaleString()`


Array.prototype.values() - JavaScript

Array.prototype.values()
========================

**`values()`** は `Array` インスタンスのメソッドで、配列の各インデックスの値を含む新しい「配列イテレーター」オブジェクトを返します。

試してみましょう
--------

構文
--

```js
values()
```

### 引数

なし。

### 返値

新しい反復可能なイテレーターオブジェクトです。

解説
--

`Array.prototype.values()` は `Array.prototype[@@iterator]()` の既定の実装です。

```js
Array.prototype.values === Array.prototype[Symbol.iterator]; // true
```

疎配列に使用された場合、 `values()` メソッドは空のスロットを `undefined` の値である可能用に反復処理します。

`values()` メソッドは汎用的です。このメソッドは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。

例
-

### for...of ループを用いた反復処理

`values()` は反復可能なイテレーターを返すため、 `for...of` ループを使用して反復処理を行うことができます。

```js
const arr = ["a", "b", "c", "d", "e"];
const iterator = arr.values();

for (const letter of iterator) {
  console.log(letter);
} // "a" "b" "c" "d" "e"
```

### next() を使用した反復処理

返値はイテレーターでもあるため、直接 `next()` メソッドを呼び出すことができます。

```js
const arr = ["a", "b", "c", "d", "e"];
const iterator = arr.values();
iterator.next(); // { value: "a", done: false }
iterator.next(); // { value: "b", done: false }
iterator.next(); // { value: "c", done: false }
iterator.next(); // { value: "d", done: false }
iterator.next(); // { value: "e", done: false }
iterator.next(); // { value: undefined, done: true }
console.log(iterator.next().value); // undefined
```

### 反復可能オブジェクトの再利用

**警告:** 配列イテレーターオブジェクトは、一回のみ使用可能なオブジェクトになります。再利用しないでください。

`values()` で返される反復可能オブジェクトは再利用できません。 `next().done = true` または `currentIndex > length` になった場合、 `for...of` ループは終了し、それ以降の反復処理は効果がありません。

```js
const arr = ["a", "b", "c", "d", "e"];
const values = arr.values();
for (const letter of values) {
  console.log(letter);
}
// "a" "b" "c" "d" "e"
for (const letter of values) {
  console.log(letter);
}
// undefined
```

`break` 文を使用して早めに反復処理を終了した場合、反復処理を継続する際にイテレーターで現在の位置から再開することができます。

```js
const arr = ["a", "b", "c", "d", "e"];
const values = arr.values();
for (const letter of values) {
  console.log(letter);
  if (letter === "b") {
    break;
  }
}
// "a" "b"

for (const letter of values) {
  console.log(letter);
}
// "c" "d" "e"
```

### 反復処理中の書き替え

`values()` から返される配列のイテレーターオブジェクトには値が格納されていません。その代わり、生成時に使用した配列のアドレスを格納し、各反復時に現在アクセスしている位置を読み取ります。そのため、イテレーターの出力は、そのステップの実行時にその位置に格納されている値に依存します。配列の値が変化した場合は、配列イテレーターオブジェクトの値も変化します。

```js
const arr = ["a", "b", "c", "d", "e"];
const iterator = arr.values();
console.log(iterator); // Array Iterator { }
console.log(iterator.next().value); // "a"
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
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-array.prototype.values |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `Array.prototype.values` のポリフィル (`core-js`)
* インデックス付きコレクションのガイド
* `Array`
* `Array.prototype.entries()`
* `Array.prototype.keys()`
* `Array.prototype[@@iterator]()`
* `TypedArray.prototype.values()`
* 反復処理プロトコル


Array.prototype.splice() - JavaScript

Array.prototype.splice()
========================

**`splice()`** は `Array` インスタンスのメソッドは、その場 (in-place) で既存の要素を取り除いたり、置き換えたり、新しい要素を追加したりすることで、配列の内容を変更します。

元の配列を変更せずに、ある部分を除去したり置き換えたりした新しい配列を作成するには `toSpliced()` を使用してください。配列を変更せずに配列の一部にアクセスするには `slice()` を参照してください。

試してみましょう
--------

構文
--

```js
splice(start)
splice(start, deleteCount)
splice(start, deleteCount, item1)
splice(start, deleteCount, item1, item2)
splice(start, deleteCount, item1, item2, /\* …, \*/ itemN)
```

### 引数

`start`

配列の変更を始める位置のゼロから始まるインデックスで、整数に変換されます。

* インデックスが負の場合、配列の末尾からさかのぼって数えます。 `start < 0` の場合、 `start + array.length` が使用されます。
* `start < -array.length` の場合は `0` が使用されます。
* `start >= array.length` の場合、要素は削除されませんが、メソッドは追加関数として動作し、指定された数だけ要素を追加します。
* `start` が省略された場合（そして `splice()` が引数なしで呼び出された場合）、何も削除されません。これは `undefined` を渡すと `0` に変換されるのとは異なります。

`deleteCount` 省略可

配列の `start` の位置から取り除く古い要素の個数を示す整数です。

`deleteCount` が省略された場合、または `deleteCount` の値が `start` で指定した位置より後の要素数以上の場合、 `start` から配列の末尾までのすべての要素が削除されます。ただし、任意の `itemN` 引数を渡したい場合は、 `start` より後の要素をすべて削除するために `deleteCount` として `Infinity` を渡す必要があります。明示的に `undefined` を渡すと、変換されて `0` になるからです。

`deleteCount` が `0` または負の数の場合、どの要素も取り除かれません。この場合、少なくとも 1 つの新しい要素を指定する必要があります（以下参照）。

`item1`, …, `itemN` 省略可

配列に追加する要素で、`start` から始まります。

要素を指定しなかった場合、`splice()` は単に配列から要素を取り除きます。

### 返値

取り除かれた要素を含む配列です。

要素が 1 つだけ取り除かれた場合は、要素数 1 の配列が返されます。

要素が取り除かれなかった場合、空の配列が返されます。

解説
--

`splice()` メソッドは変更メソッドです。 `this` の内容を変更します。指定した挿入する要素数と除去される要素数が異なる場合、配列の `length` も変更されます。同時に、 `@@species` を使用して、返す新しい配列インスタンスを作成します。

削除された部分が疎配列の場合、 `splice()` が返す配列も疎配列になり、対応するインデックスは空のスロットになります。

`splice()` メソッドは汎用的です。このメソッドは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。文字列も配列風ですが、文字列は不変なので、このメソッドを適用するのには適していません。

例
-

### 2 の位置の手前から 0 個の要素を削除して "drum" を挿入

```js
const myFish = ["angel", "clown", "mandarin", "sturgeon"];
const removed = myFish.splice(2, 0, "drum");

// myFish は ["angel", "clown", "drum", "mandarin", "sturgeon"]
// removed は [] であり、どの要素も取り除かれていない
```

### 2 の位置の手前から 0 個の要素を削除して、"drum" と "guitar" を挿入

```js
const myFish = ["angel", "clown", "mandarin", "sturgeon"];
const removed = myFish.splice(2, 0, "drum", "guitar");

// myFish は ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"]
// removed は [] であり、どの要素も取り除かれていない
```

### 3 の位置から 1 つ取り除く

```js
const myFish = ["angel", "clown", "drum", "mandarin", "sturgeon"];
const removed = myFish.splice(3, 1);

// myFish は ["angel", "clown", "drum", "sturgeon"]
// removed は ["mandarin"]
```

### 2 の位置から 1 つ取り除いて "trumpet" を挿入

```js
const myFish = ["angel", "clown", "drum", "sturgeon"];
const removed = myFish.splice(2, 1, "trumpet");

// myFish は ["angel", "clown", "trumpet", "sturgeon"]
// removed は ["drum"]
```

### 0 の位置から 2 つ取り除き、そこへ "parrot" と "anemore" と "blue" を挿入

```js
const myFish = ["angel", "clown", "trumpet", "sturgeon"];
const removed = myFish.splice(0, 2, "parrot", "anemone", "blue");

// myFish は ["parrot", "anemone", "blue", "trumpet", "sturgeon"]
// removed は ["angel", "clown"]
```

### 2 の位置から 2 つ取り除く

```js
const myFish = ["parrot", "anemone", "blue", "trumpet", "sturgeon"];
const removed = myFish.splice(2, 2);

// myFish は ["parrot", "anemone", "sturgeon"]
// removed は ["blue", "trumpet"]
```

### -2 の位置から 1 つ取り除く

```js
const myFish = ["angel", "clown", "mandarin", "sturgeon"];
const removed = myFish.splice(-2, 1);

// myFish は ["angel", "clown", "sturgeon"]
// removed は ["mandarin"]</pre>
```

### 2 の位置からすべての要素を取り除く

```js
const myFish = ["angel", "clown", "mandarin", "sturgeon"];
const removed = myFish.splice(2);

// myFish は ["angel", "clown"]
// 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' }
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-array.prototype.splice |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* インデックス付きコレクションのガイド
* `Array`
* `Array.prototype.concat()`
* `Array.prototype.push()`
* `Array.prototype.pop()`
* `Array.prototype.shift()`
* `Array.prototype.slice()`
* `Array.prototype.toSpliced()`
* `Array.prototype.unshift()`


Array.from() - JavaScript

Array.from()
============

**`Array.from()`** 静的メソッドは、反復可能オブジェクトや配列風オブジェクトからシャローコピーされた、新しい `Array` インスタンスを生成します。

試してみましょう
--------

構文
--

```js
Array.from(arrayLike)
Array.from(arrayLike, mapFn)
Array.from(arrayLike, mapFn, thisArg)
```

### 引数

`arrayLike`

配列に変換する反復可能オブジェクトまたは配列風オブジェクト。

`mapFn` 省略可

配列の各要素に対して呼び出す関数です。指定された場合、配列に追加されるすべての値は最初にこの関数に渡され、代わりに `mapFn` の返値が配列に追加されます。この関数は以下の引数で呼び出されます。

`element`

配列内で現在処理中の要素です。

`index`

配列内で現在処理中の要素のインデックスです。

`thisArg` 省略可

`mapFn` を実行する時に `this` として使用する値です。

### 返値

新しい `Array` インスタンス。

解説
--

`Array.from()` は、以下のものから `Array` を生成します。

* 反復可能オブジェクト（`Map` や `Set` のような要素を取得するオブジェクト）
* オブジェクトが反復可能でない場合は、配列風オブジェクト（`length` プロパティおよび添字の付いた要素を持つオブジェクト）

反復可能オブジェクトでも配列風でもない普通のオブジェクトを配列に変換するには（プロパティのキー、値、またはその両方を列挙して） `Object.keys()`、`Object.values()`、`Object.entries()` のいずれかを使用してください。非同期反復可能オブジェクトを配列に変換するには、`Array.fromAsync()`を使用します。

`Array.from()` は疎配列を作成しません。 `arrayLike` オブジェクトのインデックスプロパティが欠けている場合、新しい配列では `undefined` になります。

`Array.from()` にはオプションで `mapFn` という引数があり、 `map()` と同様に、作成する配列のそれぞれの要素に対して関数を実行することができます。より明確には、`Array.from(obj, mapFn, thisArg)` は `Array.from(obj).map(mapFn, thisArg)` と同じ結果を保有します。ただし、`Array.from(obj).map(mapFn, thisArg)` は中間配列を作成せず、`mapFn` は配列全体を持たずに 2 つの引数 (`element`, `index`) を受け取るだけです。

**メモ:** この動作は型付き配列にとってより重要です。なぜなら、中間の配列は適切な型を入力するために必然的に値が切り捨てられるからです。 `Array.from()` は `TypedArray.from()` と同じシグネチャを持つために実装します。

`Array.from()` メソッドは汎用ファクトリーメソッドです。例えば、 `Array` のサブクラスが `from()` メソッドを継承した場合、継承した `from()` メソッドは `Array` インスタンスではなく、サブクラスの新しいインスタンスを返します。実際には、新しい配列の長さを表す単一の引数を受け入れるコンストラクター関数を `this` 値として指定することができます。反復可能オブジェクトが `arrayLike` として渡された場合、コンストラクターは引数なしで呼び出されます。配列風のオブジェクトが渡された場合、コンストラクターは配列風オブジェクトの正規化された長さで呼び出されます。最終的な `length` は反復処理が完了したときに再び設定されます。もし `this` の値がコンストラクター関数でない場合、代わりにプレーンな `Array` コンストラクターが使用されます。

例
-

### 文字列からの配列の生成

```js
Array.from("foo");
// [ "f", "o", "o" ]
```

### Set からの配列の生成

```js
const set = new Set(["foo", "bar", "baz", "foo"]);
Array.from(set);
// [ "foo", "bar", "baz" ]
```

### Map からの配列の生成

```js
const map = new Map([
  [1, 2],
  [2, 4],
  [4, 8],
]);
Array.from(map);
// [[1, 2], [2, 4], [4, 8]]

const mapper = new Map([
  ["1", "a"],
  ["2", "b"],
]);
Array.from(mapper.values());
// ['a', 'b'];

Array.from(mapper.keys());
// ['1', '2'];
```

### NodeList からの配列の生成

```js
// DOM 要素のプロパティに基づく配列を作成します。
const images = document.querySelectorAll("img");
const sources = Array.from(images, (image) => image.src);
const insecureSources = sources.filter((link) => link.startsWith("http://"));
```

### 配列風オブジェクト（引数）からの配列の生成

```js
function f() {
  return Array.from(arguments);
}

f(1, 2, 3);

// [ 1, 2, 3 ]
```

### アロー関数と Array.from の使用

```js
// 要素を操作するためのマップ関数として
// アロー関数を使用
Array.from([1, 2, 3], (x) => x + x);
// [2, 4, 6]

// 連番の生成
// 配列はそれぞれの場所が `undefined` で初期化されるため、
// 以下の `v` の値は `undefined` になる
Array.from({ length: 5 }, (v, i) => i);
// [0, 1, 2, 3, 4]
```

### 連番の生成（範囲指定）

```js
// 連番の生成関数（Clojure や PHP などでよく "range" と呼ばれる）
const range = (start, stop, step) =>
  Array.from({ length: (stop - start) / step + 1 }, (\_, i) => start + i \* step);

// 0..4 の範囲の数値を生成
range(0, 4, 1);
// [0, 1, 2, 3, 4]

// 1..10 の範囲の数値を 2 ごとに生成
range(1, 10, 2);
// [1, 3, 5, 7, 9]

// Array.from を使用して順番通りになるようアルファベットを生成
range("A".charCodeAt(0), "Z".charCodeAt(0), 1).map((x) =>
  String.fromCharCode(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' ]
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-array.from |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `Array.from` のポリフィル (`core-js`)
* インデックス付きコレクションのガイド
* `Array`
* `Array()`
* `Array.of()`
* `Array.fromAsync()`
* `Array.prototype.map()`
* `TypedArray.from()`


Array.prototype.toSpliced() - JavaScript

Array.prototype.toSpliced()
===========================

**`toSpliced()`** は `Array` インスタンスのメソッドで、 `splice()` メソッドに対応するコピーメソッドです。これは、指定された位置の要素を除去したり置き換えたりした新しい配列を返します。

構文
--

```js
toSpliced(start)
toSpliced(start, deleteCount)
toSpliced(start, deleteCount, item1)
toSpliced(start, deleteCount, item1, item2)
toSpliced(start, deleteCount, item1, item2, /\* …, \*/ itemN)
```

### 引数

`start`

配列の変更を始める位置のゼロから始まるインデックスで、整数に変換されます。

* 負のインデックスは配列の末尾から数えます。 `start < 0` の場合は `start + array.length` を使用します。
* `start < -array.length` または `start` が省略された場合は `0` が使用されます。
* `start >= array.length` である場合、削除される要素はありませんが、このメソッドは追加関数として動作し、提供されただけの要素を追加します。

`deleteCount` 省略可

整数で、配列内で `start` から削除する要素の数を示します。

`deleteCount` を省略した場合、またはその値が `start` で指定した位置以降の要素数以上の場合、 `start` から配列の末尾までのすべての要素が削除されます。ただし、もし `itemN` 引数を渡したい場合は、 `Infinity` を `deleteCount` に渡して `start` 以降の要素をすべて削除してください。明示的に `undefined` を指定すると `0` に変換されてしまうからです。

`deleteCount` が `0` または負の場合、要素は除去されません。
 この場合、少なくとも 1 つの新しい要素を指定する必要があります（下記参照）。

`item1`, …, `itemN` 省略可

配列に追加する要素を `start` から始めます。

要素を指定しない場合、 `toSpliced()` は配列から要素を取り除くだけです。

### 返値

`start`, `item1`, `item2`, …, `itemN` より前のすべての要素と、 `start + deleteCount` より後のすべての要素からなる新しい配列です。

解説
--

`toSpliced()` メソッドは `splice()` と同様に、一度に複数のことを行います。指定されたインデックスの位置から、指定された数の要素を配列から除去し、同じインデックスの位置に指定された要素を挿入します。しかし、元の配列を変更するのではなく、新しい配列を返します。したがって、削除された要素はこのメソッドからは返されません。

`toSpliced()` メソッドは決して疎配列を生成しません。疎配列の場合、空のスロットは新しい配列の `undefined` に置き換わります。

`toSpliced()` メソッドは汎用です。 `this` の値が `length` プロパティを持っており、整数のキーのプロパティがあることのみを期待します。

例
-

### 要素の削除、追加、置き換え

`toSpliced()` を使用すると、配列の要素を削除、追加、置き換えることができ、`slice()` や `concat()` を使用するよりも効率的に新しい配列を作成することができます。

```js
const months = ["Jan", "Mar", "Apr", "May"];

// インデックス 1 の要素の挿入
const months2 = months.toSpliced(1, 0, "Feb");
console.log(months2); // ["Jan", "Feb", "Mar", "Apr", "May"]

// インデックス 2 から始まる 2 つの要素を削除
const months3 = months2.toSpliced(2, 2);
console.log(months3); // ["Jan", "Feb", "May"]

// インデックス 1 の要素を 2 つの新しい要素で置き換え
const months4 = months3.toSpliced(1, 1, "Feb", "Mar");
console.log(months4); // ["Jan", "Feb", "Mar", "May"]

// 元配列は変更しない
console.log(months); // ["Jan", "Mar", "Apr", "May"]
```

### 疎配列に対する toSpliced() の使用

`toSpliced()` メソッドは常に密な配列を作成します。

```js
const arr = [1, , 3, 4, , 6];
console.log(arr.toSpliced(1, 2)); // [1, 4, undefined, 6]
```

### 配列以外のオブジェクトに対する toSpliced() の呼び出し

`toSpliced()` メソッドは `this` の `length` プロパティを読み取ります。そして、必要な整数キーのプロパティを読み込み、新しい配列に書き込みます。

```js
const arrayLike = {
  length: 3,
  unrelated: "foo",
  0: 5,
  2: 4,
};
console.log(Array.prototype.toSpliced.call(arrayLike, 0, 1, 2, 3));
// [2, 3, undefined, 4]
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-array.prototype.tospliced |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `Array.prototype.toSpliced` のポリフィル (`core-js`)
* `Array.prototype.splice()`
* `Array.prototype.toReversed()`
* `Array.prototype.toSorted()`
* `Array.prototype.with()`


Array.prototype.flat() - JavaScript

Array.prototype.flat()
======================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Learn more
* See full compatibility
* Report feedback
**`flat()`** は `Array` インスタンスのメソッドで、すべてのサブ配列の要素を指定した深さで再帰的に結合した新しい配列を生成します。

試してみましょう
--------

構文
--

```js
flat()
flat(depth)
```

### 引数

`depth` 省略可

 ネストされた配列構造で、どの程度の深さをフラット化するか指定する深さレベルです。
 既定値は 1 です。

### 返値

サブ配列の要素を結合した新しい配列。

解説
--

`flat()` メソッドはコピーメソッドです。これは `this` を変更するのではなく、元の配列と同じ要素を格納したシャローコピーを返します。

`flat()` メソッドは、フラット化される配列が疎配列の場合、空のスロットを無視します。例えば、 `depth` が 1 の場合、ルート配列と最初の入れ子配列の空のスロットは無視されますが、それ以上の入れ子配列の空のスロットは配列自体に保持されます。

`flat()` メソッドは汎用的です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。しかし、その要素を平坦化するには配列でなければなりません。

例
-

### ネストされた配列の平坦化

```js
const arr1 = [1, 2, [3, 4]];
arr1.flat();
// [1, 2, 3, 4]

const arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

const arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

const arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
```

### 平坦化と配列の穴

`flat()` メソッドは配列内の空要素を削除します。

```js
const arr5 = [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 ]
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-array.prototype.flat |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `Array.prototype.flat` のポリフィル (`core-js`)
* インデックス付きコレクションのガイド
* `Array`
* `Array.prototype.concat()`
* `Array.prototype.flatMap()`
* `Array.prototype.map()`
* `Array.prototype.reduce()`


Array.prototype.slice() - JavaScript

Array.prototype.slice()
=======================

**`slice()`** は `Array` インスタンスのメソッドで、配列の一部を `start` から `end` （`end` は含まれない）までの範囲で、選択した新しい配列オブジェクトにシャローコピーして返します。
 ここで `start` と `end` はその配列に含まれる項目のインデックスを表します。元の配列は変更されません。

試してみましょう
--------

構文
--

```js
slice()
slice(start)
slice(start, end)
```

### 引数

`start` 省略可

抽出を始める位置のゼロから始まるインデックスで、整数に変換されます。

* インデックスが負の場合、配列の末尾からさかのぼって数えます。 `start < 0` の場合、 `start + array.length` が使用されます。
* `start < -array.length` または `start` が省略された場合は `0` が使用されます。
* `start >= array.length` の場合、何も抽出されません。

`end` 省略可

抽出し終える位置のゼロから始まるインデックスで、整数に変換されます。 `slice()` は `end` を含まず、その直前までを抽出します。

* インデックスが負の場合、配列の末尾からさかのぼって数えます。 `end < 0` の場合、 `end + array.length` が使用されます。
* `end < -array.length` の場合は `0` が使用されます。
* `end >= array.length` または `end` が省略された場合は `array.length` が使用され、最後まですべての要素が抽出されます。
* 正規化後に `end` が `start` より前か同じ位置になった場合、何も抽出されません。

### 返値

取り出された要素を含む新しい配列です。

解説
--

`slice()` メソッドはコピーメソッドです。これは `this` を変更するのではなく、元の配列と同じ要素を格納したシャローコピーを返します。

`slice()` メソッドは空のスロットを保持します。スライスされた部分が疎配列の場合、返す配列も疎配列になります。

`slice()` メソッドは汎用的です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。

例
-

### 既存の配列の一部を返す

```js
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1, 3);

// fruits には ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'] が含まれる
// citrus には ['Orange','Lemon'] が含まれる
```

### slice の使用

以下の例で、`slice` は新しい配列 `newCar` を `myCar` から生成します。両者ともオブジェクト `myHonda` への参照を含んでいます。`myHonda` の色が purple に変更されると、両方の要素がその変更を反映します。

```js
// slice を使って、myCar から newCar を生成する。
const myHonda = {
  color: "red",
  wheels: 4,
  engine: { cylinders: 4, size: 2.2 },
};
const myCar = [myHonda, 2, "cherry condition", "purchased 1997"];
const newCar = myCar.slice(0, 2);

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("myCar[0].color =", myCar[0].color);
console.log("newCar[0].color =", newCar[0].color);
```

このスクリプトの出力は次の様になります。
```

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 ]
myCar[0].color = red
newCar[0].color = red
The new color of my Honda is purple
myCar[0].color = purple
newCar[0].color = purple
```

### 配列以外のオブジェクトに対する slice() の呼び出し

`slice()` メソッドは `this` の `length` プロパティを読み込みます。そして、 `start` から `end` までの整数キーのプロパティを読み込み、新しく作成した配列に定義します。

```js
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 ]
```

### slice() を用いて配列風オブジェクトを配列に変換

`slice()` メソッドは `bind()` や `call()` と共に、配列風オブジェクトを配列に変換するユーティリティメソッドを作成するためによく使われます。

```js
// slice() は第 1 引数として `this` が渡されて呼び出される
const slice = Function.prototype.call.bind(Array.prototype.slice);

function list() {
  return slice(arguments);
}

const list1 = list(1, 2, 3); // [1, 2, 3]
```

### 疎配列に対する slice() の使用

`slice()` から返される配列は、元の配列が疎配列であれば疎配列になります。

```js
console.log([1, 2, , 4, 5].slice(1, 4)); // [2, empty, 4]
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-array.prototype.slice |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `Array.prototype.slice` のポリフィル (`core-js`)
* インデックス付きコレクションのガイド
* `Array`
* `Array.prototype.pop()`
* `Array.prototype.shift()`
* `Array.prototype.concat()`
* `Array.prototype.splice()`
* `TypedArray.prototype.slice()`
* `String.prototype.slice()`


Array: length - JavaScript

Array: length
=============

**`length`** は `Array` インスタンスのデータプロパティで、配列の要素の数を表します。値は符号なし 32 ビット整数で、常に配列の最も大きなインデックスよりも数値的に大きくなります。

試してみましょう
--------

値
-

非負の整数で、 232 未満です。

| `Array: length` のプロパティ属性 |
| --- |
| 書込可能 | 可 |
| 列挙可能 | 不可 |
| 設定可能 | 不可 |

解説
--

`length` プロパティの値は非負の整数で、 232 未満の値です。

```js
const listA = [1, 2, 3];
const listB = new Array(6);

console.log(listA.length);
// 3

console.log(listB.length);
// 6

listB.length = 2 \*\* 32; // 4294967296
// RangeError: Invalid array length

const listC = new Array(-100); // 負の数は許されない
// RangeError: Invalid array length
```

配列オブジェクトは `length` プロパティを監視し、自動的に `length` 値を配列のコンテンツと同期させます。これは、次のことを意味します。

* 新しい `length` を超えた要素は削除されます。
* 配列のインデックス（232 より小さい非負の整数）を現在の `length` よりも大きい値に設定するには、配列を拡張します。 `length` プロパティは新しい最も大きいインデックスを反映するように増加します。
* `length` に無効な値（例えば、負の数や非整数）を設定すると、 `RangeError` 例外が発生します。

`length` に現在の長さよりも大きな値を設定すると、配列は実際の値が `undefined` ではなく、空のスロットを追加することで拡張されます。空のスロットは配列メソッドと特別な対話をします。配列メソッドと空のスロットを参照してください。

```js
const arr = [1, 2];
console.log(arr);
// [ 1, 2 ]

arr.length = 5; // 現在 2 の配列の長さを 5 に設定
console.log(arr);
// [ 1, 2, <3 つの空アイテム> ]

arr.forEach((element) => console.log(element));
// 1
// 2
```

詳細は `length` と数値プロパティとの関係をご覧ください。

例
-

### 配列を反復処理する

以下の例では、配列 `numbers` がいくつの要素を持っているかを知るために `length` プロパティを見ることで、配列を反復処理します。その際それぞれの値は 2 倍されます。

```js
const numbers = [1, 2, 3, 4, 5];
const length = numbers.length;
for (let i = 0; i < length; i++) {
  numbers[i] \*= 2;
}
// numbers は [2, 4, 6, 8, 10] となった
```

### 配列の短縮

以下の例は配列 `numbers` の要素数が 3 より大きいかどうかを調べて、大きいならその `length` を 3 としています。

```js
const numbers = [1, 2, 3, 4, 5];

if (numbers.length > 3) {
  numbers.length = 3;
}

console.log(numbers); // [1, 2, 3]
console.log(numbers.length); // 3
console.log(numbers[3]); // undefined; the extra elements are deleted
```

### 固定長の空の配列を作成

`length` に現在の長さ以上の値を設定すると、疎配列を作成します。

```js
const numbers = [];
numbers.length = 3;
console.log(numbers); // [empty x 3]
```

### length の書き込み不可の配列

`length` プロパティは、現在の長さを超えて要素が追加されると、配列によって自動的に更新されます。もし `length` プロパティを書き込み不可にすると、配列はそれを更新できなくなります。これは厳格モードではエラーが発生します。

```js
"use strict";

const numbers = [1, 2, 3, 4, 5];
Object.defineProperty(numbers, "length", { writable: false });
numbers[5] = 6; // TypeError: Cannot assign to read only property 'length' of object '[object Array]'
numbers.push(5); // // TypeError: Cannot assign to read only property 'length' of object '[object Array]'
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-properties-of-array-instances-length |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* インデックス付きコレクションガイド
* `Array`
* `TypedArray.prototype.length`
* `String`: `length`
* RangeError: invalid array length


Array.prototype.map() - JavaScript

Array.prototype.map()
=====================

**`map()`** は `Array` インスタンスのメソッドで、与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。

試してみましょう
--------

構文
--

```js
map(callbackFn)
map(callbackFn, thisArg)
```

### 引数

`callbackFn`

配列のそれぞれの要素に対して実行する関数。その返値は、新しい配列の単一の要素として追加されます。この関数は、以下の引数で呼び出されます。

`element`

配列内で現在処理中の要素です。

`index`

現在処理中の要素の配列内における添字です。

`array`

`map()` が呼び出された配列です。

`thisArg` 省略可

`callbackFn` を実行するときに `this` として使う値です。反復処理メソッドを参照してください。

### 返値

与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列です。

解説
--

`map()` メソッドは反復処理メソッドです。指定された関数 `callbackFn` を配列に含まれる各要素に対して一度ずつ呼び出し、その結果から新しい配列を構築します。

`callbackFn` は値が割り当てられている配列インデックスに対してのみ呼び出されます。疎配列で空のスロットに対しては呼び出されません。

`map()` メソッドはコピーメソッドです。これは `this` を変更しません。しかし、 `callbackFn` に指定された関数は変更することがあります。ただし、配列の長さは `callbackFn` を最初に呼び出す前に保存されることに注意してください。したがって、

* `callbackFn` は `map()` の呼び出しを始めたときの配列の長さを超えて追加された要素にはアクセスしません。
* 既に処理したインデックスを変更しても、 `callbackFn` が再度呼び出されることはありません。
* まだ処理していない既存の配列要素が `callbackFn` によって変更された場合、 `callbackFn` に渡される値はその要素が取得される時点の値になります。削除された要素は処理されません。

**警告:** 前項で説明したような、参照中の配列の同時進行での変更は（特殊な場合を除いて）普通は避けるべきです。多くの場合、理解しにくいコードになります。

`map()` メソッドは汎用的です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。

`map` は新しい配列を作成するので、返された配列を使わない場合、map を使うのはパターンに合いません。代わりに `forEach` または `for...of` を使用してください。

例
-

### 数値の配列を平方根の配列にマッピング

次のコードは、数値からなる配列を取り、それらの数値の平方根からなる新しい配列を生成します。

```js
const numbers = [1, 4, 9];
const roots = numbers.map((num) => Math.sqrt(num));

// roots の内容は [1, 2, 3] となる
// numbers の内容は [1, 4, 9] のまま
```

### map を使用して配列内のオブジェクトを再フォーマット

次のコードは、オブジェクトの配列を受け取り、新たにフォーマットされた新しい配列を生成しています。

```js
const kvArray = [
  { key: 1, value: 10 },
  { key: 2, value: 20 },
  { key: 3, value: 30 },
];

const reformattedArray = kvArray.map(({ key, value }) => ({ [key]: value }));

console.log(reformattedArray); // [{ 1: 10 }, { 2: 20 }, { 3: 30 }]
console.log(kvArray);
// [
// { key: 1, value: 10 },
// { key: 2, value: 20 },
// { key: 3, value: 30 }
// ]
```

### 引数を含む関数を使用して数値配列を対応付ける

次のコードは、1 つの引数を必要とする関数を使用するときに `map` がどのように動作するかを示しています。引数は元の配列を通した `map` ループとして、配列の各要素に自動的に割り当てられます。

```js
const numbers = [1, 4, 9];
const doubles = numbers.map((num) => num \* 2);

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()` が行う有益なことが副作用を発生させることだけになってしまうことがあります。

```js
const products = [
  { name: "sports car" },
  { name: "laptop" },
  { name: "phone" },
];

products.map((product) => {
  product.price = 100;
});
```

前回述べたように、これはパターンに反します。 `map()` の返値を使用しない場合は、代わりに `forEach()` または `for...of` ループを使用してください。

```js
products.forEach((product) => {
  product.price = 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() を汎用的に NodeList で使用

この例では、 `querySelectorAll` によって収集されたオブジェクトのコレクションを反復処理する方法を示します。これは `querySelectorAll` が `NodeList` （オブジェクトの集合）を返すためです。

この場合、画面に選択されているすべての `option` の値を返します。

```js
const elems = document.querySelectorAll("select option:checked");
const values = Array.prototype.map.call(elems, ({ value }) => value);
```

もっと簡単な方法は `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() で使用

(このブログの記事に創発されました)

 コールバック関数は第一引数（変換するべき要素）だけを意識して指定するケースがほとんどだと思います。
 しかし一般的に第一引数しか使わないような関数でも、実は追加のオプション引数を受け取っている場合があります。これは混乱につながる可能性があります。

まずこの例をご覧ください。

```js
["1", "2", "3"].map(parseInt);
```

返値は `[1, 2, 3]` となりそうですが、実際には `[1, NaN, NaN]` となります。

`parseInt` は大抵一つの引数のみで使われますが、実際には 2 つの引数を取っています。 1 つ目は数値文字列、 2 つ目は基数です。 `Array.prototype.map` はコールバックに次の 3 つの引数を与えています。

* その要素
* その添字
* その配列

`parseInt` は 3 つ目の引数を無視しますが、 2 つ目の引数は無視*しません*。これは混乱を起こす可能性があるソースです。

繰り返し手順の正確な例は以下の通りです。

```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
```

解決策を考えてみましょう。

```js
const returnInt = (element) => parseInt(element, 10);

["1", "2", "3"].map(returnInt); // [1, 2, 3]
// 期待した通り、数値の配列が返る。

// アロー関数構文を使って、より簡潔に上記と同じ結果を得ることが出来ます。
["1", "2", "3"].map((str) => parseInt(str)); // [1, 2, 3]

// ちなみにこの命題ではもっと簡単に同じ結果を得る方法があります。
["1", "2", "3"].map(Number); // [1, 2, 3]

// parseInt() とは違って、 Number() は float または (解決した) 指数表現を返します。
["1.1", "2.2e2", "3e300"].map(Number); // [1.1, 220, 3e+300]

// 比較のために、上記の配列に parseInt() を用いると次のようになります。
["1.1", "2.2e2", "3e300"].map((str) => parseInt(str)); // [1, 2, 3]
```

`parseInt` を引数として呼び出された map メソッドの代替出力の 1 つは、次のように実行されます。

```js
const strings = ["10", "10", "10"];
const numbers = strings.map(parseInt);

console.log(numbers);
// 実際の結果 [10, NaN, 2] は上記の説明からすると意外なものかもしれません。
```

### undefined を持つ対応付けられた配列

`undefined` または nothing を返すと、以下のものを返します。

```js
const numbers = [1, 2, 3, 4];
const filteredNumbers = numbers.map((num, index) => {
  if (index < 3) {
    return num;
  }
});

// index は 0 から始まるので、 filterNumbers は 1,2,3 および undefined になります。
// filteredNumbers は [1, 2, undefined, undefined]
// numbers は [1, 2, 3, 4] のまま
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-array.prototype.map |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `Array.prototype.map` のポリフィル (`core-js`)
* インデックス付きコレクションのガイド
* `Array`
* `Array.prototype.forEach()`
* `Array.from()`
* `TypedArray.prototype.map()`
* `Map`


Array.prototype.sort() - JavaScript

Array.prototype.sort()
======================

**`sort()`** は `Array` のメソッドで、配列の要素をその場 (in-place) でソートし、ソートされた同じ配列の参照を返します。既定のソート順は昇順で、要素を文字列に変換してから、 UTF-16 コード単位の値の並びとして比較します。

ソートの時間的・空間的予測値は実装に依存するため、保証はできません。

元の配列を変更せずに配列内の要素をソートするには、 `toSorted()` を使用してください。

試してみましょう
--------

構文
--

```js
sort()
sort(compareFn)
```

### 引数

`compareFn` 省略可

ソート順を定義する関数です。返値は、 2 つの要素の相対順序を示す符号を持つ数値である必要があります。 `a` が `b` より小さい場合は負の値、`a` が `b` より大きい場合は正の値、等しい場合は 0 とします。 `NaN` は `0` として扱われます。この関数は次の引数で呼び出されます。

`a`

比較する第一要素。 `undefined` になることはありません。

`b`

比較する第二要素。 `undefined` になることはありません。

省略した場合、配列の要素は文字列に変換され、各文字の Unicode コードポイント値に従って並べ替えられます。

### 返値

ソートされた元の配列への参照です。なお、配列はその場でソートされ、コピーは作成されません。

解説
--

`compareFn` が与えられなかった場合、`undefined` 以外のすべての配列要素は文字列に変換され、文字列が UTF-16 コード単位順でソートされます。例えば、"banana" は "cherry" の前に来ます。数値のソートでは、9 が 80 の前に来ますが、数値は文字列に変換されるため、Unicode 順で "80" が "9" の前に来ます。`undefined` の要素はすべて、配列の末尾に並べられます。

`sort()` メソッドは空のスロットを保持します。疎配列の場合、空のスロットは配列の末尾に移動され、常にすべての `undefined` の後に置かれます。

**メモ:** UTF-16 では、`\uFFFF` を超える Unicode 文字は 2 つのサロゲートコード単位にエンコードされ、`\uD800` - `\uDFFF` の範囲になります。それぞれのコード単位の値は比較では別々に扱われます。したがって、`\uD855\uDE51` というサロゲートペアで形成される文字は、`\uFF3A` の文字よりも前に並べられます。

`compareFn` が与えられた場合、`undefined` 以外のすべての配列要素は比較関数の返値に基づきソートされます（`undefined` の要素はすべて、`compareFn` を呼び出すことなく配列の末尾へ並べられます）。

| `compareFn(a, b)` の返値 | ソート順 |
| --- | --- |
| > 0 | `a` を `b` の後に並べる（例えば `[b, a]`） |
| < 0 | `a` を `b` の前に並べる（例えば `[a, b]`） |
| === 0 | `a` と `b` の元の順序を維持する |

よって、比較関数は以下のような形式をもちます。

```js
function compareFn(a, b) {
  if (ある順序の基準において a は b より小さい) {
    return -1;
  } else if (その順序の基準において a は b より大きい) {
    return 1;
  }
  // a は b と等しい
  return 0;
}
```

より正式には、適切なソート動作を保証するために、比較関数は以下の要件を満たすことが求められます。

* *無害*: 比較関数は比較されるオブジェクトや外部の状態を変更しません。（これは重要です。比較関数がいつ、どのように呼び出されるかは保証されていないので、特定の呼び出しが外部に見える影響を及ぼしてはいけません）。
* *安定的*: 比較関数は、同じ組の入力に対して常に同じ結果を返します。
* *反射的*: `compareFn(a, a) === 0` となります。
* *反対称的*: `compareFn(a, b)` と `compareFn(b, a)` はともに `0` であるか、逆の符号でなければなりません。
* *推移的*: `compareFn(a, b)` と `compareFn(b, c)` がともに正、0、負のいずれかであれば、 `compareFn(a, c)` は前の 2 つと同じ符号になります。

上記の制約に適合する比較関数は、常に `1`, `0`, `-1` のすべてを返すか、あるいは一貫して `0` を返すことができます。例えば、比較関数が `1` と `0` のみを返す場合、あるいは `0` と `-1` のみを返す場合は、*反対称性* が崩れるので、確実にソートすることはできません。常に `0` を返す比較関数では、配列は全く変更されませんが、それでも信頼できます。

既定の字句比較関数は、上記の制約をすべて満たしています。

文字列の代わりに数字を比較する場合、比較関数は単純に `a` から `b` を引けばよいでしょう。次のように比較関数を定義すれば昇順に並べることができます（`Infinity` や `NaN` がなければですが）。

```js
function compareNumbers(a, b) {
  return a - b;
}
```

`sort()` メソッドは汎用的です。このメソッドは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。文字列も配列風ですが、文字列は不変なので、このメソッドを適用するのには適していません。

例
-

### 配列の生成、表示、ソート

以下の例は 4 つの配列を生成し、元の配列を表示したのちに、ソートした配列を表示します。数値の配列は比較関数なしでソートされたのち、比較関数ありでソートされます。

```js
const stringArray = ["Blue", "Humpback", "Beluga"];
const numberArray = [40, 1, 5, 200];
const numericStringArray = ["80", "9", "700"];
const mixedNumericArray = ["80", "9", "700", 40, 1, 5, 200];

function compareNumbers(a, b) {
  return a - b;
}

stringArray.join(); // 'Blue,Humpback,Beluga'
stringArray.sort(); // ['Beluga', 'Blue', 'Humpback']

numberArray.join(); // '40,1,5,200'
numberArray.sort(); // [1, 200, 40, 5]
numberArray.sort(compareNumbers); // [1, 5, 40, 200]

numericStringArray.join(); // '80,9,700'
numericStringArray.sort(); // ['700', '80', '9']
numericStringArray.sort(compareNumbers); // ['9', '80', '700']

mixedNumericArray.join(); // '80,9,700,40,1,5,200'
mixedNumericArray.sort(); // [1, 200, 40, 5, '700', '80', '9']
mixedNumericArray.sort(compareNumbers); // [1, 5, '9', 40, '80', 200, '700']
```

### オブジェクトの配列のソート

オブジェクトの配列は、プロパティの値を比較することで並べ替えることができます。

```js
const items = [
  { name: "Edward", value: 21 },
  { name: "Sharpe", value: 37 },
  { name: "And", value: 45 },
  { name: "The", value: -12 },
  { name: "Magnetic", value: 13 },
  { name: "Zeros", value: 37 },
];

// value によるソート
items.sort((a, b) => a.value - b.value);

// name によるソート
items.sort((a, b) => {
  const nameA = a.name.toUpperCase(); // 大文字小文字を無視
  const nameB = b.name.toUpperCase(); // 大文字小文字を無視
  if (nameA < nameB) {
    return -1;
  }
  if (nameA > nameB) {
    return 1;
  }

  // names must be equal
  return 0;
});
```

### 非 ASCII 文字のソート

非 ASCII 文字、つまりアクセント記号付き文字（e, é, è, a, ä など）を含む文字列をソートする場合、英語以外の文字列は `String.prototype.localeCompare()` を使用してください。この関数は、それらの文字を比較して正しい順序で表示することができます。（訳注: 日本語をソートする場合も含みます。）

```js
const items = ["réservé", "premier", "communiqué", "café", "adieu", "éclair"];
items.sort((a, b) => a.localeCompare(b));

// items は ['adieu', 'café', 'communiqué', 'éclair', 'premier', 'réservé']
```

### map を利用したソート

`compareFn` (比較関数) は、配列内の要素毎に複数回呼び出されることがあります。ただ `compareFn` の性質によっては、これが多大なオーバーヘッドをもたらす可能性もあります。`compareFn` がたくさんの処理を行えば行うほど、そしてソート対象の要素数が多ければ多いほど、ソートに map を利用すると効率が上がるでしょう。すなわち、対象の配列を一度だけ走査してソート対象の実際の値を取り出し、一時的な配列に格納した上でソートを行い、その上で一時的な配列を走査して正しい並び順を実現するやりかたです。

```js
// ソートする配列
const data = ["delta", "alpha", "charlie", "bravo"];

// 位置とソート値を持つオブジェクトを保持する一時的な配列です。
const mapped = data.map((v, i) => {
  return { i, value: someSlowOperation(v) };
});

// 削減された値を含む対応付けられた配列のソート
mapped.sort((a, b) => {
  if (a.value > b.value) {
    return 1;
  }
  if (a.value < b.value) {
    return -1;
  }
  return 0;
});

const result = mapped.map((v) => data[v.i]);
```

この手法を応用した mapsort というオープンソースのライブラリーが利用できます。

### sort() は同じ配列への参照を返す

`sort()` メソッドは元の配列への参照を返すので、返された配列を変更すると、元の配列も変更されます。

```js
const numbers = [3, 1, 4, 1, 5];
const sorted = numbers.sort((a, b) => a - b);
// numbers と sorted は両方とも [1, 1, 3, 4, 5]
sorted[0] = 10;
console.log(numbers[0]); // 10
```

元の配列を変更せずに `sort()` を行いたいが、他の配列のメソッド（`map()` など）のようにシャローコピーを返したい場合は、 `toSorted()` メソッドを使用してください。他にも、 `sort()` を呼び出す前にスプレッド構文または `Array.from()` を使用してシャローコピーを行うことができます。

```js
const numbers = [3, 1, 4, 1, 5];
// [...numbers] creates a shallow copy, so sort() does not mutate the original
const sorted = [...numbers].sort((a, b) => a - b);
sorted[0] = 10;
console.log(numbers[0]); // 3
```

### ソートの安定性

バージョン 10 （または ECMAScript 2019）以降、仕様書では `Array.prototype.sort` が安定していることが決められています。

例えば、成績と横に並んだ生徒のリストがあったとします。生徒のリストはすでにアルファベット順の名前でソートされていることに注意してください。

```js
const students = [
  { name: "Alex", grade: 15 },
  { name: "Devlin", grade: 15 },
  { name: "Eagle", grade: 13 },
  { name: "Sam", grade: 14 },
];
```

この配列を `grade` で昇順にソートした後、

```js
students.sort((firstItem, secondItem) => firstItem.grade - secondItem.grade);
```

変数 `students` は以下のような値になります。

```js
[
  { name: "Eagle", grade: 13 },
  { name: "Sam", grade: 14 },
  { name: "Alex", grade: 15 }, // original maintained for similar grade (stable sorting)
  { name: "Devlin", grade: 15 }, // original maintained for similar grade (stable sorting)
];
```

重要なことは、同じ評点を保有する学生（例: Alex と Devlin）は、ソートを呼び出す前と同じ順番のままであることです。これは、安定したソートアルゴリズムが保証するものです。

バージョン 10 （または ECMAScript 2019） 以前は、ソートの安定性が保証されていないため、以下のような結果になる可能性があります。

```js
[
  { name: "Eagle", grade: 13 },
  { name: "Sam", grade: 14 },
  { name: "Devlin", grade: 15 }, // original order not maintained
  { name: "Alex", grade: 15 }, // original order not maintained
];
```

### 正しくない形の比較関数でのソート

比較関数が解説で説明した無害性、安定性、反射性、反対称性、推移性のルールをすべて満たしていない場合、プログラムの動作はうまく定義されません。

例えば、このコードを考えてください。

```js
const arr = [3, 1, 4, 1, 5, 9];
const compareFn = (a, b) => (a > b ? 1 : 0);
arr.sort(compareFn);
```

ここでの `compareFn` 関数は、反対称性を満たしていないため、正しい形式ではありません。 `a > b` ならば `1` を返しますが、 `a` と `b` を入れ替えると、負の値ではなく `0` を返すようになります。そのため、生成される配列はエンジンによって異なります。例えば、V8（Chrome、Node.js などで使用）や JavaScriptCore（Safari で使用）は配列を全くソートせず、 `[3, 1, 4, 1, 5, 9]` を返しますが、SpiderMonkey（Firefox で使用）は `[1, 1, 3, 4, 5, 9]` のように昇順に並べた配列を返すことになります。

しかし、`compareFn` 関数を少し変更して、`-1` や `0` を返すようにすると、次のようになります。

```js
const arr = [3, 1, 4, 1, 5, 9];
const compareFn = (a, b) => (a > b ? -1 : 0);
arr.sort(compareFn);
```

すると、 V8 や JavaScriptCore では `[9, 5, 4, 3, 1, 1]` のように降順にソートされますが、 SpiderMonkey では `[3, 1, 4, 1, 5, 9]` のようにそのままの値を返します。

この実装上の不整合があるため、常に 5 つの制約に従うことで、比較器を正しい形にすることをお勧めします。

### 疎配列における sort() の使用

空のスロットは配列の末尾に移されます。

```js
console.log(["a", "c", , "b"].sort()); // ['a', 'b', 'c', empty]
console.log([, undefined, "a", "b"].sort()); // ["a", "b", undefined, empty]
```

### 配列以外のオブジェクトに対する sort() の呼び出し

`sort()` メソッドは `this` の `length` プロパティを読み取ります。そして、`0` から `length - 1` までの範囲にある既存の整数キーのプロパティをすべて集合し、ソートして書き戻します。範囲内に存在しないプロパティがある場合、対応する末尾のプロパティは削除され、あたかも存在しないプロパティが末尾にソートされたかのようになります。

```js
const arrayLike = {
  length: 3,
  unrelated: "foo",
  0: 5,
  2: 4,
};
console.log(Array.prototype.sort.call(arrayLike));
// { '0': 4, '1': 5, length: 3, unrelated: 'foo' }
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-array.prototype.sort |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `Array.prototype.sort` の安定性などを含んだ現代の実装 (`core-js`)
* インデックス付きコレクションのガイド
* `Array`
* `Array.prototype.reverse()`
* `Array.prototype.toSorted()`
* `String.prototype.localeCompare()`
* `TypedArray.prototype.sort()`
* Getting things sorted in V8 on v8.dev (2018)
* Stable `Array.prototype.sort` on v8.dev (2019)
* `Array.prototype.sort` stability by Mathias Bynens


Array.prototype.toReversed() - JavaScript

Array.prototype.toReversed()
============================

**`toReversed()`** は `Array` インスタンスのメソッドで、 `reverse()` メソッドに対応するコピーメソッドです。これは、要素を逆順に並べた新しい配列を返します。

構文
--

```js
toReversed()
```

### 引数

なし。

### 返値

要素を逆順に格納した新しい配列です。

解説
--

`toReversed()` メソッドは、呼び出した配列オブジェクトの要素を逆順に並べ替えて新しい配列を返します。

疎配列に対して使用した場合、 `toReversed()` メソッドは空のスロットを `undefined` という値があるものとして反復処理します。

`toReversed()` メソッドは汎用です。 `this` の値が `length` プロパティを持っており、整数のキーのプロパティがあることのみを期待します。

例
-

### 配列内の要素を反転

次の例では、 3 つの要素を格納した配列 `items` を作成し、次に `items` の逆の配列を新しく作成します。このとき `items` 配列は変更されません。

```js
const items = [1, 2, 3];
console.log(items); // [1, 2, 3]

const reversedItems = items.toReversed();
console.log(reversedItems); // [3, 2, 1]
console.log(items); // [1, 2, 3]
```

### 疎配列に対する toReversed() の使用

`toReversed()` の返値は決して疎配列にはなりません。空のスロットは返す配列の `undefined` になります。

```js
console.log([1, , 3].toReversed()); // [3, undefined, 1]
console.log([1, , 3, 4].toReversed()); // [4, 3, undefined, 1]
```

### 配列以外のオブジェクトに対する toReversed() の呼び出し

`toReversed()` メソッドは `this` の `length` プロパティを読み取ります。そして、`length - 1` から `0` までの整数のキーを持つ各プロパティを降順に訪れ、現在のプロパティの値を配列の末尾に追加して返します。

```js
const arrayLike = {
  length: 3,
  unrelated: "foo",
  2: 4,
};
console.log(Array.prototype.toReversed.call(arrayLike));
// [4, undefined, undefined]
// '0' と '1' インデックスは存在しませんので、未定義となります。
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-array.prototype.toreversed |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `Array.prototype.toReversed` のポリフィル (`core-js`)
* インデックス付きコレクションのガイド
* `Array.prototype.reverse()`
* `Array.prototype.toSorted()`
* `Array.prototype.toSpliced()`
* `Array.prototype.with()`
* `TypedArray.prototype.toReversed()`


Array.prototype.unshift() - JavaScript

Array.prototype.unshift()
=========================

**`unshift()`** は `Array` インスタンスのメソッドで、指定された要素を配列の先頭に追加し、新しい配列の長さを返します。

試してみましょう
--------

構文
--

```js
unshift()
unshift(element1)
unshift(element1, element2)
unshift(element1, element2, /\* …, \*/ elementN)
```

### 引数

`element1`, …, `elementN`

`arr` の先頭に追加する要素。

### 返値

メソッドを呼び出した後のオブジェクトの新しい `length` プロパティの値です。

解説
--

`unshift` メソッドは、与えられた要素を配列風オブジェクトの一番最初に挿入します。

`Array.prototype.push()` は `unshift()` と似た動作をしますが、配列の末尾に対して行う点が異なります。

複数の要素が引数として渡された場合、引数として渡されたものと全く同じ順番で、オブジェクトの最初のチャンクに挿入されることに注意してください。したがって、 `unshift` を `n` 個の引数で **1 回**呼び出すのと、**1 個**の引数で `n` 回（例えばループを使って）呼び出すのとでは同じ結果にはなりません。

例をご覧ください。

```js
let arr = [4, 5, 6];

arr.unshift(1, 2, 3);
console.log(arr);
// [1, 2, 3, 4, 5, 6]

arr = [4, 5, 6]; // 配列をリセット

arr.unshift(1);
arr.unshift(2);
arr.unshift(3);

console.log(arr);
// [3, 2, 1, 4, 5, 6]
```

`unshift()` メソッドは汎用的です。このメソッドは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。文字列も配列風ですが、文字列は不変なので、このメソッドを適用するのには適していません。

例
-

### unshift の使用

```js
const arr = [1, 2];

arr.unshift(0); // 呼び出しの返値は 3、新しい配列の長さ
// arr is [0, 1, 2]

arr.unshift(-2, -1); // 新しい配列の長さは 5
// arr is [-2, -1, 0, 1, 2]

arr.unshift([-4, -3]); // 新しい配列の長さは 6
// arr is [[-4, -3], -2, -1, 0, 1, 2]

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 }
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-array.prototype.unshift |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `Array.prototype.unshift` の修正を含むポリフィル (`core-js`)
* インデックス付きコレクションのガイド
* `Array`
* `Array.prototype.push()`
* `Array.prototype.pop()`
* `Array.prototype.shift()`
* `Array.prototype.concat()`
* `Array.prototype.splice()`


Array() コンストラクター - JavaScript

Array() コンストラクター
================

**`Array()`** コンストラクターは `Array` オブジェクトを生成します。

構文
--

```js
new Array()
new Array(element1)
new Array(element1, element2)
new Array(element1, element2, /\* …, \*/ elementN)
new Array(arrayLength)

Array()
Array(element1)
Array(element1, element2)
Array(element1, element2, /\* …, \*/ elementN)
Array(arrayLength)
```

**メモ:** `Array()` は `new` を付けてもつけなくても呼び出せます。どちらも新しい `Array` のインスタンスを生成します。

### 引数

`element1`, …, `elementN`

JavaScript の配列は、与えられた要素で初期化されますが、 `Array` コンストラクターに単一の引数が渡され、その引数が数値であった場合は例外です (下記の `arrayLength` 引数を参照してください)。なお、この特殊な場合は JavaScript の配列が `Array` コンストラクターで生成されたときのみであり、角ブラケット構文で配列リテラルを作成した場合は当てはまりません。

`arrayLength`

`Array` コンストラクターに渡された唯一の引数が 0 から 232-1 の間（両端を含む）の整数であった場合は、新しい JavaScript の配列を返し、その `length` プロパティがその値になります（**メモ:** これは `arrayLength` 個の空のスロットを持つ配列であり、実際に `undefined` の値が入ったスロットではありません。疎配列を参照してください）。

### 例外

`RangeError`

引数が数値 1 つ (`arrayLength`) だけであるものの、その値が整数でないか、 0 ～ 232 - 1 （両端を含む）の範囲内になかった場合に発生します。

例
-

### 配列リテラル記法

配列はリテラル記法を使用して生成することができます。

```js
const fruits = ["りんご", "バナナ"];

console.log(fruits.length); // 2
console.log(fruits[0]); // "りんご"
```

### 単一の引数を持つ Array コンストラクター

配列は単一の数値の引数を持つコンストラクターで生成することができます。配列は `length` プロパティにその値が設定され生成され、その配列の要素は空スロットになります。

```js
const arrayEmpty = new Array(2);

console.log(arrayEmpty.length); // 2
console.log(arrayEmpty[0]); // undefined。実際は空スロット
console.log(0 in arrayEmpty); // false
console.log(1 in arrayEmpty); // false
```

```js
const arrayOfOne = new Array("2"); // 数値の 2 ではなく文字列の "2"

console.log(arrayOfOne.length); // 1
console.log(arrayOfOne[0]); // "2"
```

### 複数の引数を持つ Array コンストラクター

2 つ以上の引数がコンストラクターに渡された場合、与えられた要素を持つ新しい `Array` が生成されます。

```js
const fruits = new Array("りんご", "バナナ");

console.log(fruits.length); // 2
console.log(fruits[0]); // "りんご"
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-array-constructor |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* インデックス付きコレクションガイド
* `Array`


Array.prototype.at() - JavaScript

Array.prototype.at()
====================

Baseline 2022
-------------

Newly availableSince March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`at()`** は `Array` インスタンスのメソッドで、整数値を受け取り、その位置にある項目を返します。正の整数値と負の整数値が使用できます。負の整数は、配列の最後の項目から前へ数えます。

試してみましょう
--------

構文
--

```js
at(index)
```

### 引数

`index`

返される配列要素のゼロ基点の添字（位置）で、整数に変換されます。負の添字を使用した場合は、配列の末尾から逆に数えた位置です。`index < 0` であれば、 `index + array.length` がアクセスされます。

### 返値

配列の中で指定された位置に一致する要素です。`index < -array.length` または `index >= array.length` の場合は、対応するプロパティにアクセスしようとせず、常に `undefined` を返します。

解説
--

`at()` メソッドは、`index` が負でない場合、ブラケット記法と等価です。例えば、`array[0]` と `array.at(0)` は、どちらも最初の項目を返します。しかし、配列の末尾から要素を数える場合、PythonやRのように `array[-1]` を使用することはできません。角括弧内の値はすべて文字列プロパティとしてリテラルに扱われるため、結局、配列のインデックスではなく通常の文字列プロパティである `array["-1"]` を読むことになります。

通常、`length` にアクセスし、そこからインデックスを計算します。例えば、 `array[array.length - 1]` のようになります。 `at()` メソッドでは相対インデックスが可能なので、これを短縮して `array.at(-1)` とすることができます。

`at()` と `with()` を組み合わせることで、負のインデックスを用いた配列の読み取りと書き込みが（それぞれ）できます。

`at()` メソッドは汎用的です。`this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。

例
-

### 配列の末尾の値を返す

以下の例は、指定された配列の中で最後に見つかった要素を返す関数を提供します。

```js
// 項目付きの配列
const cart = ["りんご", "バナナ", "なし"];

// 指定された配列の最後の項目を返す関数
function returnLast(arr) {
  return arr.at(-1);
}

// 配列 'cart' の最後の項⽬を取得する
const item1 = returnLast(cart);
console.log(item1); // 'なし'

// 配列 'cart' に商品を追加
cart.push("みかん");
const item2 = returnLast(cart);
console.log(item2); // 'みかん'
```

### メソッドの比較

この例では、 `Array` の最後から 1 つ目の項目を選択するさまざまな方法を比較しています。以下に示すどの方法も有効ですが、`at()` メソッドの簡潔さと読みやすさが際立っています。

```js
// 項目付きの配列
const colors = ["red", "green", "blue"];

// length プロパティの使用
const lengthWay = colors[colors.length - 2];
console.log(lengthWay); // 'green'

// slice() メソッドを使用。配列を返すことに注意。
const sliceWay = colors.slice(-2, -1);
console.log(sliceWay[0]); // 'green'

// at() メソッドを使用
const atWay = colors.at(-2);
console.log(atWay); // 'green'
```

### 配列以外のオブジェクトでの at() の呼び出し

`at()` メソッドは、`this` の `length` プロパティを読み込んで、アクセスする添字を計算します。

```js
const arrayLike = {
  length: 2,
  0: "a",
  1: "b",
  2: "c", // length が 2 なので at() からは無視される
};
console.log(Array.prototype.at.call(arrayLike, 0)); // "a"
console.log(Array.prototype.at.call(arrayLike, 2)); // undefined
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-array.prototype.at |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `Array.prototype.at` のポリフィル (`core-js`)
* インデックス付きコレクションガイド
* `Array`
* `Array.prototype.findIndex()`
* `Array.prototype.indexOf()`
* `Array.prototype.with()`
* `TypedArray.prototype.at()`
* `String.prototype.at()`


Array.prototype.reduceRight() - JavaScript

Array.prototype.reduceRight()
=============================

**`reduceRight()`** は `Array` インスタンスのメソッドで、アキュームレーターと配列のそれぞれの値に対して（右から左へ）関数を適用して、単一の値にします。

左から右へ適用する場合は `Array.prototype.reduce()` を参照してください。

試してみましょう
--------

構文
--

```js
reduceRight(callbackFn)
reduceRight(callbackFn, initialValue)
```

### 引数

`callbackFn`

配列の各要素に対して実行される関数です。その返値は、次に `callbackFn` を呼び出す際の `accumulator` 引数の値になります。最後の呼び出しでは、返値は `reduceRight()` の返値となります。この関数は以下の引数で呼び出されます。

* `accumulator`
    + : 前回の `callbackFn` の呼び出し結果の値です。初回の呼び出しでは `initialValue` が指定されていた場合はその値、そうでない場合はこの配列の末尾の要素の値です。
* `currentValue`
    + : 現在の要素の値です。初回の呼び出しでは `initialValue` が指定された場合は末尾の要素の値であり、そうでない場合は末尾から 2 番目の要素の値です。
* `currentIndex`
    + : `currentValue` のインデックス位置です。初回の呼び出しでは、 `initialValue` が指定された場合は `array.length - 1`、そうでない場合は `array.length - 2` です。
    + : `reduceRight()` が呼び出された配列です。

`initialValue` 省略可

`callbackFn` の最初の呼び出しのときに、アキュームレーターとして使用する値です。初期値がが渡されなかった場合は、配列の最後の要素が適用され、その要素が飛ばされます。また、 `reduceRight()` を空の配列に対して初期値なしで呼び出すと `TypeError` になります。

### 返値

畳み込みによって得られた値です。

解説
--

`reduceRight()` メソッドは反復処理メソッドです。「縮小」コールバック関数を配列に含まれる各要素に対して昇順に一度ずつ呼び出し、その結果を単一の値に積算します。

`callbackFn` は値が割り当てられている配列インデックスに対してのみ呼び出されます。疎配列の空のスロットに対しては呼び出されません。

他の反復処理メソッドとは異なり、 `reduceRight()` は `thisArg` 引数を受け入れません。 `callbackFn` は常に `undefined` を `this` として呼び出され、 `callbackFn` が厳格モードでない場合は `globalThis` に置き換えられます。

`reduceRight()` メソッドは呼び出し元の配列を変更しませんが、 `callbackFn` に指定された関数は変更することがあります。ただし、配列の長さは `callbackFn` を最初に呼び出す前に保存されることに注意してください。したがって、

* `callbackFn` は `reduceRight()` の呼び出しを始めたときの配列の長さを超えて追加された要素にはアクセスしません。
* 既に処理したインデックスを変更しても、 `callbackFn` が再度呼び出されることはありません。
* まだ処理していない既存の配列要素が `callbackFn` によって変更された場合、 `callbackFn` に渡される値はその要素が取得される時点の値になります。削除された要素は `undefined` であるかのように処理されます。

**警告:** 前項で説明したような、参照中の配列の同時進行での変更は（特殊な場合を除いて）普通は避けるべきです。多くの場合、理解しにくいコードになります。

`reduceRight()` メソッドは汎用的です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。

例
-

### 初期値がない場合の reduceRight() の動作

reduceRight の `callbackFn` の呼び出しは次のようになります：

```js
arr.reduceRight((accumulator, currentValue, index, array) => {
  // …
});
```

関数が初めて呼び出されたとき、`accumulator` と `currentValue` は、2 つの値のいずれかになります。 `initialValue` を指定して `reduceRight` を呼び出した場合、`accumulator` は `initialValue` と等しくなり、`currentValue` は配列の最後の値と等しくなります。`initialValue` が指定されなかった場合、`accumulator` は配列の最後の値に等しく、`currentValue` は最後から 2 番目の値に等しくなります。

配列が空で、`initialValue` が指定されなかった場合は、`TypeError` が発生します。配列に (位置に関わらず) 要素が 1 つしかなく、`initialValue` が指定されなかった場合、または `initialValue` が指定されたが配列が空だった場合は、`callbackFn` を呼び出されずに単独の値が返されます。

この関数を使用した場合について見てみましょう。

```js
[0, 1, 2, 3, 4].reduceRight(
  (accumulator, currentValue, index, array) => accumulator + currentValue,
);
```

コールバックは 4 回呼び出され、ぞれぞれの呼び出しの引数と返値は次のようになります。

|  | `accumulator` | `currentValue` | `index` | Return value |
| --- | --- | --- | --- | --- |
| First call | `4` | `3` | `3` | `7` |
| Second call | `7` | `2` | `2` | `9` |
| Third call | `9` | `1` | `1` | `10` |
| Fourth call | `10` | `0` | `0` | `10` |

`reduceRight` の返値は、コールバック呼び出しの最後の返値である (`10`) になります。

### 初期値がある場合の reduceRight() の動作

ここでは、同じアルゴリズムを使用して同じ配列を縮小しますが、 `reduceRight()` の 2 つ目の引数である `initialValue` として `10` を使用します。

```js
[0, 1, 2, 3, 4].reduceRight(
  (accumulator, currentValue, index, array) => accumulator + currentValue,
  10,
);
```

|  | `accumulator` | `currentValue` | `index` | Return value |
| --- | --- | --- | --- | --- |
| First call | `10` | `4` | `4` | `14` |
| Second call | `14` | `3` | `3` | `17` |
| Third call | `17` | `2` | `2` | `19` |
| Fourth call | `19` | `1` | `1` | `20` |
| Fifth call | `20` | `0` | `0` | `20` |

`reduceRight` から返される値はこのときのもので、もちろん `20` です。

### 配列内のすべての値を合計する

```js
const sum = [0, 1, 2, 3].reduceRight((a, b) => a + b);
// sum is 6
```

### 一連のコールバックを使用して非同期関数のリストを実行し、それぞれの結果を次のコールバックに渡す

```js
const waterfall =
  (...functions) =>
  (callback, ...args) =>
    functions.reduceRight(
      (composition, fn) =>
        (...results) =>
          fn(composition, ...results),
      callback,
    )(...args);

const randInt = (max) => Math.floor(Math.random() \* max);

const add5 = (callback, x) => {
  setTimeout(callback, randInt(1000), x + 5);
};
const mult3 = (callback, x) => {
  setTimeout(callback, randInt(1000), x \* 3);
};
const sub2 = (callback, x) => {
  setTimeout(callback, randInt(1000), x - 2);
};
const split = (callback, x) => {
  setTimeout(callback, randInt(1000), x, x);
};
const add = (callback, x, y) => {
  setTimeout(callback, randInt(1000), x + y);
};
const div4 = (callback, x) => {
  setTimeout(callback, randInt(1000), x / 4);
};

const computation = waterfall(add5, mult3, sub2, split, add, div4);
computation(console.log, 5); // -> 14

// same as:

const computation2 = (input, callback) => {
  const f6 = (x) => div4(callback, x);
  const f5 = (x, y) => add(f6, x, y);
  const f4 = (x) => split(f5, x);
  const f3 = (x) => sub2(f4, x);
  const f2 = (x) => mult3(f3, x);
  add5(f2, input);
};
```

### reduce と reduceRight の違い

```js
const a = ["1", "2", "3", "4", "5"];
const left = a.reduce((prev, cur) => prev + cur);
const right = a.reduceRight((prev, cur) => prev + cur);

console.log(left); // "12345"
console.log(right); // "54321"
```

### 合成可能な関数の定義

関数合成とは、各関数の出力を次の関数に渡し、最後の関数の出力を最終的な結果とする、関数を組み合わせるための仕組みです。この例では `reduceRight()` を使って、関数合成を実現しています。

Wikipedia の Function composition も参照してください。

```js
const compose =
  (...args) =>
  (value) =>
    args.reduceRight((acc, fn) => fn(acc), value);

// 渡された数値をインクリメントする
const inc = (n) => n + 1;

// 渡された数値を 2 倍にする
const double = (n) => n \* 2;

// 合成関数を使用する
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
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-array.prototype.reduceright |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `Array.prototype.reduceRight` のポリフィル (`core-js`)
* インデックス付きコレクションのガイド
* `Array`
* `Array.prototype.map()`
* `Array.prototype.flat()`
* `Array.prototype.flatMap()`
* `Array.prototype.reduce()`
* `TypedArray.prototype.reduceRight()`
* `Object.groupBy()`
* `Map.groupBy()`


Array.prototype[@@unscopables] - JavaScript

Array.prototype[@@unscopables]
==============================

**`@@unscopables`** は `Array.prototype` のデータプロパティで、すべての `Array` インスタンスで共有されます。 ES2015 以前の ECMAScript 標準には含まれておらず、 `with` 文のバインディングの目的では無視されるプロパティ名を含んでいます。

値
-

以下の名前で `true` に設定された `null` プロトタイプオブジェクトです。

| `Array.prototype[@@unscopables]` のプロパティ属性 |
| --- |
| 書込可能 | 不可 |
| 列挙可能 | 不可 |
| 設定可能 | 可 |

解説
--

`Array` プロパティのうち、既定で `with` 文のバインディング目的では無視されるものは次のとおりです。

* `at()`
* `copyWithin()`
* `entries()`
* `fill()`
* `find()`
* `findIndex()`
* `findLast()`
* `findLastIndex()`
* `flat()`
* `flatMap()`
* `includes()`
* `keys()`
* `toReversed()`
* `toSorted()`
* `toSpliced()`
* `values()`

`Array.prototype[@@unscopables]` は、上記のプロパティ名をすべて `true` の値で持つ、空のオブジェクトです。このプロトタイプは `null` なので、 `Object.prototype` のプロパティ、例えば `toString` は偶然にスコープ付けできなくなることはなく、 `with` 文の中の `toString()` は引き続き配列の中で呼び出すことができます。

自作オブジェクトに `unscopables` を設定する方法については、 `Symbol.unscopables` を見てください。

例
-

ECMAScript 2015 以前に書かれた以下のコードで `keys.push('something')` を呼び出すことを考えてみてください。

```js
var keys = [];

with (Array.prototype) {
  keys.push("something");
}
```

ECMAScript 2015 で `Array.prototype.keys()` メソッドが導入されたとき、もし `@unscopables` データプロパティも導入されていなければ、 `keys.push('something')` の呼び出しは壊れていました。 JavaScript ランタイムが `keys` を `Array.prototype.keys()` メソッドであると解釈し、この例のコードで定義された配列 `keys` とは解釈しませんでした。

すなわち、 `@unscopables` データプロパティが `Array.prototype` にあるのは、 ECMAScript 2015 で導入された `Array` プロパティを `with` 文のバインドの目的では無視するようにし、 ECMAScript 2015 以前に書かれたコードを壊さず、期待どおりに動作し続けられるようにするものです。

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-array.prototype-@@unscopables |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `Array.prototype[@@unscopables]` のポリフィル (`core-js`)
* インデックス付きコレクションガイド
* `Array`
* `with`
* `Symbol.unscopables`