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


Posted in Javascript onApril 03, 2019

Array.every(x=>x)是每一个都要满足

Array.some(x=>x)是有一个满足。

Array.find(findIndex),返回符合条件的第一个值。

Array.filter(过滤成新的数组)

数组的方法分为两类

1)改变原数组

push,pop,shift,unshift,sort,reverse,splice

2)不改变原数组concat,join-->

split,toStringpush:从数组最后一位开始加数据

pop:把数组最后一位剪切

shift:在数组最前一位剪切

unshift:在数组最前一位加数

reverse:把原数组逆转

splice:arr.splice(从第几位开始,截取多少长度,在切口处添加新数据)

concat :连接join:返回字符串

slice:截取arr.slice(从该为开始截取,截取到该为)

示例

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)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery Tips(4) 一些关于提高JQuery性能的Tips
Dec 19 Javascript
picChange 图片切换特效的函数代码
May 06 Javascript
浅谈关于JavaScript的语言特性分析
Apr 11 Javascript
JS中FRAME的操作问题实例分析
Oct 21 Javascript
jQuery中prop()方法用法实例
Jan 05 Javascript
jQuery功能函数详解
Feb 01 Javascript
javascript字符串替换函数如何一次性全部替换掉
Oct 30 Javascript
完美实现bootstrap分页查询
Dec 09 Javascript
JS绘制微信小程序画布时钟
Dec 24 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
Jan 11 Javascript
jQuery实现的中英文切换功能示例
Jan 11 jQuery
Vue中util的工具函数实例详解
Jul 08 Javascript
基于Vue 实现一个中规中矩loading组件
Apr 03 #Javascript
javascript实现小型区块链功能
Apr 03 #Javascript
vue插槽slot的理解和使用方法
Apr 03 #Javascript
react写一个select组件的实现代码
Apr 03 #Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
Apr 03 #Javascript
JavaScript变速动画函数封装添加任意多个属性
Apr 03 #Javascript
JS中注入eval, Function等系统函数截获动态代码
Apr 03 #Javascript
You might like
《PHP编程最快明白》第七讲:php图片验证码与缩略图
2010/11/01 PHP
smarty半小时快速上手入门教程
2014/10/27 PHP
Yii的CDbCriteria查询条件用法实例
2014/12/04 PHP
浅谈PHP的反射机制
2016/12/15 PHP
提交表单时执行func方法实现代码
2013/03/17 Javascript
JavaScript数组前面插入元素的方法
2015/04/06 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
2016/04/26 Javascript
Bootstrap缩略图的创建方法
2017/03/22 Javascript
js匿名函数使用&amp;传参(实例)
2017/09/08 Javascript
Node.js readline模块与util模块的使用
2018/03/01 Javascript
浅析java线程中断的办法
2018/07/29 Javascript
layui对工具条进行选择性的显示方法
2019/09/19 Javascript
如何实现iframe父子传参通信
2020/02/05 Javascript
vue element table中自定义一些input的验证操作
2020/07/18 Javascript
vue+高德地图实现地图搜索及点击定位操作
2020/09/09 Javascript
Windows系统下使用flup搭建Nginx和Python环境的方法
2015/12/25 Python
python获取list下标及其值的简单方法
2016/09/12 Python
Python 基础教程之包和类的用法
2017/02/23 Python
django中的setting最佳配置小结
2017/11/21 Python
python实现发送邮件功能代码
2017/12/14 Python
django数据关系一对多、多对多模型、自关联的建立
2019/07/24 Python
TensorFlow使用Graph的基本操作的实现
2020/04/22 Python
如何使用pycharm连接Databricks的步骤详解
2020/09/23 Python
Python list和str互转的实现示例
2020/11/16 Python
利用python+request通过接口实现人员通行记录上传功能
2021/01/13 Python
英国袜子店:Sock Shop
2017/01/11 全球购物
Myprotein台湾官方网站:全球领先的运动营养品牌
2018/12/10 全球购物
雅虎笔试题(字符串操作)
2015/03/24 面试题
教师节促销方案
2014/03/22 职场文书
产品售后服务承诺书
2014/05/21 职场文书
营销团队口号
2014/06/06 职场文书
学雷锋团日活动总结
2015/05/06 职场文书
导游词之嵊泗列岛
2019/10/30 职场文书
php 原生分页
2021/04/01 PHP
golang 实现并发求和
2021/05/08 Golang
Vue Element plus使用方法梳理
2022/12/24 Vue.js