JavaScript 中的 extend 方法

  2. 貼士文章
  3. JavaScript 貼士
  4. JavaScript 中的 extend 方法
Anika Tabassum Era 2023年1月30日 2022年5月5日
JavaScript JavaScript Extend
  1. 使用 $.extend() 函式覆蓋 JavaScript 中的內容
  2. 在 JavaScript 中使用帶有 deep 引數的 $.extend() 函式
  3. 在 JavaScript 中使用 $.extend() 函式與 Target 合併而不更改其內容
JavaScript 中的 extend 方法

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>" );

輸出：

使用 $.extend() 方法與 Target 合併而不更改其內容

object3 包含 object1 和 object2 的合併版本，我們還能夠列印未受影響的物件。

Author: Anika Tabassum Era
Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn GitHub Facebook