JavaScript 中的 extend 方法
Anika Tabassum Era
2023年1月30日
2022年5月5日
-
使用
$.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>
输出:
你会注意到 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
的合并版本,我们还能够打印未受影响的对象。
Author: Anika Tabassum Era