Javascript数组方法：map()方法

目录

作用：

语法

参数说明

实例

基本用法

数组嵌套对象

理解map的thisValue参数

 模拟map()方法底层

---

作用：

1.该方法会创建一个新的数组，不会改变原数组

 2.将数组中的每个元素进行处理，将返回的值组成一个新的数组（可以理解成有一个for循环，遍历这个数组，并且对每一个元素进行处理，并把处理后的值通过return加入至新数组）

语法

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

参数说明

function(currentValue, index,arr):必须。数组中的每个元素都会执行这个函数

参数	描述
currentValue	必须。当前元素的值
index	可选。当前元素的索引值
arr	可选。当前元素属于的数组对象

thisValue

可选。可指定 function 里的 “this” 的值。

实例

基本用法

        let arr = [1, 2, 3];
        // 声明一个变量接受返回的新数组
        let new_arr = arr.map(function (item, idx) {
            console.log(item, '=>', idx);
            return item * 2; //把返回的值组成一个新数组
        })
        console.log(new_arr);

数组嵌套对象

        var arr = [{
                key: 'a',
                value: 10
            },
            {
                key: 'b',
                value: 20
            },
            {
                key: 'c',
                value: 30
            }
        ];
        // 目标：将arr数组转为[{a:10},{b:20},{c:30}]
        var new_arr = arr.map(function (obj,idx) {
            // 看下此时的两个参数是什么
            console.log('idx:',idx,'  元素（对象）：',obj)
            // 用一个临时的对象存储
            var tempObj = {};
            tempObj[obj['key']] = obj.value;
            // 返回这个临时对象
            return tempObj;
        });
        console.log(new_arr);

 

理解map的thisValue参数

        arrA = [1,2,3];
        arrB = [4,5,6];
        arr_new = arrA.map(function(item,idx){
            // this指向了arrB,将arrB的数组返回组成新数组
            return this[idx];
        },arrB);
        // 原数组不变
        console.log('arrA:',arrA);
        console.log('arrB:',arrB);
        // 返回的新数组[4, 5, 6]
        console.log('arr_new:',arr_new);

 模拟map()方法底层

        var Brray =function(arr) {
            this.arr = arr,
            this.map = function(callback) {
                var newArr = [];
                for (var i = 0; i < this.arr.length; i++) {
                    newArr[i] = callback(this.arr[i], i, this.arr);
                }
                return newArr;
            }
        }
        var newArr = new Brray([1,2,5]);
        var newArrr = newArr.map(function (item, idx, arr) {
            return item * 2;
        });
        console.log(newArrr);