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. vue2.0+vue-dplayer实现hls播放

    vue2.0+vue-dplayer实现hls播放 开始 安装依赖 npm install vue-dplayer -S 1,编写组件HelloWorld.vue <template> & ...

  2. ShapeDrawable

    形状的Drawable咯,定义基本的几何图形,如(矩形,圆形,线条等),根元素是<shape../> 节点比较多,相关的节点如下: ① <shape>: ~ visible:设 ...

  3. 阿里RDS数据库 全量备份恢复到本地MYSQL

    阿里RDS数据库 全量备份恢复到本地MYSQL   1.首先下载RDS的全量备份 下载完成后上传到服务器备用   2.安装MySQL 5.6 首先删除机上其他的MySQL版本 检查系统是否安装其他版本 ...

  4. javascript两个数组内容合并

    需求: ,,]; ,,]; 最终结果: [,,,,,] 代码: Array.prototype.addAll= function(arr) { this.push.apply(this, arr); ...

  5. JavaScript:undefined!=false之解 及==比较的规则

    JS中有一个基本概念就是: JavaScript中undefined==null 但undefined!==null undefined与null转换成布尔值都是false 如果按照常规想法,比如下面 ...

  6. 【Web】利用jquery实现百度新闻导航菜单滑动动画

    前言 前两天,群里有人问百度新闻导航是如何实现的,当时由于忙于工作,没有来得及细看,恰好今天有空闲时间,索性就实现一下这个效果吧: 思路与步骤 1.利用UL创建简单横向导航: <!DOCTYPE ...

  7. Flutter 拖拽控件Draggable

    Flutter提供了强大的拖拽控件,可以灵活定制,并且非常简单.下面作一个拖拽的案例. Draggable Widget Draggable控件负责就是拖拽,父层使用了Draggable,它的子元素就 ...

  8. 最新 顺网科技java校招面经 (含整理过的面试题大全)

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.顺网科技得等10家互联网公司的校招Offer,因为某些自身原因最终选择了顺网科技.6.7月主要是做系统复习.项目复盘.Lee ...

  9. 线上Storm的worker,executor,task参数调优篇

    问题引入: 线上最近的数据量越来越大,出现了数据处理延迟的现象,观察storm ui的各项数据,发现有大量的spout失败的情况,如下: ------------------------------- ...

  10. C++编写DLL文件

    动态链接库DLL文件与EXE文件一样也是可执行文件,但是DLL也被称为库,因为里面封装了各种类.函数之类的东西,就像一个库一样,存着很多东西,主要是用来调用的.调用方式主要分为两种:隐式(通过lib文 ...