0

0

js 如何用times调用函数生成指定长度数组

星降

星降

发布时间:2025-08-16 11:40:02

|

474人浏览过

|

来源于php中文网

原创

javascript没有内置times方法,但可通过array.from、fill+map或for循环等原生方式实现循环调用函数生成指定长度数组的效果;2. array.from({ length }, mapfn) 是最推荐的现代写法,语义清晰且简洁;3. new array(n).fill(null).map(fn) 需填充以避免稀疏数组问题,适合需map转换的场景;4. for循环在性能和复杂逻辑控制上更具优势;5. 可自行封装times函数以获得更优雅的api;6. js未内置times是因其设计哲学倾向基础构建块,鼓励灵活组合,而非预设高层抽象,这也促进了工具库的发展;7. array.from相比fill+map语义更明确,性能略优,且无需担心空槽问题,是更优选择。

js 如何用times调用函数生成指定长度数组

在JavaScript中,并没有一个名为

times
的内置方法可以直接像某些库(如Lodash)那样循环调用函数并生成指定长度的数组。但我们可以通过多种原生的方式,巧妙地模拟或实现类似的功能,比如利用
Array.from
Array.prototype.map
结合
Array.prototype.fill
,或者最直接的
for
循环来达到目的,核心在于创建一个指定长度的“容器”,然后用函数的结果填充它。

要实现“循环调用函数生成指定长度数组”的效果,我们有几种实用的原生JavaScript策略:

1. 使用

Array.from()
这是现代JS中非常推荐的做法,它能从一个类数组对象或可迭代对象创建一个新的、浅拷贝的Array实例。当它接收第二个参数(一个映射函数)时,这个函数会在新数组的每个元素上被调用。

function generateArrayWithFunction(length, generatorFn) {
  return Array.from({ length: length }, (_, index) => generatorFn(index));
}

// 示例:生成一个包含5个随机数的数组
const randomNumbers = generateArrayWithFunction(5, () => Math.random());
console.log(randomNumbers); 
// 比如:[0.12345, 0.67890, 0.11223, 0.44556, 0.77889]

// 示例:生成一个包含索引平方的数组
const squares = generateArrayWithFunction(4, (index) => index * index);
console.log(squares); 
// 输出:[0, 1, 4, 9]

这种方式简洁明了,意图清晰,尤其适合需要基于索引或只是简单重复调用函数的情况。

2. 结合

Array.prototype.fill()
Array.prototype.map()
这是另一种常见的模式,首先创建一个指定长度的空数组并填充(通常是
undefined
null
),然后通过
map
方法对每个元素应用生成函数。

function generateArrayWithMap(length, generatorFn) {
  return new Array(length).fill(null).map((_, index) => generatorFn(index));
}

// 示例:生成3个日期字符串
const dates = generateArrayWithMap(3, () => new Date().toLocaleTimeString());
console.log(dates); 
// 比如:["10:30:00 AM", "10:30:00 AM", "10:30:00 AM"] (时间可能相同,因为是同步执行)

// 注意:如果generatorFn是异步的,或者需要区分每次调用的上下文,这种方法会很直接。

fill(null)
这一步很重要,因为不填充的话,
map
方法会跳过那些“空”的元素(即稀疏数组的空槽)。

3. 经典的

for
循环: 虽然不如前两者“函数式”,但
for
循环在性能和灵活性上依然无可替代,尤其是在需要更复杂逻辑或提前跳出的场景。

function generateArrayWithForLoop(length, generatorFn) {
  const result = [];
  for (let i = 0; i < length; i++) {
    result.push(generatorFn(i));
  }
  return result;
}

// 示例:生成一个包含斐波那契数列前N项的数组(简化版)
const fibonacci = generateArrayWithForLoop(6, (index) => {
  if (index <= 1) return index;
  // 这里为了简单,没有实现完整的斐波那契,只是示意
  return index * 10; // 假装是斐波那契
});
console.log(fibonacci); 
// 输出:[0, 10, 20, 30, 40, 50] (如果generatorFn是简单的索引乘10)

// 实际斐波那契实现会复杂些,需要闭包或外部状态。

for
循环的优势在于你可以完全控制迭代过程,比如在生成过程中引入条件判断、累加器等。

4. 模拟一个

times
辅助函数: 如果你真的喜欢
times(n, fn)
这种风格,完全可以自己封装一个:

function times(n, iterator) {
  const result = [];
  for (let i = 0; i < n; i++) {
    result.push(iterator(i));
  }
  return result;
}

// 示例:生成10个递增的字符串
const items = times(10, (i) => `Item ${i + 1}`);
console.log(items); 
// 输出:["Item 1", "Item 2", ..., "Item 10"]

这其实就是

for
循环的函数式封装,提供了更具表达力的API。

选择哪种方法,往往取决于你的具体需求、代码风格偏好以及对性能的考量。

Array.from
通常是最现代且推荐的。

存了个图
存了个图

视频图片解析/字幕/剪辑,视频高清保存/图片源图提取

下载

为什么JavaScript没有内置的
times
方法?(以及这给我们带来了什么?)

为什么JavaScript不像Ruby或者某些工具库那样,直接提供一个

times(n, callback)
的内置方法呢?这其实是一个挺有意思的问题。从语言设计的角度看,JavaScript更倾向于提供基础且灵活的构建块,而不是预设过多的高层抽象。

你想啊,

for
循环、
while
循环,以及后来的
forEach
map
reduce
这些数组迭代方法,它们本身就提供了强大的循环和转换能力。
times
本质上就是一种特定模式的循环——重复执行某个操作N次。JS的设计者可能认为,现有的
Array.from
(特别是带第二个映射函数参数的版本)或者
new Array(n).fill().map()
已经足够优雅地覆盖了
times
的大部分用例。

这带来了什么呢?我觉得是更大的自由度和组合性。当你没有一个现成的

times
时,你会去思考:我是在创建一个新数组吗?我需要每个元素的索引吗?我需要对现有数组进行转换吗?这些思考会引导你选择最符合语义和性能的内置方法。比如,如果只是想重复执行一个副作用函数N次,
for
循环可能比创建一个数组再丢弃它更直接。但如果明确目标是生成一个数组,
Array.from
就显得非常自然。

另外,这也促进了像Lodash这样的实用工具库的繁荣。这些库往往会封装一些在原生JS中需要多步操作才能完成的常见模式,比如

_.times
,从而提高开发效率和代码的可读性。所以,与其说JS“缺少”
times
,不如说它给了我们自己去构建或者选择引入外部工具的自由。

Array.from
new Array().fill().map()
在性能和使用场景上的细微差异

Array.from
new Array(length).fill(null).map()
这两种方法,在实现“重复调用函数生成数组”的目的上,看起来很相似,但实际上它们在内部机制和一些细微的使用场景上还是有些区别的。

性能上看,对于大多数现代JavaScript引擎,它们的性能差异通常不会是决定性的瓶颈,尤其是在处理中等规模数组时。不过,

Array.from
在某些情况下可能会有轻微的优势,因为它内部的实现可能更优化,避免了
fill
创建中间数组的步骤(尽管现代引擎也可能优化掉)。但说实话,这种差异在日常开发中几乎可以忽略不计,除非你正在处理数百万级别的超大数组。

真正的区别更多体现在语义和使用场景上:

  • Array.from({ length: N }, mapFn)
    • 语义更清晰: 它的第一个参数是“类数组对象”或“可迭代对象”,
      { length: N }
      正好符合“创建一个指定长度的数组”的意图。第二个参数
      mapFn
      直接说明了“如何根据索引或值来生成新元素”。
    • 简洁: 语法上更紧凑,一步到位。
    • 处理稀疏数组: `Array.from

相关专题

更多
js获取数组长度的方法
js获取数组长度的方法

在js中,可以利用array对象的length属性来获取数组长度,该属性可设置或返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容,供大家免费下载使用。

544

2023.06.20

js刷新当前页面
js刷新当前页面

js刷新当前页面的方法:1、reload方法,该方法强迫浏览器刷新当前页面,语法为“location.reload([bForceGet]) ”;2、replace方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,不能通过“前进”和“后退”来访问已经被替换的URL,语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

372

2023.07.04

js四舍五入
js四舍五入

js四舍五入的方法:1、tofixed方法,可把 Number 四舍五入为指定小数位数的数字;2、round() 方法,可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

728

2023.07.04

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

470

2023.09.01

JavaScript转义字符
JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号,可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容,供大家免费下载体验。

394

2023.09.04

js生成随机数的方法
js生成随机数的方法

js生成随机数的方法有:1、使用random函数生成0-1之间的随机数;2、使用random函数和特定范围来生成随机整数;3、使用random函数和round函数生成0-99之间的随机整数;4、使用random函数和其他函数生成更复杂的随机数;5、使用random函数和其他函数生成范围内的随机小数;6、使用random函数和其他函数生成范围内的随机整数或小数。

990

2023.09.04

如何启用JavaScript
如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍:1、内联脚本是将JavaScript代码直接嵌入到HTML标签中;2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中;3、外部脚本是将JavaScript代码放置在一个独立的文件;4、外部脚本是将JavaScript代码放置在一个独立的文件。

655

2023.09.12

Js中Symbol类详解
Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型,用于表示独一无二的值。Symbol的特点:1、独一无二,每个Symbol值都是唯一的,不会与其他任何值相等;2、不可变性,Symbol值一旦创建,就不能修改或者重新赋值;3、隐藏性,Symbol值不会被隐式转换为其他类型;4、无法枚举,Symbol值作为对象的属性名时,默认是不可枚举的。

545

2023.09.20

php源码安装教程大全
php源码安装教程大全

本专题整合了php源码安装教程,阅读专题下面的文章了解更多详细内容。

194

2025.12.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 3.2万人学习

Pandas 教程
Pandas 教程

共15课时 | 0.9万人学习

ASP 教程
ASP 教程

共34课时 | 3.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号