2021年11月18日 JavaScript (JS Primer)配列をフラット化・配列から要素を削除

[ES2019] 配列をフラット化

Array#flatメソッド

多次元配列をフラットな配列に変換できます。引数を指定しなかった場合は1段階のみのフラット化ですが、引数に渡す数値でフラット化する深さを指定できます。配列をすべてフラット化する場合には、無限を意味するInfinityを値として渡すことで実現できます。

Array#flatメソッドは、指定した値で配列の次元を下げます。例として、3次元配列に対してflatメソッドを使うとどうなるか考えてみます。
flatメソッドの引数に1を指定した場合、3次元配列は2次元配列になります。
flatメソッドの引数に2を指定した場合、3次元配列は1次元配列になります。

const array = [[["A"], "B"], "C"];
// 引数なしは 1 を指定した場合と同じ
console.log(array.flat()); // => [["A"], "B", "C"]
console.log(array.flat(1)); // => [["A"], "B", "C"]
console.log(array.flat(2)); // => ["A", "B", "C"]
// すべてをフラット化するには Infinity を渡す
console.log(array.flat(Infinity)); // => ["A", "B", "C"]

JSprimerのコード例のように配列の要素が１つだとわかりづらさを感じたので要素を２つずつ持つコード例を載せておきます。

const array1 = [[["A", "B"], ["C", "D"]], [["E", "F"], ["G", "H"]]]
console.log(array1.flat()) // => [ [ 'A', 'B' ], [ 'C', 'D' ], [ 'E', 'F' ], [ 'G', 'H' ] ]
console.log(array1.flat(2)) // => [ 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H' ]

配列から要素を削除

配列の先頭や末尾の要素を削除する場合はArray#shiftやArray#popで行えます。しかし、配列の任意のインデックスの要素を削除できません。

Array#splice

Array#spliceメソッドは指定したインデックスから、指定した数だけ要素を取り除き、必要ならば要素を同時に追加することができます。

const array = [];
array.splice(インデックス, 削除する要素数);
// 削除と同時に要素の追加もできる
array.splice(インデックス, 削除する要素数, ...追加する要素);

以下のコードではインデックス番号１、２、３の要素を削除しています。第３引数に文字列を設定しているため、削除された部分に文字列が要素として追加されています。

const array = ["a", "b", "c", "d", "e"];

array.splice(1, 3, "第３引数は追加する要素");
console.log(array); // => [ 'a', '第３引数は追加する要素', 'e' ]
console.log(array.length); // => 3
console.log(array[2]); // => "e"
// すべて削除
array.splice(0, array.length);
console.log(array.length); // => 0

spliceメソッドを実際に使ってみる

spliceメソッドを使うと、レシーバの要素が減っていることが分かります。注意点は、spliceメソッドの戻り値は削除した要素ということです。

const words = [{jp: "アップル", en: "apple"}, {jp: "にんじん", en: "carrots"}]
const word = words.splice(1, 1);
console.log(words) //=> [ { jp: 'アップル', en: 'apple' } ]
console.log(word); // => [ { jp: 'にんじん', en: 'carrots' } ]
console.log(word[0]) // => { jp: 'にんじん', en: 'carrots' }

参考

JavaScript Primer 配列

６時だョ!!全員集合!!

Rails・JavaScrictを中心にアウトプットします。