深入理解 JavaScript 中的 void`运算符和 yield*表达式

news2024/10/6 13:52:49

深入理解 JavaScript 中的 `void` 运算符和 `yield*` 表达式

在 JavaScript 中，void 运算符和 yield* 表达式是两个功能独特但常被忽视的运算符。本文将详细介绍它们的用法和应用场景，帮助您更好地理解和运用这两个运算符。

`void` 运算符概述

void 是一个一元运算符，用于计算一个表达式但不返回结果，总是返回 undefined。其语法为：

void expression;
void (expression);

总是返回undefined

// 总是返回undefined
const res = void(0)
console.log(res) // undefined

需要注意考虑void运算符的优先级，以下加括号的表达式的例子可以帮助你清楚地理解 void 操作符的优先级：

void 2 === "2"; // (void 2) === '2'，返回 false
void (2 === "2"); // void (2 === '2')，返回 undefined

`void` 运算符的用法

1. 阻止默认行为

在 HTML 中，可以使用 void 运算符防止链接跳转,当用户点击一个以 javascript: 开头的 URI 时，它会执行 URI 中的代码，然后用返回的值替换页面内容，除非返回的值是 undefined。void 运算符可用于返回 undefined。例如：

<a href="javascript:void(0)">Click me</a>

当用户点击链接时，由于 void(0) 返回 undefined，页面不会发生跳转。

2. 执行表达式但不返回值（箭头函数中的使用）

可以用 void 运算符执行一个表达式，但忽略其返回值，尤其当函数返回值不会被使用的到时候，使用void来保证API改变的时候不会改变箭头函数的行为：

button.onClick = () => void someFunction();

3. 立即执行函数表达式（IIFE）

在某些情况下，可以使用 void 运算符包装一个函数，使其立即执行：

void function() {
  console.log("This is an IIFE");
}();

`void` 运算符的应用场景

防止页面跳转：在 <a> 标签的 href 属性中使用，避免链接导致页面刷新或跳转。
书签脚本（Bookmarklets）：在书签中执行 JavaScript 代码，使用 void 确保不会导航到其他页面。
消除返回值：执行一个表达式，但不关心其返回值。

`yield*` 表达式概述

yield* 是 ES6 引入的生成器（Generator）表达式，用于委托另一个可迭代对象或生成器函数。其语法为：

yield* iterable;

`yield*` 表达式的用法

1. 委托可迭代对象

function* generator() {
  yield* [1, 2, 3];
}

for (let value of generator()) {
  console.log(value); // 输出 1, 2, 3
}

2. 委托另一个生成器

function* innerGenerator() {
  yield 'a';
  yield 'b';
}

function* outerGenerator() {
  yield 'start';
  yield* innerGenerator();
  yield 'end';
}

for (let value of outerGenerator()) {
  console.log(value); // 输出 'start', 'a', 'b', 'end'
}

3. 处理双向通信

yield* 不仅委托迭代，也委托双向通信（next、throw 和 return 方法）：

function* delegatingGenerator() {
  console.log('Delegating to another generator');
  const result = yield* anotherGenerator();
  console.log('Delegation complete');
  return result;
}

function* anotherGenerator() {
  const value = yield 'yielded from anotherGenerator';
  return value;
}

const gen = delegatingGenerator();
console.log(gen.next());        // { value: 'yielded from anotherGenerator', done: false }
console.log(gen.next('result')); // { value: undefined, done: true }