js表达式和运算符

最新推荐文章于 2024-11-13 17:27:29 发布
最新推荐文章于 2024-11-13 17:27:29 发布
阅读量70 收藏
点赞数
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62169295/article/details/134456790
版权

async function* 表达式

async function* 关键字可用于在表达式中定义一个异步生成器函数。

你也可以使用 async function* 声明定义一个异步生成器函数。

async function* foo() {
  yield await Promise.resolve('a');
  yield await Promise.resolve('b');
  yield await Promise.resolve('c');
}

let str = '';

async function generate() {
  for await (const val of foo()) {
    str = str + val;
  }
  console.log(str);
}

generate();
// Expected output: "abc"

async function* 表达式与 async function* 声明非常相似，语法几乎相同。_函数名_是 async function* 表达式和 async function* 声明之间最主要的区别，在 async function* 表达式中，可以创建_匿名_函数去忽略函数名。async function* 表达式可以用作立即调用函数表达式（IIFE），该表达式在被定义后立即运行，允许你去创建一个临时的异步的可迭代对象。
按位与（&）

按位与（&）运算符在两个操作数对应的二进位都为 1 时，该位的结果值才为 1。

const a = 5; // 00000000000000000000000000000101
const b = 3; // 00000000000000000000000000000011

console.log(a & b); // 00000000000000000000000000000001// Expected output: 1

操作数被转换为 32 位整数，并由一系列位（0 和 1）表示。超过 32 位的数字将丢弃其最高有效位。例如，以下大于 32 位的整数将被转换为 32 位整数：

Before: 11100110111110100000000000000110000000000001
After:              10100000000000000110000000000001

第一个操作数中的每个位都与第二个操作数中的相应位配对：第一位_到_第一位，第二位_到_第二位，依此类推。

将运算符应用于每对位，然后按位构造结果。
按位与赋值（&=）

按位与赋值运算符（&=）使用两个操作数的二进制表示，对它们进行按位与运算并将结果赋值给变量。

let a = 5; // 00000000000000000000000000000101
a &= 3; // 00000000000000000000000000000011

console.log(a); // 00000000000000000000000000000001
// Expected output: 1

按位非（~）

按位非运算符（~）将操作数的位反转。如同其他位运算符一样，它将操作数转化为 32 位的有符号整型。

const a = 5; // 00000000000000000000000000000101
const b = -3; // 11111111111111111111111111111101

console.log(~a); // 11111111111111111111111111111010
// Expected output: -6

console.log(~b); // 00000000000000000000000000000010
// Expected output: 2

操作数被转换为 32 位有符号整型，并以一系列比特（0 和 1）表示。超过 32 位的数字将丢弃其最高有效位。
按位或（|）

按位或（|）运算符在其中一个或两个操作数对应的二进制位为 1 时，该位的结果值为 1。

const a = 5; // 00000000000000000000000000000101
const b = 3; // 00000000000000000000000000000011

console.log(a | b); // 00000000000000000000000000000111
// Expected output: 7

操作数被转换为 32 位整数并由一系列二进制位（0 和 1）表示。超过 32 位的数字会丢弃其最高有效位。
按位异或（^）

按位异或（^）运算符在两个操作数有且仅有一个对应的二进制位为 1 时，该位的结果值为 1。

const a = 5; // 00000000000000000000000000000101
const b = 3; // 00000000000000000000000000000011

console.log(a ^ b); // 00000000000000000000000000000110
// Expected output: 6

操作数被转换为 32 位整数并由一系列二进制位（0 和 1）表示。超过 32 位的数字会丢弃其最高有效位。
类表达式

class 关键字可用于在表达式中定义类。类似于函数表达式，类表达式可以是命名的，也可以是匿名的。如果命名，则类的名称只能在类体内部才能访问到。

const Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  area() {
    return this.height * this.width;
  }
};

console.log(new Rectangle(5, 8).area());
// Expected output: 40

类表达式的语法类似于类声明。与 class 声明一样，class 表达式的主体在严格模式下执行。

类表达式和类声明之间存在一些差异，但是：

  • 类表达式可以省略类名（“绑定标识符”），这在类声明中是不可能的。
  • 类表达式允许你重新定义（重新声明）类而不会抛出 SyntaxError。类声明不是这种情况。

constructor 方法是可选的。使用类表达式生成的类将始终响应 typeof 值为 "function"。
逗号运算符（,）

逗号（,）运算符对它的每个操作数从左到右求值，并返回最后一个操作数的值。这让你可以创建一个复合表达式，其中多个表达式被评估，复合表达式的最终值是其成员表达式中最右边的值。这通常用于为 for 循环提供多个参数。

let x = 1;

x = (x++, x);

console.log(x);
// Expected output: 2

x = (2, 3);

console.log(x);
// Expected output: 3

delete 运算符

delete 运算符用于删除对象的一个属性；如果该属性的值是一个对象，并且没有更多对该对象的引用，该属性所持有的对象最终会自动释放。

const Employee = {
  firstname: 'John',
  lastname: 'Doe',
};

console.log(Employee.firstname);
// Expected output: "John"

delete Employee.firstname;

console.log(Employee.firstname);
// Expected output: undefined

delete 运算符与其他像 typeof 这样的一元运算符具有相同的优先级。因此，它接受任何由更高优先级的运算符形成的表达式。
解构赋值

解构赋值语法是一种 Javascript 表达式。可以将数组中的值或对象的属性取出，赋值给其他变量。

let a, b, rest;
[a, b] = [10, 20];

console.log(a);
// Expected output: 10

console.log(b);
// Expected output: 20

[a, b, ...rest] = [10, 20, 30, 40, 50];

console.log(rest);
// Expected output: Array [30, 40, 50]

相等（==）

相等运算符（==）检查其两个操作数是否相等，返回一个布尔值结果。与严格相等运算符（===）不同，它会比较不同类型的操作数，并尝试强制类型转换。

console.log(1 == 1);
// Expected output: true

console.log('hello' == 'hello');
// Expected output: true

console.log('1' == 1);
// Expected output: true

console.log(0 == false);
// Expected output: true

function* 表达式

**function***关键字可以在表达式内部定义一个生成器函数。

const foo = function* (y) {
    yield 'a';
    yield 'b';
    yield 'c';
    yield y*y;

  };

  let str = '';
  for (const val of foo(2)) {
    str = str + vag(str,foo());

console.log(str);
// Expected output: "abc4"

import.meta

import.meta是一个给 JavaScript 模块暴露特定上下文的元数据属性的对象。它包含了这个模块的信息，比如说这个模块的 URL

import.meta对象由一个关键字"import",一个点符号和一个meta属性名组成。通常情况下"import."是作为一个属性访问的上下文，但是在这里"import"不是一个真正的对象。

import.meta对象是由 ECMAScript 实现的，它带有一个null的原型对象。这个对象可以扩展，并且它的属性都是可写，可配置和可枚举的。
in

如果指定的属性在指定的对象或其原型链中，则 in 运算符返回 true。

const car = { make: 'Honda', model: 'Accord', year: 1998 };

console.log('make' in car);
// Expected output: true

delete car.make;
if ('make' in car === false) {
  car.make = 'Suzuki';
}

console.log(car.make);
// Expected output: "Suzuki"

继承属性

如果一个属性是从原型链上继承来的，in 运算符也会返回 true。

"toString" in {}; // 返回 true

instanceof

instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}
const auto = new Car('Honda', 'Accord', 1998);

console.log(auto instanceof Car);
// Expected output: true

console.log(auto instanceof Object);
// Expected output: true


// 定义构造函数
function C() {}
function D() {}

var o = new C();

o instanceof C; // true，因为 Object.getPrototypeOf(o) === C.prototype

o instanceof D; // false，因为 D.prototype 不在 o 的原型链上

o instanceof Object; // true，因为 Object.prototype.isPrototypeOf(o) 返回 true
C.prototype instanceof Object; // true，同上

C.prototype = {};
var o2 = new C();

o2 instanceof C; // true

o instanceof C; // false，C.prototype 指向了一个空对象，这个空对象不在 o 的原型链上。

D.prototype = new C(); // 继承
var o3 = new D();
o3 instanceof D; // true
o3 instanceof C; // true 因为 C.prototype 现在在 o3 的原型链上

需要注意的是，如果表达式 obj instanceof Foo 返回 true，则并不意味着该表达式会永远返回 true，因为 Foo.prototype 属性的值有可能会改变，改变之后的值很有可能不存在于 obj 的原型链上，这时原表达式的值就会成为 false。另外一种情况下，原表达式的值也会改变，就是改变对象 obj 的原型链的情况，虽然在目前的 ES 规范中，我们只能读取对象的原型而不能改变它，但借助于非标准的 __proto__ 伪属性，是可以实现的。比如执行 obj.__proto__ = {} 之后，obj instanceof Foo 就会返回 false 了。
左移 (<<)

左移操作符 (<<) 将第一个操作数向左移动指定位数，左边超出的位数将会被清除，右边将会补零。

const a = 5; // 00000000000000000000000000000101
const b = 2; // 00000000000000000000000000000010

console.log(a << b); // 00000000000000000000000000010100
// Expected output: 20

  9 (十进制): 00000000000000000000000000001001 (二进制)
                 --------------------------------

9 << 2 (十进制): 00000000000000000000000000100100 (二进制) = 36 (十进制)

左移赋值（<<=）

左移赋值运算符（<<=）将变量向左移动指定的位数，并将结果赋值给变量。

let a = 5; // 00000000000000000000000000000101

a <<= 2; // 00000000000000000000000000010100

console.log(a);
// Expected output: 20

逻辑与赋值（&&=）

逻辑与赋值（x &&= y）运算仅在 x 为真值时为其赋值。

let a = 1;
let b = 0;

a &&= 2;
console.log(a);
// Expected output: 2

b &&= 2;
console.log(b);
// Expected output: 0

逻辑或赋值（||=）

逻辑或赋值（x ||= y）运算仅在 x 为假值时为其赋值。

const a = { duration: 50, title: '' };

a.duration ||= 10;
console.log(a.duration);
// Expected output: 50

a.title ||= 'title is empty.';
console.log(a.title);
// Expected output: "title is empty"

new 运算符

new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}

const car1 = new Car('Eagle', 'Talon TSi', 1993);

console.log(car1.make);
// Expected output: "Eagle"

new 关键字会进行如下的操作：

  1. 创建一个空的简单 JavaScript 对象（即 {}）；
  2. 为步骤 1 新创建的对象添加属性 __proto__，将该属性链接至构造函数的原型对象；
  3. 将步骤 1 新创建的对象作为 this 的上下文；
  4. 如果该函数没有返回对象，则返回 this。

（译注：关于对象的 constructor，参见 Object.prototype.constructor）

创建一个用户自定义的对象需要两步：

  1. 通过编写函数来定义对象类型。
  2. 通过 new 来创建对象实例。

创建一个对象类型，需要创建一个指定其名称和属性的函数；对象的属性可以指向其他对象，看下面的例子：

当代码 new Foo(...) 执行时，会发生以下事情：

  1. 一个继承自 Foo.prototype 的新对象被创建。
  2. 使用指定的参数调用构造函数 Foo，并将 this 绑定到新创建的对象。new Foo 等同于 new Foo()，也就是没有指定参数列表，Foo 不带任何参数调用的情况。
  3. 由构造函数返回的对象就是 new 表达式的结果。如果构造函数没有显式返回一个对象，则使用步骤 1 创建的对象。（一般情况下，构造函数不返回值，但是用户可以选择主动返回对象，来覆盖正常的对象创建步骤）

你始终可以对已定义的对象添加新的属性。例如，car1.color = "black" 语句给 car1 添加了一个新的属性 color，并给这个属性赋值 “black”。但是，这不会影响任何其他对象。要将新属性添加到相同类型的所有对象，你必须将该属性添加到 Car 对象类型的定义中。

你可以使用 Function.prototype 属性将共享属性添加到以前定义的对象类型。这定义了一个由该函数创建的所有对象共享的属性，而不仅仅是对象类型的其中一个实例。下面的代码将一个值为 null 的 color 属性添加到 car 类型的所有对象，然后仅在实例对象 car1 中用字符串 “black” 覆盖该值。

function Car() {}
car1 = new Car();
car2 = new Car();

console.log(car1.color); // undefined

Car.prototype.color = "original color";
console.log(car1.color); // original color

car1.color = "black";
console.log(car1.color); // black

console.log(car1.__proto__.color); //original color
console.log(car2.__proto__.color); //original color
console.log(car1.color); // black
console.log(car2.color); // original color

new.target

new.target 属性允许你检测函数或构造方法是否是通过new运算符被调用的。在通过new运算符被初始化的函数或构造方法中，new.target返回一个指向构造方法或函数的引用。在普通的函数调用中，new.target 的值是undefined。

在普通的函数调用中（和作为构造函数来调用相对），new.target的值是undefined。这使得你可以检测一个函数是否是作为构造函数通过new被调用的。

function Foo() {
  if (!new.target) throw "Foo() must be called with new";
  console.log("Foo instantiated with new");
}

Foo(); // throws "Foo() must be called with new"
new Foo(); // logs "Foo instantiated with new"

逻辑空赋值（??=）

逻辑空赋值运算符（x ??= y）仅在 x 是空值（null 或 undefined）时对其赋值。

const a = { duration: 50 };

a.duration ??= 10;
console.log(a.duration);
// Expected output: 50

a.speed ??= 25;
console.log(a.speed);
// Expected output: 25

短路评估

空值合并运算符从左至右求值，其使用以下规则测试是否可能进行语法短路求值：

(结果非 null 或 undefined 的表达式) ?? expr 被短路求值为左侧表达式，当左侧证明为既非 null 也非 undefined.

语法短路意味着 expr 部分尚未被求值，因此任何与其求值产生的相关副作用都不会生效（例如，如果 expr 是一个函数调用，则该调用将不会发生）。
空值合并运算符（??）

空值合并运算符（??）是一个逻辑运算符，当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。

与逻辑或运算符（||）不同，逻辑或运算符会在左侧操作数为假值时返回右侧操作数。也就是说，如果使用 || 来为某些变量设置默认值，可能会遇到意料之外的行为。比如为假值（例如，'' 或 0）时。见下面的例子。

const foo = null ?? 'default string';
console.log(foo);
// Expected output: "default string"

const baz = 0 ?? 42;
console.log(baz);
// Expected output: 0

可选链运算符（?.）

可选链运算符（?.）允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 运算符的功能类似于 . 链式运算符，不同之处在于，在引用为空 (nullish ) (null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。与函数调用一起使用时，如果给定的函数不存在，则返回 undefined。

当尝试访问可能不存在的对象属性时，可选链运算符将会使表达式更短、更简明。在探索一个对象的内容时，如果不能确定哪些属性必定存在，可选链运算符也是很有帮助的。

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah',
  },
};

const dogName = adventurer.dog?.name;
console.log(dogName);
// Expected output: undefined

console.log(adventurer.someNonExistentMethod?.());
// Expected output: undefined

obj.val?.prop
obj.val?.[expr]
obj.func?.(args)

属性访问器

属性访问器提供了两种方式用于访问一个对象的属性，它们分别是点号和方括号。

const person1 = {};
person1['firstname'] = 'Mario';
person1['lastname'] = 'Rossi';

console.log(person1.firstname);
// Expected output: "Mario"

const person2 = {
  firstname: 'John',
  lastname: 'Doe',
};

console.log(person2['lastname']);
// Expected output: "Doe"

右移（>>）

右移运算符（>>）将一个操作数的二进制表示形式向右移动指定位数，该操作数可以是数值或者 BigInt 类型。右边移出位被丢弃，左边移出的空位补符号位（最左边那位）。该操作也称为“符号位传播右移”（sign-propagating right shift）或“算术右移”（arithmetic right shift），因为返回值的符号位与第一个操作数的符号位相同。

const a = 5; //  00000000000000000000000000000101
const b = 2; //  00000000000000000000000000000010
const c = -5; //  11111111111111111111111111111011

console.log(a >> b); //  00000000000000000000000000000001
// Expected output: 1

console.log(c >> b); //  11111111111111111111111111111110
// Expected output: -2

右移赋值（>>=）

右移赋值运算符（>>=）将变量向右移动指定的位数，并将结果赋值给变量。

let a = 5; //  00000000000000000000000000000101

a >>= 2; //  00000000000000000000000000000001
console.log(a);
// Expected output: 1

let b = -5; //  11111111111111111111111111111011

b >>= 2; //  11111111111111111111111111111110
console.log(b);
// Expected output: -2

展开语法

展开语法 (Spread syntax), 可以在函数调用/数组构造时，将数组表达式或者 string 在语法层面展开；还可以在构造字面量对象时，将对象表达式按 key-value 的方式展开。(译者注: 字面量一般指 [1, 2, 3] 或者 {name: "mdn"} 这种简洁的构造方式)

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];

console.log(sum(...numbers));
// Expected output: 6

console.log(sum.apply(null, numbers));
// Expected output: 6

严格相等（===）

严格相等运算符（===）会检查它的两个操作数是否相等，并且返回一个布尔值结果。与相等运算符不同，严格相等运算符总是认为不同类型的操作数是不同的。

console.log(1 === 1);
// Expected output: true

console.log('hello' === 'hello');
// Expected output: true

console.log('1' === 1);
// Expected output: false

console.log(0 === false);
// Expected output: false

严格不相等（!==）

严格不相等运算符（!==）检查它的两个对象是否不相等，返回一个布尔结果。与不相等运算符不同，严格不相等运算符总是认为不同类型的对象是不同的。

console.log(1 !== 1);
// Expected output: false

console.log('hello' !== 'hello');
// Expected output: false

console.log('1' !== 1);
// Expected output: true

console.log(0 !== false);
// Expected output: true

super

super 关键字用于访问对象字面量或类的原型（[[Prototype]]）上的属性，或调用父类的构造函数。

super.prop 和 super[expr] 表达式在类和对象字面量任何方法定义中都是有效的。super(...args) 表达式在类的构造函数中有效。

super([arguments]) // 调用父类的构造函数
super.propertyOnParent
super[expression]

this

与其他语言相比，函数的 this 关键字在 JavaScript 中的表现略有不同，此外，在严格模式和非严格模式之间也会有一些差别。

在绝大多数情况下，函数的调用方式决定了 this 的值（运行时绑定）。this 不能在执行期间被赋值，并且在每次函数被调用时 this 的值也可能会不同。ES5 引入了 bind 方法来设置函数的 this 值，而不用考虑函数如何被调用的。ES2015 引入了箭头函数，箭头函数不提供自身的 this 绑定（this 的值将保持为闭合词法上下文的值）。

const test = {
  prop: 42,
  func: function () {
    return this.prop;
  },
};

console.log(test.func());
// Expected output: 42

函数上下文

在函数内部，this 的值取决于函数如何被调用。可以将 this 看作是函数的一个隐藏参数（就像函数定义中声明的参数一样），this 是语言在函数体被执行时为你创建的绑定。

对于典型的函数，this 的值是函数被访问的对象。换句话说，如果函数调用的形式是 obj.f()，那么 this 就指向 obj。例如：

function getThis() {
  return this;
}

const obj1 = { name: "obj1" };
const obj2 = { name: "obj2" };

obj1.getThis = getThis;
obj2.getThis = getThis;

console.log(obj1.getThis()); // { name: 'obj1', getThis: [Function: getThis] }
console.log(obj2.getThis()); // { name: 'obj2', getThis: [Function: getThis] }
回调

当一个函数作为回调函数传递时，this 的值取决于如何调用回调，这由 API 的实现者决定。回调函数通常以 undefined 作为 this 的值被调用（直接调用，而不附加到任何对象上），这意味着如果函数是在非严格模式，this 的值会是全局对象（globalThis）。这在迭代数组方法、Promise() 构造函数等例子中都是适用的。

function logThis() {
  "use strict";
  console.log(this);
}

[1, 2, 3].forEach(logThis); // undefined、undefined、undefined
箭头函数

在箭头函数中，this 保留了闭合词法上下文的 this 值。换句话说，当对箭头函数求值时，语言不会创建一个新的 this 绑定。

例如，在全局代码中，无论是否在严格模式下，由于全局上下文绑定，this 值总是 globalThis

const globalObject = this;
const foo = () => this;
console.log(foo() === globalObject); // true

此外，当使用 call()、bind() 或 apply() 调用箭头函数时，thisArg 参数会被忽略。不过，你仍然可以使用这些方法传递其他参数。

const obj = { name: "obj" };

// 尝试使用 call 设置 this
console.log(foo.call(obj) === globalObject); // true

// 尝试使用 bind 设置 this
const boundFoo = foo.bind(obj);
console.log(boundFoo() === globalObject); // true

typeof

typeof 运算符返回一个字符串，表示操作数的类型

console.log(typeof 42);
// Expected output: "number"

console.log(typeof 'blubber');
// Expected output: "string"

console.log(typeof true);
// Expected output: "boolean"

console.log(typeof undeclaredVariable);
// Expected output: "undefined"

无符号右移（>>>）

无符号右移运算符（>>>）（零填充右移）将左操作数计算为无符号数，并将该数字的二进制表示形式移位为右操作数指定的位数，取模 32。向右移动的多余位将被丢弃，零位从左移入。其符号位变为 0，因此结果始终为非负数。与其他按位运算符不同，零填充右移返回一个无符号 32 位整数。

const a = 5; //  00000000000000000000000000000101
const b = 2; //  00000000000000000000000000000010
const c = -5; //  11111111111111111111111111111011

console.log(a >>> b); //  00000000000000000000000000000001
// Expected output: 1

console.log(c >>> b); //  00111111111111111111111111111110
// Expected output: 1073741822

该运算符将第一个操作数向右移动指定的位数。向右移动的多余位将被丢弃。零位从左侧移入。其符号位变为 0，因此其表示的结果始终为非负数。与其他按位运算符不同，零填充右移返回无符号 32 位整数。

以十进制（以 10 为基数）数字 9 和 -9 的 32 位二进制表示为例：

     9 (base 10): 00000000000000000000000000001001 (base 2)
    -9 (base 10): 11111111111111111111111111110111 (base 2)

无符号右移赋值（>>>=）

无符号右移赋值（>>>=）运算符向右移动移动指定（二进制）位数，并将结果赋值给变量。

let a = 5; //  00000000000000000000000000000101

a >>>= 2; //  00000000000000000000000000000001
console.log(a);
// Expected output: 1

let b = -5; // -00000000000000000000000000000101

b >>>= 2; //  00111111111111111111111111111110
console.log(b);
// Expected output: 1073741822

void 运算符

void 运算符对给定的表达式进行求值，然后返回 undefined。

const output = void 1;
console.log(output);
// Expected output: undefined

void console.log('expression evaluated');
// Expected output: "expression evaluated"

void (function iife() {
  console.log('iife is executed');
})();
// Expected output: "iife is executed"

void function test() {
  console.log('test function executed');
};
try {
  test();
} catch (e) {
  console.log('test function is not defined');
  // Expected output: "test function is not defined"
}

这个运算符允许在表达式执行完成时，产生（某些地方）期望获得的 undefined 值。

void 运算符通常只用于获取 undefined 的原始值，一般使用 void(0)（等同于 void 0）。在上述情况中，也可以使用全局变量 undefined 来代替。
yield

yield 关键字用于暂停和恢复生成器函数。

function* foo(index) {
  while (index < 2) {
    yield index;
    index++;
  }
}

const iterator = foo(0);

console.log(iterator.next().value);
// Expected output: 0

console.log(iterator.next().value);
// Expected output: 1

yield 关键字使生成器函数执行暂停，yield 关键字后面的表达式的值返回给生成器的调用者。它可以被认为是一个基于生成器的版本的 return 关键字。

yield 关键字实际返回一个 IteratorResult 对象，它有两个属性，value 和 done。value 属性是对 yield 表达式求值的结果，而 done 是 false，表示生成器函数尚未完全完成。

一旦遇到 yield 表达式，生成器的代码将被暂停运行，直到生成器的 next() 方法被调用。每次调用生成器的 next() 方法时，生成器都会恢复执行，直到达到以下某个值：

  • yield，导致生成器再次暂停并返回生成器的新值。下一次调用 next() 时，在 yield 之后紧接着的语句继续执行。
  • throw 用于从生成器中抛出异常。这让生成器完全停止执行，并在调用者中继续执行，正如通常情况下抛出异常一样。
  • 到达生成器函数的结尾。在这种情况下，生成器的执行结束，并且 IteratorResult 给调用者返回 value 的值是 undefined 并且 done 为 true。
  • 到达 return 语句。在这种情况下，生成器的执行结束，并将 IteratorResult 返回给调用者，其 value 的值是由 return 语句指定的，并且 done 为 true。

如果将参数传递给生成器的 next() 方法，则该值将成为生成器当前 yield 操作返回的值。

在生成器的代码路径中的 yield 运算符，以及通过将其传递给 Generator.prototype.next() 指定新的起始值的能力之间，生成器提供了强大的控制力。
yield*

yield* 表达式用于委托给另一个generator 或可迭代对象。

 yield* [[expression]];

委托给其他生成器

以下代码中，g1() yield 出去的每个值都会在 g2() 的 next() 方法中返回，就像那些 yield 语句是写在 g2() 里一样。
function* g1() {
yield 2;
yield 3;
yield 4;
}

function* g2() {
  yield 1;
  yield* g1();
  yield 5;
}

var iterator = g2();

console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: 4, done: false }
console.log(iterator.next()); // { value: 5, done: false }
console.log(iterator.next()); // { value: undefined, done: true }
牧林阳
关注
JavaScript表达式和运算符
weixin_70676044的博客
09-15 426
表达式是对一个或多个变量或值（操作数）进行运算，并返回一个新值
javascript表达式和运算符中的一些容易忽略的点共2
10-30
五、条件运算符和解构赋值 1. 条件运算符（Ternary Operator）：`条件 ? 表达式1 : 表达式2` 提供了一种简洁的条件赋值方式。 2. 解构赋值：允许从数组或对象中提取值并赋给变量，如 `let [a, b] = [1, 2];` 或 `let...
JavaScript-表达式和运算符
小旺的博客
08-10 434
原始表达式 最简单的表达式是“原始表达式”（primaryexpression）。原始表达式是表达式的最小单位——它们不再包含其他表达式。JavaScript中的原始表达式包含常量或直接量、关键字和变量。 直接量 1.23 "abc" 保留字 true false null this 变量 i sum undefined 对象和数组的初始化表达式 数组 [] //空数组 [1+2,3+4] //拥有两个元素的数组 嵌套 var m=[[1,2,3,],[4,5,6],[7,8,9]]; 数
JavaScript 表达式和运算符
qq_63930354的博客
09-15 277
JavaScript 中，表达式是由操作数和操作符组成的，对一个或多个变量或值（操作数）进行运算，并返回一个新值。这里是先乘（*）除（/）取于（%）后加（+）减（-）。算术运算符 +，-，*，/,%.++,--,-(求反)结合运算符*= /= += -= %=不绝对等于：数据类型不一致或者数字不相等。绝对等于：数据类型一致，数值相等。3.数据类型不一致，数值也不相等。逻辑运算符 &&，||，!先且（&&）后或（||）。7. 赋值运算符（=）
JavaScript表达式和运算符(笔记)
qq_41421033的博客
04-08 1144
表达式和运算符 JS的基本表达式 1算术表达式 2关系表达式 3逻辑表达式 4赋值表达式 5综合表达式 算数表达式 意义 运算符 加 + 减 - 乘 * 除 / 取余 % <script> console.log(1 + 2 * 3) // 7 console.log((1 + 2) * 3) // 9 console.log(1 + 2 / 4)
4JS表达式和运算符expression and operator
weixin_44741835的博客
01-26 1037
函数定义表达式定义一个JavaScript函数。表达式的值是这个新定义的函数。
浅析JavaScript表达式和运算符用法
weixin_46077918的博客
08-19 155
浅析JavaScript表达式和运算符用法 你对JavaScript表达式和JavaScript运算符是否比较熟悉，这里和大家一起学习一下，JavaScript表达式可以分为算术表述式、字串表达式、赋值表达式以及布尔表达式等。 JavaScript表达式和JavaScript运算符 1、JavaScript表达式 在定义完变量后，就可以对它们进行赋值、改变、计算等一系列操作，这一过程通常又叫称一个叫JavaScript表达式来完成，可以说它是变量、常量、布尔及JavaScript运算符的集合，因此JavaS
js 表达式和运算符
Cream_Cicilian的博客
12-13 845
表达式是指能计算出值的任何可用程序单元——wiki [觉得这句话怪怪的？没事反正一会儿一看就懂] JavaScript的表达式和运算符都和c语言蜜汁相似表达式分为1.原始表达式 2.对象和数组的初始化表达式 3.函数定义表达式 4.属性访问表达式 5.调用表达式 6.对象创建表
javascript表达式和运算符
weixin_42645440的博客
10-25 88
     
JavaScript表达式和运算符以及语句和函数
weixin_69036336的博客
09-14 448
JavaScript表达式和运算符以及语句和函数
javascript表达式和运算符详解
12-04
复合表达式：原始表达式和原始表达式之间用运算符连接可以组成一个复合表达式。 例如： 10 * 20 这就是一个复合表达式 2.（数组、对象的）初始化表达式。 例如： [1,2] 等价于 new Array（1,2）； [1，，，2] ...
javascript表达式和运算符详解.docx
01-18
javascript 表达式和运算符详解 javascript 表达式是指能计算出值得任何可用程序单元。它是一种短语，javascript 解释器用来产生一个值。javascript 表达式可以分为六种类型：原始表达式、初始化表达式、函数表达式...
跟着尚硅谷学vue2—进阶版2.0—使用 Vue 脚手架1.0
zhzijun的博客
11-13 342
分析脚手架 、ref和props、mixin混入、插件、scoped样式、总结TodoList案例、浏览器本地存储-webStorage、TodoList_本地存储
解决@ant-design-vue/nuxt模块加载到许多没用到的组件，影响开发下加载速度的问题
清晰编程
11-12 106
升级命令：npm up @ant-design-vue/nuxt。解决方法：将该模块版本升级到1.4.6。
Vue中的常用指令
m0_62388400的博客
11-12 930
指令（Directives）是 Vue 提供的带有的 特殊 标签。为啥要学：提高程序员操作 DOM 的效率。vue 中的指令按照不同的用途可以分为如下 6 大类：内容渲染指令（v-html、v-text）条件渲染指令（v-show、v-if、v-else、v-else-if）事件绑定指令（v-on）属性绑定指令 （v-bind）双向绑定指令（v-model）列表渲染指令（v-for）指令是 vue 开发中最基础、最常用、最简单的知识点。
Javascript中Map与Set以及其常见遍历方式
警警的博客
11-12 643
在JavaScript中，Map和Set是两种非常重要的集合类型，它们提供了比传统对象（Object）和数组（Array）更强大和灵活的数据存储和操作方法。下面是对Map和Set的详细解释。
如何编译 Cesium 源码
最新发布
ismartcube的博客
11-13 632
通过以上步骤，您可以成功地从 GitHub 上下载 Cesium 源代码并在本地进行编译。对于开发人员来说，编译 Cesium 源码有助于定制功能，或者调试某些问题。如果您只是想使用 Cesium 进行开发，而不需要编译源代码，您也可以直接从 CDN 或下载预构建版本进行使用。编译的 Cesium 版本可以直接在您的应用中引用，或者部署到 Web 服务器上，供其他用户访问。提供一个高效、兼容、优化的数据转换工具，一站式完成数据转换、数据发布、数据预览操作。
从零开始快速构建Vue3项目
欧唯薇
11-13 574
是目前最推荐的方式来创建 Vue 3 项目，因为它速度快，配置简洁，并且是 Vue 3 的官方推荐工具。打开浏览器并访问 `http://localhost:5173`，你将看到一个基本的 Vue 3 应用程序运行。1、若需要使用不同版本node（兼容新旧项目环境），则需要使用nvm来进行node多版本管理，下载并安装。2、若出现某个依赖安装报错，可以npm install --ignore-scripts，最后再来单独安装报错的依赖。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值