ES11 中更好地使用方案操作符-JavaScript中文网-JavaScript教程资源分享门户

方案操作符是在 JavaScript 中常用的语法，它能够帮助我们更加简洁和清晰地表达代码逻辑。在 ES11 中，方案操作符得到了进一步的增强和优化，这篇文章将介绍 ES11 中更好地使用方案操作符的方法和技巧。

什么是方案操作符？

方案操作符是一种用于处理可选值的语法。在 JavaScript 中，我们经常需要判断一个变量是否为 null 或 undefined，然后才能够进行相应的操作。这样的代码往往会变得很冗长，而方案操作符则能够帮助我们更加简洁地表达这种逻辑。

在 ES11 中，我们可以使用可选链操作符（?.）和空值合并操作符（??）来处理可选值。这两个操作符的使用方法如下：

可选链操作符（?.）：用于访问对象的属性或方法，如果对象不存在，则返回 undefined，而不是抛出错误。

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

console.log(obj?.foo?.bar); // 'hello'
console.log(obj?.baz?.qux); // undefined

空值合并操作符（??）：用于提供默认值，如果左侧的值为 null 或 undefined，则返回右侧的值。

const foo = null;
const bar = 'hello';

console.log(foo ?? bar); // 'hello'

除了上面介绍的基本用法之外，ES11 中还提供了一些更加高级的用法，让我们能够更好地使用方案操作符。

可选链操作符的嵌套使用

在 ES11 中，可选链操作符可以进行嵌套使用，从而访问更加深层次的属性或方法。例如，我们可以使用以下代码来访问一个复杂对象的属性：

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

console.log(obj?.foo?.bar?.baz); // 'hello'

空值合并操作符和逻辑运算符的混合使用

在 ES11 中，我们可以将空值合并操作符和逻辑运算符进行混合使用，从而实现更加复杂的逻辑。例如，我们可以使用以下代码来实现一个函数，如果输入参数为 null 或 undefined，则返回默认值：

function foo(input) {
  const bar = input ?? 'default';
  return bar && bar.toUpperCase();
}

console.log(foo(null)); // 'DEFAULT'
console.log(foo('hello')); // 'HELLO'

可选链操作符和空值合并操作符的组合使用

在 ES11 中，我们还可以将可选链操作符和空值合并操作符进行组合使用，从而实现更加灵活的逻辑。例如，我们可以使用以下代码来实现一个函数，如果对象不存在或属性不存在，则返回默认值：

function foo(obj, prop, defaultValue) {
  const value = obj?.[prop] ?? defaultValue;
  return value.toUpperCase();
}

const obj = {
  foo: 'hello'
};

console.log(foo(obj, 'foo', 'default')); // 'HELLO'
console.log(foo(obj, 'bar', 'default')); // 'DEFAULT'
console.log(foo(null, 'foo', 'default')); // 'DEFAULT'

总结

方案操作符是 JavaScript 中非常实用的语法，它能够帮助我们更加简洁和清晰地表达代码逻辑。在 ES11 中，方案操作符得到了进一步的增强和优化，我们可以使用可选链操作符和空值合并操作符来处理可选值，并且可以进行嵌套使用、混合使用和组合使用，从而实现更加灵活和复杂的逻辑。我们应该充分利用 ES11 中的方案操作符，来提高代码的可读性和可维护性。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65c19b3cadd4f0e0ffb96abb