ES6 数组方法 --- map() filter() find()的用法

最新推荐文章于 2023-11-30 18:00:28 发布
最新推荐文章于 2023-11-30 18:00:28 发布
阅读量386 收藏
点赞数
分类专栏： 前端 文章标签： javascript
原文链接：https://www.cnblogs.com/lovekiku123/p/11822288.html
版权

ES6 数组方法 — map() filter() find()的用法

  1. map()

    输出结果：（3）[2,4,6]

那如果用ES5语法的话如何去实现呢？
在这里插入图片描述
可以发现，是不是必须要创建一个空数组？而使用map()就不需要。那么 .map() 是怎么运行的呢？实际上对数组的每个元素都遍历一次(就不用写forEach自己去遍历了)，同时返回一个新的值。记住一点是返回的这个数据的长度和原始数组长度是一致的。值得注意的是：必须要加return，否则返回的是undefined。
在这里插入图片描述

2.filter()
假如你有一个数组，你只想要这个数组中的一些元素怎么办呢？这时候 .filter() 就非常好用了。来看几个例子吧!
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
3.find()
find()这个方法看表面意思就知道是用来查找的。先看看在ES5的语法中怎么去实现查找一个对象里的元素的。
在这里插入图片描述

这样做虽然达到了目的，但是当查找的这个元素不是最后一个的时候，它还会继续往下遍历查找。这样做就会耗时好力。但是也有解决的方法，就是在查找语句后加上break
在这里插入图片描述
那通过ES6的语法find()怎么实现呢，来看下面几个例子吧。

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
总结：find可以返回数组里面指定的一个值或者对象

南方酒馆
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ES6数组方法比较示例
03-08
本示例将深入探讨几个关键的ES6数组方法，包括`map()`, `filter()`, `reduce()`, `find()`, `findIndex()`以及`forEach()`，并通过具体的代码实例来展示它们的用法和差异。 1. **`map()`方法**： - `map()`方法...
es6数组的方法的集合
03-01
ES6 是 JavaScript 的一个重大更新，引入了许多新的特性和语法改进，其中对于数组处理的增强是重要的部分。这里我们将详细探讨这些方法的功能、用途以及如何使用它们。 1. `push()`：这个方法允许你在数组的末尾...
ES6 map()遍历、filter()筛选--随记
08-11 212
https://blog.csdn.net/zuorishu/article/details/80958705 let arr1 = [1,2,3]; let arr2 = arr1.map((value,key,arr) => { console.log(value) // 1，2，3 console.log(key) // 0，1，2 ...
ES6 map()遍历、filter()筛选的使用
Web_Notes的博客
09-14 866
map()遍历 比如：有一个数组对象，arrt=[{id：1，name:'a},{id:2,name:b}] 我需要取到里面的id，组成一个数组 情况1-简单使用： let arrt=[{id：1，name:'a},{id:2,name:b}] let needArry=arrt.map(item=>item.id) console.log(needArry) // [1,2] 情况2： map可以return 返回一个新数组，对原本数组的值进行改变 let arr1 = [1,2,3]; let
ES6 map()遍历、filter()筛选 的简单使用
最新发布
weixin_43988116的博客
11-30 655
比如：有一个数组对象，arrData = [{ id: 1, name: ‘a’ }, { id: 2, name: ‘b’ }]转载：https://blog.csdn.net/Web_Notes/article/details/120287387。filter需要在循环的时候判断一下是true还是false，是true才会返回这个元素。filter函数可以看成是一个过滤函数，返回符合条件的元素的数组。2.filter() 去掉空字符串、undefined、null。filter()筛选。
ES6数组方法之find()、 filter() 和map()用法
qq_49975871的博客
12-07 551
ES6之find filter 和map用法
ES6的filter、map、reduce
小鹿的博客
07-12 524
提出问题 现在有一个需求：给一个数字数组，我们要对其进行一些操作 首先，将所有小于60的数取出来，然后将这些数都乘以2，最后将乘以2后的数全部加起来，最后打印加起来的值 其实这个需求挺简单的，无非就是几个循环，创建几个新数组保存一下，然后进行累加打印就行了。 好，既然提出了解决方法，那么直接撸代码 let arr = [30, 50, 142, 305, 20, 16, 66, 77, 88] let arr1 = [] let arr2 = [] let sum = 0 // 这个循环把所有小于60的数放
ES6数组方法find()、findIndex()的总结
01-08
②ES5新增数组方法（例：map()、indexOf()、filter()等） ③ES6新增字符串扩张方法includes()、startsWith()、endsWith() 1. find() 该方法主要应用于查找第一个符合条件的数组元素，即返回通过测试（函数内判断）...
详解ES6数组方法find()、findIndex()的总结
01-19
②ES5新增数组方法（例：map()、indexOf()、filter()等） ③ES6新增字符串扩张方法includes()、startsWith()、endsWith() 1. find() 该方法主要应用于查找第一个符合条件的数组元素，即返回通过测试（函数内判断）的...
js代码-es6新增数组方法
07-14
让我们深入探讨一下这些ES6新增的数组方法。 1. **`Array.from()`**： 这个方法允许我们从类数组对象或可迭代对象创建一个新的数组实例。类数组对象是指拥有一个length属性和若干索引属性的对象。例如，可以将HTML...
es6 filter函数的用法_ES6 map()遍历、filter()筛选 的简单使用
weixin_39767322的博客
12-21 555
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，3c...
ES6--find()方法的使用
Franklin_k的博客
04-13 6709
es6提供了一种更方便操作数据的方法find() find() 方法就是根据传入的函数遍历数组中每一个元素，返回值为数组中第一个符合条件的值 直接上代码 //根据id查询student数据，返回符合条件的id students.find(function(item){ return item.id === students.id }) 注...
ES6 -- find 详解
聪明勇敢有力气的博客
10-05 1万+
find 详解 两个参数 返回值 手写myFind
JS ES6数组操作大全【forEach、map、filter、some、every、reduce、findIndex、find、slice、splice、push、unshift】
dingdingdandan
06-11 6507
整理了一下ES6中数组常见的操作方法，包含：forEach、map、filter、some、every、reduce、findIndex、find、slice、splice、push、unshift。
[ES6] 理解JavaScript中 map、forEach、filter 和 find 与箭头函数的使用
zhtbs的博客
03-24 1741
如果你是一个刚开始学习 JavaScript 的人，你可能会觉得编写箭头函数很容易。但如果在箭头函数出现之前你已经习惯了 JavaScript 的写法，那么在你适应之前，每次遇到箭头函数时，你可能需要上网搜索箭头函数的语法或整理笔记。我相信很多人都有这样的经历。然而，一旦你适应了箭头函数的写法，你就可以写出更简洁的代码，以至于在以后你可能会忘记传统的写法。在本文中，我们将讲解如何使用箭头函数和 map、forEach、find、filter 函数，帮助你掌握箭头函数的编写方法和各个函数的使用方法。
es6 数组处理 find、 filter、map、some、every 之间的区别
weixin_40256885的博客
06-01 1076
find filter map some every
结合ES6谈一下JS里面的find()方法的使用及注意事项
热门推荐
红岸基地
08-06 6万+
首先简单的介绍一下ES6是什么，可能很多人还是第一次听说，我们都知道H5是html的新一代的标准，同样，ES6是javascript的新一代标准，全称是ECMAScript 6.0，简称ES6，其实不是什么神秘的东西。15年6月发布的。 今天我们要说的是结合ES6新特性谈一下js里面的一个很好用的方法-find() 现在的前端和过去的不一样，过去的前端只要会画页面就行了，但是现在仅仅会画页面已...
ES6语法find查找匹配数组
frank_fong的博客
03-22 1万+
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>find查找数组数据</title> </head> <body> <script> let myId = 3; l
手写ES6数组常用方法（forEach,filter,map,find)
m0_45093055的博客
03-23 461
手写ES6数组方法，可加深对ES6数组方法的了解
es6数组处理方法
05-24
ES6引入了许多有用的数组处理方法，下面是其中一些常用的方法： 1. map()：对数组中的每个元素执行指定的操作，并返回一个新的数组。 ```javascript const numbers = [1, 2, 3, 4, 5]; const doubled = numbers....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值