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 Html结构转字符串形式显示代码
Nov 15 Javascript
js操作checkbox遇到的问题解决
Jun 29 Javascript
jQuery自动切换/点击切换选项卡效果的小例子
Aug 12 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Sep 04 Javascript
JavaScript数据结构和算法之图和图算法
Feb 11 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
Dec 22 Javascript
vue.js根据代码运行环境选择baseurl的方法
Feb 28 Javascript
koa socket即时通讯的示例代码
Sep 07 Javascript
详解jQuery设置内容和属性
Apr 11 jQuery
vue双向绑定数据限制长度的方法
Nov 04 Javascript
详解element上传组件before-remove钩子问题解决
Apr 08 Javascript
在vant中使用时间选择器和popup弹出层的操作
Nov 04 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 输出简单动态WAP页面
2009/06/09 PHP
php.ini中date.timezone设置分析
2011/07/29 PHP
分享一个php 的异常处理程序
2014/06/22 PHP
php实现encode64编码类实例
2015/03/24 PHP
php实现TCP端口检测的方法
2015/04/01 PHP
PHP常用工具类大全附全部代码下载
2015/12/07 PHP
WordPress中Gravatar头像缓存到本地及相关优化的技巧
2015/12/19 PHP
PHP根据key删除数组中指定的元素
2019/02/28 PHP
Smarty模板类内部原理实例分析
2019/07/03 PHP
Jquery 高亮显示文本中重要的关键字
2009/12/24 Javascript
Visual Studio中的jQuery智能提示设置方法
2010/03/27 Javascript
JS对象与JSON格式数据相互转换
2012/02/20 Javascript
判断js对象是否拥有某一个属性的js代码
2013/08/16 Javascript
js中对象的声明方式以及数组的一些用法示例
2013/12/11 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
2014/05/28 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
2014/09/09 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
2015/05/13 Javascript
JavaScript动态添加事件之事件委托
2016/07/12 Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
2016/07/25 Javascript
jQuery获取与设置iframe高度的方法
2016/08/01 Javascript
超详细的JS弹出窗口代码大全
2020/04/18 Javascript
javascript防篡改对象实例详解
2017/04/10 Javascript
zTree节点文字过多的处理方法
2017/11/24 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
2019/03/12 Javascript
jQuery操作元素追加内容示例
2020/01/10 jQuery
Django渲染Markdown文章目录的方法示例
2019/01/02 Python
Django实现基于类的分页功能
2019/10/31 Python
Selenium启动Chrome时配置选项详解
2020/03/18 Python
python实现计算器简易版
2020/12/17 Python
canvas线条的属性详解
2018/03/27 HTML / CSS
亚历山大·王官网:Alexander Wang
2017/06/23 全球购物
L’AGENCE官网:加州女装品牌
2018/06/03 全球购物
explicit和implicit的含义
2012/11/15 面试题
高中生综合素质自我评价
2015/03/06 职场文书
小学教学工作总结2015
2015/05/13 职场文书
MySQL表字段时间设置默认值
2021/05/13 MySQL