教程【免费下载链接】jstipsThis is about useful JS tips!项目地址https://gitcode.com/gh_mirrors/js/jstips点击查看免费下载本篇指南围绕 jstips 仓库中的第 33 期技巧_posts/en/javascript/2016-02-02-create-range-0-n-easily-using-one-line.md展开系统讲解如何用一行代码生成[0, 1, ..., N-1]这类连续整数数组覆盖 ES5 与 ES6 共三种实现并逐一拆解其底层调用链。读完本文你将掌握「生成连续整数序列」这一高频工具函数的三种写法、它们各自的适用环境与边界条件并能结合实际场景分页、轮播、测试数据、占位渲染直接落地使用。场景为什么需要生成 0 到 N-1 的数组在很多业务与工具代码中我们都需要一个从 0 开始的连续整数数组渲染 N 个占位元素如骨架屏、网格占位生成分页页码或图表刻度批量构造测试数据作为循环次数的载体配合forEach/map实现执行 N 次的语义。直接手写[0, 1, 2, ..., N-1]显然不现实于是就有了各种一行生成 range的技巧。本期的原始文档给出了三种紧凑写法前两种还附带了逐步推导说明下面逐一展开。方案一ES5Array.apply(null, {length: N}).map(Function.call, Number)Array.apply(null, {length: N}).map(Function.call, Number);这是三种方案中唯一不依赖 ES6 的写法在只支持 ES5 的老环境中依然可用。原文档给出了它的四步拆解Array.apply(null, {length: N})返回一个由undefined填充的长度为N的数组即A [undefined, undefined, ...]。A.map(Function.call, Number)返回一个长度为N的数组索引I处的元素为Function.call.call(Number, undefined, I, A)的结果。Function.call.call(Number, undefined, I, A)可折叠为Number(I)其值自然就是I。最终结果为[0, 1, ..., N-1]。为什么第一步能拿到被填充的数组关键在于Array构造函数与Function.prototype.apply的组合直接new Array(N)得到的是稀疏数组sparse array只有长度没有实际元素遍历时元素表现为空洞hole详见同一仓库的_posts/en/javascript/2017-03-12-3-array-hacks.md第 64 期中对稀疏数组的描述apply的第二个参数接受类数组对象array-like它读取该对象的length属性并把下标0到length-1的属性逐一作为实参传给Array。这里传入的{length: N}没有任何下标属性因此等价于调用Array(undefined, undefined, ..., undefined)共 N 个参数结果是 N 个undefined组成的密实数组。同样的手法在本仓库_posts/en/javascript/2016-01-08-converting-a-node-list-to-an-array.md第 08 期中出现过const nodelistToArray Array.apply(null, nodelist);把querySelectorAll返回的类数组 NodeList 一次性转成真正的数组。两者共享同一底层机制可以对照阅读。第二步map(Function.call, Number)的调用链Array.prototype.map的第二个参数是thisArg会把Function.call作为回调、Number作为this传入。map内部对索引I的调用等价于Function.call.call(Number, undefined, I, A)逐层展开外层Function.call.call(Number, ...)表示以Number为this调用Function.prototype.call即Number.call(undefined, I, A)Number.call(undefined, I, A)实际上以undefined为this调用Number(I, A)忽略多余的参数后得到Number(I)即把索引I显式转换为数字结果就是I本身。于是每个索引位置都被替换为其下标最终得到[0, 1, ..., N-1]。这一写法巧妙之处在于复用map的thisArg参数让转换函数 转换上下文两个参数各司其职无需额外声明回调函数。方案二ES6Array.from(new Array(N), (val, index) index)Array.from(new Array(N), (val,index)index);Array.from是 ES6 提供的静态方法第一个参数接收可迭代对象或类数组对象第二个可选参数是映射函数mapFn相当于先收集、再映射的一站式操作。原文档的推导如下A new Array(N)返回一个有 N 个洞的数组即A [,,,...]但对0...N-1范围内的xA[x]取值为undefined。F (val,index)index等价于function F (val, index) { return index; }。Array.from(A, F)返回一个长度为 N 的数组索引I处的元素是F(A[I], I)的结果也就是I。最终结果为[0, 1, ..., N-1]。值得强调的是Array.from与map对稀疏数组的处理不同。map会跳过空洞稀疏数组上直接map会保留空洞这一点在第 64 期的遍历空数组一节中有直观演示new Array(4).map((elem, index) index)得到的仍是[undefined, undefined, undefined, undefined]而Array.from会把空洞当作undefined逐项访问因此映射函数能对每一个下标都执行一次这正是方案二可行性的关键。若对Array.from配合Set去重的用法感兴趣可参考_posts/en/javascript/2016-02-06-deduplicate-an-array.md第 37 期中的Array.from(new Set(...))写法。方案三ES6Array.from(Array(N).keys())Array.from(Array(N).keys());这是三种方案中代码最短、语义最直观的一个Array(N)生成稀疏数组.keys()返回一个遍历其索引0到N-1的迭代器Array.from再把迭代器整体收集为真正的数组。整个过程没有映射回调属于纯取索引语义。三种方案对比方案一行代码环境要求核心机制可读性方案一Array.apply(null, {length: N}).map(Function.call, Number)ES5 及以上apply 展开类数组 map 的thisArg复用较低依赖对Function.call调用链的理解方案二Array.from(new Array(N), (val,index)index)ES6 及以上Array.from的映射函数会访问空洞中方案三Array.from(Array(N).keys())ES6 及以上索引迭代器 Array.from收集高选择建议在只兼容 ES5 的老环境中用方案一现代浏览器与 Node.js 环境原生支持 ES6优先使用方案三代码最短、意图最清晰需要收集同时转换时方案二最顺手。扩展生成[1, 2, ..., N]序列原文档 One More Thing 部分如果实际需要的是从 1 开始的序列原文档给出了两处改写这里完整保留方案一改写ES5Array.apply(null, {length: N}).map(function(value, index){ return index 1; });方案二改写ES6Array.from(new Array(N),(val,index)index1);注意方案一改写后不再依赖Number的隐式转换而是显式声明了function(value, index)并返回index 1可读性反而更好。方案三同理可改写为Array.from(Array(N).keys(), i i 1)映射函数用法见方案二原文档未列出此改法这里作为补充。实战注意事项与边界条件N 必须是有效的非负整数N 0时三式都返回空数组[]N为负数或非整数时行为取决于具体引擎建议在使用前对入参做Number.isInteger(N) N 0之类的校验或封装成range(N)工具函数统一入口。大 N 的内存开销三者最终都会物化为一个长度为 N 的真实数组N 过大时如百万级应评估内存占用必要时改用迭代器方案Array(N).keys()本身是惰性的配合for...of可避免一次性物化。undefined 与空洞的区别Array.apply(null, {length: N})生成的是填满undefined的密实数组而new Array(N)生成的是含空洞的稀疏数组。在map、forEach等会跳过空洞的方法上二者行为截然不同这是方案一能配合map而直接new Array(N).map(...)不行的根因。ES5/ES6 环境判定若需兼容 IE 等旧浏览器且无法引入 polyfill只能使用方案一Array.from、.keys()、箭头函数均属 ES6 特性需要运行环境原生支持或引入对应 polyfill。在仓库中的定位与延伸阅读本期技巧编号为 33在仓库 README.md 的技巧列表中对应 Create Range 0...N easily using one line 条目。该仓库还提供了同一技巧的多语言版本可对照阅读简体中文版、繁体中文版、西班牙语版。与本主题强相关的相邻技巧包括第 08 期Converting a Node List to an ArrayArray.apply处理类数组对象的另一个实战案例第 64 期3 Array Hacks演示稀疏数组上map的失效行为并给出Array.apply(null, new Array(4))的修复写法与方案一的原理互为印证第 37 期Deduplicate an ArrayArray.from(new Set(...))的去重用法展示Array.from的另一典型场景。总结生成[0, 1, ..., N-1]这类连续序列虽然只有一行代码背后却涉及稀疏数组、apply的类数组展开、map的thisArg、Function.call调用链、Array.from的映射语义与索引迭代器等一串 JavaScript 核心机制。根据运行环境选择方案一ES5或方案二/三ES6再按需改写为[1, 2, ..., N]即可在任何项目中快速落地一个可靠的range工具。赞分享教程【免费下载链接】jstipsThis is about useful JS tips!项目地址https://gitcode.com/gh_mirrors/js/jstips点击查看免费下载相关推荐jstips 第 33 期仅用一行代码生成 [0, 1, ..., N-1] 数列jstips 第 33 期仅用一行代码生成 0, 1, ..., N 1 数列 本文源自 jstips 仓库 README.md https://link.教程jstips 实战一行代码生成 [0, 1, ..., N-1] 数组序列的三种写法与原理剖析jstips 实战一行代码生成 0, 1, ..., N 1 数组序列的三种写法与原理剖析 在 JavaScript 开发中生成 0, 1, 2, ...,教程jstips 第 38 期JavaScript 多维数组扁平化的五种方案与深度原理解析jstips 第 38 期JavaScript 多维数组扁平化的五种方案与深度原理解析 导读数组扁平化Flattening是把多维嵌套数组合并成一维数组教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考