Javascript 基础夯实——数组高级方法的使用

2017-10-22 本文已影响63人 ac68882199a1

数组是我们使用十分频繁的一种数据类型，是否能够熟练掌握数组的高级方法，将会直接影响我们的工作效率。在开始本文之前，小伙伴们可以先看下之前关于数组遍历的文章，里面的内容在本文中将不会再赘述：

过滤方法 filter

将原数组中符合预期规则的元素作为一个新的数组返回

const array1 = [1,4,5,6,2,3,8,9,0]

const array2 = array1.filter((item, index, array) => {
    return item > 5
}) // [6, 8, 9]

上面的代码是 filter 方法的使用方式，filter 接收两个参数，并最终返回一个新的数组。filter 的两个参数分别是：

第一个是回调函数。回调函数有三个参数分别当前的元素、当前元素的索引、原数组，可以在回调函数中进行一些操作，从而判断是否要保留这个元素，如果要保留，则回调函数需要返回 true ，反之则返回 false

在上面的代码中，只要当前的元素大于 5 ，item > 5 就会返回 true ，从而将该值保留，因此将原数组过滤后的新数组是 [6, 8, 9]

第二个参数用于指定回调函数执行时，this 的指向。上面的代码中并没有设置该参数，因此在回调中打印 this 时，其指向为 window 对象

查找方法 find

将原数组中符合预期规则的元素的第一个值返回

const value = array1.find((item, index, array) => {
    return item > 5
}) // 6

各参数与 filter 方法相同

需要注意的是，一旦回调函数返回了 true ，则 find 方法会立即返回当前元素的值，如果没有符合规则的元素，则会返回 undefined

与 find 类似的方法是 findIndex 方法，区别在于 find 返回元素的值，而 findIndex 则返回元素的索引

判断方法 some

判断原数组中是否有符合预期规则的元素

const isBiggerThan5 = array1.some((item, index, array) => {
    return item > 5
}) // true

各参数与 filter 方法相同

该方法返回 true 或 false，为真表示原数组中存在符合规则的项，为假表示不存在

但与上面两个方法不同的地方除了返回值，还有回调函数作用的项

如果原数组中存在被删除或者没有被赋值的索引，则回调函数在该项上不会被调用

const array3 = new Array(4)
array3[0] = 1
array3.some((item) => {
    return item > 5
}) // false

在上面的例子中，虽然 array3.length 为 4 ，但是回调函数只在索引为 0 的项上被调用了，后面的三项由于未被赋值，所以不调用回调函数

排序方法 sort

将原数组中的元素按照预期规则排序，不返回新数组

array1.sort((a, b) => {
    return a - b
})
// [0, 1, 2, 3, 4, 5, 6, 8, 9]

sort 方法接收一个用于比较的回调函数，这个函数有两个参数，分别代表将要被比较的数组中的两个元素，同时这两个元素会按照回调函数的返回值进行排序：

如果返回值小于 0 ，a 会被排在 b 之前
如果返回值大于 0 ，b 会被排在 a 之前
如果相等，则 a 和 b 的相对位置不变

对于数字的升序排序，可以像下面这样写回调函数

(a, b) => {
    if (a < b) return -1
    if (a > b) return 1
    return 0
}

将上面的代码精简下，就会变成 return a - b

所以对于数字的排列，升序返回 return a - b ，降序返回 return b - a

由于回调函数中的 a 和 b 分别是将要被比较的两个元素，如果元素是对象，也可以动过对象中的属性进行排序

注意：
sort 方法如果不传入比较的回调函数，那么它将会根据字符的 Unicode位点进行排序，如下：

array4 = [2, 40, 11, 5, 10]
array4.sort()
// [10, 11, 2, 40, 5]

上面的例子中， sort 没有比较函数，它会根据每个元素的第一个字符进行排序，由于在 Unicode 中，1 在 2 之前，所以 10 会排在 2 之前，而不是根据数字 10 和 2 的大小来比较。如果两个元素的第一个字符相同，则根据第二个字符排序

缩减方法 reduce

根据预期规则，将原数组中的每个元素逐一减少为单个值，并将该值返回

const total = array1.reduce((sum, item, index, array) => {
    return sum + item
}, 0)
// 146

reduce 方法接收两个参数：

第一个参数为回调函数，这个函数有四个参数，后三个与 filter 相同，唯独第一个不同：第一个参数是上一次调用回调时的返回值

由此可以想到，当对第一个元素执行回调时，是没有上次回调的返回值的，这样就会出错，因此需要一个初始值，而这个初始值就是 reduce 的第二个参数

在上面的例子中，初始值是 0，执行的回调是将上一次回调的返回值与当前值相加，因此上面的例子的功能就是数组各元素求和

reduce 方法的返回值类型并不是固定的，需要根据我们的实际情况来确定返回值类型

与 reduce 方法类似的是 reduceRight 方法，区别在于与 reduce 的执行方向相反，是从右向左执行

注意：
与 some 方法相同，对于原数组上被删除或者未被赋值的索引，回调函数不会被执行

虽然上面介绍的这些方法都可以通过别的方式多写点代码实现，但是有更快捷简便同时还不失可读性的方式，又有什么理由不去用它呢？

扫码关注前端周记公众号