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"]
说来惭愧,对于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 :
发现原来的数组被改变了,这个是什么原因呢?
群友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 })) // 这里用了解构的语法
感谢群友提供的图:
定义数组里面有对象,理论上是开辟了多个内存空间,每个对象(含数组)都有各自的指向内存空间
写在最后,很多东西总觉得会了,其实实际的操作中会遇到很多细节问题。