jQueryのextend()メソッド

今日の投稿では、2つ以上のオブジェクトのプロパティをマージする jQuery の extend() メソッドについて学びます。

jQuery の extend()

jQuery は、2つ以上のオブジェクトの内容をターゲット オブジェクトにマージする組み込みメソッド .extend() を提供します。 2つ以上のオブジェクトが引数として .extend() に渡されると、すべてのオブジェクトのプロパティがターゲット オブジェクトに追加されます。

オブジェクトのマージ中、Nullまたはundefined引数は無視されます。

構文：

jQuery.extend(deep, target, [object1])

1. deep はブール値のパラメーターです。 true と指定すると、マージは再帰的になります。
2. target は、新しいプロパティを受け取るオブジェクトです。
3. object1 は、マージする追加のプロパティを含むオブジェクトです。

$.extend() に引数が 1つしか渡されない場合は、target 引数が省略されていることを示します。 このような場合、jQuery オブジェクト自体が対象オブジェクトになります。

この機能により、jQuery 名前空間 に新しい機能を追加できます。 これは、jQuery に新しいメソッドを追加する必要があるプラグイン作成者にとって有益です。

デフォルトでは、$.extend() は非再帰的なマージを実行します。 ターゲット オブジェクトのプロパティ自体がオブジェクトまたは配列であるとします。

その場合、2 番目以降のオブジェクトで同じキーを持つプロパティによって完全にオーバーライドされます。

$.extend() 関数の第 1 引数として true を渡すと、オブジェクトが再帰的にマージされます。 ただし、オブジェクトのプロトタイプから継承されたプロパティはコピーされます。

new MyCustomObject(args) または Date や RegExp などの組み込み JavaScript タイプによって作成されたオブジェクトであるプロパティは再作成されず、結果のオブジェクトまたは配列に単純なオブジェクトとして表示されます。

以下の簡単な例でそれを理解しようとしましょう。

const firstObj = {
  name: 'John Doe',
  address: {city: 'Banglore', country: 'India'},
  age: 25
};
const secondObj = {
  address: {country: 'United Kingdom'},
  phone: '7878954123'
};
console.log($.extend(true, firstObj, secondObj));
console.log($.extend(false, firstObj, secondObj));

上記の例では、異なるプロパティを持つ 2つのオブジェクトを定義しました。 deep パラメータである true として最初のパラメータを使用して extend メソッドを呼び出すと、最初のオブジェクトのプロパティが 2 番目のオブジェクトのプロパティによって再帰的に更新されます。

この場合、国のみが 2 番目のオブジェクトによって更新され、他のプロパティが追加されます。

2 番目のケースでは、2 番目のパラメーター false を指定して extend メソッドを呼び出すと、最初のオブジェクトのプロパティが 2 番目のオブジェクトのプロパティに置き換えられます。

同様のプロパティが存在する場合、最初のオブジェクトのプロパティは 2 番目のオブジェクトのプロパティに置き換えられます。 それ以外の場合、2 番目のオブジェクトの新しいプロパティが作成されます。

jQuery をサポートする任意のブラウザーで上記のコード スニペットを試して実行すると、以下の結果が表示されます。

{
  address: {
    city: "Banglore",
    country: "United Kingdom"
  },
  age: 25,
  name: "John Doe",
  phone: "7878954123"
}
{
  address: {
    country: "United Kingdom"
  },
  age: 25,
  name: "John Doe",
  phone: "7878954123"
}

デモ