JavaScript中Map方法的详解
map()方法返回一个新数组,数组中的元素为原始数组元素调用函数处理的后值。map()方法按照原始数组元素顺序依次处理元素。
Map方法是常用到的对数组元素进行修改的重要函数
map定义和方法
map()方法返回一个新数组,数组中的元素为原始数组元素调用函数处理的后值。
map()方法按照原始数组元素顺序依次处理元素。
注意:
map不会对空数组进行检测
map不会改变原始数组
语法:
array.map(function(currentValue, index, arr), thisIndex)
参数说明:
function(currentValue, index, arr):必须。为一个函数,数组中的每个元素都会执行这个函数。其中函数参数:
currentValue:必须。表述当前元素的的值(item)
index:可选。当前元素的索引也就是第几个数组元素。
arr:可选。当前元素属于的数组对象
thisValue:可选。对象作为该执行回调时使用,传递给函数,用作"this"的值
示例1:
将数组里的int类型的数据换成字符串类型
var arr = [1,2,3,4,5,6,7,8,9,10];
var arr2 = arr.map(String);
console.log(arr);//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log(arr2);//['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
示例2:
对原数组元素进行平方后再赋值给新的数组
var arr = [1,2,3,4,5,6,7,8,9,10];
var arr2 = arr.map(function(currentValue){
return currentValue*currentValue;
});
console.log(arr2);//[1, 4, 9, 16, 25, 36, 49, 64, 81, 100]
注意事项:
当map函数内部使用箭头函数的时候,无论是否带有thisValue,函数内部的this都指向全局window
var arr = [1,2,3,4,5,6,7,8,9,10];
var arr1 = [2,2,2,2,2,2,2,2,2,2];
var arr2 = arr.map((currentValue, index, arr) => {
console.log(this);//window
},arr1);
当map函数内部使用function形式的时候,如果带有thisValue,函数内部的this指向thisValue
var arr = [1,2,3,4,5,6,7,8,9,10];
var arr1 = [2,2,2,2,2,2,2,2,2,2];
var arr2 = arr.map(function(currentValue, index, arr){
console.log(this);//arr1
},arr1);
map 底层封装
1. 准备一个新的数组
2. 遍历原始数组, 分别执行函数
3. 把每依次函数执行候得返回值放在新数组里面
4. 把新数组当作 map 得返回值给出来
var arr = [10, 100, 1000]
// 我自己写的一个函数
// 我要想用, 必须是 myMap(a, b, c)
// 我为了可以想数组常用方法一样
// 我需要把这个方法放在 Array.prototype 上
function myMap(fn) {
// fn 就是你调用 myMap 得时候传递得函数
// this 就是调用 myMap 得那个数组
// 只要我写 fn()
// 如果我写 fn(1, 10, 100)
// 都是在调用你书写 myMap 得时候传递得那个函数
var newArr = []
// this 是调用 myMap 得数组
// 遍历调用 myMap 得数组
for (var i = 0; i < this.length; i++) {
// 这里得代码会根据数组得长度来执行
// 在 for 循环里面, this[i] 就是数组得每一项
// 在 for 循环里面, i 就是数组得每一项得索引
var res = fn(this[i], i, this)
newArr.push(res)
}
// 当循环结束, newArr 就是里面有三个数据, 分别是对原始数组每一个数据得操作
return newArr
}
Array.prototype.myMap = myMap
var res = arr.myMap(function (item, index, arr) {
// console.log(item, index, arr)
return item * 1.3
})
console.log(res) // [13, 130, 1300]
更多推荐
所有评论(0)