いつも迷うJavaScriptの配列の操作に関するメソッド

配列の操作に関するメソッド

いつもどれを使うべきか迷うことが多いので、メモ程度にまとめました。
また後から追加してきます。
間違っていたらコメントで訂正すべき箇所を教えていただけると幸いです。

1. 結合するconcat

• ２つ以上の配列を結合するのに使用する。
• 既存の配列を変更しない。
• 結合された配列を含み新しい配列を返す。

const arr1 = [1];
const arr2 = [2];
const results = arr1.concat(arr2);

/*
> [1, 2]
*/

2. 条件一致のfilter

• 条件に一致する要素のみで構成された配列を作成する。
• 空要素に対しては実行しない。
• 元の配列を変更しない。

const arr = ["Good Morning", "Good Afternoon", "Good Evening"];
const arr1 = arr.filter(item => item === "Good Morning");
console.log(arr1);

/*
> ["Good Morning"]
*/

3. 要素を見つけるfind

• 条件に一致する最初の要素を返す。
• 配列要素ごとに関数を実行する。
• 見つからない場合、-1を返す。
• 空要素に対しては実行しない。

const nums = [1,2,3,4];
const target = nums.findIndex((item, index) => item > 1);
console.log(target);

/*
> 2
*/

4. 要素の位置を見つけるfindIndex

• 条件に一致する最初の要素のインデックスを返す。
• 配列要素ごとに関数を実行する。
• 見つからない場合、-1を返す。
• 空要素に対しては実行しない。

const nums = [1,2,3,4];
const index = nums.findIndex((item, index) => item === 1);
console.log(index);
/*
> 0
*/

5. 一番使うことが多いかもしれないlength

• 配列の要素数を返す。
• 要素数を設定する。

const nums = [1,2,3,4];
nums.length = 4;
console.log(nums.length);

const nums = [1,2,3,4];
nums.length = 2;
console.log(nums.length);
/*
> 4
> 1, 2
*/

6. 新しい配列を生成するmap

• 配列のすべての要素に対し関数を呼び、新しい配列を生成する。
• 配列内の要素ごとに関数を1回呼び出す。
• 空の要素に対して関数を実行しない。
• 元の配列を変更しない。

const arr1 = [1,2,3,4];
const arr2 = arr1.map(item => item + 1);
console.log(arr2)

/*
> [2,3,4,5]
*/

7. 累積のreduce

• 配列要素のレデューサー関数を実行しない。
• 関数の累積結果を返す。
• 空の配列要素に対して関数を実行しない。
• 配列を変更しない。

const arr1 = [1,2,3,4];
const result = arr1.reduce((total, target) => {
  return total + target
});
console.log(result)
/*
> 10
*/

8. ソートするsort

• 配列の要素をソートする。
• 元の配列を上書きする。
• 文字列の要素アルファベット順で昇順で並び替える。

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();

// 数字を昇順で並び替える。
const arrs = [40, 100, 1, 5, 25, 10];
const arr2 = arrs.sort((a, b) => {
  return a - b;
})
console.log(arr2)
/*
> [1, 5, 10, 25, 40, 100]
*/

9. 順序を逆にするreverse

• 配列内の要素の順序を逆にする。

const arr1 = [1,2,3,4];
console.log(arr1.reverse());
/*
> [4,3,2,1]
*/

10. splice

• 要素を置き換えたり、追加、削除する。

const arr1 = [1,2,3,4];
const result = arr1.splice(0, 2);
console.log(result)

const arr2 = [1,2,3,4];
arr2.splice(2, 0, 5, 6);
console.log(arr2)
/*
> [1,2]
> [1, 2, 5, 6, 3, 4]
*/

11. 要素を切り出すslice

• 配列内の選択された要素を新しい配列として返す。
• 指定したstartからendまでを選択する。
• 配列を変更しない。

const arr1 = [1,2,3,4];
const result = arr1.slice(0, 2);
console.log(result)
/*
> [1,2]
*/

12. テストのsome

• 配列要素がテストに合格するかチェックする
• 配列要素ごとにコールバック関数を一回実行する。
• 要素がtrueを返した場合、someメソッドは停止する。
• 空の要素に対して関数を実行しない。

const nums = [1,5,6,82,12,5,5];
const result = nums.some(age => age > 5);
console.log(result);

/*
> true
*/

参考
w3school
mdn web docs