js数组中filter方法的使用和实现
定义
filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
语法
var newArray = arr.filter(callback(element[, index[, selfArr]])[, thisArg])
参数
callback
循环数组每个元素时调用的回调函数。回调函数返回 true 表示保留该元素，false 则不保留。它接受以下三个参数：
（1）element
数组中当前正在处理的元素。
（2）index可选
正在处理的元素在数组中的索引。
（3）selfArr可选
调用了 filter 方法的数组本身。
thisArg可选
执行 callback 时，用于 改变callback函数this 的值。
返回值
一个新的、由调用callback函数返回值为true的元素组成的数组，如果callback函数调用米没有返回true，则返回空数组。
详细描述
filter 方法循环数组中的每个元素时调用一次 callback 函数，并利用所有使得 callback 回调函数返回 true 或等价于 true 的值的元素创建一个新数组。注意：callback 回调函数只会在已经赋值的索引上被调用，对于那些已经被删除或者从未被赋值的索引不会被调用。那些没有通过 callback 测试的元素会被跳过，不会被包含在新数组中。
callback 回调函数被调用时传入三个参数：
1.数组当前元素的值
2.元素在数组中的索引
3.被遍历的数组本身
如果为 filter 提供一个 thisArg 参数，则它会被作为 callback 被调用时的 this 值。否则，callback 的 this 值在非严格模式下将是全局对象，严格模式下为 undefined。（callback 函数最后的this指向根据this指向规则进行确定）
filter 不会改变原数组，它返回过滤后的新数组。（虽然filter 方法本身不会改变原数组，但是我们可以在callback函数中进行改变）。
filter 遍历的元素范围在第一次调用 callback 之前就已经确定了。在调用 filter 之后被添加到数组中的元素不会被 filter 遍历到。如果已经存在的元素被改变了，则他们传入 callback 的值是 filter 遍历到它们那一刻的值。被删除或从来未被赋值的元素不会被遍历到。
使用示例
let arr = [1,3, ,7]
const newArray = arr.filter((element, index, selfArr) => {
console.log(index, this)
return element > 3
}, {a: 9})
console.log(newArray)
// 0 Window
// 1 Window
// 3 Window
// [7]
上述代码结果返回一个新的数组newArray 里面包含所有大于3的原数组arr中的元素，再执行中传入callback回调函数为箭头函数，并传递了改变callback函数this指向的参数thisArg，由打印结果可以看出当callback函数为箭头函数时，thisArg参数没有作用，并且再循环的过程中，原数组中的空值也不会调用传入的callback函数。下面我们看下传入普通函数时的使用：
let arr1 = ['a', 'ab', 'c']
const newArry1 = arr1.filter(function(element, index, selfArr){
console.log(index, this)
selfArr.push('ac')
return element.length > 1
},{a:9})
console.log(newArry1)
console.log(arr1)
// 0 {a: 9}
// 1 {a: 9}
// 2 {a: 9}
// ["ab"]
// (6) ["a", "ab", "c", "ac", "ac", "ac"]
上述代码过滤的结果返回一个新的数组newArray1里面包含原数组arr1中所有length大于1 的元素。在执行的过程中传入的callback函数为普通函数，根据打印结果可以看出，当callback为普通函数的时候，它的this就会指向传入的thisArg参数，并且在执行callback函数的时候虽然改变了原数组arr1，但是filter方法并不会去遍历新增加的元素。除了传入自定义的函数外我们还可以传入js一些原生的方法如：
let arr2 = [1,0,null,undefined,'','1']
const newArray2 = arr2.filter(Boolean)
console.log(newArray2)
// [1, "1"]
上述代码过滤的结果返回一个新的数组newArray2里面包含了原数组中所有经过转换后为true的元素。经过上面的描述和使用接下来就模拟实现自己的filter方法
步骤思路
1、将模拟实现的方法挂在到数组的原型上
2、传入callback参数和thisArg参数
3、创建一个新数组并获取调用该方法原数组的长度（利用this指向规则）
4、利用hasOwnProperty 方法过滤删除的值和空值
5、利用call方法调用callback函数并改变它的指向为thisArg参数
6、根据callback函数返回是否为true，将当前循环的元素添加到数组
7、返回新数组
实现代码
Array.prototype.myFilter = function(callback, thisArg) {
// 获取数组的长度，确定循环的次数
const length = this.length
let newArray = []
for (let index = 0; index < length; index++) {
// 利用hasOwnProperty方法过滤原数组空值和已经删除的值
if (this.hasOwnProperty(index)) {
// 利用call方法改变callback函数this的指向
if (callback.call(thisArg, this[index], index, this)) newArray.push(this[index])
}
}
return newArray
}
测试验证
Array.prototype.myFilter = function(callback, thisArg) {
// 获取数组的长度，确定循环的次数
const length = this.length
let newArray = []
for (let index = 0; index < length; index++) {
// 利用hasOwnProperty方法过滤原数组空值和已经删除的值
if (this.hasOwnProperty(index)) {
// 利用call方法改变callback函数this的指向
if (callback.call(thisArg, this[index], index, this)) newArray.push(this[index])
}
}
return newArray
}
let arr = [1,3, ,7]
const newArray = arr.myFilter((element, index, selfArr) => {
console.log(index, this)
return element > 3
}, {a: 9})
console.log(newArray)
// 0 Window
// 1 Window
// 3 Window
// [7]
let arr1 = ['a', 'ab', 'c']
const newArry1 = arr1.myFilter(function(element, index, selfArr){
console.log(index, this)
selfArr.push('ac')
return element.length > 1
},{a:9})
console.log(newArry1)
console.log(arr1)
// 0 {a: 9}
// 1 {a: 9}
// 2 {a: 9}
// ["ab"]
// (6) ["a", "ab", "c", "ac", "ac", "ac"]
let arr2 = [1,0,null,undefined,'','1']
const newArray2 = arr2.myFilter(Boolean)
console.log(newArray2)
// [1, "1"]
由打印结果可以看出结果和原方法一致。
网友评论