Es6 filter()、map()、find()方法详解

一、简介

a. filter(): 主要用于筛选过滤数组，返回符合筛选条件的数据，不会改变原数组。

b. map():主要用于循环遍历数组，也可以根据某些条件筛选数据，不会改变原数组。

c. find(): 主要用于查找数组的数据，只要查找到一条符合条件的数据，直接返回，不会再继续查找下去。没有找到符合条件的数据返回undefined。

二、使用详解

a. filter()方法

let arr1 = [{name: 'zhangsan', age: 18, sex: 'male'},{name: 'lisi', age: 30, sex: 'male'},{name: 'xiaohong', age: 20, sex: 'female'}];//filter()方法：主要用于过滤筛选数组，数组filter后，返回的结果为新的数组,不会改变原数组的值//filter示例1:返回年龄大于20岁的数据let arr2 = arr1.filter(item => item.age > 20);console.log(arr2);   // [{name: "lisi", age: 30, sex: "male"}]console.log(arr1);   // [{name: 'zhangsan', age: 18, sex: 'male'},{name: 'lisi', age: 30, sex: 'male'},{name: 'xiaohong', age: 20, sex: 'female'}]//filter示例2：返回不是男生的数据let arr3 = arr1.filter((item) => {return item.sex !== 'male';});console.log(arr3);  // [{name: "xiaohong", age: 20, sex: "female"}]

b. map()方法

 //map()方法主要用于遍历数组,操作数据不会改变原数组let arr4 = [{name: 'zhangsan', age: 18, sex: 'male'},{name: 'lisi', age: 30, sex: 'male'},{name: 'xiaohong', age: 20, sex: 'female'}];//map示例1：循环遍历数组，返回每个人的年龄+1之后的数据let arr5 = arr4.map(item => item.age + 1);console.log(arr5);  //[19, 31, 21]console.log(arr4);  //[{name: 'zhangsan', age: 18, sex: 'male'},{name: 'lisi', age: 30, sex: 'male'},{name: 'xiaohong', age: 20, sex: 'female'}]//map示例2：循环遍历数组,根据某个条件筛选过滤数组let arr6 = arr4.map((item) => {if (item.age > 20) {return item;}});console.log(arr6);  //[undefined,{name: 'lisi', age: 30, sex: 'male'},undefined]

c. find()方法

  //find示例1：查找name='zhangsan'的数据let arr8 = arr7.find(item => item.name === 'zhangsan');console.log(arr8);  //只返回了第一条数据 {name: "zhangsan", age: 18, sex: "male"}let arr9 = arr7.find(item => item.name === 'wangwu');console.log(arr9);  //没有找到符合条件的数据，返回undefined//注意： 与filter()方法区别 filter会一直查找下去，返回符合name='zhangsan'的全部数据let arr10 = arr7.filter(item => item.name === 'zhangsan');console.log(arr10); //返回两条数据 [{name: "zhangsan", age: 18, sex: "male"}1: {name: "zhangsan", age: 20, sex: "female"}]

Es6 filter()、map()、find()方法详解相关推荐

html页面设置拦截器,SpringBoot拦截器Filter的使用方法详解
SpringBoot拦截器Filter的使用方法详解发布时间:2020-08-27 22:44:03 来源:脚本之家阅读:107 作者:玉天恒前言: 最新Servlet 3.0拦截器的使用 1. ...
java 三种将list转换为map的方法详解
这篇文章主要介绍了java 三种将list转换为map的方法详解的相关资料,需要的朋友可以参考下 java 三种将list转换为map的方法详解在本文中,介绍三种将list转换为map的方法: 1) ...
java1.8新增超实用Map方法——Map.getOrDefault()和Map.value()方法详解
1. Map.getOrDefault() 翻译一下官方解释: java.util.Map<K, V> V getOrDefault(Object key, V defaultValue) ...
ES5和ES6数组遍历方法详解
ES5和ES6数组遍历方法详解在ES5中常用的10种数组遍历方法: 1.原始的for循环语句 2.Array.prototype.forEach数组对象内置方法 3.Array.prototype. ...
java+getactionmap_Struts2 使用OGNL遍历map方法详解
一.Action中的代码:MapAction.java package com.zx.demo.action; import java.util.ArrayList; import java.util ...
python的装饰器迭代器与生成器_python3 装饰器、列表生成器、迭代器、内置方法详解等（第四周）...
前言: 为什么要学习python3? 原因: 1.学习一门语言能力 2.通过该语言能力完成测试自动化以及独立完成自测框架知识那么我要做什么呢? 1.每天花十个小时完成python3的学习要在什么地 ...
jquery遍历多个li_21个jQuery遍历节点方法详解
本篇教程介绍了21个jQuery遍历节点方法详解,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入. < 1.children()方法:$('div').children( ...
【JavaScript 教程】ES6 中的 Promise对象详解
[JavaScript 教程]ES6 中的 Promise对象详解 1.Promise对象含义 promise是异步编程的一种解决方法. 所谓promise,简单说是一个容器,里面保存着某个未来才会 ...
Laravel学习笔记汇总——Collection方法详解
## Laravel学习笔记汇总--Collection方法详解本文参考:https:// laravel.com/docs/8.x/collections // 返回整个底层的数组 collect ...
Spring JdbcTemplate方法详解
2019独角兽企业重金招聘Python工程师标准>>> Spring JdbcTemplate方法详解标签: springhsqldbjava存储数据库相关sql 2012-07- ...

Es6 filter()、map()、find()方法详解

Es6 filter()、map()、find()方法详解相关推荐

最新文章

热门文章