如何用.map()方法基于已有数组创建新数组？为何结果元素重复？

1. 如何使用.map()方法基于现有数组创建新数组？ #

map() 是数组的遍历方法，它会逐个处理原数组的每个元素，把回调函数的返回值收集起来组成新数组，不会修改原数组本身。

基础用法示例：

// 定义原数组
const originalArr = [1, 2, 3];
// 用map生成新数组，每个元素乘10
const newArr = originalArr.map(item => item * 10);
console.log(newArr); // 输出 [10, 20, 30]
console.log(originalArr); // 原数组保持不变，输出 [1, 2, 3]

你可以在回调函数里编写任意逻辑，只要返回对应的值，就能生成符合需求的新数组。

2. 为什么结果中出现重复元素？ #

问题出在你使用的 fill() 方法上：

• 首先你的 arr 是 [0, 1]，arr.map(item => item * 10) 确实生成了正确的目标数组 [0, 10]。
• 但 fill() 的作用是把数组的所有元素替换成传入的参数，你的原数组有2个元素，所以执行 arr.fill([0, 10]) 后，arr 会变成 [[0, 10], [0, 10]]，自然显示出重复内容。

如果想直接展示map生成的结果，不需要用fill，直接写：

document.getElementById("demo").innerHTML = arr.map(item => item * 10);

这样就能得到 0,10 的正确结果。

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