ES6的function*的用法

深入理解function*与生成器

function*的用法

  1. function* 这种声明方式(function关键字后跟一个星号)会定义一个生成器函数 (generator function),它返回一个 Generator 对象。

  2. function* name([param[, param[, … param]]]) { statements }
    name
    函数名
    param
    要传递给函数的一个参数的名称,一个函数最多可以有255个参数。
    statements
    普通JS语句。

  3. 生成器函数在执行时能暂停,后面又能从暂停处继续执行。

  4. 调用一个生成器函数并不会马上执行它里面的语句,而是返回一个这个生成器的 迭代器 ( iterator )对象。当这个迭代器的 next() 方法被首次(后续)调用时,其内的语句会执行到第一个(后续)出现yield的位置为止,yield 后紧跟迭代器要返回的值。或者如果用的是 yield*(多了个星号),则表示将执行权移交给另一个生成器函数(当前生成器暂停执行)。

  5. next()方法返回一个对象,这个对象包含两个属性:value 和 done,value 属性表示本次 yield 表达式的返回值,done 属性为布尔类型,表示生成器后续是否还有 yield 语句,即生成器函数是否已经执行完毕并返回。

  6. 调用 next()方法时,如果传入了参数,那么这个参数会传给上一条执行的 yield语句左边的变量,例如下面例子中的 x :

function* gen() {
    yield 10;
    x = yield 'foo';
    yield x;
}

//gen_obj为Genetator对象
var gen_obj = gen();
console.log(gen_obj.next());// 执行 yield 10,返回 10
console.log(gen_obj.next());// 执行 yield 'foo',返回 'foo'
console.log(gen_obj.next(100));// 将 100 赋给上一条 yield 'foo' 的左值,即执行 x=100,返回 100
console.log(gen_obj.next());// 执行完毕,value 为 undefined,done 为 true
function* idMaker() {
    var index = 0;
    while (index < 3)
        yield index++;
}

var gen = idMaker();
console.log(gen.next()); // 0
console.log(gen.next()); // 1
console.log(gen.next()); // 2
console.log(gen.next()); // undefined,没有yeild了就会done就是true

//生成器也可以接收参数:
function* idMaker() {
    var index = arguments[0] || 0;
    while (true)
        yield index++;
}

var gen = idMaker(5);
console.log(gen.next()); // 5
console.log(gen.next()); // 6

//yield*的示例
function* anotherGenerator(i) {
    console.log('1');
    yield i + 1;
    console.log('2');
    yield i + 2;
    console.log('3');
    yield i + 3;
}

function* generator(i) {
    yield i;
    yield* anotherGenerator(i);// 移交执行权给anotherGenerator
    console.log(i)
    yield i + 10;
}

var gen = generator(10);

console.log(gen.next().value); // 10
console.log(gen.next().value); // 11
console.log(gen.next().value); // 12
console.log(gen.next().value); // 13
console.log(gen.next().value); // 20
//显式返回,return后,之后的语句不会执行

//生成器函数不能当构造器使用
function* f() { }
//var obj = new f; // throws "TypeError: f is not a constructor"
//使用迭代器遍历二维数组并转换成一维数组:
function* iterArr(arr) {            //迭代器返回一个迭代器对象
    if (Array.isArray(arr)) {         // 内节点
        for (let i = 0; i < arr.length; i++) {
            yield* iterArr(arr[i]);   // (*)递归
        }
    } else {                          // 离开     
        yield arr;
    }
}
// 使用 for-of 遍历:
var arr = ['a', ['b', 'c'], ['d', 'e']];
for (var x of iterArr(arr)) {   //for...of会默认调用迭代器
    console.log(x);               // a  b  c  d  e
}

// 或者直接将迭代器展开:
var arr = ['a', ['b', ['c', ['d', 'e']]]];
var gen = iterArr(arr);
//展开运算符会默认调用迭代器
arr = [...gen];    // ["a", "b", "c", "d", "e"]
console.log(arr)
<think>好的,我现在需要回答用户关于在Node.js中同时支持CommonJSES6模块的使用方法的问题。首先,我得回顾一下用户提供的引用资料,看看有哪些相关信息可以利用。 根据引用[3],Node.js默认支持CommonJS,但要使用ES6模块,需要Node.js版本至少v13.0.0,并在package.json中添加"type": "module"。这应该是配置ES6模块的基本步骤。而用户的问题是关于同时支持两种模块,可能需要更详细的配置方法。 接下来,引用[4]和[5]提到了CommonJSES6模块的区别,比如同步加载与异步加载,静态分析与动态导入。同时,引用[5]指出ES6模块在现代浏览器和Node.js中都有支持,但CommonJS仍广泛使用。因此,用户可能需要在同一个项目中混用两种模块,比如维护旧代码的同时引入新模块。 现在需要思考如何让Node.js同时处理两种模块。可能的解决方案包括: 1. 使用文件扩展名区分:.cjs用于CommonJS.mjs用于ES6模块。但用户可能希望保持.js扩展名,同时通过配置实现。 2. 在package.json中设置"type": "module",这样默认将.js文件视为ES6模块,然后通过重命名CommonJS文件为.cjs,或者在需要CommonJS的地方使用.cjs扩展名。 3. 动态导入:ES6模块中可以使用import()动态加载CommonJS模块,但可能需要处理互操作性。 此外,引用[3]提到添加"type": "module"来启用ES6模块,但CommonJS文件可能需要显式使用.cjs扩展名。例如,当项目设置为ES6模块时,Node.js会将.js文件视为ES6模块,而.cjs文件则仍然使用CommonJS。 因此,总结步骤可能是: - 确保Node.js版本足够新(≥13.0.0)。 - 在package.json中添加"type": "module"以启用ES6模块。 - 对于需要CommonJS的文件,使用.cjs扩展名,或者在package.json中指定特定文件夹的模块类型。 此外,可能还需要注意模块导入时的互操作性,例如ES6模块可以导入CommonJS模块,但反之可能有限制。 还需要检查是否存在其他配置选项,比如通过--experimental-modules标志,但根据引用[3],v13.0.0之后应该不需要了,因为已经稳定支持。 最后,用户可能需要具体的代码示例,比如如何在一个项目中混合使用两种模块,并正确导入对方。例如,一个ES6模块如何导入CommonJS模块,或者CommonJS如何导入ES6模块(可能需要使用动态import())。 可能还需要提到工具链的支持,比如Babel或Webpack,但用户的问题可能更关注原生Node.js的支持,而不是通过构建工具。因此,重点应放在Node.js原生的配置方法上。 总结步骤: 1. 升级Node.js到v13.0.0或更高。 2. 在package.json中设置"type": "module"。 3. 使用不同扩展名(.js.cjs)区分模块类型。 4. 处理模块之间的相互导入,注意ES6模块可以导入CommonJS,但CommonJS导入ES6模块需要使用动态import()。 5. 可能的目录结构配置,比如在子目录中使用package.json指定不同的type。 需要验证这些步骤是否正确,确保引用的资料支持这些方法,比如引用[3]提到的配置步骤,引用[5]关于扩展名的使用。</think>在 Node.js 中同时支持 CommonJSES6 模块,需要通过版本兼容性配置和文件扩展名管理来实现。以下是具体方法: --- ### 一、环境要求与基础配置 1. **Node.js 版本 ≥13.0.0** 确保使用较新版本的 Node.js(推荐 ≥14.0.0),因为 ES6 模块支持在 v13.0.0 后进入稳定阶段[^3]。 2. **配置 `package.json`** 在项目根目录的 `package.json` 中添加 `"type": "module"`,使 `.js` 文件默认解析为 ES6 模块: ```json { "type": "module" } ``` --- ### 二、文件扩展名区分模块类型 - **ES6 模块**:使用 `.js` 或 `.mjs` 扩展名。 - **CommonJS 模块**:使用 `.cjs` 扩展名,或通过子目录配置覆盖默认类型。 #### 示例目录结构 ``` project/ ├── esm-module.js // ES6 模块 ├── commonjs-module.cjs // CommonJS 模块 └── legacy/ ├── old-module.js // 默认 CommonJS(通过子目录配置) └── package.json // {"type": "commonjs"} ``` --- ### 三、模块互操作性 #### 1. ES6 模块导入 CommonJS ES6 模块可以通过 `import` 直接引入 CommonJS 模块: ```javascript // esm-module.js import cjsModule from './commonjs-module.cjs'; cjsModule.sayHello(); ``` #### 2. CommonJS 导入 ES6 模块 CommonJS 需使用动态 `import()`(返回 Promise)加载 ES6 模块: ```javascript // commonjs-module.cjs async function loadESM() { const esmModule = await import('./esm-module.js'); esmModule.run(); } loadESM(); ``` --- ### 四、特殊场景处理 #### 1. 默认导出兼容性 CommonJS 的 `module.exports` 在 ES6 模块中会转为 `default` 导出: ```javascript // commonjs-module.cjs module.exports = { value: 42 }; // esm-module.js import cjs from './commonjs-module.cjs'; console.log(cjs.value); // 42 ``` #### 2. 混合开发建议 - **代码隔离**:将新旧模块分开放置,通过目录或扩展名区分。 - **构建工具辅助**:使用 Webpack/Rollup 处理混合模块(适用于复杂项目)[^4]。 --- ### 五、验证配置 运行以下命令测试: ```bash node --experimental-modules esm-module.js ``` (注:v13.0.0 后无需 `--experimental-modules` 标志) ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值