JavaScript小技巧：ES6 Set过滤重复值与短路求值

"这篇教程介绍了两个不常被提及的JavaScript小技巧：利用Set过滤数组中的唯一值和使用短路求值进行逻辑运算优化。" 在JavaScript编程中，掌握一些高效的小技巧可以显著提升代码的质量和可读性。本文将探讨其中的两个技巧。 1、过滤唯一值 在ES6中，`Set`数据结构的引入为处理数组中的重复值提供了一个简洁的方法。`Set`确保其内部的每个元素都是唯一的，不允许有重复。通过将数组转换为`Set`，然后再使用扩展运算符（…）将其转换回数组，我们可以轻松地过滤掉重复的值。以下是一个示例： ```javascript const array = [1, 2, 3, 3, 5, 5, 1]; const uniqueArray = [...new Set(array)]; console.log(uniqueArray); // 输出：[1, 2, 3, 5] ``` 在ES6之前，我们需要使用循环或`filter()`方法等更复杂的手段来实现相同的效果。此技巧适用于数组中包含的基本数据类型，如`undefined`、`null`、`boolean`、`string`和`number`。然而，如果数组中包含`object`、`function`或嵌套的`array`，则需采取其他策略，因为这些类型的比较不是基于值，而是基于引用。 2、短路求值（Short-Circuit Evaluation） 在处理复杂的逻辑表达式时，短路求值是一种提高代码可读性的技巧。逻辑与（`&&`）和逻辑或（`||`）运算符具有短路特性，意味着它们会根据左操作数的值决定是否需要计算右操作数。 - 逻辑与（`&&`）：如果左操作数为`false`（假值），则不会计算右操作数，整个表达式的结果即为左操作数的值。如果所有操作数均为`true`，则返回最后一个操作数的值。 ```javascript let one = 1, two = 2, three = 3; console.log(one && two && three); // 结果：3 console.log(0 && null); // 结果：0 ``` - 逻辑或（`||`）：如果左操作数为`true`（真值），则不会计算右操作数，整个表达式的值为左操作数的值。如果所有操作数均为`false`，则返回最后一个操作数的值。 ```javascript let one = 1, two = 2, three = 3; console.log(one || two || three); // 结果：1 console.log(0 || null); // 结果：null ``` 短路求值在实际应用中非常有用，例如在条件判断中，当第一个条件满足时，无需检查后续条件，或者在默认值赋给变量时，如果已有值则不需要执行后续表达式。 ```javascript let value = userInput || 'default'; // 如果userInput存在且非空，value为userInput，否则为'default' ``` 总结： 了解并熟练运用这些JavaScript小技巧，能够帮助开发者编写出更简洁、更高效的代码，提高代码质量，并提升开发效率。无论是过滤数组中的唯一值，还是通过短路求值简化逻辑表达式，都是JavaScript编程中值得掌握的重要技巧。