JavaScript の浅いコピーの実装-フロントエンドQ&A-php.cn

JavaScript の浅いコピーの実装

王林

リリース： 2023-05-26 18:06:08

オリジナル

1231 人が閲覧しました

JavaScript 開発では、オブジェクトまたは配列のコピー操作を処理する必要があることがよくあります。実際の開発では、浅いコピー、つまり、あるオブジェクトまたは配列の内容を別のオブジェクトまたは配列にコピーする必要があることがよくありますが、コピーされた新しいオブジェクトまたは配列は、元のオブジェクトまたは配列とデータの一部を共有します。この記事ではJavaScriptでシャローコピーを実装する方法を紹介します。

1.浅いコピーとは何ですか?

JavaScript では、オブジェクトと配列は両方とも参照型です。オブジェクトまたは配列を新しい変数に代入するとき、実際には元のオブジェクトまたは配列の参照を新しい変数に代入します。

たとえば、次のコードはオブジェクトを新しい変数に割り当てます:

let obj1 = { name: '张三', age: 18 };
let obj2 = obj1;

ログイン後にコピー

この例では、obj2 と obj1 は異なる 2 つではありません。オブジェクトですが、同じメモリアドレスを指している 2 つの参照があります。

実際の開発では、オブジェクトまたは配列の内容を別のオブジェクトまたは配列にコピーする必要がある場合があります。その場合は浅いコピーが必要です。

浅いコピーとは、オブジェクトまたは配列の第 1 レベルのデータ構造のみをコピーすることを指します。オブジェクトまたは配列にオブジェクトまたは配列も含まれている場合、コピーされた新しいオブジェクトまたは配列は、これらの参照型を元のオブジェクトと共有します。

JavaScript の浅いコピーの実装

図に示すように、オブジェクト A には 2 つの属性 a と b が含まれており、属性 b の値は次のとおりです。オブジェクト B。オブジェクト B また、2 つの属性 c と d も含まれます。オブジェクト A の浅いコピーが作成されると、新しいオブジェクト C が生成されます。オブジェクト C は、オブジェクト A と属性 a および b を共有します。つまり、浅いコピーはオブジェクト A の第 1 レベルの構造のみをコピーし、オブジェクト B はオブジェクト A の第 1 レベルの構造のみをコピーします。オブジェクト C とオブジェクト A はオブジェクト B を共有します。つまり、2 つのオブジェクトのアドレスは同じです。

2. 浅いコピーの実装方法

次に、JavaScript での一般的な浅いコピーの実装方法をいくつか紹介します。

手動トラバーサル

オブジェクトまたは配列を手動でトラバースし、各属性または要素を新しいオブジェクトまたは配列にコピーします。この方法はシンプルで理解しやすく、コードの可読性も高くなりますが、入れ子の階層が多いオブジェクトや配列の場合、コード量が非常に多くなります。

function shallowCopy(obj) {
  if (Array.isArray(obj)) {
    return obj.slice();
  } else if (typeof obj === 'object' && obj !== null) {
    let newObj = {};
    for (let key in obj) {
      if (obj.hasOwnProperty(key)) {
        newObj[key] = obj[key];
      }
    }
    return newObj;
  } else {
    return obj;
  }
}

ログイン後にコピー

この例では、まず、コピーされるオブジェクトが配列であるかオブジェクトであるかを判断します。配列の場合は、slice() メソッドを使用して浅いコピーを作成します。オブジェクトの場合は、オブジェクトのプロパティをループして各プロパティを新しいオブジェクトにコピーし、最後に新しいオブジェクトを返します。

Object.assign()

Object.assign() メソッドは、1 つ以上のオブジェクトのプロパティをターゲットオブジェクトにコピーするために使用されます。、複数のオブジェクトが同じプロパティを持つ場合、後続のオブジェクトのプロパティは前のオブジェクトのプロパティを上書きします。 Object.assign() このメソッドは、オブジェクトの第 1 レベルのデータ構造のみをコピーします。オブジェクトに参照型属性が含まれる場合、新しいオブジェクトと元のオブジェクトはこれらの参照型属性を共有します。

let obj1 = { name: '张三', age: 18, hobbies: ['coding', 'reading'] };
let obj2 = Object.assign({}, obj1);

ログイン後にコピー

この例では、Object.assign() メソッドを使用して、オブジェクト obj1 を新しい空のオブジェクトにコピーし、新しいオブジェクト obj2 を生成します。

Object.assign() メソッドを使用する場合、最初のパラメータはターゲットオブジェクトである必要があり、次のパラメータはソースオブジェクトであることに注意してください。ソースオブジェクトが同じプロパティを持つ場合は、の場合、後続のオブジェクトのプロパティは前のオブジェクトのプロパティを上書きします。ソースオブジェクトに参照型のプロパティがある場合、コピーされた新しいオブジェクトはこれらのプロパティを元のオブジェクトと共有します。

スプレッド演算子

スプレッド演算子 (スプレッド演算子) は ES6 の新しい構文で、配列またはオブジェクトを展開し、その内容を別のオブジェクトにコピーするために使用できます。配列またはオブジェクト。スプレッド演算子は、オブジェクトまたは配列の第 1 レベルのデータ構造でのみ使用できます。オブジェクトまたは配列に参照型のプロパティが含まれる場合、新しいオブジェクトまたは配列は、これらのプロパティを元のオブジェクトまたは配列と共有します。

let arr1 = [1, 2, 3];
let arr2 = [...arr1];

let obj1 = { name: '张三', age: 18, hobbies: ['coding', 'reading'] };
let obj2 = { ...obj1 };

ログイン後にコピー

この例では、スプレッド演算子を使用して、配列 arr1 とオブジェクト obj1 の内容を新しい配列とオブジェクトにコピーし、新しい配列 arr2 とオブジェクト obj2 を生成します。

スプレッド演算子は使いやすく簡潔であり、コードは非常に読みやすいですが、多くのネストされたレベルを持つオブジェクトまたは配列の場合、コードの量は依然として比較的多くなります。

Array.from()

Array.from() メソッドは、配列のようなオブジェクトまたは反復可能なオブジェクトを新しいオブジェクトに変換するために使用されます。配列は、配列の浅いコピーに使用できます。

let arr1 = [1, 2, 3];
let arr2 = Array.from(arr1);

ログイン後にコピー

この例では、Array.from() メソッドを使用して配列 arr1 を新しい配列 arr2 に変換し、浅いコピーを実装します。

Array.from() メソッドは、配列のようなオブジェクトまたは反復可能なオブジェクトの浅いコピーにのみ使用できることに注意してください。オブジェクトの場合は、他のメソッドを使用する必要があります。

3. 概要

この記事では、手動トラバーサル、Object.assign() メソッド、スプレッド演算子、Array.from() メソッドなど、JavaScript での浅いコピーの実装について紹介します。実際の開発では、実際のニーズに応じて、シャローコピー操作を実行するための最適な方法を選択できます。浅いコピーは、オブジェクトまたは配列の第 1 レベルのデータ構造のみをコピーすることに注意してください。オブジェクトまたは配列に参照型属性が含まれている場合、浅いコピーによってコピーされた新しいオブジェクトまたは配列は、これらの属性を元のオブジェクトまたは配列と共有します。 . .ディープコピーを実装する必要がある場合は、他の方法を使用して操作する必要があります。

以上がJavaScript の浅いコピーの実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。