Array メソッド

関連

forEach

単にすべての配列の要素を回したい時に使います。
戻り値はundefinedです。

const result = [1, 2, 3, 4].forEach(num => {
  console.log(num);
});
// 1
// 2
// 3
// 4
console.log(result) // undefined;

map

配列のある要素を、同じ位置で別の値に変換したい時などに使います。
戻り値はなんでもありで、具体的には配列に存在するすべての型の配列です。

const result = [1, 2, 3, 4].map(num => {
  if (num % 2 === 0) {
    return String(100 - num);
  }
  
  return num;
});
// 1
// '98'
// 3
// '96'
console.log(result) // [1, '98', 3, '96']

reduce

配列の値を使って、１つの値を導き出したい時などに使います。
戻り値はなんでもありで、具体的にはハンドラーが受け取る第1引数の型です。

ハンドラーの中でreturnした値が、次のハンドラーの第1引数に来ます。reduceの第２引数に値を渡すと、それが1周目のaccの値になります。

// 0 + 1 + 2 + 3 + 4
const result = [1, 2, 3, 4].reduce((acc, num) => {
  acc = acc + num
  return acc;
}, 0);

console.log(result); // 10;

some

「１つでもそういう条件の要素があるか？」を調べる時に使います。
戻り値は、１つでも当てはまればtrue、1つも当てはまらなければfalseです。

const result1 = [1, 2, 3, 4].some(num => {
  return num === 2;
});
console.log(result1); // true

const result2 = [1, 2, 3, 4].some(num => {
  return num === 5;
});
console.log(result2); // false

every

「すべての要素でそんお条件が当てはまるか？」を調べる時に使います。
戻り値は、すべて当てはまればtrue、1つでも違うならfalseです。

const result1 = [1, 2, 3, 4].every(num => {
  return num < 10;
});
console.log(result1); // true

const result2 = [1, 2, 3, 4].every(num => {
  return num < 3;
});
console.log(result2); // false

push

配列の最後に値を追加します。
戻り値は「いくつ追加したか」の数値です。

破壊的メソッドで、元の配列を書き換えます。

const arr1 = [1, 2, 3, 4];
const result1 = arr1.push(5);
console.log(result1); // 1
console.log(arr1); // [1, 2, 3, 4, 5]

const arr2 = [1, 2, 3, 4];
const result2 = arr2.push(5, 6);
console.log(result2); // 2
console.log(arr2); // [1, 2, 3, 4, 5, 6]

pop

配列の一番最後の値を取り出します。
戻り値は取り出した値です。

const result = [1, 2, 3, 4].pop();
console.log(result); // 4

unshift

配列の最初に値を追加します。
戻り値は「いくつ追加したか」の数値です。

破壊的メソッドで、元の配列を書き換えます。

const arr1 = [1, 2, 3, 4];
const result1 = arr1.unshift(0);
console.log(result1); // 1
console.log(arr1); // [0, 1, 2, 3, 4]

const arr2 = [1, 2, 3, 4];
const result2 = arr2.unshift(-1, 0);
console.log(result2); // 2
console.log(arr2); // [-1, 0, 1, 2, 3, 4]

shift

配列の一番最初の値を取り出します。
戻り値は取り出した値です。

破壊的メソッドで、元の配列を書き換えます。

const result = [1, 2, 3, 4].shift();
console.log(result); // 1

splice

pushやpop,unshift,shift的に使うこともできますが、基本的に、

配列から中間地点にある要素を削除する
配列の中間地点にある要素を追加する

のに使います。戻り値は削除した要素の配列です。

破壊的メソッドで、元の配列を書き換えます。

要素の削除

第1引数は中間地点を表していて、第2引数は「いくつ削除するか」を渡します。以下の場合、インデックス1(2)の位置から要素を1つ削除するという意味になり、2が削除されます。

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

要素の追加

第3引数以降には追加したい要素をただ順番に書いていくだけです。以下では第2引数を0にしているので、何も削除せず、インデックス1の位置から101と102を追加するという意味になります。

const arr = [1, 2, 3, 4];
const result = arr.splice(1, 0, 101, 102);
console.log(result); // []
console.log(arr); // [1, 101, 102, 2, 3, 4]

要素の削除と追加

もちろんこの2つを組み合わせて使うこともできます。

const arr = [1, 2, 3, 4];
const result = arr.splice(1, 1, 101, 102);
console.log(result); // [2]
console.log(arr); // [1, 101, 102, 3, 4]

find

IEでは使えません。

配列から条件にある要素を見つけて要素を返します。
戻り値は要素があれば要素の型、なければundefinedです。

const result = [1, 2, 3, 4].find(num => {
  return num % 2 === 0;
});
console.log(result); // 2

const result2 = [1, 2, 3, 4].find(num => {
  return num % 5 === 0;
});
console.log(result2); // undefined

findIndex

IEでは使えません。

配列から条件にある要素を見つけて要素のインデックス値を返します。
戻り値は要素があれば要素インデックス値(number)、なければ-1です。

const result = [1, 2, 3, 4].findIndex(num => {
  return num % 2 === 0;
});
console.log(result); // 1

const result2 = [1, 2, 3, 4].findIndex(num => {
  return num % 5 === 0;
});
console.log(result2); // -1

flat

IEとEdge、NodeJSでは使えません。

1階層までの配列をトップレベルの配列の要素とすることができます。
戻り値は処理後の配列です。

const result = [1, [2, 3], [[4]]].flat();
console.log(result); // [1, 2, 3, [4]]

flatMap

IEとEdgeでは使えません。

mapの結果の後、さらにflatするような処理をします。
戻り値は処理後の配列です。

以下はmapで[[1, 99], [2, 98], [3, 97], [4, 96]]となった後にflatで[1, 99, 2, 98, 3, 97, 4, 96]となる感じです。

const result = [1, 2, 3, 4].flatMap(num => {
  return [num, 100 - num];
});
console.log(result); // [1, 99, 2, 98, 3, 97, 4, 96]