JavaScriptのよく使う配列処理備忘録

lodashとかunderscoreのライブラリ、便利ですよね。
でもそれ、ほんとにライブラリに頼らないと実装できませんか？
Vanilla Jsで書けるものは書きましょう、ということでチートシート的にまとめていきます。

every()

• 処理内容

配列内の全ての要素が、引数の関数の処理に合致するかどうかを判定。

• 戻り値

Boolean

const arr = [10, 14, 22, 40, 90];
const result1 = arr.every((elm) => {
  return elm % 2 === 0
})
console.log(result1); // true

arr.push(99);
const result2 = arr.every((elm) => {
  return elm % 2 === 0
})
console.log(result2); // false

filter()

• 処理内容

配列内から、引数の関数の処理に合致した要素を抽出する。

• 戻り値

抽出した要素の配列（シャローコピー）

const arr = [5, 10, 14, 22, 33, 40, 90, 101];
const result1 = arr.filter((elm) => {
  return elm % 2 !== 0
})
console.log(result1); // [5, 33, 101]

find()

• 処理内容

配列内から、引数の関数の処理に合致した最初の要素を抽出する。

• 戻り値

抽出した1つの要素

const arr = [10, 14, 22, 40, 90];
const result1 = arr.find((elm) => {
  return elm % 2 === 0
})
const result2 = arr.find((elm) => {
  return elm % 2 !== 0
})
console.log(result1); // 10
console.log(result2); // undefined

includes()

• 処理内容

配列内に引数で渡した要素が存在するかを判定する。

• 戻り値

Boolean

const arr = ["val1","val2","val3"];
console.log(arr.includes("val1")); // true
console.log(arr.includes("val4")); // false

indexOf()

• 処理内容

引数で渡した値が配列内に存在する位置(index)を取得する。

• 戻り値

検索した値が存在する位置
存在しなかった場合は-1

※ちょっと古いコードで、indexOfを使って値の存在チェックをしているものを見た事がある人もいると思います。
　昔はそれが正攻法の一つだったかも知れませんが、今はincludesがあるので、そっちを使いましょう。

const arr = ["val1","val2","val3"];
console.log(arr.indexOf("val2")); // 2
console.log(arr.indexOf("val4")); // -1

map()

• 処理内容

配列の各要素に対し関数を実行し、結果を格納した新しい配列を作成する。

• 戻り値

作成された配列

const arr = [10, 25, 83];
const resultArr = arr.map((elm) => {
    return elm % 2;
})
console.log(resultArr) // [0, 1, 1]

push() / unshift()

• 処理内容

引数で渡した要素を配列に追加する。（push：末尾、unshift：先頭）

• 戻り値

要素を追加したあとの配列のlength

const arr = ["val1","val2","val3"];
// push()
const pushed = arr.push("val4")
console.log(pushed); // 4
console.log(arr); // ["val1", "val2", "val3", "val4"]

// unshift()
const unshifted = arr.unshift("val5")
console.log(unshifted); // 5
console.log(arr); // ["val5", "val1", "val2", "val3", "val4"]

shiift() / pop()

• 処理内容

配列の先頭（shift）、末尾（pop)の要素を取り除きその値を返す。

• 戻り値

配列内の要素

const arr = ["val1", "val2", "val3"];
// shift()
const shiftStr = arr.shift();
console.log(arr); // ["val2", "val3"]
console.log(shiftStr); // val1

// pop()
const popStr = arr.pop();
console.log(arr);  // ["val2"]
console.log(popStr); // val3

slice()

• 処理内容

配列の指定した位置にある値を持った新しい配列を作成する。

• 戻り値

抽出した要素の配列（シャローコピー）

const arr = [1, 2, 3, 4, 5];
// 開始位置のみ指定
const slicedArr1 = arr.slice(3);
console.log(slicedArr1); // [4, 5]

// 開始位置(第一引数)、終了位置(第二引数)を指定
const slicedArr2 = arr.slice(1,3);
console.log(slicedArr2); // [2, 3]

some()

• 処理内容

配列内から、引数の関数の処理に合致した要素の有無を判定する。

• 戻り値

boolean

const arr = [10, 14, 22, 40, 90];
const result1 = arr.some((elm) => {
  return elm % 2 === 0
})
const result2 = arr.some((elm) => {
  return elm % 2 !== 0
})
console.log(result1); // true
console.log(result2); // false

sort() / toSorted()

• 処理内容

配列の要素をソートする（昇順）。

• 戻り値

・sort
ソートされた配列（元の配列自体を変更する）
・toSorted
ソートされた配列（元の配列はかわらない）

// sort()
const arr = [80, 43, 5, 97, 25];
arr.sort();
// 値が数値でも、文字列としてソートされる。
console.log(arr); // [25, 43, 5, 80, 97]

// 第一引数に関数を渡せば、それに従ったソートが可能。
arr.sort((a, b) => {
    return a - b;
});
console.log(arr); // [5, 25, 43, 80, 97]

// toSorted()
const arr = [80, 43, 5, 97, 25];
const sorted = arr.toSorted();
console.log(arr); // [80, 43, 5, 97, 25]
console.log(sorted); // [25, 43, 5, 80, 97]

splice() / toSpliced()

• 処理内容

配列の要素を除去/置換/追加する。

• 戻り値

・splice
変更された配列（元の配列自体を変更する）
・toSpliced
変更された配列（元の配列はかわらない）

const arr = ["val1", "val2", "val3", "val4", "val5"];
// 変更開始位置（第一引数）を指定
arr.splice(4);
console.log(arr); // ["val1", "val2", "val3", "val4"]

// 変更開始位置から削除する件数（第二引数）を指定
arr.splice(2, 1);
console.log(arr); // ["val1", "val2", "val4"]

// 追加する要素（第三引数）を指定
arr.splice(2, 0, "editVal1");
console.log(arr); // ["val1", "val2", "editVal", "val4"]

// 追加する要素は複数件指定可能
arr.splice(1, 2, "editVal2", "editVal3");
console.log(arr); // ["val1", "editVal2", "editVal3", "val4"]

// toSpliced()
const splicedArr = arr.toSpliced(3, 1, "editVal4");
console.log(arr); // ["val1", "editVal2", "editVal3", "val4"]
console.log(splicedArr); // ["val1", "editVal2", "editVal3", "editVal4"]

toString()

• 処理内容

配列の要素をカンマ区切りで結合した文字列化する

• 戻り値

String

const arr = ["val1", "val2", "val3"];
const str = arr.toString();
console.log(str); // val1,val2,val3