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 相关文章推荐
JXTree对象,读取外部xml文件数据,生成树的函数
Apr 02 Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
Sep 05 Javascript
jquery动态增加删除表格行的小例子
Nov 14 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
Nov 18 Javascript
jquery JSON的解析方式示例介绍
Jul 27 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
May 23 Javascript
AngularJS基础 ng-href 指令用法
Aug 01 Javascript
ES6概念 ymbol.for()方法
Dec 25 Javascript
canvas绘制一个常用的emoji表情
Mar 30 Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
Dec 06 Javascript
nuxt 实现在其它js文件中使用store的方式
Nov 05 Javascript
JavaScript如何优化逻辑判断代码详解
Jun 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生成带有雪花背景的验证码
2008/09/28 PHP
FireFox浏览器使用Javascript上传大文件
2013/10/30 PHP
php过滤HTML标签、属性等正则表达式汇总
2014/09/22 PHP
PHP+sqlite数据库操作示例(创建/打开/插入/检索)
2016/05/26 PHP
PHP清除缓存的几种方法总结
2017/09/12 PHP
解决laravel 表单提交-POST 异常的问题
2019/10/15 PHP
jquery 事件执行检测代码
2009/12/09 Javascript
JavaScript NaN和Infinity特殊值 [译]
2012/09/20 Javascript
js播放wav文件(源码)
2013/04/22 Javascript
解析javascript 浏览器关闭事件
2013/07/08 Javascript
iframe的onreadystatechange事件在firefox下的使用
2014/04/16 Javascript
教你JS中的运算符乘方、开方及变量格式转换
2016/08/09 Javascript
详解vue2.0组件通信各种情况总结与实例分析
2017/03/22 Javascript
vue上传图片组件编写代码
2017/07/26 Javascript
React Native react-navigation 导航使用详解
2017/12/01 Javascript
JS调用安卓手机摄像头扫描二维码
2018/10/16 Javascript
node实现socket链接与GPRS进行通信的方法
2019/05/20 Javascript
python实现dict版图遍历示例
2014/02/19 Python
Python迭代器与生成器基本用法分析
2018/07/26 Python
5款Python程序员高频使用开发工具推荐
2019/04/10 Python
浅谈Python2之汉字编码为unicode的问题(即类似\xc3\xa4)
2019/08/12 Python
Python 实现Numpy中找出array中最大值所对应的行和列
2019/11/26 Python
python3中使用__slots__限定实例属性操作分析
2020/02/14 Python
详解Python遍历列表时删除元素的正确做法
2021/01/07 Python
python制作抽奖程序代码详解
2021/01/15 Python
利用HTML5 Canvas API绘制矩形的超级攻略
2016/03/21 HTML / CSS
如何写出高性能的JSP和Servlet
2013/01/22 面试题
大学生创业计划书的范文
2014/01/07 职场文书
预备党员承诺书
2014/03/25 职场文书
运输企业安全生产责任书
2014/07/28 职场文书
市场营销毕业求职信
2014/08/07 职场文书
领导班子民主生活会整改措施(工商局)
2014/09/21 职场文书
群众路线专项整治工作情况报告
2014/10/28 职场文书
通用员工手册范本
2015/05/14 职场文书
地道战观后感400字
2015/06/04 职场文书
MySQL系列之十三 MySQL的复制
2021/07/02 MySQL