Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Array.f* で始まるメソッドの記事を更新 #16818

Merged
Original file line number Diff line number Diff line change
Expand Up @@ -2,43 +2,49 @@
title: Array.prototype.fill()
slug: Web/JavaScript/Reference/Global_Objects/Array/fill
l10n:
sourceCommit: 968e6f1f3b6f977a09e116a0ac552459b741eac3
sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de
---

{{JSRef}}

**`fill()`** メソッドは、開始位置(既定値は `0`)から終了位置(既定値は `array.length`)までのすべての要素を、静的な値に変更した配列を返します
**`fill()`** は {{jsxref("Array")}} インスタンスのメソッドで、インデックスの範囲内にある配列のすべての要素を一定の値に変更します。これは変更した配列を返します

{{EmbedInteractiveExample("pages/js/array-fill.html")}}

## 構文

```js
fill(value);
fill(value, start);
fill(value, start, end);
```js-nolint
fill(value)
fill(value, start)
fill(value, start, end)
```

### 引数

- `value`
- : 配列に設定する値です
- : 配列を埋める値。もし `value` がオブジェクトであれば、配列のそれぞれの要素はそのオブジェクトを参照します
- `start` {{optional_inline}}
- : 開始する位置です。既定値は `0` です。
- : 埋め始める位置のゼロから始まるインデックスで、[整数に変換されます](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#整数への変換)。
- インデックスが負の場合、配列の末尾からさかのぼって数えます。 `start < 0` の場合、 `start + array.length` が使用されます。
- `start < -array.length` または `start` が省略された場合は `0` が使用されます。
- `start >= array.length` の場合、埋められるインデックスはありません。
- `end` {{optional_inline}}
- : 終了する位置です。既定値は `arr.length` です。
- : 埋め終える位置のゼロから始まるインデックスで、[整数に変換されます](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#整数への変換)。 `fill()` は `end` を含まず、その直前までを埋めます。
- インデックスが負の場合、配列の末尾からさかのぼって数えます。 `end < 0` の場合、 `end + array.length` が使用されます。
- `end < -array.length` の場合は `0` が使用されます。
- `end >= array.length` または `end` が省略された場合、

### 返値

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

## 解説

- `start` が負の場合 `array.length + start` として扱われます
- `end` が負の場合 `array.length + end` として扱われます。
- `fill` は意図的に一般化されています。 `this` が `Array` オブジェクトである必要はありません
- `fill` は変更を行うメソッドです。配列そのものを変更して返します。コピーを返すのではありません。
- 最初の引数がオブジェクトの場合、配列の各スロットはそのオブジェクトを参照します
`fill()` メソッドは[変更メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#コピーメソッドと変更メソッド)です。これは `this` の長さは変更しませんが、 `this` のコンテンツは変更します

`fill()` メソッドは[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#疎配列)の空のスロットを、 `value` で埋めます

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

> **メモ:** `Array.prototype.fill()` を空の配列に対して使用すると、配列に変更するものがないので何も変更されません。
> 配列を宣言する際に `Array.prototype.fill()` を使用する場合は、スロットを配列に割り当てるようにしてください。
Expand All @@ -58,7 +64,6 @@ console.log([1, 2, 3].fill(4, -3, -2)); // [4, 2, 3]
console.log([1, 2, 3].fill(4, NaN, NaN)); // [1, 2, 3]
console.log([1, 2, 3].fill(4, 3, 5)); // [1, 2, 3]
console.log(Array(3).fill(4)); // [4, 4, 4]
console.log([].fill.call({ length: 3 }, 4)); // {0: 4, 1: 4, 2: 4, length: 3}

// 配列の各スロットから参照される、単一のオブジェクト。
const arr = Array(3).fill({}); // [{}, {}, {}]
Expand Down Expand Up @@ -89,6 +94,18 @@ console.log(arr[2][0]); // 1
const tempGirls = Array(5).fill("girl", 0);
```

配列は最初はインデックスが割り当てられていない[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#疎配列)であることに注意してください。 `fill()` でこの配列を埋めることができます。

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

`fill()` メソッドは `this` の `length` プロパティを読み取り、 `start` から `end` までの各整数キーのプロパティの値を設定します。

```js
const arrayLike = { length: 2 };
console.log(Array.prototype.fill.call(arrayLike, 1));
// { '0': 1, '1': 1, length: 2 }
```

## 仕様書

{{Specifications}}
Expand All @@ -100,5 +117,6 @@ const tempGirls = Array(5).fill("girl", 0);
## 関連情報

- [`Array.prototype.fill` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array)
- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)ガイド
- {{jsxref("Array")}}
- {{jsxref("TypedArray.prototype.fill()")}}
Original file line number Diff line number Diff line change
Expand Up @@ -2,79 +2,62 @@
title: Array.prototype.filter()
slug: Web/JavaScript/Reference/Global_Objects/Array/filter
l10n:
sourceCommit: d0e961d9a7368356b5d26efaaa7191b4f56a425a
sourceCommit: d9e66eca59d82c65166c65e7946332650da8f48f
---

{{JSRef}}

**`filter()`** メソッドは、この配列の中から、提供された関数で実装されたテストに合格した要素のみを抽出した[シャローコピー](/ja/docs/Glossary/Shallow_copy)を作成します。
**`filter()`** は {{jsxref("Array")}} インスタンスのメソッドで、指定された配列の中から指定された関数で実装されているテストに合格した要素だけを抽出した[シャローコピー](/ja/docs/Glossary/Shallow_copy)を作成します。

{{EmbedInteractiveExample("pages/js/array-filter.html","shorter")}}
{{EmbedInteractiveExample("pages/js/array-filter.html", "shorter")}}

## 構文

```js-nolint
// アロー関数
filter((element) => { /* … */ } )
filter((element, index) => { /* … */ } )
filter((element, index, array) => { /* … */ } )

// コールバック関数
filter(callbackFn)
filter(callbackFn, thisArg)

// インラインコールバック関数
filter(function(element) { /* … */ })
filter(function(element, index) { /* … */ })
filter(function(element, index, array){ /* … */ })
filter(function(element, index, array) { /* … */ }, thisArg)
```

### 引数

- `callbackFn`

- : 配列の各要素に対して実行するテスト関数です。この関数が `true` を返した要素は残され、`false` を返した要素は取り除かれます。

この関数は以下の引数と共に呼び出されます。

- : 配列のそれぞれの要素に対して実行する関数です。この関数は、配列の要素を保持する場合は[真値](/ja/docs/Glossary/Truthy)、保持しない場合は[偽値](/ja/docs/Glossary/Falsy)を返します。この関数は以下の引数で呼び出されます。
mfuji09 marked this conversation as resolved.
Show resolved Hide resolved
- `element`
- : 配列内で処理中の現在の要素です。
- `index`
- : 配列内で処理中の現在の要素の位置です
- : 配列内で処理中の現在の要素のインデックスです
- `array`
- : `filter()` が呼び出された配列です。

- `thisArg` {{optional_inline}}
- : `callbackFn` を実行するときに `this` として使用する値です
- : `callbackFn` を実行する際に `this` として使用される値。[反復可能メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復可能メソッド)を参照してください

### 返値

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

## 解説

`filter()` は、与えられた `callbackFn` 関数を配列の各要素に対して一度ずつ呼び出し、`callbackFn` が [`true` に評価される値](/ja/docs/Glossary/Truthy)を返したすべての要素からなる新しい配列を生成します。 `callbackFn` は値が代入されている配列の添字に対してのみ呼び出されます。つまり、すでに削除された添字や、まだ値が代入されていない添字に対しては呼び出されません。`callbackFn` によるテストに合格しなかった配列要素は単純にスキップされ、新しい配列には含まれないだけです
`filter()` メソッドは[反復可能メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復可能メソッド)です。指定された `callbackFn` 関数を配列の各要素に対して一度ずつ呼び出し、 `callbackFn` が[真値](/ja/docs/Glossary/Truthy)を返したすべての要素からなる新しい配列を生成します。 `callbackFn` は値が代入されている配列の添字に対してのみ呼び出されます。

`callbackFn` は 3 つの引数と共に呼び出されます
`callbackFn` は値が割り当てられている配列インデックスに対してのみ呼び出されます。[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#疎配列)の空のスロットに対しては呼び出されません

1. 要素の値
2. 要素の添字
3. 走査されている配列オブジェクト
`filter()` メソッドは[コピーメソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#コピーメソッドと変更メソッド)です。これは `this` を変更するのではなく、元の配列と同じ要素を格納した[シャローコピー](/ja/docs/Glossary/Shallow_copy)を返します。しかし、 `callbackFn` として指定された関数は配列を変更することができます。ただし、配列の長さは `callbackFn` を最初に呼び出す前に保存されることに注意してください。したがって、

`filter` に引数 `thisArg` が与えられた場合、そのオブジェクトは `callbackFn` 関数内の `this` 値として使われます。そうでない場合、 `undefined` が `this` 値として使われます。`callbackFn` 関数内の最終的な `this` 値は[関数内の `this` を決定する一般的ルール](/ja/docs/Web/JavaScript/Reference/Operators/this)に従って決められます。
- `callbackFn` は、 `every()` の呼び出しを始めたときの配列の長さを超えて追加された要素にはアクセスしません。
- 既に処理したインデックスを変更しても、 `callbackFn` が再度呼び出されることはありません。
- まだ処理していない既存の配列要素が `callbackFn` によって変更された場合、`callbackFn` に渡される値はその要素が取得された時点での値になります。[削除](/ja/docs/Web/JavaScript/Reference/Operators/delete)された要素は処理されません。

`filter()` は呼び出された配列を変化させません
> **警告:** 上記のように進行中の配列に対して変更を行うと、理解しにくいコードになることが多いので、(特別な場合を除いて)避けるのが一般的です

`filter()` によって処理される配列要素の範囲は、`callbackFn` が最初に呼び出される前に設定されます。既に訪問した位置にある要素や範囲外のインデックスに割り当てられた要素に対しては、 `callbackFn` は実行されません。既存の配列要素が削除された場合は、同様にそれらの要素は処理されません。

> **警告:** 前項で説明したような、参照中の配列の同時進行での変更は(特殊な場合を除いて)普通は避けるべきです。多くの場合、理解しにくいコードになります。
`filter()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。このメソッドは `this` の値に `length` プロパティと整数のキーを持ったプロパティがあることだけを求めます。

## 例

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

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

```js
function isBigEnough(value) {
Expand Down Expand Up @@ -137,7 +120,7 @@ console.log("Filtered Array\n", arrByID);
// Filtered Array
// [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }]

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

Expand All @@ -159,12 +142,37 @@ console.log(filterItems(fruits, "ap")); // ['apple', 'grapes']
console.log(filterItems(fruits, "an")); // ['banana', 'mango', 'orange']
```

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

`filter()` は空のスロットをスキップします。

```js
console.log([1, , undefined].filter((x) => x === undefined)); // [undefined]
console.log([1, , undefined].filter((x) => x !== 2)); // [1, undefined]
```

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

`filter()` メソッドは `this` の `length` プロパティを読み取り、 `length` 未満の非負の整数のキーを持つすべてのプロパティにアクセスします。

```js
const arrayLike = {
length: 3,
0: "a",
1: "b",
2: "c",
3: "a", // length が 3 であるため filter() は無視する
};
console.log(Array.prototype.filter.call(arrayLike, (x) => x <= "b"));
// [ 'a', 'b' ]
```

### 初期の配列への影響(変更、追加、削除)

以下の例は、配列が変更された時の `filter` の動作をテストするものです。

```js
// Modifying each word
// それぞれの単語を変更
let words = ["spray", "limit", "exuberant", "destruction", "elite", "present"];

const modifiedWords = words.filter((word, index, arr) => {
Expand All @@ -173,29 +181,29 @@ const modifiedWords = words.filter((word, index, arr) => {
});

console.log(modifiedWords);
// Notice there are three words below length 6, but since they've been modified one is returned
// 6 文字未満の語は 3 つあるが、変更されているので 1 つしか返されない
// ["spray"]

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

console.log(appendedWords);
// Only three fits the condition even though the `words` itself now has a lot more words with character length less than 6
// `words` 自体には 6 文字未満の単語がたくさん増えたが、条件に合うのは 3 つだけ
// ["spray" ,"limit" ,"elite"]

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

console.log(deleteWords);
// Notice 'elite' is not even obtained as it's been popped off 'words' before filter can even get there
// 'elite' はフィルターが取得する前に 'words' から取り出されているので、取得されていないことに注意
// ["spray" ,"limit"]
```

Expand All @@ -210,8 +218,10 @@ console.log(deleteWords);
## 関連情報

- [`Array.prototype.filter` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array)
- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)ガイド
- {{jsxref("Array.prototype.forEach()")}}
- {{jsxref("Array.prototype.every()")}}
- {{jsxref("Array.prototype.map()")}}
- {{jsxref("Array.prototype.some()")}}
- {{jsxref("Array.prototype.reduce()")}}
- {{jsxref("Array.prototype.find()")}}
- {{jsxref("TypedArray.prototype.filter()")}}
Loading