map()的用法

JavaScript Array map() 方法

先说说这个方法浏览器的支持：
支持五大主流的浏览器，
特别注意：IE 9 以下的浏览器不支持，只支持IE 9以上的版本的浏览器
特别注意：IE 9 以下的浏览器不支持，只支持IE 9以上的版本的浏览器
特别注意：IE 9 以下的浏览器不支持，只支持IE 9以上的版本的浏览器

一、定义和用法

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素顺序依次处理元素。
注意： map() 不会对空数组进行检测。
注意： map() 不会改变原始数组。

二、语法

array.map(function(currentValue,index,arr), thisValue)

三、参数说明

currentValue: 必须。当前元素的值
index: 可选。当前元素的索引值
arr: 可选。当前元素属于的数组对象
thisValue: 可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。
如果省略了 thisValue，或者传入 null、undefined，那么回调函数的 this 为全局对象。

例子一：

把数组里每个值乘以2并返回一个新数组

ar arr = ["中国", "美国", "俄罗斯"];
    let newArr = arr.map((record,k) => {
        console.log(record)
        console.log(k)
    })
    // 1. 把数组里每个值乘以2并返回一个新数组
    let arr1 = [7,10,3,2]
    const newArr1 = arr1.map((record,k) => {
        return record * 2
    })
    console.log(newArr1) // 打印：  [14, 20, 6, 4]

例子二：

把数组里面每个值前面都加一个统一的姓叫“张”，并返回一个新数组

    // 2.把数组里面每个值前面都加一个统一的姓叫“张”，并返回一个新数组
    let arr2 = ['小米','华为','苹果']
    let newArr2= arr2.map((record,k) => {
        return '张' + record
    })
    console.log(newArr2)  // 打印： ['张小米', '张华为', '张苹果']

例子三：

3.遍历数组里每个对象，并返回新数组（要求新数组里每个对象有一个新的属性叫iq（值为50-100随机整数））,重点：不能影响原数组里面的对象

    let arr3 = [
        {name: '孙悟空',age:500},
        {name: '猪八戒',age:300},
        {name: '沙僧',age:309},
        {name: '唐三藏',age:200},
        {name: '白龙马',age:100}
    ]
    let newArr3 = arr3.map((record, k) => {
        return {
            name: record.name,
            age: record.age,
            iq:Math.floor(Math.random()*(100-50+1)+50)
        }
    })
    console.log(newArr3)

例子三的打印结果：

例子四：

4. 遍历数组里每个对象，并返回新数组，要求新数组里每个对象只有name属性和值(并且不能影响原来数组里对象的属性和值)

let arr4 = [
        {name: '孙悟空',age:500},
        {name: '猪八戒',age:300},
        {name: '沙僧',age:309},
        {name: '唐三藏',age:200},
        {name: '白龙马',age:100}
    ]
    let newArr4 = arr4.map((record,k) => {
        return {
            name: record.name
        }
    })
    console.log(arr4)
    console.log(newArr4)

例子四的打印结果：

例子五：

重构数组：用name的值作为key,age的值作为value，用来重构数组
方法一：

    // 方法一：结构出对象的键值对
    let newArr41 = arr4.map(({name,age}) => {
        return {
            [name]: age
        }
    })
    console.log(newArr41)

例子五中方法一的打印结果：

方法二：

    // 方法二：
    let newArr42 = arr4.map((record,k) => {
        return{[record.name]: record.age}
    })
    console.log(newArr42,'newArr42')

例子五中方法二的打印结果：