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 相关文章推荐
javascript 星级评分效果(手写)
Dec 24 Javascript
用JS提交参数创建form表单在FireFox中遇到的问题
Jan 16 Javascript
node.js中的fs.lchmodSync方法使用说明
Dec 16 Javascript
Javascript中常见的逻辑题和解决方法
Sep 17 Javascript
JS遍历ul下的li点击弹出li的索引的实现方法
Sep 19 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
Oct 18 Javascript
javascript 注释代码的几种方法总结
Jan 04 Javascript
AngularJS 支付倒计时功能实现思路
Jun 05 Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
Javascript实现找不同色块的游戏
Jul 17 Javascript
通俗解释JavaScript正则表达式快速记忆
Aug 23 Javascript
js canvas实现写字动画效果
Nov 30 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分页函数
2006/10/09 PHP
php 猴子摘桃的算法
2017/06/20 PHP
php提取微信账单的有效信息
2018/10/01 PHP
jquery 全局AJAX事件使用代码
2010/11/05 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
2016/10/14 Javascript
详解React-Todos入门例子
2016/11/08 Javascript
JS在浏览器中解析Base64编码图像
2017/02/09 Javascript
JS实现的自动打字效果示例
2017/03/10 Javascript
bootstrap模态框远程示例代码分享
2017/05/22 Javascript
React中jquery引用的实现方法
2017/09/12 jQuery
使用webpack打包koa2 框架app
2018/02/02 Javascript
jquery.picsign图片标注组件实例详解
2018/02/02 jQuery
JS实现自定义弹窗功能
2018/08/08 Javascript
探秘vue-rx 2.0(推荐)
2018/09/21 Javascript
AJAX在JQuery中的应用详解
2019/01/30 jQuery
React 组件渲染和更新的实现代码示例
2019/02/21 Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
2019/04/17 Javascript
用实例分析Python中method的参数传递过程
2015/04/02 Python
python pandas 对时间序列文件处理的实例
2018/06/22 Python
Python使用APScheduler实现定时任务过程解析
2019/09/11 Python
Python控制台输出时刷新当前行内容而不是输出新行的实现
2020/02/21 Python
基于CentOS搭建Python Django环境过程解析
2020/08/24 Python
用Python实现童年贪吃蛇小游戏功能的实例代码
2020/12/07 Python
护理专业应届毕业生推荐信
2013/11/15 职场文书
体育教育个人自荐信范文
2013/12/01 职场文书
领导的自我鉴定
2013/12/28 职场文书
如何写一封打动人心的求职信
2014/02/17 职场文书
优秀教导主任事迹材料
2014/05/09 职场文书
机械工程及其自动化专业求职信
2014/08/08 职场文书
违纪检讨书
2015/01/27 职场文书
城管年度个人总结
2015/02/28 职场文书
2015年学校办公室工作总结
2015/05/26 职场文书
金砖之国观后感
2015/06/11 职场文书
python实现简单区块链结构
2021/04/25 Python
Python中requests做接口测试的方法
2021/05/30 Python
SQL Server中T-SQL标识符介绍与无排序生成序号的方法
2022/05/25 SQL Server