ES5 数组方法

ES5 为 Array 做了大幅拓展。

.indexOf / .lastIndexof

该方法用于查找数组内指定元素的位置,查到第一个之后返回其索引,没有找到则返回-1。lastIndexOf反向搜索,查到第一之后,返回其索引,但顺序还是取正序。

1
2
3
4
var arr = [2,3,4,"root","evenyao",3,8,7]
console.log(arr.indexOf(3)) //1
console.log(arr.indexOf(11)) //-1
console.log(arr.lastIndexof(3)) //5


forEach

遍历数组,参数为一个回调函数,回调函数有三个参数

  1. 当前元素 value
  2. 当前元素索引值 i
  3. 整个数组 array
    1
    2
    3
    4
    5
    6
    7
    var arr = [1,2,3,4,5,6]

    arr.forEach(function(value,i,array){
    array[i]= value + 1
    })

    console.log(arr); //[2, 3, 4, 5, 6, 7]
1
2
3
4
5
6
7
8
var arr  = [3,4,"evenyao"]
arr.forEach(function(value,index){
console.log('' + value+value)
})

//33
//44
//evenyaoevenyao


map

遍历数组,回调函数。返回值做操作之后组成一个新数组返回,新数组索引结构和原数组一致,原数组不变

1
2
3
4
5
6
7
var arr = [1,2,3,4,5,6]
var arr2 = arr.map(function(val){
return val * val
})

console.log(arr) //[1, 2, 3, 4, 5, 6]
console.log(arr2) //[1, 4, 9, 16, 25, 36]


every、some

逻辑判定,回调函数返回一个布尔值

  • every是所有函数的每个回调函数都返回true,才返回true,遇到false就终止执行,返回false
    1
    2
    3
    4
    var arr = [1,2,-1,0,5]
    arr.every(function(val){
    return val>0
    }) //false

every false

1
2
3
4
var arr = [1,2,1,3,5]
arr.every(function(val){
return val>0
}) //true

every true

  • some是存在有一个回调函数返回true就终止执行并返回true,否则返回false
    1
    2
    3
    4
    var arr = [1,2,-1,0,5]
    arr.some(function(val){
    return val>0
    }) //true

some true

filter

返回数组的一个子集,回调函数用于逻辑判断是否返回,返回true则把当前元素加入到返回数组中,false则不加。新数组只包含返回true的值,原数组保持不变。

1
2
3
4
5
6
7
var arr = [3,5,6,-1,-2,-3]
var arr2 = arr.filter(function(val){
return val > 0
})

console.log(arr) //[3, 5, 6, -1, -2, -3]
console.log(arr2) //[3, 5, 6]

其他案例:

1
2
3
4
5
6
7
8
9
10
11
var users = [
{ name: "John", age: 15 },
{ name: "Pete", age: 19 },
{ name: "Ann", age: 12 }
]

//筛选age > 18的用户
var age18 = users.filter(function(user){
return user.age > 18
})
console.log(age18)

filter

1
2
3
4
5
6
7
8
9
10
11
var users = [
{ name: "John", age: 15 },
{ name: "Pete", age: 19 },
{ name: "Ann", age: 12 }
]

//筛选姓名中含有'n'的用户
var namehasn = users.filter(function(user){
return user.name.indexOf('n')>-1
})
console.log(namehasn)

filter2

reduce

遍历数组,调用回调函数,将数组元素组合成一个值,不影响原数组

  1. 回调函数:把两个值合为一个,返回结果
  2. value,一个初始值,可选
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    var arr = [3,4,5]
    arr.reduce(function(v1,v2){
    return v1 + v2
    }) //12
    arr.reduce(function(v1,v2){
    return v1 * v2
    }) //60

    //含value初始值
    arr.reduce(function(v1,v2){
    return v1 + v2
    },10) //22
    arr.reduce(function(v1,v2){
    return v1 * v2
    },10) //600

补充:

  • 实现一个reduce函数,该函数和原生的reduce的作用
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    function sameReduce(arr, fn, initValue){
    //三目运算符判断初始值是否是undefined,若是则返回空数组;若不是返回初始值和数组的连接
    var arr2 = (initValue !== undefined?[]:[initValue]).concat(arr)
    //判断数组的长度是否大于1,若大于1,则把前两个数组的数值拿出来替换成fn
    while(arr2.length >1){
    // console.log(arr2) 可以观察每一次改变的数组情况,但我这里只需要结果,所以就注释掉
    arr2.splice(0,2, fn(arr2[0], arr2[1]))
    }
    return arr2[0]
    }

    var arr = [1, 2, 3]
    var result = sameReduce(arr, function(v1, v2){
    return v1 + v2
    }, 10)
    console.log(result)


参考链接

参考 浅谈常见数组的方法

本文结束  感谢您的阅读
0%