JavaScript 中的 extend 方法

Anika Tabassum Era 2024年2月15日 JavaScript JavaScript Extend

使用 $.extend() 函式覆蓋 JavaScript 中的內容
在 JavaScript 中使用帶有 deep 引數的 $.extend() 函式
在 JavaScript 中使用 $.extend() 函式與 Target 合併而不更改其內容

JavaScript 庫 jQuery 的 extend 方法採用 4 個引數（deep、target、object1、objectN）。驅動是通過將兩個或多個物件的內容與第一個（target）物件合併來修改 target 物件。

deep 引數可以是 true 並且不跟進 false。啟用 true 可防止某些內容被覆蓋，並且合併操作發生在顯式內容上。

使用 `$.extend()` 函式覆蓋 JavaScript 中的內容

我們將開始宣告 object1 和 object2。$.extend() 函式將採用兩個引數，因此操作程式碼行將是 $.extend( object1, object2)。

在這種情況下，我們的 target 是 object1，object1 將與 object2 的內容合併。object2 內容將覆蓋 object1 的內容，其中存在類似的 key 值。

程式碼片段：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>test</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<div id="show"></div>
  <script>
  var object1 = {
  chocolate: 0,
  mozzarella: { weight: 500, price: 50 },
  butter: 100
};
var object2 = {
  mango: { price: 200 },
  kiwi: 100,
  mozzarella: { price: 60 }
};
// Merge object2 into object1
$.extend( object1, object2 );
$( "#show" ).append( JSON.stringify( object1 ) );
  </script>
</body>
</html>

輸出：

使用 $.extend() 覆蓋內容

你會注意到 object2 內容完全覆蓋了 object1 的 mozzarella 鍵。 $.extend() 方法在沒有 deep 引數的情況下執行。

在 JavaScript 中使用帶有 `deep` 引數的 `$.extend()` 函式

此示例將有一個帶有不同操作程式碼行的附加引數。deep 引數遞迴檢查內容並更改特定位置。

語法：

$.extend(true, object1, object2)

程式碼片段：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>test</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<div id="show"></div>
  <script>
  var object1 = {
  chocolate: 0,
  mozzarella: { weight: 500, price: 50 },
  butter: 100
};
var object2 = {
  mango: { price: 200 },
  kiwi: 100,
  mozzarella: { price: 60 }
};
// Merge object2 into object1
$.extend( true, object1, object2 );
$( "#show" ).append( JSON.stringify( object1 ) );
  </script>
</body>
</html>

輸出：

使用帶有 deep 引數的 $.extend() 方法

輸出給 target 物件一個特定的合併。你將看到 object2 內容鍵 mozzarella 值僅合併到特定子鍵 price。

weight 子鍵沒有被覆蓋，因為 true 引數使操作更有效。

在 JavaScript 中使用 `$.extend()` 函式與 `Target` 合併而不更改其內容

對於最後一個示例，我們將使用空的 {} 物件更改 deep 引數，該物件將承擔對合並物件的修改。

語法：

$.extend({}, object1, object2).

程式碼片段：

HTML：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>test</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<div id="show"></div>
</body>
</html>

JavaScript：

var object1 = {
  chocolate: 0,
  mozzarella: {weight: 500, price: 50},
};
var object2 = {
  mango: {price: 200},
  kiwi: 100,
};
// Merge object2 into object1
var object3 = $.extend({}, object1, object2);
$('#show').append('<div><b>obj1 = </b>' + JSON.stringify(object1) + '</div>');
$('#show').append('<div><b>obj2 = </b>' + JSON.stringify(object2) + '</div>');
$('#show').append('<div><b>obj3 = </b>' + JSON.stringify(object3) + '</div>');