Vue.js前端框架教程13：Vue空值合并?? 可选链?.和展开运算符...

文章目录

- - - ??（空值合并运算符）
    - - 区别
    - [| - 逻辑或（Logical OR）](#| - 逻辑或（Logical OR）)
    - [|| - 空值合并运算符（Nullish Coalescing Operator）](#|| - 空值合并运算符（Nullish Coalescing Operator）)
    - [?. - 可选链（Optional Chaining）](#?. - 可选链（Optional Chaining）)
    - [... 展开运算符（Spread Operator）](#... 展开运算符（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 模板中，你可以使用它来实现条件渲染：

html 复制代码

<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 中，这可以用于提供默认值：

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 中，这可以用于安全地访问响应式数据：

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 指令：

html 复制代码

<template>
  <div v-bind="$attrs"></div>
</template>

这些符号和特性在 Vue 中的使用与在纯 JavaScript 中的使用是一致的，它们提供了更灵活和强大的数据处理能力。