すべてのJavaScript開発者が知っておくべき配列メソッド Part-2

JavaScriptの配列操作で忘れず知っておきたい配列関数一覧 その2。

concat()

concat()メソッドは、2つ以上の配列をマージして、既存の配列を変更せずに新しい配列を返却するために使います。

const arr1 = ["a", "b", "c"];
const arr2 = ["d", "e", "f"];
console.log(arr1.concat(arr2));
// Array["a", "b", "c", "d", "e", "f"]
console.log(arr1);
//Array["a", "b", "C"]
console.log(arr2);
//Array ["d", "e", "f"]

includes()

includes()メソッドは、配列内に条件を満たす要素が含まれているかどうかをチェックし、trueまたはfalseを返します。

const arr = [1, 2, 3, 4, 5, 6];
console.log(arr.includes (2)); // true
console.log(arr.includes (7)); // false

join()

指定されたセパレータで区切られた配列のすべての要素を連結して、新しい文字列を返します。またセパレータを指定する事ができ、引数に指定した文字列で結合する文字の間に区切り文字を追加します。

const arr = ["m", "a", "n", "d", "e", "e", "p"];
console.log(arr.join());
// "m,a,n,d,e,e,p"
console.log(arr.join(''));
// "mandeep"
console.log(arr.join('-'));
// "m-a-n-d-e-e-p"

reduce()

reduce()メソッドは、配列の各要素に対して引数で与えたreducer関数を適用し、単一の値を生成します。4つの引数「アキュムレーター (acc)、現在値 (cur)、現在の添字 (idx)、元の配列 (src)」を取り、アキュムレーター (演算式)がよく使われます。

参考:Array.prototype.reduce()

const arr = [1, 2, 3, 4, 5, 6];
const addReducer = (total, current) => total + current;
const reduced = arr.reduce(addReducer);
console.log(reduced); // 21
console.log(arr.reduce(addReducer, 5)); //26

findIndex()

findIndex()メソッドは、検証関数を満たす配列内の最初の要素のインデックスを返します。検証関数を満たす要素がない場合は-1を返します。

const arr = ["Danny", "Man", "John", "Ruby"];
const indexFinder = arr.findIndex(element => element === "Man");
console.log(indexFinder); // 1

indexOf()

indexOf()メソッドは、配列の中で指定した要素が最初に現れる要素のインデックスを返し、見つからない場合は-1を返します。

const arr = ["Danny", "Man", "John", "Ruby"];
const indexFinder = arr.indexOf("Man");
console.log(indexFinder); // 1

fill()

fill()メソッドは、配列の要素を静的な値に変更した配列を返します。下記の実行結果からわかる通り、元の配列を修正します。

開始インデック（デフォルト0）から終了インデックス（デフォルトarray.length）までとなり、すべての要素を変更します。第二引数に開始する位置、第三引数に終了する位置を指定可能です。

const arr = new Array(3);
console.log(arr);
// Array [undefined, undefined, undefined]
console.log(arr.fill(10));
// Array [10, 10, 10]
console.log(arr.fill(5, 1));
// Array [10, 5, 5]
console.log(arr.fill(0, 2, 3));
// Array [10, 5, 0]