jQuery

jQueryで配列やオブジェクトをコピーする方法

本記事では、jQueryで配列やオブジェクトをコピーする方法について解説しています。

jQueryの学習におすすめ参考書
jQuery最高の教科書

本書情報
著者株式会社シフトブレイン
発売日2013/11/26
ページ数320ページ
Kindle版
レビュー
(Amazon)
(93件)

参考書が苦手な人はUdemyの動画がおすすめ
即実践 手を動かして6時間でjQueryをマスターしよう。
知識、経験ゼロからjQueryを使いこなそう

動画情報
作成者村守 康
学習時間6時間
受講者数28,547人
レビュー (425件)
動画の詳細はこちら

配列とオブジェクトをコピーする

配列やオブジェクトをコピーする場合、パッと思いつく方法は変数にコピーしたい配列やオブジェクトを代入すればコピーできるっしょ!と思う方が多いと思います。(下記のようなコード)

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 = 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メソッドの使い方について解説しています。...

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村