如何使用 void 运算符？

推荐答案

void 运算符用于计算一个表达式，并返回 undefined。它不会改变表达式本身的值，而是始终返回 undefined。

主要用途包括：

1. 防止表达式返回值影响代码执行： 当你只想执行表达式的副作用（例如，函数调用，变量赋值），而不关心返回值时，可以使用 void 避免返回值干扰。例如，void myFunc()，即使 myFunc 返回一个值，void 也会使其消失，保证语句返回 undefined。
2. 创建 undefined 值： 虽然可以直接使用 undefined 字面量，但由于在ES5之前 undefined 是可写的，为了保证获取真正的 undefined 值，可以使用 void 0 或 void(0)。
3. 用作 javascript: 协议的替代品： 在 <a> 标签的 href 属性中使用 javascript:void(0) 可以阻止链接的默认行为，并且不会使页面刷新或跳转。使用 void(0) 比 javascript:; 的方式更清晰，且更不容易出错。

本题详细解读

void 运算符的基本原理

void 运算符是一个一元运算符，它接受一个表达式作为操作数。void 计算表达式的值，然后返回 undefined。表达式可以是任何有效的 JavaScript 表达式，包括函数调用、变量访问、算术运算等。

void 1;          // 返回 undefined
void (1 + 2);   // 返回 undefined
void "hello";   // 返回 undefined
void myFunc();  // 返回 undefined (即使 myFunc 返回其他值)

重要的是，void 不会修改表达式本身的值。它仅仅是丢弃计算结果，并返回 undefined。

void 的常见用途

1. 忽略函数返回值： 当函数具有返回值，但是你只关心函数的副作用时，void 非常有用。例如，使用 Array.prototype.forEach：

   const arr = [1, 2, 3];
   // 返回 undefined，而不是 forEach 返回的 undefined
   void arr.forEach(item => console.log(item));

   在这种情况下，我们并不需要 forEach 的返回值，而是希望其副作用 (打印每一个 item)。使用 void 明确表明我们不关心返回值。

2. 创建可靠的 undefined 值： 在 ES5 之前，undefined 可以被重新赋值，这可能导致代码出现意外行为。为了确保总是得到真正的 undefined 值，可以使用 void 0 或 void(0)：

   let undefined = 'not undefined'; // 在 ES5 之前可行，但强烈不推荐
   console.log(undefined); // 输出 'not undefined'
   console.log(void 0);    // 输出 undefined
   console.log(void(0));    // 输出 undefined

   现在 undefined 变为只读属性，不再有此问题，但是使用void 0 仍然是一种创建undefined的习惯做法。

3. <a> 标签的 href 属性： 在 <a> 标签中，使用 href="javascript:void(0)" 可以创建一个不会刷新或跳转的链接。这通常用于触发 JavaScript 事件，而不改变页面行为：

   <a href="javascript:void(0);" onclick="myFunction()">点击我</a>

   使用 javascript:void(0) 比 javascript:; 的方式更规范、更不容易导致意外行为，因为后者会让 <a> 标签的 href 执行分号表达式后会返回undefined 结果，某些浏览器中会导致跳转到当前页面。

注意事项

• void 运算符优先级较高，通常无需使用括号包裹表达式，除非表达式本身需要使用括号提升优先级。
• void 和表达式之间最好有一个空格，以提高代码可读性（例如，void 0 而不是 void0）。
• 尽量避免过度使用 void，只在确实需要丢弃表达式返回值时使用。