【JS】中 ?.、??、??= 的用法和含义

在 JavaScript 中，?.、??、??= 是三个比较新的操作符，它们的用法和含义如下：

1. ?. 操作符：可选链操作符，用于简化访问可能不存在的属性或方法的代码。例如：

const obj = {
  foo: {
    bar: 'baz'
  }
};

console.log(obj?.foo?.bar); // 输出 'baz'
console.log(obj?.qux?.baz); // 输出 undefined，而不会抛出错误

2. ?? 操作符：空值合并操作符，用于提供默认值。例如：

const foo = null;
const bar = 'baz';

console.log(foo ?? 'default'); // 输出 'default'
console.log(bar ?? 'default'); // 输出 'baz'

3. ??= 操作符：空值合并赋值操作符，用于在变量为 null 或 undefined 时给变量赋默认值。例如：

let foo = null;
foo ??= 'default';
console.log(foo); // 输出 'default'

let bar = 'baz';
bar ??= 'default';
console.log(bar); // 输出 'baz'

相关问题

前端 js中 ??，?. 区别 详解

在 JavaScript 中，`??` 和 `?.` 是两种不同的操作符，用于安全地处理可能为 `null` 或 `undefined` 的值。以下是它们各自的含义和用法：

1. **逻辑或运算符 (??)**:
- 这是一个短路的逻辑或 (`||`) 与空合并 (`??`) 的组合，通常称为 "逻辑或短路" 或 "默认合并"。当你尝试使用 `??` 时，如果左侧表达式（`a`）为 `null` 或 `undefined`，那么会立即检查右侧表达式（`b`），并使用右侧的值作为结果，除非右侧也是 `null` 或 `undefined`。示例：

   let a = null;
   let b = 'default value';
   let result = a ?? b; // result = 'default value'

getCurrentInstance()?.appContext.config.globalProperties含义及完整使用方法

`getCurrentInstance()?.appContext.config.globalProperties` 是 Vue 3 中的一个 API，它返回当前应用程序实例的全局属性对象。这个对象可以用来在应用程序的任何地方访问全局变量或方法。

下面是一个完整的使用示例：

import { createApp } from 'vue'

const app = createApp({ /* ... */ })

// 定义全局变量
app.config.globalProperties.$myGlobalVar = 'Hello, world!'

// 定义全局方法
app.config.globalProperties.$myGlobalMethod = function () {
  console.log('This is my global method.')
}

// 在组件中使用全局变量和方法
app.component('MyComponent', {
  template: `
    <div>
      <p>{{ $myGlobalVar }}</p>
      <button @click="$myGlobalMethod()">Click me</button>
    </div>
  `
})

app.mount('#app')

在上面的示例中，我们在应用程序实例的全局属性中定义了一个名为 `$myGlobalVar` 的全局变量和一个名为 `$myGlobalMethod` 的全局方法。然后，在组件中使用这些全局属性来获取和调用它们。

需要注意的是，全局属性是可变的，因此在应用程序的任何地方更改全局属性的值都会影响整个应用程序。因此，应该谨慎使用全局属性，以避免潜在的副作用。