如何使用索引数组获取JavaScript数组中的多个元素？

单个元素的索引访问 #

获取数组的第二个元素，直接使用索引1访问即可：

const arr = [2, 3, 5, 7, 11]
console.log(arr[1])

输出结果为 3

问题：索引数组无法直接获取多元素 #

尝试用索引数组获取多个元素时，下面的写法不会生效：

const arr = [2, 3, 5, 7, 11]
const indices = [1, 2, 4]
console.log(arr[indices])

预期输出是 [3, 5, 11]，但实际返回 undefined

原因 #

JavaScript数组的索引仅接受数字或可转换为数字的字符串。当传入数组作为索引时，该数组会被隐式转换为字符串"1,2,4"，原数组中不存在这个索引对应的元素，因此返回undefined。

解决方法 #

方法1：使用Array.map()

遍历索引数组，逐个取出原数组对应位置的元素：

const arr = [2, 3, 5, 7, 11]
const indices = [1, 2, 4]
const result = indices.map(idx => arr[idx])
console.log(result) // 输出: [3, 5, 11]

方法2：使用Array.reduce()

通过累加构建结果数组：

const arr = [2, 3, 5, 7, 11]
const indices = [1, 2, 4]
const result = indices.reduce((acc, idx) => {
  acc.push(arr[idx])
  return acc
}, [])
console.log(result) // 输出: [3, 5, 11]

方法3：封装工具函数

如果需要频繁使用，可以封装成复用函数：

function pickElements(arr, indices) {
  return indices.map(idx => arr[idx])
}

const arr = [2, 3, 5, 7, 11]
const indices = [1, 2, 4]
console.log(pickElements(arr, indices)) // 输出: [3, 5, 11]

内容的提问来源于stack exchange，提问作者at.