JS从数组中获取一个或多个随机元素

作者

目录

Get Multiple Random Elements from an Array in JavaScript

  1. 在 JavaScript 中从数组中获取多个随机元素
  2. 从 JavaScript 中的数组中获取一个随机元素

在 JavaScript 中从数组中获取多个随机元素

从数组中获取多个随机元素：

  1. 使用sort()方法打乱数组。
  2. 使用slice()shuffled 数组上的方法来获取多个随机元素。
索引.js
function getMultipleRandom(arr, num) {
  const shuffled = [...arr].sort(() => 0.5 - Math.random());

  return shuffled.slice(0, num);
}

const arr = ['b', 'c', 'a', 'd'];
console.log(getMultipleRandom(arr, 2)); // 👉️ ['a', 'c'];
console.log(getMultipleRandom(arr, 3)); // 👉️ ['c', 'b', 'c']

如果您只需要从数组中获取 1 个随机元素，请单击以下子标题：

我们创建了一个可重用的函数，它接受一个数组和我们想要返回的随机元素的数量。

第一步是使用
扩展语法 (…)创建原始数组的浅表副本。

这是必要的，因为
Array.sort()方法会改变原始数组。

索引.js
const arr = ['bobby', 'hadz', '.', 'com'];

arr.sort();

console.log(arr); // 👉️ [ '.', 'bobby', 'com', 'hadz' ]
扩展语法 (…) 帮助我们避免改变传入的数组。

我们传递给该方法的唯一参数sort()是一个比较函数。

索引.js
function getMultipleRandom(arr, num) {
  const shuffled = [...arr].sort(() => 0.5 - Math.random());

  return shuffled.slice(0, num);
}

该函数使用一对数组元素（a和b）调用并定义数组的排序顺序。

我们使用Math.random()函数来获取随机排序的数组。

该函数返回一个从到 的Math.random()随机数。01

索引.js
console.log(Math.random()) // 👉️ 0.99453534...
console.log(Math.random()) // 👉️ 0384848858...
console.log(Math.random()) // 👉️ 0.58584833...

console.log(0.5 - Math.random()); // 👉️ -0.10394939...
console.log(0.5 - Math.random()); // 👉️ 0.364345434...
console.log(0.5 - Math.random()); // 👉️ 0.075445654...

我们传递给该方法的比较函数sort()每次都使用 2 个数组元素调用 –a和b。

这些是每次迭代可能发生的 3 种情况：

  • 如果比较函数的返回值大于0，则元素
    b排在 之前a。
  • 如果返回值小于0，则元素a排在 之前b。
  • 如果返回值等于0，则保留数组元素的原始顺序。

该函数从到Math.random()返回一个浮点数，因此我们在中间选择一个数字 ( ) 从中减去调用的结果
。010.5Math.random()

这基本上洗牌阵列。

最后一步是使用
Array.slice方法从打乱后的数组中获取多个元素。

索引.js
function getMultipleRandom(arr, num) {
  const shuffled = [...arr].sort(() => 0.5 - Math.random());

  return shuffled.slice(0, num);
}

该slice方法采用以下 2 个参数：

姓名 描述
起始索引 要包含在返回数组中的第一个元素的索引
结束索引 要从返回的数组中排除的第一个元素的索引

当只有一个参数传递给Array.slice()方法时，切片会到达数组的末尾。

该slice方法返回一个新数组，其中包含来自混洗数组的多个元素。

这是一个两步过程：

  1. 以随机顺序对数组进行排序。
  2. 从包含多个元素的混洗数组中获取一个切片。

这是完整的例子。

索引.js
function getMultipleRandom(arr, num) {
  const shuffled = [...arr].sort(() => 0.5 - Math.random());

  return shuffled.slice(0, num);
}

const arr = ['b', 'c', 'a', 'd'];
console.log(getMultipleRandom(arr, 2)); // 👉️ ['d', 'a'];
console.log(getMultipleRandom(arr, 3)); // 👉️ ['b', 'a', 'c']

从数组中获取多个随机元素lodash

或者，您可以使用lodash图书馆。

首先，确保您已lodash通过从终端运行以下命令来安装。

壳
npm init -y

npm install lodash

现在您可以导入并使用
lodash.sampleSize方法。

索引.js
import _ from 'lodash';

const arr = ['bobby', 'hadz', '.', 'com'];

console.log(_.sampleSize(arr, 2)); // 👉️ [ 'bobby', 'com' ]
console.log(_.sampleSize(arr, 2)); // 👉️ [ 'com', '.' ]

console.log(_.sampleSize(arr, 3)); // 👉️ [ 'hadz', 'bobby', '.' ]
console.log(_.sampleSize(arr, 3)); // 👉️ [ 'com', 'bobby', '.' ]

该sampleSize方法采用数组 和作为参数，并
从数组中n返回随机元素。n

在 JavaScript 中从数组中随机获取一个元素

从数组中获取随机元素：

  1. 使用Math.floor()和Math.random()方法获取数组中的随机索引。
  2. 使用方括号表示法访问随机索引处的数组。
索引.js
function getRandomElement(arr) {
  return arr[Math.floor(Math.random() * arr.length)];
}

const arr = ['bobby', 'hadz', 'com'];

console.log(getRandomElement(arr)); // 👉️ hadz
console.log(getRandomElement(arr)); // 👉️ com
console.log(getRandomElement(arr)); // 👉️ bobby

方括号中的表达式[]计算为数组中的随机索引。

如果数字有小数，则Math.floor函数

将数字向下舍入。

否则，该函数按原样返回数字。

索引.js
console.log(Math.floor(4.99)); // 👉️ 4
console.log(Math.floor(4.01)); // 👉️ 4
console.log(Math.floor(4)); // 👉️ 4

Math.random函数返回一个范围内的随机数0小于1。该函数可以返回0，但它永远不会返回1。

索引.js
console.log(Math.random()); // 👉️ 0.5434554...
console.log(Math.random()); // 👉️ 0.3348588...
console.log(Math.random()); // 👉️ 0.8547547...

我们将调用的结果Math.round()乘以数组的长度。

索引.js
function getRandomElement(arr) {
  return arr[Math.floor(Math.random() * arr.length)];
}

max我们可以获得的值是，如果返回Math.random()，0.9999...我们将数字乘以数组的长度 (3)。

我们会得到一个值2.997。

索引.js
console.log(0.999 * 3); // 👉️ 2.997

但是，JavaScript 索引是从零开始的，因此数组中最后一个元素的索引为array.length - 1(3 – 1 = 2)。

这就是为什么我们使用该Math.floor()函数将数字向下舍入到最接近的整数，即2（数组中的最后一个索引）。

索引.js
console.log(0.999 * 3); // 👉️ 2.997

console.log(Math.floor(0.999 * 3)); // 👉️ 2

相反，min我们可以获得的值是 if Math.random()returns 0。

然后我们将0乘以数组的长度并返回0。

索引.js
console.log(0 * 3); // 👉️ 0

调用该Math.floor()函数0将返回0，我们将访问数组中的第一个元素。

0该表达式返回从up to （但不包括） 的
索引array.length。

使用这种方法时，我们永远无法越界访问索引。

索引.js
function getRandomElement(arr) {
  return arr[Math.floor(Math.random() * arr.length)];
}

const arr = ['bobby', 'hadz', 'com'];

console.log(getRandomElement(arr)); // 👉️ hadz
console.log(getRandomElement(arr)); // 👉️ com
console.log(getRandomElement(arr)); // 👉️ bobby

该getRandomElement函数将一个数组作为参数，并从该数组中随机返回一个元素。

从数组中随机获取一个元素lodash

或者，您可以使用lodash图书馆。

首先，lodash如果您还没有安装该模块。

壳
# 👇️ initialize a package.json file
npm init -y

npm install lodash

您现在可以导入并使用
lodash.sample方法。

索引.js
import _ from 'lodash';

const arr = ['bobby', 'hadz', 'com'];

console.log(_.sample(arr)); // 👉️ bobby
console.log(_.sample(arr)); // 👉️ com
console.log(_.sample(arr)); // 👉️ bobby

该sample()方法从提供的集合中返回一个随机元素。

使用位非（~）从数组中获取随机元素

您还可以使用按位非 (~) 运算符从数组中获取随机元素。

索引.js
function getRandomElement(arr) {
  return arr[~~(Math.random() * arr.length)];
}

const arr = ['bobby', 'hadz', 'com'];

console.log(getRandomElement(arr)); // 👉️ hadz
console.log(getRandomElement(arr)); // 👉️ com
console.log(getRandomElement(arr)); // 👉️ bobby

请注意，我们用两个按位非 (~) 运算符替换了对该方法的调用Math.floor()。

两个
按位 NOT (~)
运算符将数字舍入到0.

索引.js
console.log(~~1.9999); // 👉️ 1
console.log(~~1.0011); // 👉️ 1

这样我们就可以确保表达式不会返回越界的数组索引。

您选择哪种方法是个人喜好的问题。我会使用该
Math.floor()选项，因为我发现它更明确且更直观。

额外资源

您可以通过查看以下教程来了解有关相关主题的更多信息：