目录:

-------- 1、map()

-------- 2、filter():

------------- 2.1、filter函数可以看成是一个过滤函数,返回符合条件的元素的数组

-------- 3、filter() 筛选符合条件项

-------- 4、filter() 数组去重

-------- 5、filter() 去掉空字符串、undefined、null

-------- 6、filter() 筛选数组对象

------------ 6.1、单个条件筛选:筛选出对象.a属性不等于苹果的对象集合

------------ 6.2、多个筛选条件:筛选数组对象中a属性是苹果,b属性是面包的对象集合

map():

map和forEach等遍历方法不同,在forEach中return语句是没有任何效果的,而map则可以改变当前循环的值,返回一个新的被改变过值之后的数组(map需return),一般用来处理需要修改某一个数组的值。

let arr1 = [1,2,3];
let arr2 = arr1.map((value,key,arr) => {
console.log(value) // 1,2,3
console.log(key) // 0,1,2
console.log(arr) //[1,2,3] [1,2,3] [1,2,3]
return value * value;
})
console.log(arr1); // [ 1, 2, 3 ]
console.log(arr2); // [ 1, 4, 9 ]

filter():

filter函数可以看成是一个过滤函数,返回符合条件的元素的数组

filter需要在循环的时候判断一下是true还是false,是true才会返回这个元素;

let arr1 = [1,2,3];
let arr2 = arr1.filter((value,key,arr) => {
console.log(value) // 1,2,3
console.log(key) // 0,1,2
console.log(arr) // [1,2,3]
return value >= 3 ? false : true; //内部走的就是value>=3 成立吗,成立的部分返回,不成立的部分不返回。
})
console.log(arr1); // [ 1, 2, 3 ]
console.log(arr2); // [ 1, 2 ]

filter() 筛选符合条件项

//返回数组中大于等于 2的新数组
console.log("--------------筛选出(大于等于2的)-----------------------")
let arr = [1, 2, 3]
let newArr = arr.filter(item => item >= 2)
console.log(newArr)

filter() 数组去重

let arr5 = [1, 2, 2, 3, 4, 5, 5, 6];
let newArr4 = arr5.filter((x, index, self) => {
return self.indexOf(x) === index
})
console.log(newArr4) //[1,2,3,4,5,6]

filter() 去掉空字符串、undefined、null

//filter() 去掉空字符串、undefined、null
let arr4 = ['', '1', '2', undefined, '3.jpg', undefined]
let newArr3 = arr4.filter(item => item)
console.log(newArr3); //['1', '2', '3.jpg']

filter() 筛选数组对象

单个条件筛选:筛选出对象.a属性不等于苹果的对象集合

let arr = [
{a:'苹果',b:'面包',c:'吃'},
{a:'香蕉',b:'面包',c:'不吃'},
{a:'香蕉',b:'苹果',c:'吃'},
{a:'苹果',b:'香蕉',c:'不吃'},
]

 let newarr8 = arr7.filter((value, index, arr) => {
   return value.a != '苹果'
 })
 console.log(newarr8) //[{a:'香蕉',b:'面包',c:'不吃'},{a:'香蕉',b:'苹果',c:'吃'}]

多个筛选条件:筛选数组对象中a属性是苹果,b属性是面包的对象集合:

let a = '苹果'; //筛选参数a
let b = '面包'; //筛选参数b
let c = '' //筛选参数c
let arr = [
{a:'苹果',b:'面包',c:'吃'},
{a:'香蕉',b:'面包',c:'不吃'},
{a:'香蕉',b:'苹果',c:'吃'},
{a:'苹果',b:'香蕉',c:'不吃'},
];
if (a != '') {
arr = arr.filter(item => item.a === a)
}
if (b != '') {
arr = arr.filter(item => item.b === b)
}
if (c != '') {
arr = arr.filter(item => item.c === c)
}
console.log(arr) // 筛选结果: [{a:'苹果',b:'面包',c:'吃'}]

ES6 Map遍历、filter()筛选对象的更多相关文章

  1. ES6 map与filter

    ES6 map与filter 1.map let arr1 = [1,2,3]; let arr2 = arr1.map((value,key,arr) => { console.log(val ...

  2. ES6 map()遍历、filter()筛选 的简单使用

    map(): map和forEach等遍历方法不同,在forEach中return语句是没有任何效果的,而map则可以改变当前循环的值,返回一个新的被改变过值之后的数组(map需return),一般用 ...

  3. es6 map()和filter()详解【转】

    原文地址:http://www.zhangxinxu.com/wordpress/2013/04/es5%e6%96%b0%e5%a2%9e%e6%95%b0%e7%bb%84%e6%96%b9%e6 ...

  4. ES6 数组遍历方法的实战用法总结(forEach,every,some,map,filter,reduce,reduceRight,indexOf,lastIndexOf)

    目录 forEach every some map filter reduce && reduceRight indexOf lastIndexOf 前言 ES6原生语法中提供了非常多 ...

  5. js中三个对数组操作的函数 indexOf()方法 filter筛选 forEach遍历 map遍历

     indexOf()方法  indexOf()方法返回在该数组中第一个找到的元素位置,如果它不存在则返回-1. 不使用indexOf时 var arr = ['apple','orange','pea ...

  6. Jquery遍历筛选数组的几种方法和遍历解析json对象|Map()方法详解

    Jquery遍历筛选数组的几种方法和遍历解析json对象|Map()方法详解 一.Jquery遍历筛选数组 1.jquery grep()筛选遍历数组 $().ready( function(){ v ...

  7. jquery遍历筛选数组的几种方法和遍历解析json对象

    jquery grep()筛选遍历数组 $().ready(    function(){        var array = [1,2,3,4,5,6,7,8,9];        var fil ...

  8. js里面的map、filter、forEach、reduce、for in、for of等遍历方法

    1.map 遍历数组,改变原数组 [2, 3, 4, 5].map(function(val, key,arr) { return val > 3; }) var data = [ { name ...

  9. lambda匿名函数,sorted排序,filter()筛选,map()映射

    一丶匿名函数 语法: 函数名 = lambda参数:返回值 # 普通的正常的函数 def func(n): return n * n ret = func(9) print(ret) # 匿名函数 a ...

随机推荐

  1. apache2 + django 路径问题

    问题: 在代码中使用sys.path.append(), 添加模块路径后,仍然报错找不到包. 虽然在LD_LIBRARY_PATH中配置了.so文件打路径,仍然报错找不到. 原因: 检查apahce2 ...

  2. SQL端通过脚本判断文件夹是否存在 并创建

    做数据库备份作业的时候..想按日期建立文件夹.. 首先要判断文件夹是否存在 ) --路径 ) --日期 例如: 20171011 SET @DATE=CAST(DATEPART(YYYY,GETDAT ...

  3. 与native交互时会出现的问题

    1.jsbridge:  可以用jsbridge与native交互,这属于第三方库,前端后端都需要加jsbridge 2.可以直接调用原生的方法,ios:  window.webkit.message ...

  4. Jquery执行效率提高的方法

    1.选择器性能排行:$("#ID") > $("Tag") > $(".Class") > $("[attrib ...

  5. python输出不换行

    python输出不换行 Python2的写法是: print 'hello', Python3的写法是: print('hello', end='') 对于python2和python3都兼容的写法是 ...

  6. Python机器学习库sklearn的安装

    Python机器学习库sklearn的安装 scikit-learn是Python的一个开源机器学习模块,它建立在NumPy,SciPy和matplotlib模块之上能够为用户提供各种机器学习算法接口 ...

  7. HTML 三角符号

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. nginx基本配置说明

    nginx基本配置与参数说明                         1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 2 ...

  9. 阿里云两台服务器之间拷贝文件命令scp

    参考:云栖社区 不同的Linux之间copy文件通常有4种方法 1.ftp 2.samba服务 3.sftp 4.scp 最简单的方法就是scp,可以理解为ssh管道下的cp命令 把当前一个文件cop ...

  10. iCheck

    iCheck改变 checkbox.radio的样式,原生或用bootstrap的都太丑. 简单用法:引用 <link rel="stylesheet" type=" ...