es6 filter函数的用法_ES6 find()、findIndex()与filter()数组新增方法详解

前言

这篇文章就是来总结一下es6新增的几个常用的数组方法

find()

查找第一个符合条件的数组元素

找到一个符合条件的数组成员，返回该成员的值，如果没有找到，返回undefined
它的参数是一个回调函数。在回调函数中可以写你要查找元素的条件，当条件成立为true时，返回该元素。如果没有符合条件的元素，返回值为undefined。

以下代码在Arr数组中查找元素值大于2的元素，找到后立即返回。返回的结果为查找到的元素：

const Arr=[1,2,3];
var num=Arr.find(function(value){
	return value > 2
});
console.log(num);// 3

没有查找到符合元素，返回undefined:

const Arr=[1,2,3,];
var num=Arr.find(function(value){
	return value>10
});
console.log(num);// undefined

回调函数有三个参数。

value：当前的数组元素。
index：当前索引值。
arr： 被查找的数组。

const Arr=[1,2,3];
var num=Arr.find(function(val,index,arr){
	return index > 1 //下标大于1
});
console.log(num);// 3

findIndex()

查找数组内元素，找到第一个符合条件的数组成员，返回该成员的下标（index）， 没找到返回-1

var arr = ["张三", "李四", "王五"];
var result1 = arr.findIndex(function(val, index, arr) {
	return val == "李四"; // 查找到的字符串"wang"下标为：1
})
console.log(result1); // 1
var result2 = arr.findIndex(function(val, index, arr) {
	return val == "李"; // 查找到的字符串"李"，没有查到返回 -1
})
console.log(result2); // -1

filter()

filter()与find()使用方法也相同。同样都接收三个参数。不同的地方在于返回值。

filter()返回的是数组，数组内是所有满足条件的元素，而find()只返回第一个满足条件的元素。
如果条件不满足，filter()返回的是一个空数组，而find()返回的是undefined

var userArr = [
	{
		id: 1,
		userName: "张三"
	},
	{
		id: 2,
		userName: "李四"
	},
	{
		id: 3,
		userName: "王五"
	}
]
var demo = userArr.filter(function(item){
	return item.id >1
})
console.log(demo);

filter()方法也可以用于数组去重

let arr = [1, 2, 2, 3, 3, 3, 4, 5];
let newArr = arr.filter((value, index, array) => array.indexOf(value) === index);
console.log(newArr);// [ 1, 2, 3, 4, 5 ]

知乎视频​www.zhihu.com

https://www.bilibili.com/video/BV1v741147Gm/?p=215​www.bilibili.com