HOWTO · JavaScript
JavaScript 中的 extend 方法
JavaScript 庫 jQuery 有一個方法 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>
輸出：
你會注意到 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>
輸出：
輸出給 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>');
輸出：
object3 包含 object1 和 object2 的合併版本，我們還能夠列印未受影響的物件。
