javascript数组常用的遍历方法
本篇文章给大家带来的内容是关于javascript数组常用的遍历方法(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
前言
本文主要介绍数组常见遍历方法:forEach、map、filter、find、every、some、reduce,它们有个共同点:不会改变原始数组。
一、forEach:遍历数组
1 2 3 4 5 |
|
1 2 3 4 |
|
我们再来看个例子:遍历数组中的值,并计算总和
1 2 3 4 |
|
二、map:将数组映射成另一个数组
map通过指定函数处理数组的每个元素,并返回处理后新的数组,map 不会改变原始数组。
forEach和map的区别在于,forEach没有返回值。
map需要返回值,如果不给return,默认返回undefined
使用场景1
假定有一个数值数组(A),将A数组中的值以双倍的形式放到B数组
1 2 3 4 5 6 7 |
|
1 2 3 4 5 |
|
使用场景2 假定有一个对象数组(A),将A数中对象某个属性的值存储到B数组中
1 2 3 4 5 6 7 8 |
|
三、filter:从数组中找出所有符合指定条件的元素
filter() 检测数值元素,并返回符合条件所有元素的数组。 filter() 不会改变原始数组。
使用场景1:假定有一个对象数组(A),获取数组中指定类型的对象放到B数组中
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
1 2 3 4 5 |
|
使用场景2:假定有一个对象数组(A),过滤掉不满足以下条件的对象
条件: 蔬菜 数量大于0,价格小于10
1 2 3 4 5 6 7 8 9 10 11 12 |
|
使用场景3:假定有两个数组(A,B),根据A中id值,过滤掉B数组不符合的数据
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
四、find:返回通过测试(函数内判断)的数组的第一个元素的值
它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。
使用场景1
假定有一个对象数组(A),找到符合条件的对象
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
1 2 3 4 5 |
|
使用场景2:假定有一个对象数组(A),根据指定对象的条件找到数组中符合条件的对象
1 2 3 4 5 6 7 8 9 10 11 |
|
五、every&some
every:数组中是否每个元素都满足指定的条件
some:数组中是否有元素满足指定的条件
使用场景1:计算对象数组中每个电脑操作系统是否可用,大于16位操作系统表示可用,否则不可用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
1 2 3 4 5 6 7 8 9 |
|
一言以蔽之:Every: 一真即真;Some: 一假即假
使用场景2:假定有一个注册页面,判断所有input内容的长度是否大于0
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
|
六、reduce:将数组合成一个值
reduce() 方法接收一个方法作为累加器,数组中的每个值(从左至右) 开始合并,最终为一个值。
使用场景1: 计算数组中所有值的总和
1 2 3 4 5 6 7 |
|
1 2 3 4 5 6 |
|
使用场景2:
将数组中对象的某个属性抽离到另外一个数组中
1 2 3 4 5 6 7 8 9 10 |
|
使用场景3:判断字符串中括号是否对称
1 2 3 4 5 6 7 8 9 |
|
以上就是javascript数组常用的遍历方法(代码示例)的详细内容。
本文转载于:segmentfault,仅因写的全面,故拿来做笔记,如有侵犯,请联系删除。
javascript数组常用的遍历方法的更多相关文章
- C语言 数组做函数参数不传数组个数的遍历方法
//数组做函数参数不传数组个数的遍历方法 #include<stdio.h> #include<stdlib.h> #include<string.h> void ...
- JavaScript 数组(Array)对象的方法
JavaScript 数组(Array)对象的方法 concat() 描述:用于连接两个或多个数组.该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本. 原型:arrayObject.conc ...
- JavaScript数组的22种方法
原文:http://www.cnblogs.com/xiaohuochai/p/5682621.html javascript中数组的22种方法 前面的话 数组总共有22种方法,本文将其分为对象继 ...
- JavaScript数组常用操作
前言 相信大家都用惯了jquery或者underscore等这些类库中常用的数组相关的操作,如$.isArray,_.some,_.find等等方法.这里无非是对原生js的数组操作多了一些包装. 这里 ...
- Javascript数组Array的forEach方法
Javascript数组Array的forEach扩展方法 forEach是最常用到的数组扩展方法之一,相当于参数化循环数组,它简单的在数组的每一个元素上应用传入的函数,这也意味着只有存在的元素会被访 ...
- js 数组常用的一些方法
数组可以说是js经常会遇到的数据结构,以下我们对数组进行详细的学习! 一.数组的创建 var mycars = new Array(): || new Array(3); || new Array( ...
- JavaScript数组常用操作总结
我们在日常开发过程中,使用到原生 JavaScript的时候,有时候会频繁的对数组进行操作,今天我把工作以来,经常用到的有关 JavaScript数组的方法总结一下,方便日后工作的时候查找使用! 一. ...
- Javascript数组(1)--基本属性及方法
数组Array是Javascript语言中非常重要的两种引用类型数据之一,另外一种为对象Object.Array的数据模型可分为两种进行存储:堆栈结构.队列结构. 昨天,确切说是前天了,去和大学同学见 ...
- javascript数组的属性、方法和清空-最全!!!(必看)
今天经理要我从新看一遍js,当我再看<精通js和jquery>这本书时,发现关于数组的这章节讲的很少,于是想自己总结一下数组的常用方法. 定义数组: var arr = new Array ...
随机推荐
- C语言小程序(六)、数组操作
对数组进行操作,查找.插入.删除. #include <stdio.h> #include <stdlib.h> #include <time.h> int siz ...
- EasyDarwin+ffmpeg进行PC(摄像头+麦克风)流媒体直播服务
上一回我们描述了用EasyDarwin+ffmpeg进行摄像机直播的过程:ffmpeg推送,EasyDarwin转发,vlc播放 实现整个RTSP直播 我们再进行一个方面的描述,那就是pc摄像头+麦克 ...
- aac格式介绍
AAC编码后数据打包到FLV很简单. 1. FLV音频Tag格式 字节位置 意义0x08, ...
- bzoj 4031: 小Z的房间 矩阵树定理
bzoj 4031: 小Z的房间 矩阵树定理 题目: 你突然有了一个大房子,房子里面有一些房间.事实上,你的房子可以看做是一个包含n*m个格子的格状矩形,每个格子是一个房间或者是一个柱子.在一开始的时 ...
- 【LeetCode】036. Valid Sudoku
题目: Determine if a Sudoku is valid, according to: Sudoku Puzzles - The Rules. The Sudoku board could ...
- .NET接入微信支付(一)JS API接入 V3
前段时间刚接完银联支付,完事后又接了微信支付,前段时间一直急着上线,微信的接入一直没有时间处理,今天我们就来整理一下微信支付的接入方法和要点. 配置: 首先呢微信支付需要通过审核,审核啥的准备工作我就 ...
- 【转】深刻理解render 和 redirect_to
由于最近老是在表单提交后出现没有反应的现象,发现是在action中的使用render 和 redirect_to的原因,于是就想搞清楚他两真正的区别在哪里,上一遍的blog也谈到了这二者的区别,但是有 ...
- 加载某个页面(A)时实现自动跳转到某个页面(B)
<head> <title></title> <script type="text/javascript"> function fu ...
- shell入门-系统和用户的配置文件
变量分为系统变量和用户自定义变量,他们的配置文件当然分为系统环境变量配置文件和用户环境变量控制文件 1.规定环境变量的配置文件 [root@wangshaojun 111]# vim /etc/pro ...
- @Deprecated使用技巧
本文转自 http://www.cnblogs.com/hzhuxin/p/4645070.html 我们在做项目时,前期写的类中的一些代码可能由于需求变化的原因需要重写,有时重写时方法的传参和返回值 ...