js map 实战

Posted 2020-12-17 云の旋律

 

 

需求：后端需要一个数组，里面的结构是

let arr = [{"url":‘http://www.xxx.com‘,"test_id": 1001}]

习惯了for of一把梭的我，想试试用map来实现这个需求。
进行测试验证：

var users = [
  {name: "张含韵", "email": "[e-mail]"},
  {name: "江一燕",   "email": "[e-mail]"},
  {name: "李小璐",  "email": "[e-mail]"}
];

var emails = users.map(function (user) { return user.email; });

// 输出emails ：["[e-mail]", "[e-mail]", "[e-mail]"]

 

image.png

说来惭愧，对于map这个内置函数，总没掌握它的精髓，知道它可以做循环，也知道可以拿来去重，但总是用不灵活。
（map方法的作用不难理解，“映射”嘛，也就是原数组被“映射”成对应新数组。）
接着上面的问题我们继续：

var users = [
  {name: "张含韵", "email": "[e-mail]"},
  {name: "江一燕",   "email": "[e-mail]"},
  {name: "李小璐",  "email": "[e-mail]"}
];

var emails = users.map(function (user) {user.age = 12; ruturn user });

// 输出 users ：
// 输出 emails ：

 

image.png

发现原来的数组被改变了，这个是什么原因呢？

群友A解答道: user本身也是对象，会有内存指向，直接赋值属性会改变原来的对象

那下一步是考虑怎么才能不影响原数组？

这里群友给了几种解决思路：

1. 也可以先 JSON.parse(JSON.stringify(user))处理，也可以clone后再处理

2. users.map((user) => ({ ...user, value: 123 })) // 这里用了解构的语法

3.反正都是用map，内部就是怎么处理对象用到同个内存的问题

4.有空多去翻下 MDN

5.喜欢短的吗 this.newObj.images && this.newObj.images.map(func)

这个地方，加解构和不加解构有什么区别呢？

// 加了不改变原数组，数组内的对象是个新对象了，不加就是在原对象上更改（原数组会变）
users.map((user) => ({ ...user, value: 123 })) // 这里用了解构的语法

感谢群友提供的图：

定义数组里面有对象，理论上是开辟了多个内存空间，每个对象（含数组）都有各自的指向内存空间

 

image.png

写在最后，很多东西总觉得会了，其实实际的操作中会遇到很多细节问题。

结论就是多思考，多实操，多去翻下 MDN