|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
jQuery extend()合并兩對(duì)象，是否覆蓋屬性的寫(xiě)法
作者:admin 時(shí)間:2022-7-27 8:56:20 瀏覽:jQuery中有個(gè) extend()方法，它可以合并兩個(gè)或多個(gè)數(shù)組對(duì)象，而在合并對(duì)象的時(shí)候，我們是可以選擇是否覆蓋屬性的。本文將通過(guò)示例，介紹實(shí)現(xiàn)方法。
extend()合并對(duì)象，不覆蓋屬性
首先，我們看看extend()合并對(duì)象，不覆蓋屬性的寫(xiě)法。
完整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>合并兩個(gè)對(duì)象</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é)果
代碼分析
對(duì)象一(obj1)，包含三個(gè)屬性：English、Chemistry、Hindi。
對(duì)象二(obj2，包含三個(gè)屬性：Physics、Hindi、Chemistry。
使用extend()不覆蓋屬性合并，代碼是：$.extend( true, obj1, obj2 ); 。
合并后，得到的對(duì)象包含四個(gè)屬性：English、Chemistry、Hindi、Physics。并且我們注意看，合并后的屬性值，并沒(méi)有覆蓋，而是追加到屬性值里。
extend()合并對(duì)象，覆蓋屬性
下面，我們?cè)倏纯?code>extend()合并對(duì)象，覆蓋屬性的寫(xiě)法。
完整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>合并兩個(gè)對(duì)象</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é)果
代碼分析
對(duì)象一(obj1)，包含三個(gè)屬性：English、Chemistry、Hindi。
對(duì)象二(obj2，包含三個(gè)屬性：Physics、Hindi、Chemistry。
使用extend()覆蓋屬性合并，代碼是：$.extend( obj1, obj2 ); 。
合并后，得到的對(duì)象包含四個(gè)屬性：English、Chemistry、Hindi、Physics。并且我們注意看，合并后的屬性值，覆蓋了原對(duì)象（obj1）的屬性值。
總結(jié)
本文通過(guò)兩個(gè)示例，演示了如何使用 jQuery extend() 合并兩對(duì)象，覆蓋或不覆蓋屬性的寫(xiě)法。
知識(shí)擴(kuò)展：jQuery extend() 方法介紹
jQuery extend()方法將兩個(gè)或多個(gè)對(duì)象的內(nèi)容合并到第一個(gè)對(duì)象中。此方法返回合并的對(duì)象。
句法
extend()方法的常用語(yǔ)法如下所示。
jQuery.extend( [deep ], target, object1 [, objectN ] )
該方法采用四個(gè)參數(shù)，定義如下。
deep：布爾類型參數(shù)。如果指定為true，則合并變?yōu)檫f歸。不支持其 false 值。
target：它是一個(gè)要擴(kuò)展的對(duì)象。它從傳入的附加對(duì)象接收新屬性。
object1：它是一個(gè)包含要合并到目標(biāo)對(duì)象中的附加屬性的對(duì)象。
objectN：它是包含要合并到目標(biāo)對(duì)象中的屬性的附加對(duì)象。
如果將單個(gè)參數(shù)傳遞給extend()方法，則意味著省略了目標(biāo)參數(shù)。在這種情況下，JQuery 對(duì)象被視為目標(biāo)。
如果將兩個(gè)參數(shù)傳遞給extend()方法，則將所有對(duì)象的屬性添加到目標(biāo)對(duì)象。參數(shù)，例如null或undefined，將被忽略。
相關(guān)文章
- JavaScript檢查對(duì)象是否數(shù)組的最快方法
- 詳細(xì)介紹5種方法檢查JavaScript對(duì)象是否數(shù)組
- 5個(gè)示例介紹如何在JS中解構(gòu)數(shù)組和對(duì)象
- 兩種簡(jiǎn)潔又安全的JS遍歷對(duì)象屬性的寫(xiě)法
- 5種方法檢查JS對(duì)象中是否存在某個(gè)鍵(屬性)
- 3種方法JS和jQuery判斷對(duì)象是否為空
- 3種方法判斷JS對(duì)象是否具有某一屬性
- 【如何合理使用】JavaScript訪問(wèn)對(duì)象屬性的3種方法
- 【實(shí)例】演示2種方法JS從對(duì)象中刪除屬性
- 【示例】3種方法迭代遍歷JavaScript對(duì)象屬性和值
- JavaScript檢查對(duì)象是否數(shù)組的最快方法
- 詳細(xì)介紹5種方法檢查JavaScript對(duì)象是否數(shù)組
- 5個(gè)示例介紹如何在JS中解構(gòu)數(shù)組和對(duì)象
- 兩種簡(jiǎn)潔又安全的JS遍歷對(duì)象屬性的寫(xiě)法
- 5種方法檢查JS對(duì)象中是否存在某個(gè)鍵(屬性)
- 3種方法JS和jQuery判斷對(duì)象是否為空
- 3種方法判斷JS對(duì)象是否具有某一屬性
- 【如何合理使用】JavaScript訪問(wèn)對(duì)象屬性的3種方法
- 【實(shí)例】演示2種方法JS從對(duì)象中刪除屬性
- 站長(zhǎng)推薦
