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 相关文章推荐
Add a Formatted Table to a Word Document
Jun 15 Javascript
如何确保JavaScript的执行顺序 之实战篇
Mar 03 Javascript
Javascript 垃圾收集机制介绍理解
May 14 Javascript
javascript事件函数中获得事件源的两种不错方法
Mar 17 Javascript
js实现对table动态添加、删除和更新的方法
Feb 10 Javascript
javaScript给元素添加多个class的简单实现
Jul 20 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
Mar 09 Javascript
微信小程序实现复选框效果
Dec 28 Javascript
微信小程序实现卡片左右滑动效果的示例代码
May 01 Javascript
原生js实现3D轮播图
Mar 21 Javascript
jQuery实现鼠标移入显示蒙版效果
Jan 11 jQuery
javascript实现智能手环时间显示
Sep 18 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+mysql来做一个功能强大的在线计算器
2010/10/12 PHP
Session服务器配置指南与使用经验的深入解析
2013/06/17 PHP
php获取本周星期一具体日期的方法
2015/04/20 PHP
解决php的“It is not safe to rely on the system’s timezone settings”问题
2015/10/08 PHP
windows8.1下Apache+Php+MySQL配置步骤
2015/10/30 PHP
php正则提取html图片(img)src地址与任意属性的方法
2017/02/08 PHP
PHP获取HTTP body内容的方法
2018/12/31 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
CL vs ForZe BO5 第二场 2.13
2021/03/10 DOTA
Jquery升级新版本后选择器的语法问题
2010/06/02 Javascript
jQuery提交表单ajax查询实例代码
2012/10/07 Javascript
由点击页面其它地方隐藏div所想到的jQuery的delegate
2013/08/29 Javascript
jQuery中extend函数详解
2015/02/13 Javascript
Javascript 跨域知识详细介绍
2016/10/30 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
2019/07/29 Javascript
express框架中使用jwt实现验证的方法
2019/08/25 Javascript
[49:20]2014 DOTA2国际邀请赛中国区预选赛5.21 CIS VS TongFu
2014/05/22 DOTA
Python随机读取文件实现实例
2017/05/25 Python
对numpy中数组元素的统一赋值实例
2018/04/04 Python
python3 常见解密加密算法实例分析【base64、MD5等】
2019/12/19 Python
Python 爬虫性能相关总结
2020/08/03 Python
iHerb香港:维生素、补充剂和天然保健品
2017/08/01 全球购物
印尼披萨外送专家:Domino’s Pizza印尼
2017/12/28 全球购物
Python使用openpyxl复制整张sheet
2021/03/24 Python
师范生教师实习自我鉴定
2013/09/27 职场文书
中职应届生会计求职信
2013/10/23 职场文书
学生的自我鉴定范文
2013/10/24 职场文书
前台接待员岗位职责
2014/01/02 职场文书
会议接待欢迎词
2014/01/12 职场文书
美术教师个人总结
2015/02/06 职场文书
2015年农村党员干部主题教育活动总结
2015/03/25 职场文书
简单的辞职信范文(2016最新版)
2015/05/12 职场文书
运动会宣传稿100字
2015/07/23 职场文书
JS新手入门数组处理的实用方法汇总
2021/04/07 Javascript
用Python创建简易网站图文教程
2021/06/11 Python
nginx日志格式分析和修改
2022/04/28 Servers