es6中filter过滤器怎么使用

发布时间：2023-01-30 14:26:58 作者：iii
来源：亿速云阅读：174

这篇“es6中filter过滤器怎么使用”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“es6中filter过滤器怎么使用”文章吧。

在es6中，filter过滤器对数组元素进行过滤并返回一个新的数组。filter()函数会创建一个新数组，其包含通过所提供回调函数实现的测试的所有元素，语法“arr.filter(callback(element[, index[, array]])[, thisArg])”；如果没有任何数组元素通过测试，则返回空数组。

ES6中的filter过滤器

filter函数俗称过滤器，函数作用：对数组元素进行过滤并返回一个新的数组；

filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

var sexData=["男","女","女","男","女"];
var filter2=sexData.filter(function(sex){
	return sex==="女"
})

//console.log(filter2)    ["女", "女", "女"]

var porducts = [
	{name: 'apple',type: 'red'} ,
	{name: 'orange',type: 'orange'},
	{name: 'banana',type: 'yellow'},
	{name: 'mango',type: 'yellow'}
];
var filter2=porducts.filter(function(item){
	return item.type==='yellow'
})
//console.log(filter2)
//0: {name: "banana", type: "yellow"}1: {name: "mango", type: "yellow"}

语法

var newArray = arr.filter(
  callback(element[, index[, array]])[, thisArg]
)

参数

callback：回调函数
element：arr数组中正在被处理的数据
index：element的下标，可选
array：调用了 filter 的数组本身，可选
thisArg：执行 callback 时，用于 this 的值,可选

返回值

一个新的、由通过测试的元素组成的数组，如果没有任何数组元素通过测试，则返回空数组。

描述

filter 为数组中的每个元素调用一次 callback 函数，并利用所有使得 callback 返回 true 或等价于 true 的值的元素创建一个新数组。callback 只会在已经赋值的索引上被调用，对于那些已经被删除或者从未被赋值的索引不会被调用。那些没有通过 callback 测试的元素会被跳过，不会被包含在新数组中。
callback 被调用时传入三个参数：元素的值、元素的索引、被遍历的数组本身
如果为 filter 提供一个 thisArg 参数，则它会被作为 callback 被调用时的 this 值。否则，callback 的 this 值在非严格模式下将是全局对象，严格模式下为 undefined。callback 函数最终观察到的 this 值是根据通常函数所看到的 "this"的规则确定的。
filter 不会改变原数组，它返回过滤后的新数组。
filter 遍历的元素范围在第一次调用 callback 之前就已经确定了。在调用 filter 之后被添加到数组中的元素不会被 filter 遍历到。如果已经存在的元素被改变了，则他们传入 callback 的值是 filter 遍历到它们那一刻的值。被删除或从来未被赋值的元素不会被遍历到。

特殊用法：

1. 去掉空字符串、undefined、null

array.filter((value, index, arr) => {value})

2. 数组去重

array.filter((value, index, arr) => {arr.indexOf(value) === index})

例子

1、过滤 JSON 中的无效条目

以下示例使用 filter() 创建具有非零 id 的元素的 json。

var arr = [
  { id: 15 },
  { id: -1 },
  { id: 0 },
  { id: 3 },
  { id: 12.2 },
  { },
  { id: null },
  { id: NaN },
  { id: 'undefined' }];var invalidEntries = 0;function isNumber(obj) {
  return obj !== undefined && typeof(obj) === 'number' && !isNaN(obj);}function filterByID(item) {
  if (isNumber(item.id) && item.id !== 0) {
    return true;
  } 
  invalidEntries++;
  return false; }var arrByID = arr.filter(filterByID);console.log('Filtered Array\n', arrByID); // Filtered Array// [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }]console.log('Number of Invalid Entries = ', invalidEntries); // Number of Invalid Entries = 5

2、去掉空字符串、undefined、null

//2. 去掉空字符串、undefined、null
var porducts = [
	{name:''},
	{name:"哈哈"}
];
var filter2=porducts.filter(function(item){
	return item.name
})
//console.log(filter2)    
//打印得出  0: {name: "哈哈"}

3、数组去重

//3. 数组去重
array.filter((value, index, arr) => {arr.indexOf(value) === index})
var porducts = ['苹果','香蕉','苹果','芒果']
var filter2=porducts.filter(function(item,index,porducts){
	return porducts.indexOf(item)==index
})
//console.log(filter2)
// ["苹果", "香蕉", "芒果"]

以上就是关于“es6中filter过滤器怎么使用”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。

es6中filter过滤器怎么使用

相关阅读