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