読者です 読者をやめる 読者になる 読者になる

totorajの開発日記

僕がなんかメモる

JavaScriptの配列についてのメモ

タイトル通りです。

配列のコピーとかをするときに忘れがちなのでメモしておきます。

ソースコードを見ればなんとなくわかるはず。

テストコード

// テストオブジェクト
var TestObject = function (num) {
    this.num = num;
}

// 配列1
var list_1 = [
    new TestObject(1),
    new TestObject(2),
    new TestObject(3),
    4
];
// 配列2
var list_2;

/* ===== 配列2に配列1を代入した場合 ===== */

list_2 = list_1;

list_2[0].num = 10;
console.log(list_1[0].num);// 10
console.log(list_2[0].num);// 10
list_1[0].num = 1;
console.log(list_1[0].num);// 1
console.log(list_2[0].num);// 1

list_2[3] = 40;
console.log(list_1[3])// 40
console.log(list_2[3])// 40
list_1[3] = 4;
console.log(list_1[3])// 4
console.log(list_2[3])// 4

list_2.push(5);
console.log(list_1[4])// 5
console.log(list_2[4])// 5
list_1.pop();
console.log(list_1[4])// undefined;
console.log(list_2[4])// undefined;

// 同じ配列,同じTestObjectが利用されていることがわかる
// また、この場合はプリミティブ型も同じものが利用されている


/* ===== 配列2に配列1の要素を一つずつpushした場合 */

list_2 = [];
for (var i=0; i < list_1.length; i++) {
    list_2.push(list_1[i]);
}

list_2[0].num = 10;
console.log(list_1[0].num);// 10
console.log(list_2[0].num);// 10
list_1[0].num = 1;
console.log(list_1[0].num);// 1
console.log(list_2[0].num);// 1

list_2[3] = 40;
console.log(list_1[3])// 4;
console.log(list_2[3])// 40;

list_2.push(5);
console.log(list_1[4]);// undefined
console.log(list_2[4]);// 5

// 別の配列, 同じTestObjectが利用されていることがわかる
// また、この場合はプリミティブ型は別のものが利用されている

おわりに

なかなか面白い挙動をする。