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 相关文章推荐
dojo 之基础篇
Mar 24 Javascript
避免回车键导致的页面无意义刷新的解决方法
Apr 12 Javascript
js获取TreeView控件选中节点的Text和Value值的方法
Nov 24 Javascript
使用jQuery避免鼠标双击的解决方案
Aug 21 Javascript
js左侧三级菜单导航实例代码
Sep 13 Javascript
webpack中引用jquery的简单实现
Jun 08 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
Feb 13 Javascript
JavaScript实现跟随滚动缓冲运动广告框
Jul 15 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
Oct 11 Javascript
Vue slot用法(小结)
Oct 22 Javascript
微信小程序时间选择插件使用详解
Dec 28 Javascript
原生js实现随机点名
Jul 05 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
Codeigniter控制器controller继承问题实例分析
2016/01/19 PHP
PHP仿微信发红包领红包效果
2016/10/30 PHP
Yii输入正确验证码却验证失败的解决方法
2017/06/06 PHP
js获取html参数及向swf传递参数应用介绍
2013/02/18 Javascript
不使用浏览器运行javascript代码的方法
2013/07/24 Javascript
JS清空多文本框、文本域示例代码
2014/02/24 Javascript
使用js操作css实现js改变背景图片示例
2014/03/10 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
2015/01/23 Javascript
Windows系统中安装nodejs图文教程
2015/02/28 NodeJs
jQuery ajax应用总结
2016/06/02 Javascript
JS简单实现无缝滚动效果实例
2016/08/24 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
2017/01/20 Javascript
jQuery实现的简单悬浮层功能完整实例
2017/01/23 Javascript
vue cli构建的项目中请求代理与项目打包问题
2018/02/26 Javascript
vue实现局部刷新的实现示例
2019/04/16 Javascript
react 中父组件与子组件双向绑定问题
2019/05/20 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
2019/07/29 Javascript
Nodejs实现图片上传、压缩预览、定时删除功能
2019/10/25 NodeJs
解决python大批量读写.doc文件的问题
2018/05/08 Python
python实现批量转换图片为黑白
2020/06/16 Python
Windows 平台做 Python 开发的最佳组合(推荐)
2020/07/27 Python
Python 利用OpenCV给照片换底色的示例代码
2020/08/03 Python
详解anaconda安装步骤
2020/11/23 Python
HTML5 canvas基本绘图之绘制阴影效果
2016/06/27 HTML / CSS
计算机应用毕业生自荐信
2013/10/23 职场文书
国贸专业的职业规划书
2014/03/15 职场文书
爱护公共设施的标语
2014/06/24 职场文书
2014年民政局关于保密工作整改措施
2014/09/19 职场文书
2014年全国爱牙日宣传活动方案
2014/09/21 职场文书
12.4全国法制宣传日活动方案
2014/11/02 职场文书
清洁工岗位职责
2015/02/13 职场文书
成品仓库管理员岗位职责
2015/04/09 职场文书
消费者理赔投诉书
2015/07/02 职场文书
心理健康教育培训研修感言
2015/11/18 职场文书
使用refresh_token实现无感刷新页面
2022/04/26 Javascript
Oracle数据库事务的开启与结束详解
2022/06/25 Oracle