新功能试用 ——null 判断语法 && 和？？在 ES11 中的使用-JavaScript中文网-JavaScript教程资源分享门户

背景

在以往的 JS 中，我们经常需要用到判断 undefined 和 null 是否存在，并进行条件分支的编写。此时我们需要用到 if (value === null || value === undefined) 这样的语句，来判定变量的存在与否。然而这种写法非常的繁琐，并且容易出现错误。在 ES11 中，我们可以使用新的 null 判断语法，极大的简化了我们的开发过程。

null 判断语法 && 和 ??

在 ES11 中，我们新增了两个运算符，分别是 && 和 ??。这两个运算符可以大大简化判断 null 和 undefined 的语句。

&& 运算符

&& 运算符在之前的 JS 中已经存在，它用于表示逻辑与。但是在 ES11 中，我们对其进行了一些改造，使其可以用于简单的 null 判断。

const result = variable && variable.property

在这里，如果 variable 为 null 或者 undefined，则 variable.property 不会被执行，并且整个表达式的结果会返回 null。如果 variable 的属性 property 为一个函数时，则这个函数在变量存在的情况下才会被执行。

?? 运算符

同样的，?? 运算符也是一个新增的运算符。它的作用是，当左侧空值时，返回右侧的值。否则，返回左侧的值。这个运算符可以被用于替换一些繁琐的 null 判断语句。

const result = variable ?? defaultValue

在这里，如果 variable 为 null 或者 undefined，则整个表达式的结果会返回 defaultValue。否则，返回 variable。这个运算符很适合用于设置默认值或者处理可选参数。

示例代码

&& 运算符

const user = null;
const name = user && user.name;

console.log(name); // null

在这个例子中，由于 user 为 null，所以 name 的值会被直接赋值为 null。

const user = {
    name: 'John'
};
const name = user && user.name;

console.log(name); // 'John'

在这个例子中，由于 user 不为 null，所以 name 的值会被赋值为 user.name，也就是 'John'。

const user = null;
const name = user && user.getName();

console.log(name); // null

在这个例子中，由于 user 为 null，所以整个表达式返回 null。因此不会执行 getName() 方法。

?? 运算符

const defaultValue = 'hello world';
const user = null;
const name = user ?? defaultValue;

console.log(name); // 'hello world'

由于 user 为 null，所以 name 的值会被赋值为 defaultValue，也就是 'hello world'。

const defaultValue = 'hello world';
const user = {
    name: 'John'
};
const name = user.name ?? defaultValue;

console.log(name); // 'John'

由于 user.name 存在，所以 name 的值会被赋值为 user.name，也就是 'John'。

使用建议

虽然这两个运算符简化了我们的代码，但是它们也有一些可能影响代码可读性的缺点。

当代码片段非常复杂时，使用这两个运算符可能会导致代码难以理解。
当代码片段存在多个嵌套的 null 判断时，将会需要更多的关注和思考。

因此，在日常开发中，我们应该谨慎选择这两个运算符的使用场景。在一些简单的 null 判断中，它们可以大大提高我们的开发效率和代码可读性。

总结

在 ES11 中，我们引入了 && 和 ?? 这两个运算符，它们能够大大简化我们的 null 判断语句。这两个运算符的使用，可以大大提升我们的代码质量和开发效率。但是在日常开发中，我们也应该注意代码的可读性和复杂度，并且谨慎选择使用这些运算符的场景。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6594a3d3eb4cecbf2d8f3e01