JS memo

お洒落にJavaScript。

2019年6月16日23:00

Javascriptの配列をコピーする方法の処理速度を比べてみた

メインビジュアル

Javascriptの配列をコピーする方法の処理速度を比べてみた

Javascriptの配列をコピーして新しく配列を作りたい時って色々な方法があるのでどうやってコピーしようか悩みますよね。
今回は配列をコピーする方法を処理速度の速い順にランキングして見ました。

目次

  1. Javascriptの配列コピーって簡単じゃないの?
  2. 配列コピーの処理速度の計測方法
  3. 配列コピーの速度ランキング

Javascriptの配列コピーって簡単じゃないの?

JavaScriptの配列のコピーの方法がありすぎて悩むって冒頭で言ってたけど、変数にコピーしたい配列を代入するだけでできるんじゃないの?と思いませんでしたか。


const original_arr = ["😄", "😄", "😄"];
const new_arr = original_arr;
new_arr[0] = "💩";
console.log(original_arr); // ["💩", "😄", "😄"]
console.log(new_arr); // ["💩", "😄", "😄"]

元の配列をコピーして新しい配列を作っているように見えますが、実際は元の配列を参照しているだけなので、どちらかの値を変更するともう一方の配列の値も変わってしまうというめんどくさい事象が起こります。

そのため配列をコピーして新しく配列を作る場合には一工夫する必要があるのです。

配列コピーの処理速度の計測方法

  1. 1から100万までの整数を格納した配列を作成
  2. 作成した配列をそれぞれの方法でコピー
  3. Date.now()で配列コピーの処理の始まりと終わりの時間を計測する
  4. 1〜3を各方法で5回行い平均値を求める

let arr = [];
for(let i=1; i<=1000000; i++) arr.push(i);

const startTime = Date.now();
// それぞれの配列をコピーする方法を記述
const endTime = Date.now();

それぞれの平均値が小さかったものから順に発表していきます。

配列コピーの速度ランキング

それでは栄えある第一位から見ていきましょう!

concat()


const new_arr = [].concat(arr);

平均処理速度 ーー 5.2 ms

空の配列にオリジナルの配列を繋げることでオリジナルの配列をコピーして新しい配列を作っています。

slice()


const new_arr = arr.slice(0, arr.length);

平均処理速度平均 ーー 5.4 ms

オリジナルの配列からスライスで初めから終わりまで値を切り取って新しい配列に格納することによってオリジナルの配列をコピーした新しい配列が作られます。

処理速度はconcatとそんなに変わりませんでした。

スプレッド構文


const new_arr = [...arr];

平均処理速度平均 ーー 62.6 ms

角括弧の中で...の後にコピーしたい配列名を入れるとその配列をコピーした新しい配列を作成することができます。

AirbnbのJavaScript Style Guideでは配列のコピーをする際に推奨されている方法です。

Array.from


const new_arr = Array.from(arr);

平均処理速度平均 ーー 191.6 ms

NodeListや反復可能なオブジェクトを配列にしてくれる優れもので、配列をコピーすることも可能です。

※IEではまだ対応されていません。

map()


const new_arr = arr.map( x => x );

平均処理速度平均 ーー 471 ms

配列から各要素に処理を加えて新しい配列を作ることができます。何も処理を加えなかった場合はオリジナルの配列をそのままコピーした配列を作れますが、処理速度が速くないので配列をコピーしたいだけの場合はあまりおすすめではないです。

まとめ

配列のコピーについてそれぞれの方法の処理速度の結果はこのようになりました。

配列コピーの処理速度の結果

配列のコピーでどの方法にするか迷った時は処理速度も視野に入れて考えて見てください。