js 中数组的 map() 函数的基本使用

map() 是对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组

 一、定义和用法

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

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

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

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

二、语法

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

 注意：返回值返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值

下面是一个示例

// 正常的写法
var arr = [1, 2, 3, 4, 5];

var newArr = arr.map((item) => {
    return item * item;
})

console.log(newArr)  // [1, 4, 9, 16, 25]

// 简便解法
var arr = [1, 2, 3, 4, 5];

var newArr = arr.map(item => item * item)

console.log(newArr)

map() 接收的回调函数，可以有多个参数。通常我们仅使用第一个参数，表示数组的某个元素。回调函数还可以接收另外两个参数，表示元素的位置和数组本身。

var arr = ['A', 'B', 'C']
var result = arr.map(function(element, index, self) {
    console.log(element) // 依次打印 'A', 'B', 'C'
    console.log(index) // 依次打印 0, 1, 2
    console.log(self) // self 就是变量 arr
    return true
})

三、map() 方法与 filter() 方法的区别

举一个简单的例子

var arr = [2, 6, 5, 1, 3, 4]

var result1 = arr.map(function (item,index,array) {
  return item>1
})

var result2 = arr.filter(function (item,index,array) {
  return item>1
})
console.log(result1) // [ true, true, true, false, true, true ]
console.log(result2) // [ 2, 6, 5, 3, 4 ]

所以，由此可以看出，map 的结果只是对当前元素调用函数后（x是否大于1）的结果。而 filter 会将结果为 true 的数组存到新的数组里面。

总结：当想改变数组的时候用 map，想对数组进行过滤用 filter