最近工作中经常涉及到数据的处理,数组尤其常见,经常需要对其进行遍历、转换操作,网上的文章零零散散,不得已自己又找出红宝书来翻出来看,顺便记一笔,便于以后查询。

  • 数组常用的方法

ECMAScript5为数组定义了8个迭代方法。每个方法都接受两个参数:要在每一项上运行的函数fn和(可选的)运行该函数的作用域对象——影响 `this` 的值。

传入这些方法中的函数(fn)会接收3个参数:item 、index 、array; 如:

array.forEach(function(item,index,array){//do your staff here;
},this)

根据使用方法的不同,这个函数执行后的返回值,可能会/不会影响方法中的返回值。

  这5个迭代方法作用及返回值概览如下(末尾补充另外3个):

ECMAScript5 Array元素迭代方法
方法名 方法作用  返回值
every() 针对数组中每一项元素运行指定函数 Boolean:若每一项都返回true,返回true;
filter() 针对数组中每一项元素运行指定函数, Array:   返回函数运行返回true的元素组成的新数组
forEach() 针对数组中每一项元素运行指定函数 null:  无返回值
map() 针对数组中每一项元素运行指定函数  Array:  返回函数运行后,得到到新新元素组成的新数组
some() 针对数组中每一项元素运行指定函数 Boolean: 若有任意一项执行函数后返回true, 则返回true

简单来说:

every() 、some() 方法适合用于对数组元素进行条件判断;

filter()  、map() 方法适合用于对数组进行条件筛选/再处理;

forEach() 方法对不对数组本身做操作,仅仅对数组元素的二次应用;

下面介绍下各个方法的使用栗子:

先来假设一个场景,你拿到了公司的本月工资清单,假设你的工资为9000;公司员工工资组成的数组为salaries=[8500,12000,9900,9000],

a. 想知道 你的工资是不是最低的;

b.想知道 有没有人和你工资一样多;

c.想知道  是不是所有人待遇都一样;

d.想      把大家的工资都换成K为单位的数据

 1 var a,b,c,d;
 2 var your=9000;
 3 var salaries=[8500,12000,9900,9000];
 4  a=salaries.some(function(item,index,array){
 5    return  item<9000
 6 });
 7 console.log(a);//true;恭喜你,还有人比你工资更低
 8
 9
10 b=salaries.filter(function(item,index,array){
11    return item== your;
12 })
13 console.log(b);//[9000] 呵呵,有人跟你待遇一样
14
15 c=salaries.every(function(item,index,array){
16    return item==your;
17 });
18 console.log(c);//false .不是所有人都和你一样待遇哦
19
20 d=salaries.map(function(item,index,array){
21    return item/1000
22 });
23 console.log(d);//[8.5,12,9.9,9]

PS:补充三个遗漏的方法

1.array.reduce(callback,[initalValue]):归并函数——对每个数组元素执行回调函数,返回最后一次调用结果值

    //此处回调函数有4个参数,其中第4个参数可选;即calback(accumulator,value,index,array,initalValue)

2.Array.find(callback[,thisArg]):查找函数——返回第一个通过测试的元素

3.Array.findIndex(callback[,Arg]):查找函数——返回第一个通过测试的元素的索引值

看完这些是否觉得以后再也不需要for循环了,那么看看下面这个坑吧:

[1,2,3].map(parseInt);//[1,NaN,NaN]//注意:
//1.Array.map(iterm,index,array)
//2.parseInt(value,base)

转载于:https://www.cnblogs.com/hbzyin/p/6493371.html

JavaScript数组(2)---遍历/迭代方法 8种相关推荐

  1. 详解JavaScript数组过滤相同元素的5种方法

    详解JavaScript数组过滤相同元素的5种方法:https://www.jb51.net/article/114490.htm 转载于:https://www.cnblogs.com/bydzha ...

  2. 3种JavaScript 数组转换为字符串的方法

    英文 | https://javascript.plainenglish.io/how-to-convert-a-javascript-array-into-a-string-f066c8839a1d ...

  3. vue 循环遍历list_vue使用map代替Aarry数组循环遍历的方法

    需求:根据主键id来找到对应的数组下标 原本的方法是使用for循环遍历该数组,变量 i 就是下标,问题在于,如果有多重for循环,就会导致性能大大下降,数据也容易出错 因此使用map,让数组(原本是l ...

  4. 创建零填充JavaScript数组的最有效方法?

    在JavaScript中创建任意长度的零填充数组的最有效方法是什么? #1楼 使用对象符号 var x = []; 零填充? 喜欢... var x = [0,0,0,0,0,0]; 充满" ...

  5. java script 遍历数组_JavaScript中数组中遍历的方法

    前言 最近看了好几篇总结数组中遍历方法的文章,然而"纸上得来终觉浅",决定此事自己干.于是小小总结,算是自己练手了. 各种数组遍历方法 数组中常用的遍历方法有四种,分别是: for ...

  6. Javascript 数组循环遍历之forEach

    1.  js 数组循环遍历. 数组循环变量,最先想到的就是 for(var i=0;i<count;i++)这样的方式了. 除此之外,也可以使用较简便的forEach 方式 2.  forEac ...

  7. javascript数组的属性、方法和清空-最全!!!(必看)

    今天经理要我从新看一遍js,当我再看<精通js和jquery>这本书时,发现关于数组的这章节讲的很少,于是想自己总结一下数组的常用方法. 定义数组: var arr = new Array ...

  8. 17个实用的JavaScript数组和对象的方法

    原文:Useful Javascript Array and Object Methods 作者:Robert Cooper 译者:Jim Xiao 前段时间,我收听了一个很棒的Syntax FM播客 ...

  9. JavaScript 数组中的 indexOf 方法详解

    最近项目遇到一个小问题代码我会简化成小例子展示给大家. 用心看到最后会有收获哈,基础扎实的童鞋可以直接跳到数组类型使用. 说到 indexOf 大家并不陌生,判断字符串是否包涵子字符串时特别常用(正则 ...

最新文章

  1. 单分子测序揭示鹦鹉模仿能力
  2. Android wechat 分享
  3. python下什么-什么是Python?最全的python百科
  4. mongodb 3.4单实例安装与备
  5. 2020 我的C++学习之路 C++PrimerPlus第十章课后习题
  6. 实验2 SQL Server 表操作
  7. 关于简历的一点心得(纯属个人想法,非专业人士,欢迎批评指正~)
  8. pxe无人值守智能安装linux
  9. ThinkPHP中的三大自动简介
  10. 指向API的函数指针定义方法
  11. 11讲项目实战首页右侧悬浮框及内页面包屑导航
  12. CSP 2014-03-1 相反数(C++)
  13. iPhone投屏家中设备有哪些方法 iPhone投屏失败是怎么回事如何解决
  14. 计算机室电源插座的配置及配电线路,小型机安装场地要求及机房环境电气要求讲课教案.pdf...
  15. 解决调用wx.downLoadFile下载的文件名乱码(长串英文字符)问题
  16. 零基础学习之万物皆可GAN学习路线
  17. html css纵向滑动列表,css3页面鼠标纵向滑动效果
  18. 液晶显示屏划痕修复方法
  19. 实心和空心哪个抗弯能力强_同样材质,同样长度,质量相同的空心管和实心管,实心管抗弯曲能力强 (4.0分)...
  20. 全加器在计算机的应用,两个半加器组成全加器的做法 浅谈全加器和半加器的应用...

热门文章

  1. java weblogic 配置_java----weblogic部署应用
  2. mysql安装与配置的截图_windows下MySQL5.6版本安装及配置过程附有截图和详细说明...
  3. java蓝桥暑假班_Java实现 蓝桥杯VIP 算法提高 班级排名
  4. 山体等高线怎么看_每日一题 | 此处向斜山,你看出来了吗?
  5. LeetCode 3:无重复字符的最长子串 思考分析
  6. Java线程类void setContextClassLoader(ClassLoader loader)方法,带示例
  7. 硕士毕业后去国外读法学博士_法学硕士的完整形式是什么?
  8. getdate函数_PHP getdate()函数与示例
  9. js \n直接显示字符串_显示N个字符的最短时间
  10. python嵌入c代码_怎样把Python代码嵌入到C程序