ES6 filter() 数组过滤方法总结

数组常用方法概述

Array.every() 方法用于检测数组中的所有元素是否都满足指定条件，只有当所有元素都满足条件时才返回 true。

Array.some() 方法用于检测数组中是否存在至少一个元素满足指定条件，只要有一个元素满足条件即返回 true。

Array.find() 和 Array.findIndex() 方法用于返回数组中第一个满足指定条件的元素或该元素的索引。

Array.filter() 方法创建一个新数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

数组方法分类

JavaScript 中的数组方法大致可以分为两类：一类是修改原数组的方法，另一类是不修改原数组的方法。

第一类方法是直接修改原数组内容或顺序的方法。

常见的修改原数组的方法包括：push、pop、shift、unshift、sort、reverse 和 splice。

第二类方法是不修改原数组，而是返回新值或新数组的方法，例如 concat 和 join。

split、toString 和 push 等方法中，push 用于从数组末尾添加元素。

pop 方法用于移除并返回数组的最后一个元素。

shift 方法用于移除并返回数组的第一个元素。

unshift 方法用于在数组开头添加一个或多个元素，并返回新长度。

reverse 方法用于反转数组中元素的顺序，原数组会被修改。

splice 方法用于添加或删除数组元素，语法为 arr.splice(start, deleteCount, item1, ...)，其中 start 指定起始位置，deleteCount 指定删除长度，后续参数为插入的新数据。

concat 方法用于连接两个或多个数组，返回一个新数组；join 方法用于将数组元素连接成字符串。

slice 方法用于从数组中提取指定部分，语法为 arr.slice(start, end)，返回一个新数组，不包含 end 位置的元素。

filter 方法应用示例

以下是具体的代码示例。

1. 创建一个数组，判断数组中是否存在某个值。


var newarr = [
 { num: 1, val: 'ceshi', flag: 'aa' },
 { num: 2, val: 'ceshi2', flag: 'aa2' }
]
console.log(newarr.filter(item => item.num===2 ))

2. 也可以通过上述方法过滤掉 num 为 2 的记录，只保留 num 为 1 的记录。


var newarr = [
 { num: 1, val: 'ceshi', flag: 'aa' },
 { num: 2, val: 'ceshi2', flag: 'aa2' }
]
console.log(newarr.filter(item => item.num!=2 ))

3. 去除数组中的空字符串、undefined 和 null 值。


var arr = ['1','2',undefined, '3.jpg',undefined]
var newArr = arr.filter(item => item)
console.log(newArr)

var arr = ['1','2',null, '3.jpg',null]
var newArr = arr.filter(item => item)
console.log(newArr)

>//空字符串里面不能包含空格
var arr = ['1','2','', '3.jpg','']
var newArr = arr.filter(item => item)
console.log(newArr)

4. 过滤掉数组中不符合特定条件的项。


var arr = [20,30,50, 96,50]
var newArr = arr.filter(item => item>40) 
console.log(newArr)

5. 过滤不符合条件的元素。


var arr = ['10','12','23','44','42']
var newArr = arr.filter(item => item.indexOf('2')<0) 
console.log(newArr)

6. 实现数组去重功能。


var arr = [1, 2, 2, 3, 4, 5, 5, 6, 7, 7,8,8,0,8,6,3,4,56,2];
var arr2 = arr.filter((x, index,self)=>self.indexOf(x)===index) 
console.log(arr2); //[1, 2, 3, 4, 5, 6, 7, 8, 0, 56]

7. 示例代码未提供具体描述。


/*
  有一个对象数组 a ,将a数中对象某个属性的值存储到B数组中
*/ 
var porducts = [
  {name:"cucumber",type:"vegetable"},
  {name:"banana",type:"fruit"},
  {name:"celery",type:"vegetable"},
  {name:"orange",type:"fruit"},
];
// es5
var filteredProducts = [];
for(var i = 0;i < porducts.length; i ++){
  if(porducts[i].type === "fruit"){
    // 如果条件满足就把当前的值推入
    filteredProducts.push(porducts[i])
  }
}
// console.log(filteredProducts)//0: {name: "banana", type: "fruit"}1: {name: "orange", type: "fruit"}length: 2__proto__: Array(0)
// ES6
 var filter2 = porducts.filter(function(porduct){//对porducts数组对象过滤如果porduct.type === "fruit"就return出去,再用一个变量接住
  return porduct.type === "fruit"
})
console.log(filter2)

8. 示例代码未提供具体描述。


/*
  需求二
  有一个对象数组A,过滤掉不满足以下条件对象
  条件:蔬菜 数量大于0 价格小于10
*/ 
var products = [
  {name:"cucumber",type:"vegetable",quantity:0,price:1},
  {name:"banana",type:"fruit",quantity:10,price:16},
  {name:"celery",type:"vegetable",quantity:30,price:8},
  {name:"orange",type:"fruit",quantity:3,price:6},
];
products = products.filter(function(product){
  return product.type === "vegetable"
  && product.quantity > 0
  && product.price < 10
})
console.log(products)//0: {name: "celery", type: "vegetable", quantity: 30, price: 8}name: "celery"price: 8quantity: 30type: "vegetable"__proto__: Objectlength: 1__proto__: Array(0)

9. 示例代码未提供具体描述。


/*
  需求三:
  有两个数组A,B,根据A中的ID值 ,过滤掉B数组不符合的数据
*/ 
var post = {id:4,title:"javascript"};
var comments = [
  {postId:4,content:'Angular4'},
  {postId:2,content:'VUE.js'},
  {postId:3,content:'Node.js'},
  {postId:4,content:'React.js'},
];
function commentsForPost(post,comments){
  return comments.filter(function(comment){
    return comment.postId === post.id;
  })
}
console.log(commentsForPost(post,comments))
// 0: {postId: 4, content: "Angular4"}1: {postId: 4, content: "React.js"}length: 2__proto__: Array(0)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。

ES6 filter() 数组过滤方法总结

数组常用方法概述

数组方法分类

filter 方法应用示例

实用工具推荐