core-js 中的集合构造器静态方法.of与.fromSet/Map/WeakSet/WeakMap 统一构造方案【免费下载链接】core-jsStandard Library项目地址: https://gitcode.com/GitHub_Trending/co/core-js导读本文围绕 core-js 对 TC39 提案 Set/Map 的of与from静态方法proposal-setmap-offrom的完整实现展开系统讲解Set.of、Set.from、Map.of、Map.from、WeakSet.of、WeakSet.from、WeakMap.of、WeakMap.from八个静态方法的方法签名、语义规则、入口模块与典型用法。文中结合 core-js 仓库中的内部实现internals/collection-of.js与internals/collection-from.js逐行拆解其底层原理帮助你既能在项目中安全地使用这些实验性 API也能理解 polyfill 如何精确还原提案语义。提案背景从Array.of/Array.from到集合构造器JavaScript 的Array早已拥有Array.of与Array.from两个静态方法前者把任意数量的参数打包成数组后者把可迭代对象iterable或类数组对象array-like转换为数组。TC39 的proposal-setmap-offrom提案Specification、Proposal repo正是把同样的构造模式推广到Set、Map、WeakSet、WeakMap四种集合类型上X.of(...items)把参数列表直接构造为对应集合X.from(iterable, mapFn?, thisArg?)把可迭代对象转换为对应集合并支持逐元素映射。在原生实现尚未普及的运行时中core-js 以实验性esnext模块的形式提供了这些方法源码见 esnext.set.of.js、esnext.set.from.js、esnext.map.of.js、esnext.map.from.js、esnext.weak-set.of.js、esnext.weak-set.from.js、esnext.weak-map.of.js、esnext.weak-map.from.js。方法签名总览Built-ins signatures原提案文档给出的 TypeScript 风格签名如下这也是 core-js 各 esnext 模块严格遵循的语义基准class Set { static of(...args: Arraymixed): Set; static from(iterable: Iterablemixed, mapFn?: (value: any, index: number) any, thisArg?: any): Set; } class Map { static of(...args: Array[key, value]): Map; static from(iterable: Iterablemixed, mapFn?: (value: any, index: number) [key: any, value: any], thisArg?: any): Map; } class WeakSet { static of(...args: Arraymixed): WeakSet; static from(iterable: Iterablemixed, mapFn?: (value: any, index: number) Object, thisArg?: any): WeakSet; } class WeakMap { static of(...args: Array[key, value]): WeakMap; static from(iterable: Iterablemixed, mapFn?: (value: any, index: number) [key: Object, value: any], thisArg?: any): WeakMap; }可以提炼出三条核心语义of是纯参数构造参数直接作为集合元素Set/WeakSet或键值对条目Map/WeakMap不经过任何转换from支持映射回调mapFn接收(value, index)两个参数thisArg用于绑定mapFn的this强集合与弱集合的键约束WeakMap的键必须是对象ObjectWeakSet的元素也必须是对象因此mapFn的返回类型被约束为ObjectWeakMap.of的参数同样必须是[key: Object, value: any]形态的键值对。这是 Weak 系列集合仅允许对象作为弱引用键的固有限制在 API 签名上的直接体现。两个工厂函数core-js 如何用一份代码实现八个方法八个 esnext 模块的代码高度同构每个模块都通过internals/export的$工具以{ target, stat: true, forced: true }的方式挂载静态方法并复用两个内部工厂函数。of的底层实现internals/collection-of.jsuse strict; var anObject require(../internals/an-object); // https://tc39.github.io/proposal-setmap-offrom/ module.exports function (C, adder, ENTRY) { return function of() { var result new C(); var length arguments.length; for (var index 0; index length; index) { var entry arguments[index]; if (ENTRY) adder(result, anObject(entry)[0], entry[1]); else adder(result, entry); } return result; }; };该工厂接收三个参数C目标构造器Set、Map、WeakSet或WeakMap经 helpers 模块获取adder写入元素的方法例如SetHelpers.add、MapHelpers.setENTRY布尔标志标识是否为键值对集合Map/WeakMap传trueSet/WeakSet传false。其执行流程为先new C()创建空集合然后遍历arguments逐个写入当ENTRY为真时先通过anObject(entry)断言参数是对象保证entry[0]、entry[1]可安全读取同时这也实现了对键必须是对象的校验再取entry[0]与entry[1]作为键和值调用 adder否则直接把参数作为元素 adder 进去。由于Set/WeakSet天然去重Set.of(1, 2, 3, 2, 1)得到Set {1, 2, 3}。from的底层实现internals/collection-from.jsuse strict; // https://tc39.github.io/proposal-setmap-offrom/ var bind require(../internals/function-bind-context); var anObject require(../internals/an-object); var toObject require(../internals/to-object); var iterate require(../internals/iterate); module.exports function (C, adder, ENTRY) { return function from(source /* , mapFn, thisArg */) { var O toObject(source); var length arguments.length; var mapFn length 1 ? arguments[1] : undefined; var mapping mapFn ! undefined; var boundFunction mapping ? bind(mapFn, length 2 ? arguments[2] : undefined) : undefined; var result new C(); var n 0; iterate(O, function (nextItem) { var entry mapping ? boundFunction(nextItem, n) : nextItem; if (ENTRY) adder(result, anObject(entry)[0], entry[1]); else adder(result, entry); }); return result; }; };from的语义与Array.from高度一致源码清楚地呈现了四条关键行为source 先经toObject装箱字符串、数组、类数组对象都可以作为来源可选参数解析第二个参数是mapFn第三个参数是thisArgthisArg通过internals/function-bind-context的bind绑定到mapFn上与原文档签名中的thisArg?: any对应映射计数从 0 开始回调收到(value, index)index由内部计数器n提供与Array.from的下标约定一致迭代驱动写入通过internals/iterate统一遍历可迭代对象对每个元素执行映射若提供后再走与of相同的ENTRY分支写入集合。八模块的接线方式helpers 与工厂的配合八个 esnext 模块本身非常精简全部逻辑差异都体现在构造器 adder ENTRY 标志的组合上模块目标helpersadderENTRY工厂esnext.set.of.jsSetset-helpersSetHelpers.addfalsecollection-ofesnext.set.from.jsSetset-helpersSetHelpers.addfalsecollection-fromesnext.map.of.jsMapmap-helpersMapHelpers.settruecollection-ofesnext.map.from.jsMapmap-helpersMapHelpers.settruecollection-fromesnext.weak-set.of.jsWeakSetweak-set-helpersWeakSetHelpers.addfalsecollection-ofesnext.weak-set.from.jsWeakSetweak-set-helpersWeakSetHelpers.addfalsecollection-fromesnext.weak-map.of.jsWeakMapweak-map-helpersWeakMapHelpers.settruecollection-ofesnext.weak-map.from.jsWeakMapweak-map-helpersWeakMapHelpers.settruecollection-from例如esnext.map.of.js的核心只有一行$({ target: Map, stat: true, forced: true }, { of: createCollectionOf(MapHelpers.Map, MapHelpers.set, true) });stat: true表示挂载为静态方法forced: true表示无条件覆盖即使宿主环境已存在同名方法也以 core-js 为准保证 polyfill 行为一致。Entry points如何按需引入原文档列出的全部入口如下其中core-js(-pure)表示同时适用于core-js与core-js-pure两种发行版core-js/proposals/collection-of-from core-js(-pure)/full/set/from core-js(-pure)/full/set/of core-js(-pure)/full/map/from core-js(-pure)/full/map/of core-js(-pure)/full/weak-set/of core-js(-pure)/full/weak-set/from core-js(-pure)/full/weak-map/of core-js(-pure)/full/weak-map/from聚合入口core-js/proposals/collection-of-from一次性引入全部八个模块对应 proposals/collection-of-from.js内部依次require了esnext.map.from、esnext.map.of、esnext.set.from、esnext.set.of、esnext.weak-map.from、esnext.weak-map.of、esnext.weak-set.from、esnext.weak-set.of单模块入口core-js(-pure)/full/collection/method按需只引入某一个方法适合追求最小打包体积的场景。此外从 stage/1.js 中的require(../proposals/collection-of-from)可以看到该提案随 stage 1 特性捆绑提供。当前阶段下该方法属于实验性 API语义可能随提案演进变化生产环境使用前建议先评估。实际使用示例原文档给出的两个最小示例在支持该功能的运行时中可直接运行验证Set.of(1, 2, 3, 2, 1); // Set {1, 2, 3} Map.from([[1, 2], [3, 4]], ([key, value]) [key ** 2, value ** 2]); // Map { 1: 4, 9: 16 }结合上面解析的源码语义还可以举出更多体现参数与边界行为的例子// of可变参数直接构造Set 自动去重 const s Set.of(a, b, a); // Set {a, b} // from从任意可迭代对象构造 const s2 Set.from([1, 2, 2, 3]); // Set {1, 2, 3} const s3 Set.from(abracadabra); // Set {a,b,r,c,d}字符串逐字符迭代 // from带 mapFn 与 thisArg const multiplier { n: 10 }; const s4 Set.from([1, 2, 3], function (v) { return v * this.n; }, multiplier); // Set {10, 20, 30} // Map.of / Map.from条目必须是 [key, value] 二元组 const m1 Map.of([a, 1], [b, 2]); // Map {a 1, b 2} const m2 Map.from(new Set([[x, 1]])); // Map {x 1} // WeakSet / WeakMap键必须是对象 const wm WeakMap.of([objA, 1], [objB, 2]); const ws WeakSet.from([objA, objB]);需要特别提醒三类行为差异Map.from的mapFn返回值必须是二元组[key, value]否则会因anObject(entry)[0]取不到键而抛错undefined键/值会以实际结果为准WeakMap.of的每个参数同样必须是键值对且键必须是对象WeakSet.of的元素必须是对象传入原始值会因无法被弱引用持有而报错from的thisArg只在提供了mapFn时才有意义单独传第二个参数undefined会走mapping false分支直接原样迭代写入。小结core-js 以两个内部工厂 四个 helpers 组合的极简架构完整承载了proposal-setmap-offrom提案的八个静态方法。掌握of/from的签名与mapFn/thisArg语义就等同于掌握了把任意参数列表或可迭代对象统一转换为Set/Map/WeakSet/WeakMap的通用范式理解collection-of.js与collection-from.js的ENTRY分支与anObject校验则能在遇到键约束或条目形态相关的异常时迅速定位原因。需要进一步了解 core-js 整体的入口体系可查阅 usage 文档 中关于 entry points 的说明。【免费下载链接】core-jsStandard Library项目地址: https://gitcode.com/GitHub_Trending/co/core-js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
core-js 中的集合构造器静态方法.of与.fromSet/Map/WeakSet/WeakMap 统一构造方案【免费下载链接】core-jsStandard Library项目地址: https://gitcode.com/GitHub_Trending/co/core-js导读本文围绕 core-js 对 TC39 提案 Set/Map 的of与from静态方法proposal-setmap-offrom的完整实现展开系统讲解Set.of、Set.from、Map.of、Map.from、WeakSet.of、WeakSet.from、WeakMap.of、WeakMap.from八个静态方法的方法签名、语义规则、入口模块与典型用法。文中结合 core-js 仓库中的内部实现internals/collection-of.js与internals/collection-from.js逐行拆解其底层原理帮助你既能在项目中安全地使用这些实验性 API也能理解 polyfill 如何精确还原提案语义。提案背景从Array.of/Array.from到集合构造器JavaScript 的Array早已拥有Array.of与Array.from两个静态方法前者把任意数量的参数打包成数组后者把可迭代对象iterable或类数组对象array-like转换为数组。TC39 的proposal-setmap-offrom提案Specification、Proposal repo正是把同样的构造模式推广到Set、Map、WeakSet、WeakMap四种集合类型上X.of(...items)把参数列表直接构造为对应集合X.from(iterable, mapFn?, thisArg?)把可迭代对象转换为对应集合并支持逐元素映射。在原生实现尚未普及的运行时中core-js 以实验性esnext模块的形式提供了这些方法源码见 esnext.set.of.js、esnext.set.from.js、esnext.map.of.js、esnext.map.from.js、esnext.weak-set.of.js、esnext.weak-set.from.js、esnext.weak-map.of.js、esnext.weak-map.from.js。方法签名总览Built-ins signatures原提案文档给出的 TypeScript 风格签名如下这也是 core-js 各 esnext 模块严格遵循的语义基准class Set { static of(...args: Arraymixed): Set; static from(iterable: Iterablemixed, mapFn?: (value: any, index: number) any, thisArg?: any): Set; } class Map { static of(...args: Array[key, value]): Map; static from(iterable: Iterablemixed, mapFn?: (value: any, index: number) [key: any, value: any], thisArg?: any): Map; } class WeakSet { static of(...args: Arraymixed): WeakSet; static from(iterable: Iterablemixed, mapFn?: (value: any, index: number) Object, thisArg?: any): WeakSet; } class WeakMap { static of(...args: Array[key, value]): WeakMap; static from(iterable: Iterablemixed, mapFn?: (value: any, index: number) [key: Object, value: any], thisArg?: any): WeakMap; }可以提炼出三条核心语义of是纯参数构造参数直接作为集合元素Set/WeakSet或键值对条目Map/WeakMap不经过任何转换from支持映射回调mapFn接收(value, index)两个参数thisArg用于绑定mapFn的this强集合与弱集合的键约束WeakMap的键必须是对象ObjectWeakSet的元素也必须是对象因此mapFn的返回类型被约束为ObjectWeakMap.of的参数同样必须是[key: Object, value: any]形态的键值对。这是 Weak 系列集合仅允许对象作为弱引用键的固有限制在 API 签名上的直接体现。两个工厂函数core-js 如何用一份代码实现八个方法八个 esnext 模块的代码高度同构每个模块都通过internals/export的$工具以{ target, stat: true, forced: true }的方式挂载静态方法并复用两个内部工厂函数。of的底层实现internals/collection-of.jsuse strict; var anObject require(../internals/an-object); // https://tc39.github.io/proposal-setmap-offrom/ module.exports function (C, adder, ENTRY) { return function of() { var result new C(); var length arguments.length; for (var index 0; index length; index) { var entry arguments[index]; if (ENTRY) adder(result, anObject(entry)[0], entry[1]); else adder(result, entry); } return result; }; };该工厂接收三个参数C目标构造器Set、Map、WeakSet或WeakMap经 helpers 模块获取adder写入元素的方法例如SetHelpers.add、MapHelpers.setENTRY布尔标志标识是否为键值对集合Map/WeakMap传trueSet/WeakSet传false。其执行流程为先new C()创建空集合然后遍历arguments逐个写入当ENTRY为真时先通过anObject(entry)断言参数是对象保证entry[0]、entry[1]可安全读取同时这也实现了对键必须是对象的校验再取entry[0]与entry[1]作为键和值调用 adder否则直接把参数作为元素 adder 进去。由于Set/WeakSet天然去重Set.of(1, 2, 3, 2, 1)得到Set {1, 2, 3}。from的底层实现internals/collection-from.jsuse strict; // https://tc39.github.io/proposal-setmap-offrom/ var bind require(../internals/function-bind-context); var anObject require(../internals/an-object); var toObject require(../internals/to-object); var iterate require(../internals/iterate); module.exports function (C, adder, ENTRY) { return function from(source /* , mapFn, thisArg */) { var O toObject(source); var length arguments.length; var mapFn length 1 ? arguments[1] : undefined; var mapping mapFn ! undefined; var boundFunction mapping ? bind(mapFn, length 2 ? arguments[2] : undefined) : undefined; var result new C(); var n 0; iterate(O, function (nextItem) { var entry mapping ? boundFunction(nextItem, n) : nextItem; if (ENTRY) adder(result, anObject(entry)[0], entry[1]); else adder(result, entry); }); return result; }; };from的语义与Array.from高度一致源码清楚地呈现了四条关键行为source 先经toObject装箱字符串、数组、类数组对象都可以作为来源可选参数解析第二个参数是mapFn第三个参数是thisArgthisArg通过internals/function-bind-context的bind绑定到mapFn上与原文档签名中的thisArg?: any对应映射计数从 0 开始回调收到(value, index)index由内部计数器n提供与Array.from的下标约定一致迭代驱动写入通过internals/iterate统一遍历可迭代对象对每个元素执行映射若提供后再走与of相同的ENTRY分支写入集合。八模块的接线方式helpers 与工厂的配合八个 esnext 模块本身非常精简全部逻辑差异都体现在构造器 adder ENTRY 标志的组合上模块目标helpersadderENTRY工厂esnext.set.of.jsSetset-helpersSetHelpers.addfalsecollection-ofesnext.set.from.jsSetset-helpersSetHelpers.addfalsecollection-fromesnext.map.of.jsMapmap-helpersMapHelpers.settruecollection-ofesnext.map.from.jsMapmap-helpersMapHelpers.settruecollection-fromesnext.weak-set.of.jsWeakSetweak-set-helpersWeakSetHelpers.addfalsecollection-ofesnext.weak-set.from.jsWeakSetweak-set-helpersWeakSetHelpers.addfalsecollection-fromesnext.weak-map.of.jsWeakMapweak-map-helpersWeakMapHelpers.settruecollection-ofesnext.weak-map.from.jsWeakMapweak-map-helpersWeakMapHelpers.settruecollection-from例如esnext.map.of.js的核心只有一行$({ target: Map, stat: true, forced: true }, { of: createCollectionOf(MapHelpers.Map, MapHelpers.set, true) });stat: true表示挂载为静态方法forced: true表示无条件覆盖即使宿主环境已存在同名方法也以 core-js 为准保证 polyfill 行为一致。Entry points如何按需引入原文档列出的全部入口如下其中core-js(-pure)表示同时适用于core-js与core-js-pure两种发行版core-js/proposals/collection-of-from core-js(-pure)/full/set/from core-js(-pure)/full/set/of core-js(-pure)/full/map/from core-js(-pure)/full/map/of core-js(-pure)/full/weak-set/of core-js(-pure)/full/weak-set/from core-js(-pure)/full/weak-map/of core-js(-pure)/full/weak-map/from聚合入口core-js/proposals/collection-of-from一次性引入全部八个模块对应 proposals/collection-of-from.js内部依次require了esnext.map.from、esnext.map.of、esnext.set.from、esnext.set.of、esnext.weak-map.from、esnext.weak-map.of、esnext.weak-set.from、esnext.weak-set.of单模块入口core-js(-pure)/full/collection/method按需只引入某一个方法适合追求最小打包体积的场景。此外从 stage/1.js 中的require(../proposals/collection-of-from)可以看到该提案随 stage 1 特性捆绑提供。当前阶段下该方法属于实验性 API语义可能随提案演进变化生产环境使用前建议先评估。实际使用示例原文档给出的两个最小示例在支持该功能的运行时中可直接运行验证Set.of(1, 2, 3, 2, 1); // Set {1, 2, 3} Map.from([[1, 2], [3, 4]], ([key, value]) [key ** 2, value ** 2]); // Map { 1: 4, 9: 16 }结合上面解析的源码语义还可以举出更多体现参数与边界行为的例子// of可变参数直接构造Set 自动去重 const s Set.of(a, b, a); // Set {a, b} // from从任意可迭代对象构造 const s2 Set.from([1, 2, 2, 3]); // Set {1, 2, 3} const s3 Set.from(abracadabra); // Set {a,b,r,c,d}字符串逐字符迭代 // from带 mapFn 与 thisArg const multiplier { n: 10 }; const s4 Set.from([1, 2, 3], function (v) { return v * this.n; }, multiplier); // Set {10, 20, 30} // Map.of / Map.from条目必须是 [key, value] 二元组 const m1 Map.of([a, 1], [b, 2]); // Map {a 1, b 2} const m2 Map.from(new Set([[x, 1]])); // Map {x 1} // WeakSet / WeakMap键必须是对象 const wm WeakMap.of([objA, 1], [objB, 2]); const ws WeakSet.from([objA, objB]);需要特别提醒三类行为差异Map.from的mapFn返回值必须是二元组[key, value]否则会因anObject(entry)[0]取不到键而抛错undefined键/值会以实际结果为准WeakMap.of的每个参数同样必须是键值对且键必须是对象WeakSet.of的元素必须是对象传入原始值会因无法被弱引用持有而报错from的thisArg只在提供了mapFn时才有意义单独传第二个参数undefined会走mapping false分支直接原样迭代写入。小结core-js 以两个内部工厂 四个 helpers 组合的极简架构完整承载了proposal-setmap-offrom提案的八个静态方法。掌握of/from的签名与mapFn/thisArg语义就等同于掌握了把任意参数列表或可迭代对象统一转换为Set/Map/WeakSet/WeakMap的通用范式理解collection-of.js与collection-from.js的ENTRY分支与anObject校验则能在遇到键约束或条目形态相关的异常时迅速定位原因。需要进一步了解 core-js 整体的入口体系可查阅 usage 文档 中关于 entry points 的说明。【免费下载链接】core-jsStandard Library项目地址: https://gitcode.com/GitHub_Trending/co/core-js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
