|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
jQuery extend()合并兩對象，是否覆蓋屬性的寫法
作者:admin 時間:2022-7-27 8:56:20 瀏覽:jQuery中有個 extend()方法，它可以合并兩個或多個數(shù)組對象，而在合并對象的時候，我們是可以選擇是否覆蓋屬性的。本文將通過示例，介紹實現(xiàn)方法。
extend()合并對象，不覆蓋屬性
首先，我們看看extend()合并對象，不覆蓋屬性的寫法。
完整HTML
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
</head>
<body>
<h3>JQuery extend()</h3>
<p>合并兩個對象</p>
<p id = "p1"> <b> First object obj1 is: </b> </p>
<p id = "p2"> <b> Second object obj2 is: </b> </p>
<p id = "p3"> <b> Merged obj2 into obj1: </b> </p>
<script>
var obj1 = {
English: { Price: 150 },
Chemistry: { Price: 250 },
Hindi: { Price: 300 }
};
var obj2 = {
Physics: { Price: 200 },
Hindi: { Pages: 200 },
Chemistry: { Pages: 150 }
};
$( "#p1" ).append( JSON.stringify( obj1 ));
$( "#p2" ).append( JSON.stringify( obj2 ));
$.extend( true, obj1, obj2 );
$( "#p3" ).append( JSON.stringify( obj1 ));
</script>
</body>
</html>
執(zhí)行結(jié)果
代碼分析
對象一(obj1)，包含三個屬性：English、Chemistry、Hindi。
對象二(obj2，包含三個屬性：Physics、Hindi、Chemistry。
使用extend()不覆蓋屬性合并，代碼是：$.extend( true, obj1, obj2 ); 。
合并后，得到的對象包含四個屬性：English、Chemistry、Hindi、Physics。并且我們注意看，合并后的屬性值，并沒有覆蓋，而是追加到屬性值里。
extend()合并對象，覆蓋屬性
下面，我們再看看extend()合并對象，覆蓋屬性的寫法。
完整HTML
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
</head>
<body>
<h3>JQuery extend()</h3>
<p>合并兩個對象</p>
<p id = "p1"> <b> First object obj1 is: </b> </p>
<p id = "p2"> <b> Second object obj2 is: </b> </p>
<p id = "p3"> <b> Merged obj2 into obj1: </b> </p>
<script>
var obj1 = {
English: { Price: 150 },
Chemistry: { Price: 250 },
Hindi: { Price: 300 }
};
var obj2 = {
Physics: { Price: 200 },
Hindi: { Pages: 200 },
Chemistry: { Pages: 150 }
};
$( "#p1" ).append( JSON.stringify( obj1 ));
$( "#p2" ).append( JSON.stringify( obj2 ));
$.extend( obj1, obj2 );
$( "#p3" ).append( JSON.stringify( obj1 ));
</script>
</body>
</html>
執(zhí)行結(jié)果
代碼分析
對象一(obj1)，包含三個屬性：English、Chemistry、Hindi。
對象二(obj2，包含三個屬性：Physics、Hindi、Chemistry。
使用extend()覆蓋屬性合并，代碼是：$.extend( obj1, obj2 ); 。
合并后，得到的對象包含四個屬性：English、Chemistry、Hindi、Physics。并且我們注意看，合并后的屬性值，覆蓋了原對象（obj1）的屬性值。
總結(jié)
本文通過兩個示例，演示了如何使用 jQuery extend() 合并兩對象，覆蓋或不覆蓋屬性的寫法。
知識擴展：jQuery extend() 方法介紹
jQuery extend()方法將兩個或多個對象的內(nèi)容合并到第一個對象中。此方法返回合并的對象。
句法
extend()方法的常用語法如下所示。
jQuery.extend( [deep ], target, object1 [, objectN ] )
該方法采用四個參數(shù)，定義如下。
deep：布爾類型參數(shù)。如果指定為true，則合并變?yōu)檫f歸。不支持其 false 值。
target：它是一個要擴展的對象。它從傳入的附加對象接收新屬性。
object1：它是一個包含要合并到目標對象中的附加屬性的對象。
objectN：它是包含要合并到目標對象中的屬性的附加對象。
如果將單個參數(shù)傳遞給extend()方法，則意味著省略了目標參數(shù)。在這種情況下，JQuery 對象被視為目標。
如果將兩個參數(shù)傳遞給extend()方法，則將所有對象的屬性添加到目標對象。參數(shù)，例如null或undefined，將被忽略。
相關(guān)文章
- 站長推薦
