数据结构
网络
关系数据库管理系统
操作系统
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+ 浏览量
