?.、??、||分别是什么,又有哪些区别???
在 JavaScript 中,?.
、??
和 ||
是三种不同的操作符。
1、?.:
可选链操作符
?.
是一个可选链操作符,用于安全地访问嵌套属性,而不用担心中间的某个属性可能为 null
或 undefined
,从而避免运行时错误。
const user = {
name: "Alice",
address: {
city: "New York"
}
};
const city = user?.address?.city; // "New York"
const country = user?.address?.country; // undefined
const name = user?.name; // "Alice"
const age = user?.age; // undefined
2.??:
空值合并操作符
??
是一个空值合并操作符,用于提供默认值。它检查一个值是否为 null
或 undefined
,如果是,则返回一个默认值;否则返回该值本身。
const user = {
name: "Alice",
age: null,
hobbies: undefined,
address: ""
};
const name = user.name ?? "Unknown"; // "Alice"
const age = user.age ?? 25; // 25
const hobbies = user.hobbies ?? ["Reading", "Hiking"]; // ["Reading", "Hiking"]
const address = user.address ?? "No address"; // ""
3.||:
逻辑或操作符
||
是一个逻辑或操作符,用于提供默认值。它检查一个值是否为“falsy”,如果是,则返回一个默认值;否则返回该值本身。
const value = potentiallyFalsyValue || defaultValue;
//如果 potentiallyFalsyValue 是“falsy”(如 0、false、""、null、undefined、NaN 等),value 将是 defaultValue。
//如果 potentiallyFalsyValue 是任何其他值(包括 true、1、"hello" 等),value 将是 potentiallyFalsyValue。
-
如果
potentiallyFalsyValue
是“falsy”(如0
、false
、""
、null
、undefined
、NaN
等),value
将是defaultValue
。 -
如果
potentiallyFalsyValue
是任何其他值(包括true
、1
、"hello"
等),value
将是potentiallyFalsyValue
。
const user = {
name: "Alice",
age: 0,
hobbies: "",
address: null
};
const name = user.name || "Unknown"; // "Alice"
const age = user.age || 25; // 25
const hobbies = user.hobbies || ["Reading", "Hiking"]; // ["Reading", "Hiking"]
const address = user.address || "No address"; // "No address"
区别
-
?.
(可选链操作符)-
用途:安全地访问嵌套属性,避免因访问
null
或undefined
而抛出错误。 -
行为:如果中间的属性是
null
或undefined
,返回undefined
,而不是抛出错误。 -
示例:
user?.address?.city
-
-
??
(空值合并操作符)-
用途:提供默认值,仅当值为
null
或undefined
时使用默认值。 -
行为:如果值是
null
或undefined
,返回默认值;否则返回该值本身。 -
示例:
user.age ?? 25
-
-
||
(逻辑或操作符)-
用途:提供默认值,当值为“falsy”时使用默认值。
-
行为:如果值是“falsy”(如
0
、false
、""
、null
、undefined
、NaN
等),返回默认值;否则返回该值本身。 -
示例:
user.age || 25
-
拓展:
Falsy 值
Falsy 值 是那些在布尔上下文中会被转换为 false
的值。JavaScript 中有以下几种 falsy 值:
-
false
:布尔值false
。 -
0
:数字0
。 -
-0
:负零(在 JavaScript 中,-0
和0
是等价的,但在某些情况下可以区分)。 -
0n
:BigInt
类型的0n
。 -
""
:空字符串。 -
null
:表示“无”的值。 -
undefined
:表示未定义的值。 -
NaN
:表示“非数字”(Not-a-Number)。
Truthy 值
Truthy 值 是那些在布尔上下文中会被转换为 true
的值。几乎所有不是 falsy 的值都是 truthy 值,包括:
-
非零数字:如
1
,-1
,3.14
等。 -
非空字符串:如
"hello"
,"0"
等。 -
对象:包括数组(如
[1, 2, 3]
)、函数(如function() {}
)等。 -
布尔值
true
。 -
其他所有值:除了上述 falsy 值之外的所有值。