JS怎么遍历数组并将元素值全部扩大一倍后输出结果

# JS怎么遍历数组并将元素值全部扩大一倍后输出结果

在JavaScript开发中，数组遍历和元素操作是最基础且高频的操作场景。本文将详细介绍6种实现数组遍历并扩大元素一倍的方案，通过代码示例对比不同方法的优缺点，帮助开发者根据实际场景选择最佳实践。

## 一、基础for循环方案

最传统的数组遍历方式，通过索引逐个访问元素：

```javascript
const arr = [1, 2, 3, 4];
const doubled = [];

for (let i = 0; i < arr.length; i++) {
  doubled.push(arr[i] * 2);
}

console.log(doubled); // [2, 4, 6, 8]

特点： - 兼容性最好（支持ES3） - 性能最优（尤其在大数组场景） - 代码略显冗长

二、for…of循环（ES6+）

ES6引入的更简洁的迭代语法：

const arr = [1, 2, 3, 4];
const doubled = [];

for (const num of arr) {
  doubled.push(num * 2);
}

console.log(doubled); // [2, 4, 6, 8]

优势： - 避免索引管理 - 可配合break/continue控制流程 - 支持迭代器协议的可迭代对象

三、Array.prototype.map()方法

函数式编程的典型代表：

const arr = [1, 2, 3, 4];
const doubled = arr.map(num => num * 2);

console.log(doubled); // [2, 4, 6, 8]

核心特点： - 不改变原数组（纯函数） - 自动处理数组长度 - 链式调用能力（如.filter().map()）

四、forEach方法

侧重遍历过程而非返回值的方案：

const arr = [1, 2, 3, 4];
const doubled = [];

arr.forEach(num => {
  doubled.push(num * 2);
});

console.log(doubled); // [2, 4, 6, 8]

适用场景： - 需要执行副作用操作 - 不需要返回新数组时 - 相比for循环语义更明确

五、reduce方法实现

通过累积器实现数组转换：

const arr = [1, 2, 3, 4];
const doubled = arr.reduce((acc, num) => {
  acc.push(num * 2);
  return acc;
}, []);

console.log(doubled); // [2, 4, 6, 8]

独特价值： - 适合需要复杂累积计算的场景 - 可同时实现filter/map等操作 - 函数式编程范式

六、现代ES2019新特性：flatMap

结合映射与扁平化操作：

const arr = [1, 2, 3, 4];
const doubled = arr.flatMap(num => [num * 2]);

console.log(doubled); // [2, 4, 6, 8]

注意点： - 设计初衷是处理嵌套数组 - 在此场景下与map效果相同 - 兼容性要求较高（Node 11+）

七、性能对比与选择建议

通过jsPerf测试（100,000个元素数组）：

决策指南： 1. 追求极致性能：选择传统for循环 2. 代码可读性优先：map()方法 3. 需要中断遍历：for…of循环 4. 复杂数据转换：reduce()

八、特殊场景处理

1. 稀疏数组处理

const sparseArr = [1,,3];
// map会跳过空位但保留空位
console.log(sparseArr.map(x => x * 2)); // [2, empty, 6] 

// 如需过滤空值
console.log(sparseArr.filter(Boolean).map(x => x * 2));

2. 类数组对象转换

function doubleArgs() {
  return Array.from(arguments).map(x => x * 2);
}
console.log(doubleArgs(1, 2, 3)); // [2, 4, 6]

九、延伸思考

1. 不可变数据：在React等框架中，优先选择map等不改变原数组的方法
2. 并行处理：Web Worker中可分割数组进行并行计算
3. 类型化数组：对Int32Array等类型化数组操作时需注意溢出问题

掌握多种数组遍历方法，能够帮助开发者在不同场景下写出更高效、更优雅的代码。建议根据项目实际需求选择最适合的方案，而非一味追求最新语法。 “`

文章总计约1100字，涵盖6种实现方案、性能对比和特殊场景处理，采用Markdown格式编写，包含代码块、表格等元素增强可读性。