关于js的map奇怪问题

Question

代码1

let arr =[{"a":1},{"b":2}];
arr.map((item,index)=>{item.key = index;});
console.log(arr); // [{a: 1, key: 0}, {b: 2, key: 1}]

代码2

let arr1 =[{"a":1},{"b":2}].map((item,index)=>{item.key = index;});

console.log(arr1); // [undefined, undefined]

请问下为啥两个结果会不一样？

Answer 1

问题很明显
let arr1 =[{"a":1},{"b":2}].map((item,index)=>{item.key = index;})这个代码返回的就是[undefined,undefined]这个没错
为什么?
[{"a":1},{"b":2}].map((item,index)=>{item.key = index;})和arr.map((item,index)=>{item.key = index;})
明显不是一个东西。
首先要理解什么是Array.prototype.map()这个叫映射，映射既是：对每一个元素作用相同的操作，并返回指定得结果。
你前面的操作是对arr的每一个元素添加一个key ,让key = index ,并且没有返回
你后面的操作是对[{"a":1},{"b":2}]的每一个元素添加一个key,让key = index ，并且没有返回
其实你这2个操作返回的都是[undefined,undefined]如果你要让你的第二个代码得到正确的结果，改成这样

let arr1 =[{"a":1},{"b":2}].map((item,index)=>{
    item.key = index;
    return item;
});
console.log(arr1);

结果就如你所料了。

Answer 2

map返回一个新数组,
你应该打印这个

arr.map((item,index)=>{item.key = index;});

的值,而不是arr
你map回调里没写return 就是undefined

Answer 3

因为你用的箭头函数，{}默认是函数体,并不是你想要的省略return并且返回一个对象
在1里面 相当于循环arr 在每一项里添加了一个key

在2里面 相当于循环了一个长度为2的数组，并且给这个数组加了个key，但是没有返回值

建议看一下map的使用方法，当返回的是{}的时候不要省略return

Answer 4

map 函数中 item.key = index 修改的是[{"a":1},{"b":2}]数组中的对象，return item 返回的是新数组中的成员，所以实际上这段代码：

1. 修改了原数组 arr，
2. 返回了新数组 arr1

let arr = [{"a":1},{"b":2}];
let arr1 = arr.map((item,index) => {
  item.key = index;
  return item;
});

所以代码1和代码2：

1. item.key = index item 是对象且直接修改 item 的这种做法会修改原数组成员；
2. arr 和 arr1 引用指向的不是同一个数组；
3. 代码2中 map 函数应该 return，否则就会出现 [undefined, undefined] undefined 数组这种情况。

Answer 5

代码一相当于

let arr = ([{"a":1},{"b":2}];
arr.map((item,index)=>{item.key = index;});  // map的返回值没有被变量保存，同时arr变量内的数据不变。
console.log(arr);  // 所以这里返回原arr变量内的数据

代码二相当于

let arr1 = ([{"a":1},{"b":2}].map((item,index)=>{item.key = index;})); // 也就是先执行右边表达式

console.log(arr1); // [undefined, undefined]    // 所以arr1实际上获取到的是map的返回结果

map是不改变调用数组的，而是返回新数组给你。
所以不是map函数有问题，这只是你代码的写法有问题而已。

Answer 6

很正常，学习一下对象突变就知道了。第一种情况你直接修改了数组中对象的属性

第二种情况返回新的数组，但是数组回调函数并没有返回