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 轻松支持函数重载 (Part 2 - 实现)
Aug 04 Javascript
键盘 keycode的值 javascript时触发事件时很有用的要素
Nov 02 Javascript
关于文本框的一些限制控制总结~~
Apr 15 Javascript
CSS和JS标签style属性对照表(方便js开发的朋友)
Nov 11 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
Jan 08 Javascript
详细介绍8款超实用JavaScript框架
Oct 25 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
Nov 22 Javascript
调试JavaScript中正则表达式中遇到的问题
Jan 27 Javascript
js判断浏览器类型及设备(移动页面开发)
Jul 30 Javascript
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
详解封装基础的angular4的request请求方法
Jun 05 Javascript
如何使用pm2快速将项目部署到远程服务器
Mar 12 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&amp;MYSQL分页原理及实现
2007/01/02 PHP
Dedecms常用函数解析
2008/02/01 PHP
frename PHP 灵活文件命名函数 frename
2009/09/09 PHP
解析:使用php mongodb扩展时 需要注意的事项
2013/06/18 PHP
解决php 处理 form 表单提交多个 name 属性值相同的 input 标签问题
2017/05/11 PHP
javascript读取RSS数据
2007/01/20 Javascript
js中的时间转换—毫秒转换成日期时间的示例代码
2014/01/26 Javascript
jquery中$.post()方法的简单实例
2014/02/04 Javascript
Javascript操作表单实例讲解(下)
2016/06/20 Javascript
浅谈Vue.js中ref ($refs)用法举例总结
2017/12/19 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
2017/12/25 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
2020/01/06 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
2020/02/10 Javascript
原生JavaScript实现进度条
2021/02/19 Javascript
python中字符串前面加r的作用
2015/06/04 Python
python基础知识小结之集合
2015/11/25 Python
Python计算字符宽度的方法
2016/06/14 Python
Python语言描述机器学习之Logistic回归算法
2017/12/21 Python
Python实现连接MySql数据库及增删改查操作详解
2019/04/16 Python
详解pyppeteer(python版puppeteer)基本使用
2019/06/12 Python
Python利用pandas处理Excel数据的应用详解
2019/06/18 Python
Python编译为二进制so可执行文件实例
2019/12/23 Python
VSCode配合pipenv搞定虚拟环境的实现方法
2020/05/17 Python
Python计算信息熵实例
2020/06/18 Python
英国景点门票网站:attractiontix
2019/08/27 全球购物
商场消防管理制度
2014/01/12 职场文书
借款协议书范本
2014/04/22 职场文书
县长群众路线对照检查材料思想汇报
2014/10/02 职场文书
2014年计生协会工作总结
2014/11/21 职场文书
优秀护士事迹材料
2014/12/25 职场文书
革命电影观后感
2015/06/18 职场文书
2016年5月份红领巾广播稿
2015/12/21 职场文书
600字作文之感受大自然
2019/11/27 职场文书
2019年冬至:天冷暖人心的问候祝福语大全
2019/12/20 职场文书
Python自动化工具之实现Excel转Markdown表格
2022/04/08 Python