JavaScript　配列に関しての豆知識

2022年9月29日 17:47

jsを書いていると配列を扱うことがよくあると思いますが、最近学んだ事を2つ紹介したいと思います。（割と基礎的な部分）

JavaScriptで元配列を破壊せずにsortする

sort()について

配列の中身を並び替える際、多くの場合はsort()メソッドを使用するかと思います。

しかし、sort()メソッドは、map()メソッドやfilter()メソッドと違い、新たな配列を返してくれるわけではないので、元々の配列を破壊してしまうメソッドになります。

const array = [4, 2, 1, 3]
const array_sort = array.sort()

console.log(array_sort) // [1, 2, 3, 4] 
console.log(array) // [1, 2, 3, 4] 元々の配列も変更されてしまう

破壊せずにsort()を行う

元々の配列は残したまま、非破壊的にsort()メソッドを実行したい場合があると思います。

そのような場合は、sort()メソッドを実行する前に、Array.from()メソッドを実行し、元の配列のコピーを生成してから配列に対しソート処理を実行すると、非破壊的にソートを行う事ができます。

const array = [4, 2, 1, 3]
const array_sort = Array.from(array).sort() // 配列のコピーを生成後sort()を実行
console.log(array_sort) // [1, 2, 3, 4] 
console.log(array) // [4, 2, 1, 3]  元の配列は変更されていない

その他の方法

上記と同じような方法として、slice()メソッドでも同じ結果を得る事ができます。
要はsort()メソッドを実行する前に配列をコピーすれば良いという事ですね。

const array = [4, 2, 1, 3]
const array_sort = array.slice().sort() // slice()後にsort()を実行

console.log(array_sort) // [1, 2, 3, 4] 
console.log(array) // [4, 2, 1, 3]

以上、場合によってはためになるかもしれないsort()メソッドについての豆知識でした。

次はループ処理を行う際に便利な、いくつかのメソッドを紹介したいと思います。

配列処理をする代表的なメソッド

ES5以降に使えるようになった便利な配列操作のメソッドを紹介します。配列の組み込みメソッド一覧は次のページに記載されています。

forEach()

forEach() は、与えられた関数 callbackFn を配列に含まれる各要素に対して一度ずつ、昇順で呼び出します。インデックスプロパティが削除されていたり、初期化されていなかったりした場合は呼び出されません。

['a', 'b', 'c'].forEach(val => {
  console.log(val); // a, b, c
});

filter()

filter()は特定の条件を与えて配列データを取得したい内容を「コールバック関数」に書くことで、任意のデータを抽出して新しい配列を生成します。

例えば、数値データなら「○○以下の数値だけ」を抽出したり、文字データなら「○○と同じ文字列だけ」を抽出するような使い方が出来ます。

var items = [5,2,7,8,3,1,6,8,4];
 
var result = items.filter( function( value ) {
    return value < 5;　　　　//5よりも小さい数値だけを抽出
})
 
console.log( result );　　　　//[2, 3, 1, 4]

map()

JavaScriptのmapメソッドとは、配列の中の要素を一つづつ取り出して、各要素に対して指定の処理を実行し、新たな配列をつくる非破壊処理です。

const array = [1, 4, 9, 16].map(x => x * 2);

console.log(array); // [2, 8, 18, 32]

reduce()

reduceは配列を処理して、1つの値を取得します。第2引数に初期値を渡すことができます。

const val = [1, 2, 3, 4].reduce(
  // 10 + 1 + 2 + 3 + 4
  (accumulator, currentValue) => accumulator + currentValue,
  10,
);

console.log(val); // 20

まだまだ配列処理を行えるメソッドはありますが、シチュエーションによって適切なメソッドを選択することが大事かもしれません。

JavaScript 配列に関しての豆知識