JS数组遍历中for,for in,for of,map,forEach各自的使用方法与优缺点

JS数组遍历普通函数

优点:支持流程控制(break、continue、return)

for

const arr = ["A", "B", "C"]
 for(let i = 0; i<arr.length; i++){
   console.log(arr[i])
 }

优点：能够对索引精确控制
缺点：语法较为繁琐

for in

const arr = ["A","B","C"]
arr["3"] = 1
Array.prototype["cc"] = "ck"

for(let e in arr){
  console.log(arr[e])
}

缺点：
1.遍历索引为字符串，即e类型为字符串
2.会遍历可枚举的非数字类型键以及原型上的键
3.不同浏览器对for in 顺序实现可能不一致

for of

const arr = ["A","B","C"]
arr["3"] = 1
Array.prototype["cc"] = "ck"
for(let i of arr){
  console.log(i)
}

优点:语法简洁、有序遍历
缺点:由于遍历的是值，对索引无直接控制

函数式编程-->高阶函数

缺点，不能进行流程控制

map

const arr = ["A","B","C"]
arr.map(e => console.log(e))

优点:语法简洁，返回一个旧数组的映射数组，不影响原数组

forEach

const arr = ["A","B","C"]
arr.forEach(e => console.log(e))

优点:语法简洁，在不需要返回数组时，性能较好比map好

名称 流程控制 函数式
for T  
for of T  
forEach   T
map   T

JS数组遍历函数总结：

在不需要流程控制时，优先使用map，不需要返回值使用forEach,需要索引的控制时，可以回退至for,for of一般结合内置默认迭代器的数据结构(Map、Set)使用,在需要结合生成器 async await 异步迭代时的选择

更多关于JS数组遍历方法的技巧请查看下面的相关链接

赞 (0)

相关推荐

  • IE8对JS通过属性和数组遍历解析不一样的地方探讨

    以文谨记在此被浏览器版本差异的坑. 复制代码 代码如下: Array.prototype.Contains = function (str) { if (!str) return false; for (var i = 0; i < this.length; i++) { if (this[i] == str) { return true; } } return false; } var tmp = new Array(); tmp.push("1"); tmp.push(&qu

  • JavaScript 数组遍历的五种方法

    在使用 JavaScript 编写代码过程中,可以使用多个方法对数组进行遍历:包括 for循环.forEach循环.map 循环.forIn循环和forOf循环等方法. 一.for 循环:基础.简单 这是最基础和常用的遍历数组的方法:各种开发语言一般都支持这种方法. let arr = ['a','b','c','d','e']; for (let i = 0, len = arr.length; i < len; i++) { console.log(i); // 0 1 2 3 4 cons

  • javascript数组遍历for与for in区别详解

    js中遍历数组的有两种方式 复制代码 代码如下: var array=['a'] //标准的for循环 for(var i=1;i<array.length;i++){     alert(array[i]) } //foreach循环 for(var i in array){     alert(array[i]) } 正常情况下上面两种遍历数组的方式结果一样.首先说两者的第一个区别 标准的for循环中的i是number类型,表示的是数组的下标,但是foreach循环中的i表示的是数组的key

  • javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历

    复制代码 代码如下: var $d = document; function $i(s){return $d.getElementById(s);} var _jsc={} _jsc.client=(function(){ var t={}; var b=navigator.userAgent.toLowerCase(); t.isOpera=(b.indexOf('opera')>-1) t.isIE=(b.indexOf('msie')>-1) t.isFF=(!t.isOpera&

  • JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍

    •原理: •高级浏览器支持forEach方法 语法:forEach和map都支持2个参数:一个是回调函数(item,index,list)和上下文: •forEach:用来遍历数组中的每一项:这个方法执行是没有返回值的,对原来数组也没有影响: •数组中有几项,那么传递进去的匿名回调函数就需要执行几次: •每一次执行匿名函数的时候,还给其传递了三个参数值:数组中的当前项item,当前项的索引index,原始数组input: •理论上这个方法是没有返回值的,仅仅是遍历数组中的每一项,不对原来数组进行

  • JS常用的几种数组遍历方式以及性能分析对比实例详解

    JS常用的几种数组遍历方式以及性能分析对比实例详解

    本文实例讲述了JS常用的几种数组遍历方式以及性能分析对比.分享给大家供大家参考,具体如下: 前言 这一篇与上一篇 JS几种变量交换方式以及性能分析对比 属于同一个系列,本文继续分析JS中几种常用的数组遍历方式以及各自的性能对比 起由 在上一次分析了JS几种常用变量交换方式以及各自性能后,觉得这种方式挺好的,于是抽取了核心逻辑,封装成了模板,打算拓展成一个系列,本文则是系列中的第二篇,JS数组遍历方式的分析对比 JS数组遍历的几种方式 JS数组遍历,基本就是for,forin,foreach,fo

  • 深入浅析JS的数组遍历方法(推荐)

    用过Underscore的朋友都知道,它对数组(集合)的遍历有着非常完善的API可以调用的,_.each()就是其中一个.下面就是一个简单的例子: var arr = [1, 2, 3, 4, 5]; _.each(arr, function(el) { console.log(el); }); 上面的代码会依次输出1, 2, 3, 4, 5,是不是很有意思,遍历一个数组连for循环都不用自己写了._.each()方法遍历数组非常好用,但是它的内部实现一点都不难.下面就一起来看看到底是如何实现_

  • javascript数组遍历的方法实例分析

    javascript数组遍历的方法实例分析

    本文实例讲述了javascript数组遍历的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> var a = [1,2,3,4,5,6]; var b = a.

  • JS数组遍历中for,for in,for of,map,forEach各自的使用方法与优缺点

    JS数组遍历普通函数 优点:支持流程控制(break.continue.return) for const arr = ["A", "B", "C"] for(let i = 0; i<arr.length; i++){ console.log(arr[i]) } 优点:能够对索引精确控制缺点:语法较为繁琐 for in const arr = ["A","B","C"] arr[

  • 原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法

    原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法

    用原生js在父页面获取iframe子页面的元素,以及在子页面获取父页面元素,这是平时经常会用到的方法,这里写一个例子来总结下: 1.父页面(demo.html),在父页面修改子页面div的背景色为灰色,原来为红色: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  • js简单遍历获取对象中的属性值的方法示例

    js简单遍历获取对象中的属性值的方法示例

    本文实例讲述了js简单遍历获取对象中的属性值的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

  • js/jquery遍历对象和数组的方法分析【forEach，map与each方法】

    本文实例讲述了js/jquery遍历对象和数组的方法.分享给大家供大家参考,具体如下: JS forEach方法 arr[].forEach(function(value,index,array){ //do something }) 参数:value数组中的当前项,index当前项的索引,array原始数组: 数组中有几项,那么传递进去的匿名回调函数就需要执行几次: 理论上这个方法是没有返回值的,仅仅是遍历数组中的每一项,不对原来数组进行修改:但是可以自己通过数组的索引来修改原来的数组: va

  • JS数组的常见用法实例

    本文实例讲述了JS数组的常见用法.分享给大家供大家参考.具体方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">

  • js常见遍历操作小结

    本文实例讲述了js常见遍历操作.分享给大家供大家参考,具体如下: for循环 var a = new Array("first", "second", "third") for(var i = 0;i < a.length; i++) { document.write(a[i]+","); } for in var arr = new Array("first", "second"

  • 浅谈jsp的C标签一般使用方法以及js接收servlet中的对象及对象数组

    浅谈jsp的C标签一般使用方法以及js接收servlet中的对象及对象数组

    由于现流行的javaWeb框架提倡前后端分离,比如在SpringMvc中已经很少写servlet的一些东西:目前 前端jsp中大多是一些纯html和js,很少用到jstl的一堆东西,后端也仅仅处理一些前端的post.get请求或页面跳转,无须以往繁琐的xml路径映射和filter过滤. 不过有时也会用到servlet作用域中的一些东西,比如某个固定的值.上下文路径等等~,不过这些东西大多数也仅限于取值而不是设置值(或对象),所以sun给了一个非常简洁的取值方式:C标签! 下面将简述下C标签的一些

  • JS简单循环遍历json数组的方法

    本文实例讲述了JS简单循环遍历json数组的方法.分享给大家供大家参考,具体如下: 例如数据库里面的json字符串是这样的 var str = '[{"name":"宗2瓜","num":"1","price":"122"},{"name":"宗呱呱","num":"1","price":

随机推荐