😽

【JS】配列操作の方法まとめ

4 min read

タイトルについて指摘があったため変更しました。

この記事では、配列に使えるメソッドについて解説していきます。

1配列かどうかの判断


対象の値が配列かどうか判断するには、Array.isArray()を使えばOKです。

ちなみに、typeofだとオブジェクトだと判断されます。

また、配列の要素を取り出し時はsliceを使えばOKです。

const obj = { id: 1, name: "obj" };
const arr = [0, 1, 2, 3, 2, 1, { id: 1, name: "obj" }];

// false
console.log(Array.isArray(obj));
// true
console.log(Array.isArray(arr));
// object
console.log(typeof arr);

// 要素の抽出
// indexの2以降を全て取り出すので[2, 3, 2, 1, { id: 1, name: "obj" }]
console.log(arr.slice(2));
// indexの2から4未満を取り出すので [2, 3]
console.log(arr.slice(2, 4));

2要素を探す


indexOfとlastIndexOfを使うことで、対象のデータのインデックスがわかります。

前者が前から数えた場合で、後者は後ろから数えた場合の結果を返します。

オブジェクトはfindIndexで探すことができ、indexOfでは探すことができません。

ちなみに、indexOfは一致するものがなかった場合は-1を返します。

また、findで対象の要素自体を取り出すことができます。

includesで値があるかをbooleanで知ることができます。

オブジェクトがあるか探したい時は、someを使えばOKです。

const arr = [0, 1, 2, 3, 2, 1, { id: 1, name: "obj" }];

// インデックスを知りたい場合
// 1
console.log(arr.indexOf(1));
// 5
console.log(arr.lastIndexOf(1));

// オブジェクトのインデックスを知りたい場合
// 一致せずに-1が返る
console.log(arr.indexOf({ id: 1, name: "obj" }));
// 6
console.log(arr.findIndex((obj) => obj.id === 1 && obj.name === "obj"));

// 一致するオブジェクトを取り出す場合
// {id: 1, name: "obj"}
console.log(arr.find((obj) => obj.id === 1 && obj.name === "obj"));

// true/falseで判断したい場合
// true
console.log(arr.includes(4));
// true
console.log(arr.some((obj) => obj.id === 1 && obj.name === "obj"));


3要素を操作する


次は、要素の操作の仕方を見ていきます。

push,unshift,pop,shift,splice,length

追加はpushとunshift、
削除はpopとshift
さらには、splice、lengthでできます。


const arr1 = [1, 2];
arr1.push(3);
// 一番後ろに要素を追加するので[1,2,3]
console.log(arr1);

const arr2 = [1, 2];
arr2.unshift(0);
// 一番前に要素を追加するので[0,1,2]
console.log(arr2);

const arr3 = [1, 2];
arr3.pop();
// 一番後ろの要素が削除されるので[1]
console.log(arr3);

const arr4 = [1, 2];
arr4.shift();
// 一番前の要素が削除されるので[2]
console.log(arr4);

const arr5 = [1, 2];
arr5.length = 0;
// 長さを0にするので[]
console.log(arr5);

const arr6 = [1, 2];
arr6.splice(0, 2, 3);
// indexの0番から2番未満までを消し、3を追加するので[3]
console.log(arr6);

concat,flat,fill,reverse,sort

結合はconcatかspread構文を使えばOK。

フラット化するには、flat。

その他
fill,reverse,sort
などがあります。


const arr = [0,1]
const concatedArr = arr.concat(2);
const spreadArr = [...arr, 2];
// arrと2を結合するので[0,1,2] 
console.log(concatedArr);
console.log(spreadArr);

const multiArr = [["a", "b", ["c", "d"]], "e"];
const flattenmultiArr = multiArr.flat();
// 1段階フラットにするので["a", "b", ["c", "d"], "e"]
console.log(flattenmultiArr);
const reFlattenmultiArr = flattenmultiArr.flat();
// 1段階フラットにするので["a", "b", "c", "d", "e"]
console.log(reFlattenmultiArr);

const targetArr1 = [0, 2, 1];
// 全てを1で埋めるので[1, 1, 1]
console.log(targetArr1.fill(1));

const targetArr2 = [0, 2, 1];
// indexが1から2未満までを3で埋めるので[0, 3, 2]
console.log(targetArr2.fill(3, 1, 2));

const targetArr3 = [0, 2, 1];
// 順番を逆にするので[1, 2, 0]
console.log(targetArr3.reverse());

const targetArr4 = [0, 2, 1];
// ソートするので[0, 1, 2]
console.log(targetArr4.sort());

4反復処理


最後に配列の反復処理について解説していきます。

forEach

次のようにコールバック関数には要素, インデックス, 配列が引数として渡され、配列要素の先頭から順番に反復処理します。


const array = [1, 2, 3];
array.forEach((value, index, array) => {
    console.log(value, index, array);
});
// =>
// 1, 0, [1, 2, 3]
// 2, 1, [1, 2, 3]
// 3, 2, [1, 2, 3]

map

forEachと同じようにコールバック関数には要素, インデックス, 配列が引数として渡され、配列要素の先頭から順番に反復処理します。

forEachとの違いは、mapメソッドの返り値は、それぞれのコールバック関数が返した値を集めた新しい配列になるというところです。


const array = [1, 2, 3];
const newArray = array.map((value, index, array) => {
    return value * 10;
});
console.log(newArray); // => [10, 20, 30]

filter

次のようにコールバック関数には要素, インデックス, 配列が引数として渡され、配列要素の先頭から順番に反復処理します。

filterメソッドの返り値は、コールバック関数がtrueを返した要素だけを集めた新しい配列になります。


const array = [1, 2, 3];
const newArray = array.filter((value, index, array) => {
    return value % 2 === 1;
});
console.log(newArray); // => [1, 3]

reduce

ここまでで紹介した反復処理のメソッドとは異なり、コールバック関数には累積値, 要素, インデックス, 配列を引数として渡します。


const array = [1, 2, 3];

const totalValue = array.reduce((accumulator, currentValue, index, array) => {
    return accumulator + currentValue;
}, 0);

console.log(totalValue); // => 6

おわりに


様々な配列操作の方法について見てきました。

知らなかったメソッドがあればぜひ今日から使ってみてください。

また、もし内容を忘れた場合はこの記事をチートシートにしていただければと。

また、僕のブログではReactエンジニアになるためのロードマップを無料で全て公開しているので、参考にどうぞ。バックエンドエンジニアを目指している方などにも役立つ情報を書いてます。

https://hinoshin-blog.com/react-roadmap/

おわり

Discussion

ログインするとコメントできます