JS数组中的 filter() 用法

一、语法以及描述

说明：过滤器函数，为数组中的每个元素执行callback函数，如果callback函数返回值为true则保留此元素，否则不保留
语法：var newArray = Arrary.filter(callback(element[, index[, array]])[, thisArg])
参数：

1. callback：数组元素执行的回调函数
2. element：当前正在处理的元素
3. index：当前正在处理的元素的索引值
4. array：调用 filter 方法的数组
5. thisArg：执行callback时，用于this的值

返回值：返回过滤元素后的新数组
是否改变原数组：否

二、参数说明

1. callback()

  filter为数组中的每个元素都执行一次callback函数，并且将能够使callback函数返回true或者与true等价的值的元素组合成一个新的数组。那些没有返回true的元素都将被跳过，不会添加到新数组中。

callback执行时会传入三个参数：
  element：数组元素的值
  index：数组元素的索引
  array：调用 filter 方法的数组

callback也可以使用ES6中的写法，如下：

var newArray = Arrary.filter((element[, index[, array]]) => {
	return expression;
}[, thisArg])

2. thisArg（可选）

  如果为filter方法提供一个thisArg参数，则执行callback时的this就是此参数。严格模式下，this 指向为undefined；非严格模式下 this 指向是全局对象。

3. 示例

// 1. 获取数组中大于10的数
var arr = [5, 6, 15, 26, 8, 99, 1]
var res = arr.filter(function (element, index) {
    return element > 10;
})

console.log('arr', arr);
// [5, 6, 15, 26, 8, 99, 1]
console.log('res', res);
// [15, 26, 99]


// 2. 获取数组中的偶数
var arr = [1, 2, 3, 4, 5, 6]
var res = arr.filter(function (element, index) {
    return element % 2 === 0;
})

console.log('arr', arr);
// [1, 2, 3, 4, 5, 6]
console.log('res', res);
// [2, 4, 6]


// 3. ES6写法
var arr = [1, 2, 3, 4, 5, 6]
var res = arr.filter((element, index) => {
    return element % 2 === 0;
})

三、注意

  该方法不会改变原数组，它返回过滤后的新数组。