【JS】配列操作の方法まとめ
タイトルについて指摘があったため変更しました。
この記事では、配列に使えるメソッドについて解説していきます。
１配列かどうかの判断
対象の値が配列かどうか判断するには、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));
２要素を探す
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"));
３要素を操作する
次は、要素の操作の仕方を見ていきます。
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();
// １段階フラットにするので["a", "b", ["c", "d"], "e"]
console.log(flattenmultiArr);
const reFlattenmultiArr = flattenmultiArr.flat();
// １段階フラットにするので["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());
４反復処理
最後に配列の反復処理について解説していきます。
For in
まず説明するのが、for inです。
For inは列挙可能プロパティに対して、順不同で反復処理を実行します。
一応、最初に格納されたものから実行されていきますが、この順番が必ずしも保証されているわけではないそうです。
また、このfor inは親のプロトタイプオブジェクトも参照するので、挙動が予想しにくく非推奨とされています。
For of
次に説明するのが、For ofです。
このメソッドは、イテレーターを持つオブジェクトの反復操作を行います。
イテレーターとは、反復操作を行う際に使用するオブジェクトになります。
例えば、オブジェクトにはイテレーターがありませんが、配列にはイテレーターがあります。
「なんでオブジェクトはは反復処理が書けないんだろう、、」
と思ったことがあるかもですが、これが理由なのです。
また、このイテレーターはジェネレーターという機能で独自に設定することが可能です。
ただ、あまり使わないと思うので頭の片隅に置いておけばOKです。
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
おわりに
様々な配列操作の方法について見てきました。
知らなかったメソッドがあればぜひ今日から使ってみてください。
また、もし内容を忘れた場合はこの記事をチートシートにしていただければと。
最後に宣伝です。
0からエンジニアになるためのノウハウをブログで発信しています。
また、YouTubeでの動画解説も始めました。 YouTubeのvideoIDが不正です
インスタの発信も細々とやっています。
興味がある方は、ぜひリンクをクリックして確認してみてください！
おわり
Discussion