資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 JavaScript 條件新增物件成員？
物件是 JavaScript 中最重要的資料型別。在 JavaScript 中，甚至所有東西都是物件。例如，陣列是物件，數字、字串和布林值也可以是物件。
有時，開發人員需要根據某些條件將屬性插入物件。例如，我們有一個人的物件，並且我們僅在一個人 18 歲時才需要新增駕駛執照屬性。
在這裡，我們將學習使用 JavaScript 有條件地向物件新增成員的不同方法。
使用擴充套件運算子有條件地向物件新增成員
有條件地向物件新增成員的第一種方法是使用擴充套件運算子。如果條件評估為真，我們可以將擴充套件運算子與條件一起使用並將屬性新增到物件。
語法
使用者可以遵循以下語法使用擴充套件運算子有條件地將物件的屬性新增到物件中。
let obj = {
...(condition ? { prop: 'value' } : {})
}
在上述語法中，如果條件為真，它將向“obj”物件新增一個具有值的屬性。否則，它將新增一個空物件。
示例 1
在下面的示例中，我們建立了包含三個不同屬性和值的演示物件。之後，我們定義了“addProp4”和“addProp5”布林變數。
我們使用擴充套件運算子並根據“addProp4”和“addProp5”變數的值將“prop4”和“prop5”屬性新增到物件。在輸出中，使用者可以觀察到“prop4”屬性已新增到物件，但“prop5”屬性未新增。
<html>
<body>
<h3> Using the <i> spread operator </i> to add members in object conditionally </h3>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
let demo = {
prop1: 'value1',
prop2: 'value2',
prop3: 'value3'
}
output.innerHTML = "Demo object before adding the prop4 and prop5 properties conditionally is " + JSON.stringify(demo) + "<br>";
let addProp4 = true;
demo = {
...demo,
...(addProp4 ? { prop4: 'value4' } : {})
}
let addProp5 = false;
demo = {
...demo,
...(addProp5 ? { prop5: 'value5' } : {})
}
output.innerHTML += "Demo object after adding the prop4 and prop5 properties conditionally is " + JSON.stringify(demo);
</script>
</body>
</html>
使用 Object.assign() 方法
Object.assign() 方法用於向現有或新建立的物件新增屬性。此外，我們可以根據某些條件向物件新增屬性。
語法
使用者可以遵循以下語法使用 Object.assign() 方法根據特定條件向物件新增成員。
Object.assign(obj, condition ? { prop4: "value4" } : { })
在上述語法中，“obj”是新增某些屬性的初始物件。第二個引數包含條件和要根據條件值新增的屬性。
示例 2
在下面的示例中，“initialOBJ”物件包含一些屬性和值。之後，我們使用 Object.assign() 方法根據條件向 initialOBJ 物件新增屬性。
在下面的示例中，“10 == 20”條件始終評估為假。因此，它向物件添加了“prop5”屬性，而不是新增“prop4”屬性。
<html>
<body>
<h3> Using the <i> Object.assign() method </i> to add members in object conditionally </h3>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
let initialOBJ = {
prop1: "value1",
prop2: "value2",
prop3: "value3"
};
let obj = Object.assign(initialOBJ, 10 == 20 ? { prop4: "value4" } : { prop5: "value5" });
output.innerHTML += "The object after adding the prop4 and prop5 properties conditionally is " + JSON.stringify(obj);
</script>
</body>
</html>
使用 JQuery 的 extend() 方法
顧名思義，extend() 方法允許我們在 JQuery 中擴充套件物件。在將屬性插入物件時，我們可以根據某些條件分配值。
語法
使用者可以遵循以下語法使用 JQuery 的 extend() 方法。
let updatedOBJ = $.extend(initialObj, { prop: condition ? "Yes" : null);
在上述語法中，initialObj 物件包含一些物件屬性。在第二個引數中，我們根據條件的真值向“prop”屬性分配值。
示例 3
在下面的示例中，“city”物件包含與城市相關的屬性和值。我們使用 extend() 方法更新物件，並根據給定條件為“clean”和“trafficFree”屬性分配值。
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
<h3> Using the <i> extend() method of JQuery </i> to add members in object conditionally </h3>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
let city = {
name: "Bangalore",
population: 10000000,
area: 1000
};
let isCityClean = true;
let isTrafficFree = false;
let updatedOBJ = $.extend(city, { clean: isCityClean ? "Yes" : "No", trafficFree: isTrafficFree ? "Yes" : "No" });
output.innerHTML += "The object after adding the prop4 and prop5 properties conditionally is " + JSON.stringify(updatedOBJ);
</script>
</body>
</html>
使用 if 語句
if 語句是條件新增物件屬性的最簡單方法。如果條件評估為真，請使用點運算子將屬性新增到物件。
語法
使用者可以遵循以下語法使用 if 語句有條件地向物件新增屬性。
if ( condition ) {
obj.prop = value;
}
如果上述語法中的條件變為真，它將向“obj”物件新增“prop”屬性。
示例 4
在下面的示例中，“windowOBJ”物件包含與視窗相關的各種屬性。我們已定義“isGlassWindow”布林變數並將其初始化為真值。
這裡，“isGlassWindow”變數的值為真，它將在“windowOBJ”物件中新增值為“yes”的“glass”屬性。
<html>
<body>
<h3> Conditionally assigning the <i> values to the object properties </i> to add members in object conditionally </h3>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
let windowOBJ = {
size: "10 X 10",
color: "red",
}
let isGlassWindow = true;
if (isGlassWindow) {
windowOBJ.glass = "yes";
} else {
windowOBJ.glass = "no";
}
output.innerHTML += "The object after adding the prop4 and prop5 properties conditionally is " + JSON.stringify(windowOBJ);
</script>
</body>
</html>
使用者學習了四種根據特定條件向物件新增成員的方法。第一種方法是最有效的方法，使用擴充套件運算子。第二種方法使用 Object.assign() 方法。第三種方法使用 JQuery 的 extend() 方法，第四種方法使用 if 語句。
3K+ 瀏覽量
