帮助了 AmazingCounters.com 位小伙伴

js map 实战

 

 

需求:后端需要一个数组,里面的结构是

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

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

var users = [
  {name: "张含韵", "email": "zhang@email.com"},
  {name: "江一燕",   "email": "jiang@email.com"},
  {name: "李小璐",  "email": "li@email.com"}
];

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

// 输出emails :["zhang@email.com", "jiang@email.com", "li@email.com"]
 
image.png

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

var users = [
  {name: "张含韵", "email": "zhang@email.com"},
  {name: "江一燕",   "email": "jiang@email.com"},
  {name: "李小璐",  "email": "li@email.com"}
];

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

posted on 2020-07-13 08:53  云的旋律  阅读(292)  评论(0编辑  收藏  举报

导航

前端攻城狮分享群