js中的数组遍历是项目中经常用到的,在这里将几种方法做个对比。

!

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
console.log(arr[i]); //a b c d e
}

forEach()循环:forEach中传入要执行的回调函数,函数有三个参数。第一个参数为数组元素(必选),第二个参数为数组元素索引值(可选),第三个参数为数组本身(可选)

let arr = ['a','b','c','d','e'];
arr.forEach((item,index,arr)=> {
console.log(item); // a b c d e
console.log(index); // 0 1 2 3 4
console.log(arr); // ['a','b','c','d','e']
})

map循环: map()中传入要执行的回调函数,函数有三个参数。第一个参数为数组元素(必选),第二个参数为数组元素索引值(可选),第三个参数为数组本身(可选)

var arr = [
{name:'a',age:'18'},
{name:'b',age:'19'},
{name:'c',age:'20'}
];
arr.map(function(item,index) {
if(item.name == 'b') {
console.log(index) //
}
})

for…in循环:for…in循环可用于循环对象和数组,推荐用于循环对象,可以用来遍历json

let obj = {
name: '前端攻城小牛',
age: '864305860', //QQ群:864305860
weight: 'max'
}
for(var key in obj) {
console.log(key); // name age weight
console.log(obj[key]); // 全栈开发交流群
QQ群:864305860 max
}
let arr = ['a','b','c','d','e'];
for(var key in arr) {
console.log(key); // 0 1 2 3 4 返回数组索引
console.log(arr[key]) // a b c d e
}

for…of循环:可循环数组和对象,推荐用于遍历数

for…of提供了三个新方法:

key()是对键名的遍历; value()是对键值的遍历; entries()是对键值对的遍历;

let arr = ['前端攻城狮', '全栈开发交流群', 'QQ群:864305860'];
for (let item of arr) {
console.log(item); // 前端攻城狮 全栈开发交流群 QQ群:864305860
}
// 输出数组索引
for (let item of arr.keys()) {
console.log(item); // 0 1 2
}
// 输出内容和索引
for (let [item, val] of arr.entries()) {
console.log(item + ':' + val); // 0:前端攻城狮 1:全栈开发交流群 2:Q群:864305860
}

转载前端乱炖 链接(http://www.html-js.com/article/5632)

js中的数组遍历的更多相关文章

  1. JS 中的数组遍历方式效率比较

    JS数组遍历,基本就是for,forin,foreach,forof,map等等一些方法,以下介绍几种本文分析用到的数组遍历方式以及进行性能分析对比 第一种:普通for循环 代码如下: ; j < ...

  2. 遍历js中的数组

    可以使用js中的for循环,或者forEach方法:也可以使用Ext中的方法遍历js中的数组 代码如下: /** * 遍历数组 */ var arr = ['越南', '新加坡', '美国', '俄罗 ...

  3. js中的数组

    上网查了一下,js中的数组包含的内容还真不少.先给出两个学习的链接: w3school链接:http://www.w3school.com.cn/js/js_obj_array.asp 博客园链接:h ...

  4. JS中Array数组的三大属性用法

    原文:JS中Array数组的三大属性用法 Array数组主要有3大属性,它们分别是length属性.prototype属性和constructor属性. JS操作Array数组的方法及属性 本文总结了 ...

  5. JS中对数组元素进行增删改移

    在js中对数组元素进行增删改移,简单总结了一下方法: 方法 说明 实例 push( ); 在原来数组中的元素最后面添加元素 arr.push("再见58"); unshift( ) ...

  6. java:JavaScript3(innerHTML,post和get,单选框,多选框,下拉列表值得获取,JS中的数组,JS中的正则)

    1.innerHTML用户登录验证: <!DOCTYPE> <html> <head> <meta charset="UTF-8"> ...

  7. JS中的数组复制问题

    JS中的数组复制问题 前言 首先提到复制,也就是拷贝问题,就必须要明确浅拷贝和深拷贝. 浅拷贝:B由A复制而来,改变B的内容,A也改变 深拷贝:B由A复制而来,改变B的内容,A的内容不会改变 总的来说 ...

  8. phpcms抛出的二维数组转移到js,js中for....in遍历数组,用“.”连接来读出一维数组值

    直切正题: 1.phpcms在模版中读出数组有很多中方法,如,{pc:content action="lists"}或{pc:get sql=""},经过{lo ...

  9. JavaScript基础&实战(5)js中的数组、forEach遍历、Date对象、Math、String对象

    文章目录 1.工厂方法创建对象 1.1 代码块 1.2.测试结果 2.原型对象 2.1 代码 2.2 测试结果 3.toString 3.1 代码 3.2 测试结果 4.数组 4.1 代码 5.字面量 ...

随机推荐

  1. [转]十五天精通WCF——第三天 client如何知道server提供的功能清单

     通常我们去大保健的时候,都会找姑娘问一下这里能提供什么服务,什么价格,这时候可能姑娘会跟你口述一些服务或者提供一份服务清单,这样的话大 家就可以做到童嫂无欺,这样一份活生生的例子,在wcf中同样是一 ...

  2. 在Ubuntu 14.04 上安装 FTP 服务

    1. sudo apt-get update 2. sudo apt-get install vsftpd 3. adduser sammy Assign a password when prompt ...

  3. STM32的独立看门狗

    STM32 内 部自带了 2 个看门狗:独立看门狗(IWDG)和窗体看门狗(WWDG) STM32 的独立看门狗由内部专门的 40Khz 低速时钟驱动.即使主时钟发生问题.它也仍然 有效. 这里须要注 ...

  4. string 和 vector 初探

    标准库类型 string string 表示可变长的字符序列.是C++标准库类型的一部分,拥有很多优秀的性能. 定义 string 对象时如未人为初始化编译器会默认初始化为空字符串. string 对 ...

  5. C#和JAVA中编写事务代码

    C#  DAL层代码,运行多条增删改,使用事务操作: /// <summary> /// 运行 多条增删改 (非查询语句) /// </summary> /// <par ...

  6. 安卓实训第九天---Activity的复习以及在Onstart里设置网络连接

    今天.首先对Activity的生命周期进行复习: (以下的截图部分是借鉴自赵雅智老师的博客.. .) Activity的完整生命周期自第一次调用onCreate()開始.直至调用onDestroy() ...

  7. VMware Tools的安装

    mkdir /mnt/cdrom  首先创建一个文件夹mount /dev/cdrom /mnt/cdrom   然后挂载 这样的话,就可以看到 /mnt/cdrom文件夹下有文件了 ls  /mnt ...

  8. Android中关于内部存储的一些重要函数

    一.简介 Android中,你也可以通过绝对路径以JAVA传统方式访问内部存储空间.但是以这种方式创建的文件是对私有,创建它的应用程序对该文件是可读可写,但是别的应用程序并不能直接访问它.不是所有的内 ...

  9. P3959 宝藏 模拟退火。。。

    竟然模拟退火能做!我就直接抄代码了,我加了点注释. 题干: 题目描述 参与考古挖掘的小明得到了一份藏宝图,藏宝图上标出了 nn 个深埋在地下的宝藏屋, 也给出了这 nn 个宝藏屋之间可供开发的 mm ...

  10. CentOS7 iso ks