見逃したくない JavaScript で最も人気のある配列メソッドです。

このガイドでは、14 個の不可欠な JavaScript 配列メソッドについて説明します。 各メソッドの概要を説明し、例を使用してその使用法を説明します。

1. map(): 各配列要素を変換し、結果を含む 新しい 配列を返します。元の配列は変更されません。

<code class="language-javascript">const numbers = [1, 2, 3];
const doubled = numbers.map(x => x * 2); // [2, 4, 6]
const users = [{ name: 'John' }, { name: 'Jane' }];
const names = users.map(user => user.name); // ['John', 'Jane']</code>

2. filter(): 指定されたテスト関数に合格する要素のみを含む 新しい 配列を作成します。元の配列は変更されません。

<code class="language-javascript">const nums = [1, 2, 3, 4, 5, 6];
const evenNums = nums.filter(n => n % 2 === 0); // [2, 4, 6]
const products = [{ price: 10 }, { price: 20 }];
const expensive = products.filter(p => p.price > 15); // [{ price: 20 }]</code>

3. reduce(): 関数を配列要素に累積的に適用して、要素を 1 つの値に減らします。 要素を繰り返し組み合わせることと考えてください。

<code class="language-javascript">const sum = [1, 2, 3].reduce((acc, curr) => acc + curr, 0); // 6
const cart = [{ price: 10 }, { price: 20 }];
const total = cart.reduce((sum, item) => sum + item.price, 0); // 30</code>

4. forEach(): 提供された関数を配列要素ごとに 1 回実行します。 値は返されません (undefined が返されます)。

<code class="language-javascript">[1, 2, 3].forEach(n => console.log(n));
['a', 'b'].forEach((item, index) => console.log(`${index}: ${item}`));</code>

5. find(): 提供されたテスト関数を満たす 最初の 要素を返します。 条件を満たす要素がない場合は、undefined.
を返します。

<code class="language-javascript">const users2 = [{ id: 1, name: 'John' }, { id: 2, name: 'Jane' }];
const john = users2.find(user => user.name === 'John'); // { id: 1, name: 'John' }
const nums2 = [1, 2, 3, 4];
const firstEven = nums2.find(n => n % 2 === 0); // 2</code>

6. findIndex(): 提供されたテスト関数を満たす 最初の 要素のインデックスを返します。条件を満たす要素がない場合は、-1 を返します。

<code class="language-javascript">const fruits = ['apple', 'banana', 'cherry'];
const bananaIndex = fruits.findIndex(f => f === 'banana'); // 1
const userIndex = users2.findIndex(u => u.id === 2); // 1</code>

7. some(): 配列内の少なくとも 1 つの要素が、提供された関数によって実装されたテストに合格するかどうかをテストします。少なくとも 1 つの要素が渡された場合は true を返し、そうでない場合は false.
を返します。

<code class="language-javascript">const hasEven = [1, 2, 3].some(n => n % 2 === 0); // true
const hasExpensive = products.some(p => p.price > 15); // true</code>

8. every(): 配列内の すべての 要素が、提供された関数によって実装されたテストに合格するかどうかをテストします。すべての要素が合格した場合のみ true を返し、それ以外の場合は false.
を返します。

<code class="language-javascript">const allPositive = [1, 2, 3].every(n => n > 0); // true</code>

9. includes(): 配列のエントリに特定の値が含まれているかどうかを判断し、必要に応じて true または false を返します。

<code class="language-javascript">const numbers2 = [1, 2, 3];
const hasTwo = numbers2.includes(2); // true
const hasZero = numbers2.includes(0); // false</code>

10. indexOf(): 配列内で指定された要素が見つかる最初のインデックスを返します。要素が存在しない場合は -1 を返します。

<code class="language-javascript">const colors = ['red', 'blue', 'green'];
const blueIndex = colors.indexOf('blue'); // 1
const yellowIndex = colors.indexOf('yellow'); // -1</code>

11. slice(): 配列のセクションを抽出し、元の配列を変更せずに 新しい 配列として返します。

<code class="language-javascript">const arr = [1, 2, 3, 4, 5];
const middle = arr.slice(1, 4); // [2, 3, 4]
const last = arr.slice(-2); // [4, 5]</code>

12. splice(): 既存の要素を削除または置換したり、新しい要素を所定の位置に追加したりして、配列の内容を変更します。 元の配列を変更します.

<code class="language-javascript">const months = ['Jan', 'March', 'April'];
months.splice(1, 0, 'Feb'); // ['Jan', 'Feb', 'March', 'April']
months.splice(2, 1); // ['Jan', 'Feb', 'April']</code>

13. sort(): 配列の要素を所定の位置に並べ替えます。 デフォルトでは、文字列としてソートされます。数値ソートには比較関数が必要です。

<code class="language-javascript">const numbers = [1, 2, 3];
const doubled = numbers.map(x => x * 2); // [2, 4, 6]
const users = [{ name: 'John' }, { name: 'Jane' }];
const names = users.map(user => user.name); // ['John', 'Jane']</code>

14. join(): 配列内のすべての要素 (指定された区切り文字列で区切られる) を連結して、新しい文字列を作成して返します。

<code class="language-javascript">const nums = [1, 2, 3, 4, 5, 6];
const evenNums = nums.filter(n => n % 2 === 0); // [2, 4, 6]
const products = [{ price: 10 }, { price: 20 }];
const expensive = products.filter(p => p.price > 15); // [{ price: 20 }]</code>

これらのメソッドをマスターすると、JavaScript の配列操作機能が大幅に強化されます。

以上が見逃したくない JavaScript で最も人気のある配列メソッドです。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。