JavaScriptの配列で参照渡しではなく値渡しをする方法と注意点

Javascriptの配列において参照渡しではなく値渡しをする時に苦労したので、メモを書いておきます。

JavaScriptの配列で値渡しにする方法

JavaScriptの配列で値渡しにする方法は、主に以下の2つがある。

sliceメソッドを使う

まずは、以下の様にsliceメソッドを使う事が挙げられる。

array1 = [1,3,5,4];

array2 = array1.slice();

concatメソッドを使う

次に、concatメソッドを使うことも考えられる。

concatは2つの配列を合体させて新しい配列を作るメソッドだが、空の配列に対してコピーしたい配列をconcatさせると。値渡しのように配列をコピーできる。

array1 = [1,3,5,4];

array2 = [].concat(array1);

1次元配列の値渡しであれば、上記の2つの内どちらかのメソッドを使えば良い。

2次元配列以上の値渡しをしたい時の注意点

sliceやconcatは便利だが、あくまでも1次元配列の時に使えるもので、2次元以上の場合は2次元目からは参照渡しになってしまい思いも寄らない動きをしてしまう。

MDNのサイトにも以下の様に記されている。

slice は元の配列を変更しませんが、元の配列から取り出された要素のコピーを含むシャローコピー( 1 段階の深さのコピー)を返します。元の配列の要素は以下のようにして新しい配列にコピーされます。

参考記事:Array.prototype.slice() – JavaScript | MDN

concat は this や引数として与えられた配列を変更しませんが、その代わりに元の配列から結合させた同じ要素のコピーを含むシャローコピー (1 次元の配列要素までの浅いコピー) を返します。

参考記事:Array.prototype.concat() – JavaScript | MDN

では、2次元配列でも値渡しをする場合はどうすれば良いかと言うと、以下の様にするとできる。

array1 = [[1,2],[34,6],[5,44]];

array2 = array1.slice().map( function(row){ return row.slice(); });

上記では、mapメソッドを使って2次元目の配列にもsliceメソッドを使うことで、2次元目の配列も値渡しになるようにしている。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

SNS Shere

Related Post

JavaScriptのソースコードを読む時に知っておきたいモジュールパターン

JavaScriptのライブラリ等でよく見る変数宣言パターン

JavaScriptにおける短絡演算子(ショートカット演算子)の実践的な使い方

JavaScriptを使ってスクロールでメニューを固定・追従させる方法

Windowsにnode.js+Electronを入れてwindowsアプリを作る方法

Javascriptの書き方パターン