本記事では、jQueryで配列やオブジェクトをコピーする方法について解説しています。
JavaScriptの学習におすすめ書籍
1冊ですべて身につくJavaScript入門講座
メリット
- 誰でも分かるように嚙み砕いて説明してくれる
- アニメーションの知識が深く学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
全プログラマー必見！
変数名/関数名にもう悩まない！
変数名/関数名にもう悩まない！
リーダブルコード
メリット
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 （2023/07/23 02:48時点 | Amazon調べ）
ポチップ
目次
配列とオブジェクトをコピーする
配列やオブジェクトをコピーする場合、パッと思いつく方法は変数にコピーしたい配列やオブジェクトを代入すればコピーできるっしょ！と思う方が多いと思います。(下記のようなコード)
let numberArr = [1,2,3];
let numberArrCopy = numberArr;
console.log(numberArr); // -> [1,2,3]
console.log(numberArrCopy); // -> [1,2,3]変数には同じ配列がコピーされているため、一見問題ないように思えますがこのコピーの仕方ではどちらかに変更があった際、両方の値が変更されてしまいます。(参照先が両方とも同じなため)
let numberArr = [1,2,3];
let numberArrCopy = numberArr;
numberArr[2] = 4;
console.log(numberArr); // -> [1,2,4] コピー元まで変更されている...
console.log(numberArrCopy); // -> [1,2,4]このようにならないようにするには、配列やオブジェクトのコピーを参照渡しではなく値渡しでコピーする必要があります。
extendメソッド
配列とオブジェクトをコピーするには、extendメソッドを使います。
jQuery.extend(空の配列またはオブジェクト, コピー元)本来extendメソッドは配列やオブジェクトを結合するのに使われますが、第一引数のtargetに配列をコピーしたい場合は空の配列「[]」を指定し、オブジェクトをコピーしたい場合は空のオブジェクト「{}」を指定することで値渡しコピーすることができます。
/* 配列のコピー */
let fruits = ["りんご","ばなな","ぶどう"];
let fruitsCopy = $.extend([], fruits);
fruitsCopy[0] = "いちご";
console.log(fruitsCopy); // -> ["いちご","ばなな","ぶどう"]
console.log(fruits); // -> ["りんご","ばなな","ぶどう"]/*オブジェクトのコピー */
let person = {
id:1,
name:"Taro",
age:20
}
let personCopy = $.extend({}, person);
personCopy.age = 25;
console.log(person); // -> { id:1, name:"Taro", age:20 }
console.log(personCopy); // -> { id:1, name:"Taro", age:25 }
あわせて読みたい
jQueryでオブジェクト同士を結合させる($.extend)
本記事では、jQueryでオブジェクト同士を結合させることができるextendメソッドの使い方について解説しています。 【extendメソッド】 extendメソッドは、複数のオブジ…
