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 命名空间以提高代码重用性
Nov 13 Javascript
一些技巧性实用js代码小结
Oct 14 Javascript
JS 排序输出实现table行号自增前端动态生成的tr
Aug 13 Javascript
css与javascript跨浏览器兼容性总结
Sep 15 Javascript
浅谈Unicode与JavaScript的发展史
Jan 19 Javascript
jQuery使用drag效果实现自由拖拽div
Jun 11 Javascript
详解基于Bootstrap扁平化的后台框架Ace
Nov 27 Javascript
使用Script元素发送JSONP请求的方法
Jun 12 Javascript
angular源码学习第一篇 setupModuleLoader方法
Oct 20 Javascript
用React-Native+Mobx做一个迷你水果商城APP(附源码)
Dec 25 Javascript
Vue Router 实现动态路由和常见问题及解决方法
Mar 06 Javascript
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
基于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输出缓存ob系列函数详解
2014/03/11 PHP
yii2简单使用less代替css示例
2017/03/10 PHP
PHP实现用户异地登录提醒功能的方法【基于thinkPHP框架】
2018/03/15 PHP
javascript拓展DOM操作 prependChild insertAfert
2010/11/17 Javascript
Node.js生成HttpStatusCode辅助类发布到npm
2013/04/09 Javascript
javascript中普通函数的使用介绍
2013/12/19 Javascript
JQuery $.each遍历JavaScript数组对象实例
2014/09/01 Javascript
JS绘制生成花瓣效果的方法
2015/08/05 Javascript
javascript基于prototype实现类似OOP继承的方法
2015/12/16 Javascript
浅谈window.onbeforeunload() 事件调用ajax
2016/06/29 Javascript
Js遍历键值对形式对象或Map形式的方法
2016/08/08 Javascript
jQuery检查元素存在性(推荐)
2016/09/17 Javascript
Vue中定义全局变量与常量的各种方式详解
2017/08/23 Javascript
详解Vue中localstorage和sessionstorage的使用
2017/12/22 Javascript
iconfont的三种使用方式详解
2018/08/05 Javascript
Spring boot 和Vue开发中CORS跨域问题解决
2018/09/05 Javascript
浅析Vue.js中v-bind v-model的使用和区别
2018/12/04 Javascript
echarts柱状图背景重叠组合而非并列的实现代码
2020/12/10 Javascript
[44:50]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第二局
2016/02/26 DOTA
python使用PIL模块实现给图片打水印的方法
2015/05/22 Python
Python 逐行分割大txt文件的方法
2017/10/10 Python
Python编程之基于概率论的分类方法:朴素贝叶斯
2017/11/11 Python
基于python中theano库的线性回归
2018/08/31 Python
使用Python的OpenCV模块识别滑动验证码的缺口(推荐)
2019/05/10 Python
Python实现word2Vec model过程解析
2019/12/16 Python
python opencv圆、椭圆与任意多边形的绘制实例详解
2020/02/06 Python
pyecharts动态轨迹图的实现示例
2020/04/17 Python
python 实现图片裁剪小工具
2021/02/02 Python
HTML5中的Web Notification桌面右下角通知功能的实现
2018/04/19 HTML / CSS
波比布朗英国官网:Bobbi Brown英国
2017/11/13 全球购物
Oracle的内存结构(Memory structures)
2015/06/10 面试题
婚前协议书范本
2014/04/15 职场文书
网络技术专业求职信
2014/07/13 职场文书
2015年节能减排工作总结
2015/05/14 职场文书
建国大业观后感
2015/06/01 职场文书
2016年大学生就业指导课心得体会
2015/10/09 职场文书