数组的高阶方法map filter reduce的使用

数组中常用的高阶方法：

　　foreach    map    filter    reduce    some    every

在这些方法中都是对数组中每一个元素进行遍历操作，只有foreach是没有返回值的，reduce是的回调函数中，是有四个参数的，下面说一下他们的基本用法

 

map:    映射,可以对数组中每个元素进行操作，并逐一返回，生成一个理想的新数组

arr.map(function(item,index,arr){
    ..............
})

//map方法内可以传入一个js自带的字段处理函数，需要注意的是传入的函数参数问题
let arr1 = [1,4,9]
let newArr1 = arr1.map(Math.sqrt)       //Math.sqrt() 只接受一个参数，所以默认接受的是数组内每一个元素   传入对数组的每一个元素进行开放
console.log(newArr1);        //  [1,2,3]

let arr2 = [1,4,9]
let newArr2 = arr2.map(parseInt)
console.log(newArr2);        // [1,NaN,NaN]        因为parseInt()可以接受两个参数，第一个参数是处理的数，第二个参数是转换的进制，在这里将数组中的下标当做了第二个参数，所以后两个元素是将4转为1进制，9转为2进制，都是NaN

//map可以对数组中的每个对象进行处理
let arr3 = [{a:1},{b:2},{c:3}]
// 对数组中的每个对象元素增加一个y属性，并且将每个新对象返回，组成一个新的数组
let newArr3 = arr3.map(item => {
    item.y = 0
    return item
})
console.log(newArr3);    //[{a:1,y:0},{b:2,y:0},{c:3,y:0}]

//返回对象中指定的字段，组成新数组
let arr4 = [{a:1,x:2},{a:2,x:2},{a:3,x:2}]
let newArr4 = arr4.map(item => item.a)
console.log(newArr4);        //[1, 2, 3]

filter：过滤(当返回值为ture时，才会返回当前处理的元素)：

//过滤掉数组中不符合的元素
let arr = [1,2,3]
ler newArr = arr.map(item => return item > 1)

// 过滤掉数组中空项，转为布尔为false的元素
let arr = [1,'',undefined,2,3]
let newArr = arr.filter(item => item)

// 过滤掉数组内不符合条件的对象
let arr = [{a:1},{a:2},{a:3}]
let newArr = arr.filter(item => item.a > 1)
console.log(newArr);    // [{a:2},{a:3}]

//过滤掉指定的空项，将没有x属性的对象过滤掉
let arr = [{a:1,x:2},{b:1},{c:1,x:3}]
let newArr = arr.filter(item => item.x)
console.log(newArr);

// 数组去重
var arr = [1,2,3,1,2,5,4,3,3,1]
var newArr = arr.filter((item,index,arr)=>{
return arr.indexOf(item) === index
})
console.log(newArr)

reduce：

    接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始合并，最终为一个值。

 

 callback(执行数组中每个值的函数，包含四个参数)        

     previousValue(上一次调用回调函数返回的值，或者是提供的初始值（initialValue）)

     currentValue(数组中当前被处理的元素)

     index（当前元素在数组中的索引）

    array（调用reduce的数组）      

 

reduce可以传一个初始值，也可以不传，直接，将previousValue当做初始值

初始值可以传任何类型的值

// 不传递初始值，直接以数组内的第一个元素为初始值。没传递初始值时，第一个参数就是上一次回调返回的值，这里的init依次是：1   3   6
let arr = [1,2,3,4]
let data = arr.reduce((init,now) => {
    return init+now
})
// data 为10

// 传递一个Number初始值，
//init第一次是初始值10，之后每次都是上一次回调函数返回的值：
10      11    13    16
let arr = [1,2,3,4]
let data = arr.reduce((init,now) => {
    return init+now
},10)
//data为20

//传递一个Object初始值.  使对象里的属性和某数组内的元素累加
let arr = [1,2,3,4]
let data = arr.reduce((init,now) => {
    init.sum = init.sum + now
    return init
},{sum:2})
console.log(data);  // {sum:12}

//对象内的某个属性进行累加
let arr = [
    {a:1,name:'a'},
    {a:2,name:'b'},
    {a:3,name:'c'},
]
let data = arr.reduce((init,now) => {
    return init + now.a
},0)
console.log(data);    // 6

//  查看某字符串，每个字符出现的次数
var str = 'abccacbbaacaa'
var obj = str.split('').reduce((init,now) => {
init[now] ? ++init[now] : init[now] = 1
return init
},{})
console.log(obj); //{a: 6, b: 3, c: 4}

.tb_button { padding: 1px; cursor: pointer; border-right: 1px solid rgba(139, 139, 139, 1); border-left: 1px solid rgba(255, 255, 255, 1); border-bottom: 1px solid rgba(255, 255, 255, 1) }
.tb_button.hover { borer: 2px outset #def; background-color: rgba(248, 248, 248, 1) !important }
.ws_toolbar { z-index: 100000 }
.ws_toolbar .ws_tb_btn { cursor: pointer; border: 1px solid rgba(85, 85, 85, 1); padding: 3px }
.tb_highlight { background-color: rgba(255, 255, 0, 1) }
.tb_hide { visibility: hidden }
.ws_toolbar img { padding: 2px; margin: 0 }