map()、filter()、find()处理数组的区别

map()

语法：

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

返回值：返回一个新数组，新数组中的元素为原始数组中的元素调用函数处理后的值。
是否改变原数组：不会改变原数组

var arr = [1,2,3,4,5]
var arr2 = arr.map((item,index)=>{
	return item*item
})
console.log(arr2)       //新数组 arr2=[1,4,9,16,25]
console.log(arr)        //原数组 arr=[1,2,3,4,5]

find()

语法

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

返回值：返回数组中符合条件的第一个元素的值!返回值不是数组!
是否改变原数组：不会改变原数组

var arr = [
    {
        name: 'zhen',
        age: 26
    },
    {
        name: 'jia',
        age: 29
    },
    {
        name: 'zhen',
        age: 18
    }
]
var findArr = arr.find((item, index) => {
    console.log(index)
    return item.name === 'zhen'
})
console.log(findArr)

// 返回结果
// 0
// {name: 'zhen', age: 26}

filter()

语法

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

返回值：返回一个新数组 是原数组中符合条件的所有元素。
是否改变原数组：不会改变原数组

var arr = [
    {
        name: 'zhen',
        age: 26
    },
    {
        name: 'jia',
        age: 29
    },
    {
        name: 'zhen',
        age: 18
    }
]
var filter = arr.filter((item, index) => {
    console.log(index)
    return item.name === 'zhen'
})
console.log(filter)
// 返回值
// 0
// 1
// 2
// [{name:'zhen', age:26}, {name:'zhen', age: 18}]

find() 🆚 filter() 🆚 map()

• find 返回满足条件的第一个元素，满足条件后不再处理剩余元素
• filter 返回满足条件的所有元素的数组集合，原数组中的每个元素都会被处理
• map 返回经过函数处理的所有元素的数组集合，原数组中的每个元素都会被处理