在前端开发中，条件运算符是非常常见且有用的一种语法结构。在 ES5 中，条件运算符只能进行简单的判断和赋值操作，但是在 ES7 中，条件运算符增加了一些新的语法，它们可以更加灵活地应用于不同的场景中，可以提供更高效的编程体验。在本文中，我们将探讨 ES7 中条件运算符的高级用法，并提供一些实际的示例与指导。
1. 三目运算符的新语法
在 ES7 中，三目运算符（即条件运算符）增加了一些新的语法，使得它可以更好地处理带有嵌套和多条件的复杂逻辑。
1.1 多重条件
在 ES7 中，我们可以使用多个问号和冒号在三目运算符中添加多个条件，以实现复杂的逻辑判断。例如：
-- -------------------- ---- -------
-- ----
-- -- - -- -
------ - -----------
- ---- -- -- - -- -
------ - -----------
- ---- -
------ - -------
-
-- --- --
----- ------ - - - - - ----------
- - - - - ----------
- -------在这个例子中，我们可以看到在三目运算符中使用了两个问号和两个冒号，以实现了多重条件判断。这种语法可以极大地简化代码，并提高开发效率。
1.2 嵌套三目运算符
在 ES7 中，我们可以使用嵌套的三目运算符来实现更加复杂的逻辑。例如：
-- -------------------- ---- -------
-- ----
--- -------
-- -- - -- -
------ - -----------
- ---- -
-- -- --- -- -
------ - -------
- ---- -
------ - -----------
-
-
-- --- --
----- ------ - - - - - ----------
- - --- - - ------
- -----------在这个例子中，我们使用了两个嵌套的三目运算符，以实现了更加复杂的逻辑。嵌套三目运算符虽然比较难理解，但是可以减少代码量，并且在某些场景下可以提高代码可读性。
2. null 判断运算符
在 ES7 中，我们还引入了一个新的 null 判断运算符 ??（双问号运算符），它可以方便地判断变量是否为 null 或 undefined，并进行默认值的设定。
2.1 默认值设定
在 ES7 之前，我们通常需要通过判断变量是否为 null 或 undefined，来设定默认值。例如：
// 传统写法 const value = someVariable !== null && someVariable !== undefined ? someVariable : defaultValue; // ES7 写法 const value = someVariable ?? defaultValue;
在这个例子中，我们使用了 null 判断运算符 ??，以实现非常方便地设定默认值。如果 someVariable 的值为 null 或 undefined，则使用 defaultValue 来赋值给 value。
2.2 在表达式中的应用
在 ES7 中，null 判断运算符 ?? 可以更方便地在表达式中使用。例如：
// 传统写法 const sum = x + (y !== null && y !== undefined ? y : 0); // ES7 写法 const sum = x + (y ?? 0);
在这个例子中，我们使用了 null 判断运算符 ??，以实现更加简洁和方便的代码。如果 y 的值为 null 或 undefined，则使用 0 来代替。
3. 总结
在 ES7 中，条件运算符进行了一些重要的升级，使得我们可以在开发中更加高效地处理复杂的逻辑。除了多重条件和嵌套三目运算符之外，null 判断运算符 ?? 也为我们提供了一种方便地判断变量是否为 null 或 undefined 的方法，从而避免了在代码中使用繁琐的 null 和 undefined 判断。我们建议开发者们应该学习和掌握 ES7 中条件运算符的高级用法，以提高编程效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6462f39e968c7c53b03fff29