[afterCode] JavaScript 中如何快捷的创建一个含有相同初始值的数组

kidsamong 发布于2019-08-19 18:15 / 1292人阅读

摘要：目标条件尽量的简洁首先想到的是失败原因原来数组中的空元素包括都是不会去遍历处理的而只传一个参数出来数组每个元素都是空的死磕观察构造函数的接口可以用不定参数的方式来创建用试试可行使用的语法简化下好像也可以去掉到了这一步好像是最简洁的实现方式

目标

function createArrayWith(length,value){...}

createArrayWith(2,3) => [3, 3]
createArrayWith(2,{test:2}) => [{test:2}, {test:2}]

条件: 尽量的简洁

首先想到的是map

function createArrayWith(length,value){
   return new Array(length).map(function(){
           return value
   })
}

失败

createArrayWith(2,3) 
[ , ]

原因

map calls a provided callback function once for each element in an array, in order, and constructs a new array from the results. callback is invoked only for indexes of the array which have assigned values, including undefined. It is not called for missing elements of the array (that is, indexes that have never been set, which have been deleted or which have never been assigned a value).

from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

原来数组中的"空"元素,map(包括foreEach)都是不会去遍历处理的. 而只传一个参数new出来数组,每个元素都是空的

死磕map

观察Array 构造函数的接口

new Array(element0, element1[, ...[, elementN]])
new Array(arrayLength)

可以用不定参数的方式来创建

用apply试试

function createArrayWith(length,value){
   return Array.apply(null,new Array(length)).map(function(){
           return value
   })
}

// 可行
createArrayWith(2,3)
[ 3, 3 ]

使用ES6的语法简化下

function createArrayWith(length,value){
   return Array.apply(null,new Array(length)).map(()=>value)
}

createArrayWith(2,3)
[ 3, 3 ]

好像new也可以去掉

function createArrayWith(length,value){
   return Array.apply(null,Array(length)).map(()=>value)
}

createArrayWith(2,3)
[ 3, 3 ]

到了这一步好像是最简洁的实现方式了,但是看起来是在太怪异了.

ES6到底

在MDN 过Array 方法的时候,发现了居然有这个一个函数

arr.fill(value[, start = 0[, end = this.length]])

顿时草泥马奔腾,原来ES6添加了这个新函数.

在ES6的环境下的话,最简洁的方式还是

function createArrayWith(length,value){
   return new Array(length).fill(value)
}

createArrayWith(2,3)
[ 3, 3 ]

折腾完毕

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79390.html

[afterCode] docker 速成班 7: 实战构建基于graphtie/grafana监

摘要：由于公司没有运维又需要监控服务器的一些数据信息想尽快的启动一个数值监控系统技术评估了下打算的方式来建设是一个时间数列数据库并且自带一些简单图形展示功能虽然展示方面不是很完美但是在收集时间数据上非常的方便和简单根据官网的例子只需要一个连接就能由于公司没有运维, 又需要监控服务器的一些数据信息, 想尽快的启动一个数值监控系统. 技术评估了下打算 graphite + grafana 的...

jhhfft 2019-06-28 16:02 评论0 收藏0
[afterCode] docker 速成班 5: 组合 container

摘要：到现在为止我们会从拉取自己需要的文件并执行起来还会基于已有的来制作自己特殊需要的但是如果我们完成一个功能需要多个组合起来使用该怎么办呢虽然可以通过来制作一个这样的但是如果所有的功能都做在一个中如果有一个模块需呀改变的话就需要重新构建整个作为到现在为止,我们会从 docker hub 拉取自己需要的 image 文件并执行起来. 还会基于已有的 image 来制作自己特殊需要的 ima...

neuSnail 2019-06-28 16:03 评论0 收藏0
如何编写避免垃圾开销的实时Javascript代码

摘要：在语言中我们很难完全避免垃圾开销。它的垃圾收集模式在根本上是不符合像游戏这样的实时软件需求的。此外，在所有可能的情况下避免向量对象如中的和属性。在 Javascript 语言中我们很难完全避免垃圾开销。它的垃圾收集模式在根本上是不符合像游戏这样的实时软件需求的。在这篇文章中我们主要介绍了一些关于 javascript 垃圾回收的方法。编辑于 2012 年 3 月 27 日: 哇，这...

Shisui 2019-08-19 18:39 评论0 收藏0
JavaScript函数式编程入门经典

摘要：函数式编程的定义函数是一段可以通过其名称被调用的代码。纯函数大多数函数式编程的好处来自于编写纯函数，纯函数是对给定的输入返回相同的输出的函数，并且纯函数不应依赖任何外部变量，也不应改变任何外部变量。一个持续更新的github笔记，链接地址：Front-End-Basics，可以watch,也可以star。此篇文章的地址：JavaScript函数式编程入门经典正文开始什么是函...

silvertheo 2019-08-23 17:17 评论0 收藏0
JavaScript 实现数组更多的高阶函数

摘要：实现数组更多的高阶函数吾辈的博客原文场景虽说人人平等，但有些人更加平等。若是有一篇适合萌新阅读的自己实现数组更多操作的文章，情况或许会发生一些变化。类似于的初始值，但它是一个函数，避免初始值在所有分组中进行累加。 JavaScript 实现数组更多的高阶函数吾辈的博客原文: https://blog.rxliuli.com/p/fc... 场景虽说人人平等，但有些人更加平等。为...

aervon 2019-08-23 18:31 评论0 收藏0