JavaScript の配列関数をマスターする: スライス、スプライス、forEach

JavaScript の配列関数:slice、splice、forEach

JavaScript 配列には、配列要素の操作と対話に役立つ一連の組み込みメソッドが付属しています。よく使用される 3 つの配列メソッドは、slice、splice、および forEach です。これらのメソッドにより、クリーンかつ効率的な方法で配列を操作する能力が大幅に強化されます。

1.slice() メソッド

slice() メソッドは、元の配列を変更せずに 配列の一部を抽出するために使用されます。配列の一部の浅いコピーを作成し、新しい配列を返します。

構文:

array.slice(start, end);

• start: 抽出を開始するインデックス。このインデックスの要素が含まれます。
• end: 抽出を終了するインデックス (含まれていません)。省略した場合、配列の最後までスライスされます。

例:

const arr = [1, 2, 3, 4, 5];

// Slice from index 1 to index 3 (excluding index 3)
const newArr = arr.slice(1, 3);

console.log(newArr);  // Output: [2, 3]

• この例では、arr.slice(1, 3) はインデックス 1 から始まりインデックス 3 の直前で終わる新しい配列を返します。

終了引数が省略された場合、slice() は開始インデックスから配列の末尾まですべてをコピーします。

const arr = [1, 2, 3, 4, 5];

// Slice from index 2 to the end
const newArr = arr.slice(2);

console.log(newArr);  // Output: [3, 4, 5]

ネガティブインデックス:

負のインデックスを使用して配列の末尾からスライスすることもできます。

const arr = [1, 2, 3, 4, 5];

// Slice from index -3 to the end
const newArr = arr.slice(-3);

console.log(newArr);  // Output: [3, 4, 5]

2. splice() メソッド

splice() メソッドは、要素を追加または削除して配列を変更するために使用されます。元の配列を変更し、特定のインデックスで項目を挿入または削除するために使用できます。

構文:

array.splice(start, deleteCount, item1, item2, ..., itemN);

• start: 配列の変更を開始するインデックス。
• deleteCount: 開始インデックスから削除する要素の数。
• item1, item2, ..., itemN: 開始インデックスから始まる配列に追加する要素。

例:

const arr = [1, 2, 3, 4, 5];

// Remove 2 elements from index 2
const removedElements = arr.splice(2, 2);

console.log(arr);  // Output: [1, 2, 5]
console.log(removedElements);  // Output: [3, 4]

• この例では、arr.splice(2, 2) はインデックス 2 から始まる 2 つの要素 (3 と 4) を削除します。

splice() を使用して配列に要素を追加することもできます。

const arr = [1, 2, 3, 4, 5];

// Insert 6 and 7 at index 2
arr.splice(2, 0, 6, 7);

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

• ここで、arr.splice(2, 0, 6, 7) は要素を削除せずにインデックス 2 に 6 と 7 を挿入します (deleteCount は 0)。

一緒に削除して追加:

splice() を使用して、要素の削除と追加を 1 回の操作で行うこともできます。

array.slice(start, end);

3. forEach() メソッド

forEach() メソッドは、配列の要素を反復処理し、各要素に関数を適用するために使用されます。 map() や filter() とは異なり、forEach() は新しい配列を返しません。各要素に対して指定された関数を実行するだけです。

構文:

const arr = [1, 2, 3, 4, 5];

// Slice from index 1 to index 3 (excluding index 3)
const newArr = arr.slice(1, 3);

console.log(newArr);  // Output: [2, 3]

• callback: 各要素で実行される関数。
  • currentValue: 配列内で処理されている現在の要素。
  • index: 現在の要素のインデックス。
  • array: forEach が呼び出される配列。

例:

const arr = [1, 2, 3, 4, 5];

// Slice from index 2 to the end
const newArr = arr.slice(2);

console.log(newArr);  // Output: [3, 4, 5]

アロー関数の使用:

アロー関数を使用してコードをより簡潔にすることもできます。

const arr = [1, 2, 3, 4, 5];

// Slice from index -3 to the end
const newArr = arr.slice(-3);

console.log(newArr);  // Output: [3, 4, 5]

配列要素の変更:

forEach() は、配列を返したり変更したりするためではなく、副作用 (値のログや更新など) を実行するために使用されることに注意してください。既存の配列に基づいた新しい配列が必要な場合は、map() の使用を検討してください。

array.splice(start, deleteCount, item1, item2, ..., itemN);

スライス、スプライス、forEach の比較

Method	Purpose	Mutates Original Array	Returns Value
slice	Extracts a portion of an array without modifying it	No	A new array (shallow copy)
splice	Adds/removes elements at specific positions in array	Yes	The removed elements (array)
forEach	Executes a function on each array element	No	undefined

結論

• slice() は、元の配列を変更せずに配列の一部を抽出するのに最適です。
• splice() を使用すると、配列の要素を削除、置換、または追加でき、元の配列を変更できます。
• forEach() は、配列要素を反復処理して副作用を実行するのに最適ですが、新しい配列を返しません。

これらのメソッドは、JavaScript で配列を操作する場合に不可欠なツールであり、コードをより効率的で読みやすくすることができます。

---

こんにちは、アバイ・シン・カタヤットです!
私はフロントエンドとバックエンドの両方のテクノロジーの専門知識を持つフルスタック開発者です。私はさまざまなプログラミング言語やフレームワークを使用して、効率的でスケーラブルでユーザーフレンドリーなアプリケーションを構築しています。
ビジネス用メールアドレス kaashshorts28@gmail.com までお気軽にご連絡ください。

以上がJavaScript の配列関数をマスターする: スライス、スプライス、forEachの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。