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 相关文章推荐
js类中获取外部函数名的方法与代码
Sep 12 Javascript
IE浏览器PNG图片透明效果代码
Sep 02 Javascript
firefox下对ajax的onreadystatechange的支持情况分析
Dec 14 Javascript
javascript学习笔记(十) js对象 继承
Jun 19 Javascript
JavaScript创建一个欢迎cookie弹出窗实现代码
Mar 15 Javascript
基于jquery实现左右按钮点击的图片切换效果
Jan 27 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
Apr 19 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
Nov 15 Javascript
Angular实现的敏感文字自动过滤与提示功能示例
Dec 29 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
Sep 29 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
Feb 28 Javascript
js实现聊天对话框
Feb 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
各种战术和打法的原创者
2020/03/04 星际争霸
php SQL防注入代码集合
2008/04/25 PHP
PHP调用Twitter的RSS的实现代码
2010/03/10 PHP
Admin generator, filters and I18n
2011/10/06 PHP
php数组函数序列之array_flip() 将数组键名与值对调
2011/11/07 PHP
Ubuntu12下编译安装PHP5.3开发环境
2015/03/27 PHP
调试WordPress中定时任务的相关PHP脚本示例
2015/12/10 PHP
php成功操作redis cluster集群的实例教程
2019/01/13 PHP
javascript 写类方式之五
2009/07/05 Javascript
Pro JavaScript Techniques学习笔记
2010/12/28 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
2012/06/11 Javascript
jquery移除、绑定、触发元素事件使用示例详解
2014/04/10 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
2015/08/10 Javascript
javascript实现图片上传前台页面
2015/08/18 Javascript
自动化测试读写64位操作系统的注册表
2016/08/15 Javascript
vue自定义指令实现v-tap插件
2016/11/03 Javascript
Javascript 两种刷新方法以及区别和适用范围
2017/01/17 Javascript
js输入框使用正则表达式校验输入内容的实例
2017/02/12 Javascript
JS如何设置元素样式的方法示例
2017/08/28 Javascript
利用纯js + transition动画实现移动端web轮播图详解
2017/09/10 Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
2020/05/29 jQuery
[19:14]DOTA2 HEROS教学视频教你分分钟做大人-维萨吉
2014/06/24 DOTA
[19:59]2014DOTA2国际邀请赛 IG战队纪录片
2014/08/07 DOTA
python的id()函数解密过程
2012/12/25 Python
python的xpath获取div标签内html内容,实现innerhtml功能的方法
2019/01/02 Python
python实现串口自动触发工作的示例
2019/07/02 Python
Python3+Appium实现多台移动设备操作的方法
2019/07/05 Python
django多种支付、并发订单处理实例代码
2019/12/13 Python
python实现跨excel sheet复制代码实例
2020/03/03 Python
如何基于Python爬虫爬取美团酒店信息
2020/11/03 Python
python re的findall和finditer的区别详解
2020/11/15 Python
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上
2013/07/06 面试题
医学专业职业生涯规划范文
2014/02/05 职场文书
旅游安全协议书
2014/04/21 职场文书
期末评语大全
2014/05/04 职场文书
校园元旦活动总结
2014/07/09 职场文书