Array.map返回值不符合预期，询问结果[4,5,6]的产生原理

function copyArrayAndManipulate(array, instructions) {
  return array.map(function (element, index, arr) {
    return arr.push(instructions(element));
  });
}
function multiplyBy2(input) {
 return input * 2;
}
var result = copyArrayAndManipulate([1, 2, 3], multiplyBy2);
console.log(result)

结果生成逻辑 #

核心是两个API的特性和引用传递规则：

• map 回调的第三个参数 arr 是正在被遍历的原数组本身的引用，不是复制出的新数组
• push 方法的返回值是操作完成后数组的最新长度，不是修改后的数组本身
• map 的执行次数在遍历启动前就确定，等于数组初始长度，后续数组变长不会增加遍历次数

逐轮执行过程：

1. 初始传入待遍历数组为 [1, 2, 3]，初始长度为3，map 确定执行3次回调
2. 第一轮回调（处理元素1）：
   调用multiplyBy2(1)得到2，执行arr.push(2)，原数组变为[1,2,3,2]，push返回新长度4，存入结果数组第0位
3. 第二轮回调（处理元素2）：
   调用multiplyBy2(2)得到4，执行arr.push(4)，原数组变为[1,2,3,2,4]，push返回新长度5，存入结果数组第1位
4. 第三轮回调（处理元素3）：
   调用multiplyBy2(3)得到6，执行arr.push(6)，原数组变为[1,2,3,2,4,6]，push返回新长度6，存入结果数组第2位

最终map返回的结果数组就是[4,5,6]。

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