JavaScript——es6 map 常见使用场景

一、明确问题和答案
问：map()有什么作用
答：方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值，
方法按照原始数组元素顺序依次处理元素。

二、收集例子
1、map的第一个参数为function，并且返回一个新数组

var data = [1,2,3,4];

var arrayOfSquares =data.map(function(item){
    return item*item
})

console.log(arrayOfSquares)
console.log(data)
// [1,4,9,16]
// [1,2,3,4]
得出结论：
1.旧数组中每一项都去执行这个方法，并返回新的值。
2.返回的新的值，组合成新的数组返回
3.旧数组的值不发生改变

2、map 的function，没有返回值是，每一项的返回值为null

var data = [1, 2, 3, 4];
var arr = data.map(function() {});
console.log(data);
// [1, 2, 3, 4]
console.log(arr);
// [undefined, undefined, undefined, undefined]

得出结论：
1. 当map函数里面，什么都不返回时，默认返回undefined

3、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
})

console.log(emails)
// ["zhang@email.com","jiang@email.com","li@email.com"]
console.log(emails.join(", "))
// zhang@email.com, jiang@email.com, li@email.com
得出结论：
当数组对象有多个属性时，可以生成新的指定属性值的数组

4、map 的第一个参数function，function有三个参数
currentValue：当前数组中的元素
index: 当前数组中的索引
arr: 当前被调用数组
function： 本身是一个循环，等同于 for ( let i =0, let <arr.length, i++) { }

var arr = ["a","b","c","d","e"];
        arr.map(function(currentValue,index,arr){
            console.log("当前元素"+currentValue)
　　　　　　　console.log("当前索引"+index)
            console.log("数组对象"+arr)
        })

/*
> 当前元素a
> 当前索引0
> 数组对象a,b,c,d,e
> 当前元素b
> 当前索引1
> 数组对象a,b,c,d,e
> 当前元素c
> 当前索引2
> 数组对象a,b,c,d,e
> 当前元素d
> 当前索引3
> 数组对象a,b,c,d,e
> 当前元素e
> 当前索引4
> 数组对象a,b,c,d,e

*/

5. 改变当前数组对象，特定状态的下的属性值

this.entryList.map(item => {
if (item.sysAutoJudge == 0) item.completed = false;
  if (item.sysAutoJudge == 1) {
    if (item.isSatisfy) {
      item.completed = true;
    } else {
      item.completed = false;
    }
  }
});
得出结论：可以用来改变数组对象本身的属性值

6.过滤掉接口数据不需要的值， 可以常用于下拉列表

this.personnel = res.obj.map(function (o) {
  return {
    value: o.pCode,
    label: o.cnName,
    pCode: o.pCode,
    workNo: o.workNo
  };
});
得出结论：可以用来过滤出自己需要的数据结构

7. 过滤出对象所有的属性值

let classList = {
    'oneClass': ['张三', '王五'],
    'twoClass': ['小明', '小米']
}
console.log(classList)
console.log(Object.keys(classList).map(function(item){
    return classList[item]
}))
//  返回结果
[
    [
        "张三",
        "王五"
    ],
    [
        "小明",
        "小米"
    ]
]

8. 把对象的已存在的key值 替换成索引key值

let days = {
    "1201": {
        "index": 1,
        "en": "Thu",
        "month": 12,
        "monthEn": "December",
        "date": "01",
        "year": 2022,
        "objArr": []
    },
    "1202": {
        "index": 2,
        "en": "Fri",
        "month": 12,
        "monthEn": "December",
        "date": "02",
        "year": 2022,
        "objArr": []
    }
}
let newVal = Object.values(days) // 获取属性值的数组
console.log(newVal)
[
    {
        "index": 1,
        "en": "Thu",
        "month": 12,
        "monthEn": "December",
        "date": "01",
        "year": 2022,
        "objArr": []
    },
    {
        "index": 2,
        "en": "Fri",
        "month": 12,
        "monthEn": "December",
        "date": "02",
        "year": 2022,
        "objArr": []
    }
]
// 将每一个属性值，赋值给一个索引属性
let daySortMsg = {}
newVal.map(item => {
    daySortMsg[item.index] = item
})
console.log(daySortMsg)
{
    "1": {
        "index": 1,
        "en": "Thu",
        "month": 12,
        "monthEn": "December",
        "date": "01",
        "year": 2022,
        "objArr": []
    },
    "2": {
        "index": 2,
        "en": "Fri",
        "month": 12,
        "monthEn": "December",
        "date": "02",
        "year": 2022,
        "objArr": []
    }
}

得出结论：通过Object.values 和map方法 改造成自己需要的数据结构