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打印gridview实现原理及代码
Feb 05 Javascript
jquery模拟SELECT下拉框取值效果
Oct 23 Javascript
Javascript浅谈之引用类型
Dec 18 Javascript
window.open()详解及浏览器兼容性问题示例探讨
May 29 Javascript
一个js过滤空格的小函数
Oct 10 Javascript
js实现的tab标签切换效果代码分享
Aug 25 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
Aug 01 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
Oct 23 Javascript
jquery的$().each和$.each的区别
Jan 18 jQuery
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
layui加载数据显示loading加载完成loading消失的实例代码
Sep 23 Javascript
js实现筛选功能
Nov 24 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 json_encode奇怪问题说明
2011/09/27 PHP
php遍历文件夹所有文件子文件夹函数代码
2013/11/27 PHP
php单例模式实现方法分析
2015/03/14 PHP
php 利用socket发送HTTP请求(GET,POST)
2015/08/24 PHP
PHP的Yii框架中过滤器相关的使用总结
2016/03/29 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
让低版本浏览器支持input的placeholder属性(js方法)
2013/04/03 Javascript
jQuery使用andSelf()来包含之前的选择集
2014/05/19 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
2014/12/10 Javascript
jQuery实现给页面换肤的方法
2015/05/30 Javascript
浅谈javascript中return语句
2015/07/15 Javascript
基于JavaScript实现添加到购物车效果附源码下载
2016/08/22 Javascript
Express与NodeJs创建服务器的两种方法
2017/02/06 NodeJs
js实现数组和对象的深浅拷贝
2017/09/30 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
2018/09/04 Javascript
基于Koa(nodejs框架)对json文件进行增删改查的示例代码
2019/02/02 NodeJs
vue.js实现会动的简历(包含底部导航功能,编辑功能)
2019/04/08 Javascript
Python打造出适合自己的定制化Eclipse IDE
2016/03/02 Python
Python实现疫情通定时自动填写功能(附代码)
2020/05/27 Python
Django如何在不停机的情况下创建索引
2020/08/02 Python
Python下使用Trackbar实现绘图板
2020/10/27 Python
Python利用matplotlib绘制折线图的新手教程
2020/11/05 Python
pip 20.3 新版本发布!即将抛弃 Python 2.x(推荐)
2020/12/16 Python
python opencv实现直线检测并测出倾斜角度(附源码+注释)
2020/12/31 Python
python上下文管理器异常问题解决方法
2021/02/07 Python
美国领先的商务贺卡出版商:The Gallery Collection
2018/02/13 全球购物
区域销售经理岗位职责
2013/12/10 职场文书
餐饮采购员岗位职责
2014/03/15 职场文书
幼儿教师寄语集锦
2014/04/03 职场文书
歌颂祖国的演讲稿
2014/05/04 职场文书
2014年大学生党员评议表自我评价
2014/09/20 职场文书
企业法人代表证明书
2014/09/27 职场文书
大学生档案自我鉴定(2篇)
2014/10/14 职场文书
初中军训感言
2015/08/01 职场文书
提高系统的吞吐量解决数据库重复写入问题
2022/04/23 MySQL
Java Spring读取和存储详细操作
2022/08/05 Java/Android