博客

菜鸟教程：JavaScript Array map()

JavaScript Array map()

定义和用法
map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

map() 方法按照原始数组元素顺序依次处理元素。

注意： map() 不会对空数组进行检测。

注意： map() 不会改变原始数组。

对数组里的某个属性b（数组），提取指定的值d，处理成数组，并放入了c

var list = [
    {
      "a": 1,
      "b": [{"d": "1","e":2}, {"d":"3","e":4}],
      "c": null
    },
    {
      "a": 2,
      "b": [{"d": "1","e":2}, {"d": "3","e":4}],
      "c": null
    },
  ]
list.forEach(a => {
  // console.log(a.b.map(i=>i.d))
  a.c = a.b.map(i=>i.d)
})
console.log(list);

这里就不放结果图了，直接复制放谷歌F12就能看见

实际前端业务代码是这样的，使用最“通俗易懂”的写法，2层循环

data.records.forEach(group => {
    var roleIds = []
    var roleNames = []
    group.roles.forEach(role => {
      if (role) {
        roleIds.push(role.id)
        roleNames.push(role.name)
      }
    })
    group.roleIds = roleIds
    group.roleNames = roleNames
  });

使用map()，简化后

data.records.forEach(group => {
  group.roleIds = group.roles.map(role => role.id);
  group.roleNames = group.roles.map(role => role.name);
})

美观，档次也提升了呢。

注意：map里面的function 不能有一些其他代码（=> 这里），比如加个if. 都会使程序不正确。所有必须要保证数据不为null，才能这样使用

group.roles.map(role => {if (role) role.id});// 这样就不行了，呜呜，会undefined。