关于 Array.apply(null, { length:20 }).map() 的思考

原创已于 2022-08-22 17:03:24 修改 · 738 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #js #前端 #函数式编程

于 2019-11-25 20:22:19 首次发布

vue 专栏收录该内容

4 篇文章

订阅专栏

本文深入探讨了函数式编程中的循环方法，特别是如何利用Array.apply和类数组特性优雅地实现循环，解决传统for循环的局限性，适用于Vue等前端开发场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue的render的文档中出现了，用来循环生成元素。

是什么

本质是函数式编程的循环方法。

就是一种循环方法，你用for循环代替，效果也是一样的，但是Array.apply(null, { length: 20 }).map()算是函数式编程

怎么实现函数式编程中的循环

如果不用for，你脑海中可能马上会想起reduce，forEach，map这些迭代器函数，都能产生循环。比如：

[1,2,3].forEach((it,index)=>{
	console.log(index)   // 0 1 2
})

这就是简单的函数式循环。然而重点其实是前面需要循环的数组，如何优雅的产生。

如果我们想循环20次，直接写一个0到20的数组，结合forEach是可以的，但是未免显得有些拙略,

比如[1,2,3.....20].forEach()，如果要循环100次，那岂不是要写100个？？

所以，可以使用js内置函数Array()来生成一个指定长度的数组，这样子只需要指定长度就能循环了

Array(20).forEach(()=>{
	// do something
})

直接使用`Array()`的问题

直接使用Array()可以生成指定长度的数组，但是会有一个问题：数组里面的值都是没有初始化的！！重要的是，你拿不到循环的索引，因为里面的key和value都是empty状态

Array(3).forEach((it,index)=>{
	console.log(index)  // undefiend
})
// 拿不到index，无法判断循环进度

引入`apply`

为了解决index无法获取的问题，我们可以在Array()初始化的时候传入数值

Array.apply(null,[1,2,3]).forEach((it,index)=>{
	console.log(index)   // 1 2 3
})

其实就是执行Array函数，然后传入了参数1,2,3

索引问题就解决了，但是如果我要用apply循环100次呢？手写到100？？继续往下

类数组

函数式循环最精巧的地方，应该就在于{ length: 20 }。

apply函数传入的第二个参数，可以是类数组（敲黑板）！！什么是类数组？拥有length属性，同时存在key是数字的对象，就是类数组；比如我们用document.getElementsByClassName('div')获取的dom元素，含有lenth属性，同时可以通过下标0，1…获取元素，是类数组。

// 类数组
{length:2}

//等价于
{0:undefiend,1:undefiend,length:2}

那{length:20}的类数组表示的是啥呢？

就是长度20的对象，每个对象的值都是undefined，所以Array.apply(null,{length:20})，实际上就是产生了一个长度为20，具有初始值的数组。

如此，函数式循环实现，索引问题解决

话外

把问题的切入点转换成“函数式编程如何实现循环”，问题就容易解决多了。

可以看出vue文档的作者是函数式编程的爱好者，如果你跟他讲for循环，他可能会跟你急😅hahahaha。

关于 Array.apply(null, { length:20 }).map() 的思考

是什么

怎么实现函数式编程中的循环

直接使用Array()的问题

引入apply

类数组

话外

直接使用`Array()`的问题

引入`apply`