文章目录
- ??(空值合并运算符)
- 区别
- | - 逻辑或(Logical OR)
- || - 空值合并运算符(Nullish Coalescing Operator)
- ?. - 可选链(Optional Chaining)
- ... 展开运算符(Spread Operator)
??(空值合并运算符)
??
是 ES2020
新增的空值合并运算符,它只在左侧的操作数为 null
或 undefined
时才返回右侧操作数的值。如果左侧操作数不是空值,无论其值是 0
、false
、NaN
、''
(空字符串)还是其他假值,都会返回左侧操作数的值。
javascript">const a = null;
const b = 'default';console.log(a ?? b); // 输出 'default'
console.log(0 ?? b); // 输出 0,因为 0 不是 null 或 undefined
console.log(a ?? null ?? b); // 输出 'default',因为第一个操作数是 null,第二个操作数也是 null
console.log('text' ?? b); // 输出 'text',因为 'text' 不是 null 或 undefined
区别
||
会在左侧操作数为假值(包括null
、undefined
、0
、false
、NaN
、''
)时返回右侧操作数的值。??
仅在左侧操作数为null
或undefined
时返回右侧操作数的值,对其他假值会返回左侧操作数的值。
因此,||
更适合用于布尔逻辑和条件运算,而 ??
更适合用于提供一个默认值,特别是当你想要保留原始值中的假值时。
| - 逻辑或(Logical OR)
在 JavaScript
中,|
是逻辑或运算符,用于两个布尔值的比较。如果其中一个值为 true
,则结果为 true
。
javascript">true | false // true
false | false // false
在 Vue
模板中,你可以使用它来实现条件渲染:
<template><div v-if="condition1 | condition2"><!-- 如果 condition1 或 condition2 为 true,这个元素将被渲染 --></div>
</template>
|| - 空值合并运算符(Nullish Coalescing Operator)
||
在 JavaScript
中用于逻辑或,但它的行为与 |
略有不同。如果左侧的表达式为 null
或 undefined
,则 ||
会返回右侧的值。
javascript">undefined || 'default' // 'default'
'value' || 'default' // 'value'
在 Vue
中,这可以用于提供默认值:
<template><div>{{ value || 'default' }}</div>
</template>
?. - 可选链(Optional Chaining)
?.
是 JavaScript
的一个新特性,允许你安全地访问对象的深层属性,即使中间有 null
或 undefined
的值也不会抛出错误。
javascript">const obj = { a: { b: 'value' } };
const value = obj?.a?.b; // 'value'
在 Vue
中,这可以用于安全地访问响应式数据:
<template><div>{{ obj?.a?.b }}</div>
</template>
… 展开运算符(Spread Operator)
..
是 JavaScript
的展开运算符,用于将数组或对象中的元素展开。
javascript">const array = [1, 2, 3];
const newArray = [...array, 4, 5]; // [1, 2, 3, 4, 5]
在 Vue
中,这可以用于 v-bind
或 v-on
指令:
<template><div v-bind="$attrs"></div>
</template>
这些符号和特性在 Vue
中的使用与在纯 JavaScript
中的使用是一致的,它们提供了更灵活和强大的数据处理能力。