JavaScript数组方法--filter、find、findIndex

继续数组方法，今天应该到filter了。

filter：filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
使用：
```
var words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result);　　
```
仅仅从字面理解一下filter，就是过滤，怎么过滤呢？通过给定一个回调函数，过滤出来符合函数实现的元素。
从示例中看，也就是说，需要过滤出来元素的单词长度大于6的所有元素。
查看一下结果呢！

语法：
```
var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])
```
　　filter有两个参数，第一个就是回调函数，第二个参数与之前我们说到的some、every啊类似，基本上就就是数组函数只要提供了回调函数，都会有这么一个用于执行callback回调的this值。
　　回调函数也是三个参数，就没什么可说的了，数组函数的所有回调函数都是这三个参数：元素element、索引index、数组本身array。
来吧，开始重构：
```
function filter(arr, fn, thisArg) {
  if (!(arr instanceof Array)) throw new Error("请确保第一个参数类型为数组")
  var results = []
  for (var i = 0; i < arr.length; i++) {
    if (fn.call(thisArg, arr[i], i, arr))
      results[results.length] = arr[i]
  }
  return results
}
```
　　是不是也真的没什么好神奇的？
find：find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
使用：
```
var array1 = [5, 12, 8, 130, 44];
var found = array1.find(function(element) {
  return element > 10;
});
console.log(found);
```
结果：

其实依据我们之前介绍其他的数组方法所说的，很容易理解到，find方法也是提供一个回调函数，那么必然也有一个可选的用于回调函数的this值，他查找并返回的是第一个符合回调函数测试结果的元素。其他的并没有什么特殊之处。
```
function find(arr, fn, thisArg) {
  if (!(arr instanceof Array)) throw new Error("请确保第一个参数类型为数组")
  for (var i = 0; i < arr.length; i++) {
    if (fn.call(thisArg, arr[i], i, arr)) {
      return arr[i]
    }
  }
  return undefined
}　　
```
　　说到这里，自然而然的可以预料到，下一个函数必然是findIndex了，从字面上就可以理解到findIndex是干什么的了！而且有find在前，findIndex也真的没什么好说的了。
findIndex：findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。
简单说一下，find返回的是数组符合回调测试条件的第一个元素，findIndex返回的是符合回调测试条件的第一个元素的索引。
```
function findIndex(arr, fn, thisArg) {
  if (!(arr instanceof Array)) throw new Error("请确保第一个参数类型为数组")
  for (var i = 0; i < arr.length; i++) {
    if (fn(thisArg, arr[i], i, arr)) {
      return i 
    }
  }
  return -1
}
```
　　看这两个重构的函数都没有他打区别，也就是一个元素，一个索引值而已。

JavaScript数组方法--filter、find、findIndex

猜你喜欢