ES6 map与filter

1、map

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 ]

2、filter

filter 过滤函数,返回符合条件的元素数组。

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 ]
  • 筛选符合条件项
//返回数组中大于等于 2的新数组
console.log("--------------筛选出(大于等于2的)-----------------------")
let arr = [1, 2, 3]
let newArr = arr.filter(item => item >= 2)
console.log(newArr)

  

  • 数组去重
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]

  

  • 去掉空字符串、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']

  

  • 筛选数组对象
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:'吃'}]

  

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()详解【转】

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

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

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

  3. (八)map,filter,flatMap算子-Java&Python版Spark

    map,filter,flatMap算子 视频教程: 1.优酷 2.YouTube 1.map map是将源JavaRDD的一个一个元素的传入call方法,并经过算法后一个一个的返回从而生成一个新的J ...

  4. python--函数式编程 (高阶函数(map , reduce ,filter,sorted),匿名函数(lambda))

    1.1函数式编程 面向过程编程:我们通过把大段代码拆成函数,通过一层一层的函数,可以把复杂的任务分解成简单的任务,这种一步一步的分解可以称之为面向过程的程序设计.函数就是面向过程的程序设计的基本单元. ...

  5. Swift函数编程之Map、Filter、Reduce

    在Swift语言中使用Map.Filter.Reduce对Array.Dictionary等集合类型(collection type)进行操作可能对一部分人来说还不是那么的习惯.对于没有接触过函数式编 ...

  6. python之map、filter、reduce、lambda函数 转

    python之map.filter.reduce.lambda函数  转  http://www.cnblogs.com/kaituorensheng/p/5300340.html 阅读目录 map ...

  7. [python基础知识]python内置函数map/reduce/filter

    python内置函数map/reduce/filter 这三个函数用的顺手了,很cool. filter()函数:filter函数相当于过滤,调用一个bool_func(只返回bool类型数据的方法) ...

  8. python的 map,filter, reduce, enumerate

    一, map     #基本的map运用都可以用解析去替代,复杂的仍然需要定义函数,利用map去做 map(函数, 序列) 将序列的各项经过函数处理, 然后返回到一个新列表中. #itertools. ...

  9. [Javascript] Chaining the Array map and filter methods

    Both map and filter do not modify the array. Instead they return a new array of the results. Because ...

随机推荐

  1. springboot整合redis(集群)

    一.加入maven依赖 <parent> <groupId>org.springframework.boot</groupId> <artifactId> ...

  2. BAPI_GOODSMVT_CREATE物料凭证增强字段

    项目MSEG 的 BAPI 表增强结构  BAPI_TE_XMSEG 抬头MKPF 的 BAIP 表增强 BAPI_TE_XMKPF 1. 在结构BAPI_TE_XMSEG中appending str ...

  3. pcntl_fork()函数说明

    pcntl_fork()函数复制了当前进程的PCB,并向父进程返回了派生子进程的pid,父子进程并行,打印语句的先后完全看系统的调度算法,打印的内容控制则靠pid变量来控制.因为我们知道pcntl_f ...

  4. ubuntu 18.04设置开机自动挂载移动硬盘

    首先在命令行执行df -h指令,可以看到如下结果: zifeiy@zifeiy-PC1:~$ df -h 文件系统 容量 已用 可用 已用% 挂载点 udev 964M 0 964M 0% /dev ...

  5. orac l e数据库第一章

    数据库两种权限:                    1.系统权限 2.对象权限 数据库端口号:                     SQL SERVER  1433 MySql   3306 ...

  6. 当微信小程序遇到AR(四)

    当微信小程序遇到AR,会擦出怎么样的火花?期待与激动...... 通过该教程,可以从基础开始打造一个微信小程序的AR框架,所有代码开源,提供大家学习. 本课程需要一定的基础:微信开发者工具,JavaS ...

  7. [非原创]Office 2019 增强版 批处理激活 亲测成功

    忘了原创网址了,在 https://www.52pojie.cn/ 上看到的,这里我备忘一下,希望知道原创网址的朋友告诉我一下,谢谢! 将下面批处理脚本存成.bat文件后,以管理员方式运行: @ech ...

  8. Leetcode之分治法专题-654. 最大二叉树(Maximum Binary Tree)

    Leetcode之分治法专题-654. 最大二叉树(Maximum Binary Tree) 给定一个不含重复元素的整数数组.一个以此数组构建的最大二叉树定义如下: 二叉树的根是数组中的最大元素. 左 ...

  9. 【ARM-Linux开发】ti CMEM使用

    1.CMEM Overview http://processors.wiki.ti.com/index.php/CMEM_Overview 2.Changing the DVEVM memory ma ...

  10. vue-router 在微信浏览器中操作history URl未改变的解决方案

    在PC端和手机浏览器中router.replace() or router.push()能够正常使用,页面的地址和页面都正常显示:但是在微信中,从/a页面通过router.push('/b')跳转到/ ...