トピック: JS 配列メソッドとその違い - forEach vs map vs filter vs find vs reduce vs slice vs splice

JavaScript の配列メソッドとその使用例については、誰もが知っています.ただし、map、forEach、filter、find、reduce の間で混乱が生じることがあります.なぜなら、それらはすべて配列要素で機能し、同様の出力も得られるからです.しかし、違いはどこにあるのでしょうか.ここで、それらとその使用例に関する短い調査を書きます.

説明を書く前に、JavaScript の高階関数とは何かを簡単に説明しておく必要があります.どのトピックで書くかというと、それらはすべて高階関数だからです.基本的に関数を引数に取ると上位関数になります.パラメーター関数は、無名関数またはアロー関数にすることができます.

- forEach()

forEach() は従来の for ループに他なりません. for ループのように機能します.既存の配列の各配列要素をループする配列を提供し、それらに対して操作を実行します. forEach は配列を返さないことに注意してください.未定義を返します.

構文：

// Arrow function
forEach((element) => { /* ... */ } )
forEach((element, index) => { /* ... */ } )
forEach((element, index, array) => { /* ... */ } )

// Callback function
forEach(callbackFn)
forEach(callbackFn, thisArg)

// Inline callback function
forEach(function(element) { /* ... */ })
forEach(function(element, index) { /* ... */ })
forEach(function(element, index, array){ /* ... */ })
forEach(function(element, index, array) { /* ... */ }, thisArg)

const array1 = ['a', 'b', 'c'];

array1.forEach(element => console.log(element));

// expected output: "a"
// expected output: "b"
// expected output: "c"

- マップ()

map() は、 forEach() メソッドのように配列オブジェクトで機能します.ただし、map は指定された配列を変換して既存の配列要素を変更するような新しい配列を作成するという点が少し異なります.作成した配列を返します.

構文：

// Arrow function
array.map((element) => { /* ... */ })
array.map((element, index) => { /* ... */ })
array.map((element, index, array) => { /* ... */ })

// Callback function
array.map(callbackFn)
array.map(callbackFn, thisArg)

// Inline callback function
array.map(function(element) { /* ... */ })
array.map(function(element, index) { /* ... */ })
array.map(function(element, index, array){ /* ... */ })
array.map(function(element, index, array) { /* ... */ }, thisArg)

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

- フィルター（）

filter() は配列オブジェクトまたは要素で機能しますが、違いは条件ベースでのみ機能することです.簡単に言えば、フィルターは、コールバック関数で指定された条件に従って、配列のサブセットを作成して返します.
たとえば、不要な要素やオブジェクトが必要で、それらを削除したい場合は、フィルター メソッドを使用する必要があります. see more

構文：

// Arrow function
filter((element) => { /* ... */ } )
filter((element, index) => { /* ... */ } )
filter((element, index, array) => { /* ... */ } )

// Callback function
filter(callbackFn)
filter(callbackFn, thisArg)

// Inline callback function
filter(function(element) { /* ... */ })
filter(function(element, index) { /* ... */ })
filter(function(element, index, array){ /* ... */ })
filter(function(element, index, array) { /* ... */ }, thisArg)

elem :element value
index :index in each traversal, moving from left to right
array :original array invoking the method
thisArg :(Optional) object that will be referred to as this in callback

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

- 探す（）

find() メソッドも配列要素で機能しますが、違いは、指定されたコールバック関数の条件が true の場合に値または既存の配列要素を返すことです.それ以外の場合は undefined を返します. see more

構文：

// Arrow function
find((element) => { /* ... */ } )
find((element, index) => { /* ... */ } )
find((element, index, array) => { /* ... */ } )

// Callback function
find(callbackFn)
find(callbackFn, thisArg)

// Inline callback function
find(function(element) { /* ... */ })
find(function(element, index) { /* ... */ })
find(function(element, index, array){ /* ... */ })
find(function(element, index, array) { /* ... */ }, thisArg)

const array1 = [5, 12, 8, 130, 44];

const found = array1.find(element => element > 10);

console.log(found);
// expected output: 12

- 減らす（）

reduce() メソッドを使用して、配列を単一の値に縮小します. see more

構文：

/ Arrow function
reduce((previousValue, currentValue) => { /* ... */ } )
reduce((previousValue, currentValue, currentIndex) => { /* ... */ } )
reduce((previousValue, currentValue, currentIndex, array) => { /* ... */ } )
reduce((previousValue, currentValue, currentIndex, array) => { /* ... */ }, initialValue)

// Callback function
reduce(callbackFn)
reduce(callbackFn, initialValue)

// Inline callback function
reduce(function(previousValue, currentValue) { /* ... */ })
reduce(function(previousValue, currentValue, currentIndex) { /* ... */ })
reduce(function(previousValue, currentValue, currentIndex, array) { /* ... */ })
reduce(function(previousValue, currentValue, currentIndex, array) { /* ... */ }, initialValue)

const array1 = [1, 2, 3, 4];
const reducer = (previousValue, currentValue) => previousValue + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15

- スライス（）

配列の特定の部分をコピーするには、slice() メソッドを使用します. see more

構文：

slice()
slice(start)
slice(start, end)

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]

console.log(animals.slice(-2));
// expected output: Array ["duck", "elephant"]

console.log(animals.slice(2, -1));
// expected output: Array ["camel", "duck"]

-スプライス()

splice() メソッドは、配列の特定のインデックスを削除または置換する必要がある場合に使用されます. see more

構文：

splice(start)
splice(start, deleteCount)
splice(start, deleteCount, item1)
splice(start, deleteCount, item1, item2, itemN)

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at index 1
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May');
// replaces 1 element at index 4
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "May"]