使用JavaScript创建包含n个随机数的数组

26

这个答案的基础上创建一个指定长度的数组,我执行了下面的代码以获得相应的结果,但是它被随机数填充而不是零。

var randoms = Array(4).fill(Math.floor(Math.random() * 9));

从数学上讲,它是随机的。但我希望这种随机性不仅在数组内部可见,而且在执行过程中也可见。愚蠢的电脑... 不按照我的意愿行事,只是按照我的说法行事!

我可以使用迭代并放置我的随机(和变化的)值。但是出于好奇,我想知道是否可能像上面那样,用一行代码就能得到正确的结果,类似MatLab风格。我需要调用eval(function()...)吗?我听说eval很糟糕...

请注意,上述代码会产生以下代码:

[7, 7, 7, 7]
[3, 3, 3, 3]

等等,而我想要像这样的东西:

[1, 2, 3, 4]
[4, 3, 8, 4]


我不明白,但是我希望随机性在数组内可见,而不仅仅在每次运行之间。根据我所理解,你只想创建一个长度为 n 的数组,并填充随机数。 - Tushar
@Tushar 如果您在控制台中运行此行,您将会看到... 它创建一个随机数,并将其复制到所有位置作为固定数字。当您再次运行时,您将获得一组其他数字(每次运行都相同)。很容易被忽视,是吗?我已经更新了问题。谢谢。 - Konrad Viltersten
fill() 方法可以将数组中从起始索引到结束索引范围内的所有元素填充为一个静态值。[MDN] (https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/fill) - Nina Scholz
1
@NinaScholz 是的,我也注意到了。这是一个随机值。没错。但不是我想要的。我记得有位老师说没有生成质数的函数。我用 function(){ return 13; } 反驳了他。他不高兴了。其他人都很开心。 - Konrad Viltersten
6个回答

29
Array#fill 是什么?

根据 MDN 的介绍

fill() 方法用静态值填充一个数组从开始索引到结束索引的所有元素。

你可以使用 Function#applyArray#mapMath.floor()Math.random()

在 ES6 中,可以使用 Array.from箭头函数

Array.from({length: 6}, () => Math.floor(Math.random() * 9));

Array.apply(null, Array(6)).map(() => Math.floor(Math.random() * 9));

var randomArr = Array.from({length: 6}, () => Math.floor(Math.random() * 9));

document.getElementById('result').innerHTML = JSON.stringify(randomArr, 0, 4); // For demo only
<pre id="result"></pre>

在 ES5 中:
Array.apply(null, Array(6)).map(function(item, index){
    return Math.floor(Math.random() * 9);
});

var randomArr = Array.apply(null, Array(6)).map(function(item, index){
    return Math.floor(Math.random() * 9)
});

document.getElementById('result').innerHTML = JSON.stringify(randomArr, 0, 4);
<pre id="result"></pre>

Array.apply(null, Array(n))创建一个由n个元素组成的数组,每个元素的值为undefined。使用new语法创建的数组不可迭代,为了使这个数组可迭代,需要使用Array.apply(null, Array(6))语法。如果页面中包含lodash,这将变得非常容易。
_.times(6, _.random.bind(0, 100))
        ^                        - Number of elements in array
                         ^       - Random number range min
                            ^^^  - Random number range max

注意: 这个答案的灵感来自于 Colin Toh 的博客


1
使用ES2015,您还可以执行以下操作:Array.from({length: 6}, () => Math.floor(Math.random() * 9)) - Nicola Bizzoca
谢谢@NicolaBizzoca。不知道这个。已更新答案。 - Tushar

15

我在想是否有可能用一行代码就得到正确的结果...

var randoms = [...Array(4)].map(() => Math.floor(Math.random() * 9));

document.body.innerText = randoms;


7
var randoms = Array(4).fill(Math.floor(Math.random() * 9));

这行代码将创建一个由4个相同数字组成的列表,因为fill函数获取单个值并将其重复到列表长度。你需要做的是每次运行随机数生成器:

var makeARandomNumber = function(){
    return Math.floor(Math.random() * 9);
}
var randoms = Array(5).fill(0).map(makeARandomNumber);
console.log(randoms)
// => [4, 4, 3, 2, 6]

https://jsfiddle.net/t4jtjcde/


是的,我明白了。我只是不确定为什么@Tushar在那里使用了*apply()。似乎我没有使用它也可以得到相同的结果,但我足够谨慎,知道这里可能会有一些问题。另外,我想知道为什么你在fill()中使用了零参数。我似乎没有使用它也可以得到相同的结果(尝试fill(null)和简单的fill()*)。这是更好的风格吗?它能防止未来出现什么问题吗? - Konrad Viltersten
重新填充(0),只是想给它一些东西,没有真正的计划。关于Tushar对apply()的使用,他们提到这样做是为了使数组可迭代。我还没有尝试过测试这种行为,但并不是所有对象都响应javascript的内置循环结构,因为有时候某些东西看起来像一个数组,但实际上它是一个带有索引属性的对象。我选择忽略这些细节,只是用lodash来处理所有事情。 - Conrad.Dean

5

简洁易懂的ES6方法 -

// randomly generated n = 4 length array 0 <= array[n] <= 9
var randoms = Array.from({length: 4}, () => Math.floor(Math.random() * 10));

享受!


这里的{length: 4}到底是什么?搜索只会出现字符串长度属性.length,我相信那是一个不同的结构。 - jtr13
1
如果我们提供一个包含长度属性的对象作为第一个参数,Array.from() 就知道它可以生成一系列数字。在这里阅读更多信息 - https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/from - Simon Borsky

0

随机唯一数字的大小数组解决方案

const uniqRandomNumbers  = _.sampleSize(_.range(9), 4);
console.log(uniqRandomNumbers);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js"></script>


0

`const t = Array.from({length: n}, mapArrowFx);

1) const t10 = Array.from({length: 10}, (v, k) => k); [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

2) const tEven = Array.from({length: 10}, (v, k) => 2*k); [0, 2, 4, 6, 8, 10, 12, 14, 16, 18]

`

........

3)

let n=100; const tRandom= Array.from({length: n}, (v, k) => Math.floor(Math.random()*n));

...


1
嗯...你确定这是正确的回复吗,伙计?看起来有点...随机。 - Konrad Viltersten

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接