ES6 Array 之查找元素

这是我参与8月更文挑战的第2天，活动详情查看：8月更文挑战

方法	关注点	返回值	JavaScript 版本
filter()	满足条件的所有值	返回数组，包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。	1.6
find()	满足条件的第一个值	返回符合测试条件的第一个数组元素值，如果没有符合条件的则返回 undefined。	ECMAScript 6
findIndex()	满足条件的第一个值的位置	返回符合测试条件的第一个数组元素索引，如果没有符合条件的则返回 -1。	ECMAScript 6

ES5 中查找数组元素

filter() 方法会创建一个新的数组，新数组中的元素是通过所提供函数实现的测试的所有元素。

• filter() 不会对空数组进行检测；
• filter() 不会改变原始数组；
• 语法：array.filter(function(currentValue, index, arr), thisValue)
  • function(currentValue, index, arr)：必须。函数，数组中的每个元素都会执行这个函数
    • currentValue：必须。当前元素的值
    • index：可选。当前元素的索引值
    • arr：可选。当前元素属于的数组对象
  • thisValue：可选。对象作为该执行回调时使用，传递给函数，用作 this 的值。如果省略了 thisValue，this 的值为 undefined。

var array = [1, 2, 3, 4, 5]
var find1 = array.filter(function (item) { // Array.prototype.filter() 返回的是数组
  return item === 3
})
console.log(find1) // [3]

var find2 = array.filter(function (item) { // Array.prototype.filter() 返回的是数组
  return item === 6
})
console.log(find2) // []

var find3 = array.filter(function (item) { // Array.prototype.filter() 返回的是数组
  return item % 2 === 0
})
console.log(find3) // [2, 4]

filter() 函数的缺点是，它会把数组中的所有元素都检查一遍，这就可能影响性能了（有时候我们只想知道数组中有没有某个元素，找到后就不需要继续往下找了）。

ES6 中查找数组元素

1. Array.prototype.find()

find() 方法返回数组中满足提供的测试函数的第一个元素的值（找到后就不会继续往下找了）。否则返回 undefined。

let array = [1, 2, 3, 4, 5, 3]

let find1 = array.find(function (item) { // Array.prototype.find() 返回的是值
  return item === 3
})
console.log(find1) // 3

let find2 = array.find(function (item) { // Array.prototype.find() 返回的是值
  return item === 31
})
console.log(find2) // undefined

let find3 = array.find(function (item) { // Array.prototype.find() 返回的是值
  return item % 2 === 0
})
console.log(find3) // 2

2. Array.prototype.findIndex()

findIndex() 方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回 -1。

let array = [1, 2, 3, 4, 5, 3]
let find = array.findIndex(function (item) {
  return item % 2 === 0
})
console.log(find) // 1