JS数组及对象遍历方法代码汇总

2024-09-27 17:24:43

文中的范例基于以下数组和对象。

var arrTmp = ["value1","value2","value3"];
var objTmp = {
  aa:"value1",
  bb:"value2",
  cc:function(){
    console.log("value3")
  }
}

一、JS原生方法

1. javascript遍历的常用的遍历方法是for循环和for-in，ES5的时候加上了forEach方法（IE9以下不支持）。

/****js原生遍历****/
//for循环遍历数组
for(var i=0;i<arrTmp.length;i++){
  console.log(i+": "+arrTmp[i])
}

//for-in遍历对象属性,i指代属性名
for(var i in objTmp){
  console.log(i+": "+objTmp[i])
}

//forEach遍历数组，三个参数依次是数组元素、索引、数组本身
arrTmp.forEach(function(value,index,array){
  console.log(value+","+index+","+array[index])
})

2. for-in循环是为了遍历对象而设计的，事实上for-in也能用来遍历数组，但定义的索引i是字符串类型的。如果数组具有一个可枚举的方法，也会被for-in遍历到，例如：

//for-in遍历数组
for(var i in arrTmp){
  console.log(i+": "+arrTmp[i])
}
//for-in会遍历到数组的属性
arrTmp.name="myTest";
for(var i in arrTmp){
  console.log(i+":"+arrTmp[i])
}
//输出 0:value1 1:value2 2:value3 name:myTest

3. for循环和for-in能正确响应break、continue和return语句，但forEach不行。

//只会输出value1 value2
for(var i=0;i<arrTmp.length;i++){
  console.log(i+": "+arrTmp[i]);
  if(i==1){
    break;
  }
}
//会输出value1 value2 value3
arrTmp.forEach(function(value){
  console.log(value+);
  if(value==1){
    return;
  }
})

4. ES6中，新增了for-of遍历方法。它被设计用来遍历各种类数组集合，例如DOM NodeList对象、Map和Set对象，甚至字符串也行。官方的说法是：

for...of语句在可迭代对象(包括 Array, Map, Set, String, TypedArray，arguments 对象等等)上创建一个迭代循环，对每个不同属性的属性值,调用一个自定义的有执行语句的迭代挂钩

// for-of遍历数组，不带索引，i即为数组元素
for(let i of arrTmp){
  console.log(i)
}
//输出 "value1" "value2" "value3"

// for-of遍历Map对象
let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);
for (let [key, value] of iterable) {
 console.log(value);
}
//输出 1 2 3

// for-of遍历字符串
let iterable = "china中国";
for (let value of iterable) {
 console.log(value);
}
//输出 "c" "h" "i" "n" "a" "中" "国"

5. 上面的方法，注重点都是数组的元素或者对象的属性值。如果单纯的想获取对象的属性名，js有原生的Object.keys()方法（低版本IE不兼容）,返回一个由对象的可枚举属性名组成的数组：

/****Object.keys()返回键名数组****/
//数组类型
let arr = ["a", "b", "c"];
console.log(Object.keys(arr));
// (3) ['0', '1', '2']

// 类数组对象
let anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.keys(anObj));
// (3) ['2', '7', '100']

//一般对象
let xyz = {z: "zzz", x: "xxx", y: "yyy"};
console.log(Object.keys(xyz));
// (3) ["z", "x", "y"]

javascript原生遍历方法的建议用法：

用for循环遍历数组
用for-in遍历对象
用for-of遍历类数组对象（ES6）
用Object.keys()获取对象属性名的集合

二、jQuery的$.each

jQuery的遍历方法通常被用来遍历DOM元素，用于数组和对象的是$.each()方法，它接受两个参数，分别指代属性名/数组索引和属性值/数组元素：

/****$.each()遍历对象和数组****/
$.each(arrTmp,function(index,value){
  console.log(index+": "+value)
});

$.each(objTmp,function(key,value){
  console.log(key+": "+value)
});

三、underscore的_.each()遍历

underscore.js是一个较流行的插件库，它封住了一些对数组和对象的处理方法。_.each()就用来遍历：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script type="text/javascript" src="../lib/underscore.js"></script>
</head>
<body>
<script type="text/javascript">

var arrTmp = ["value1", "value2", "value3"];
var objTmp = {
  aa: "value1",
  bb: "value2",
  cc: function () {
    console.log("value3")
  }
};

//_.each()接受三个参数，分别指代键值、键名和被遍历的对象本身
_.each(arrTmp,function(value,index,array){
  console.log(index +","+ value +","+ array[index])
})
_.each(objTmp,function(value,key,obj){
  console.log(key +","+ value +","+ obj[key])
})
</script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结

本文实例讲述了Vue指令v-for遍历输出JavaScript数组及json对象的常见方式.分享给大家供大家参考,具体如下: 定义数据: <script> new Vue({ el:"#test", data:{ message:"infor", list:["a","b","c","d","e"], web:{ "百度":"
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解

废话不多说了,直奔主题,你,具体代码如下所示: <script> //----------------for用来遍历数组对象-- var i,myArr = [1,2,3]; for (var i = 0; i < myArr.length; i++) { console.log(i+":"+myArr[i]); }; //---------for-in 用来遍历非数组对象 var man ={hands:2,legs:2,heads:1}; //为所有的对象添加cl
jquery遍历筛选数组的几种方法和遍历解析json对象

jquery grep()筛选遍历数组复制代码代码如下: $().ready( function(){ var array = [1,2,3,4,5,6,7,8,9]; var filterarray = $.grep(array,function(value){ return value > 5;//筛选出大于5的 }); for(var i=0;i<filterarray.length;i++){ alert(filterarray[i]); } for (key in filtera
js/jquery遍历对象和数组的方法分析【forEach，map与each方法】

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

本文实例讲述了JS中数组与对象的遍历方法.分享给大家供大家参考,具体如下: 一.数组的遍历: 首先定义一个数组 arr=['snow','bran','king','nightking']; 1.for循环,需要知道数组的长度; 2.foreach,没有返回值,可以不知道数组长度: arr.forEach(function(ele,index){ console.log(index); console.log(ele) }) 3.map函数,遍历数组每个元素,并回调操作,需要返回值,返回值组成新
JQuery $.each遍历JavaScript数组对象实例

查看一个简单的jQuery的例子来遍历一个JavaScript数组对象. var json = [ {"id":"1","tagName":"apple"}, {"id":"2","tagName":"orange"}, {"id":"3","tagName":"banana&q
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在

1.jquery grep()筛选遍历数组(可以得到反转的数组) // 1.jquery grep()筛选遍历数组(可以得到反转的数组) var array = [1,5,9,3,12,4,48,98,4,75,2,10,11]; var filterArray = $.grep(array,(currentValue) => { return currentValue > 10; }); console.log(`${filterArray}---${filterArray.length}`
Javascript的数组与字典用法与遍历对象的属性技巧

Javascript 的数组Array,既是一个数组,也是一个字典(Dictionary).先举例看看数组的用法. 复制代码代码如下: var a = new Array(); a[0] = "Acer"; a[1] = "Dell"; for (var i = 0; i < a.length; i++) { alert(a[i]); } 下面再看一下字典的用法. 复制代码代码如下: var computer_price = new Array(); co
JS数组及对象遍历方法代码汇总

文中的范例基于以下数组和对象. var arrTmp = ["value1","value2","value3"]; var objTmp = { aa:"value1", bb:"value2", cc:function(){ console.log("value3") } } 一.JS原生方法 1. javascript遍历的常用的遍历方法是for循环和for-in,ES5的时候加上
浅谈JS数组内置遍历方法有哪些和区别

目录 forEach()(ES6)方法 map()(ES6) 方法 flatMap()方法 for...in... for...of... filter(ES6)遍历数组 every()函数(ES6) find()函数(ES6) findIndex()函数 (ES6) forEach()(ES6)方法 forEach()(ES6)方法对数组的每个元素执行一次给定的函数. 1. 数组里的元素个数有几个,该方法里的回调就会执行几次 2. 第一个参数是数组里的元素,第二个参数为数组里元素的索引
Js数组扁平化实现方法代码总汇

题目: 请写出一个数组拍平函数.效果如下: var arr=['a', ['b', 'c'], 2, ['d', 'e', 'f'], 'g', 3, 4]; flat(arr) //a,b,c,2,d,e,f,g,3,4 方法一:使用toString方法先将arr转换为一个字符串, 再以split分割为数组,再将数组里面的元素转换为数字类型 var arr =['a', ['b', 'c'], 2, ['d', 'e', 'f'], 'g', 3, 4]; function flat(arr)
JS 数组和对象的深拷贝操作示例

本文实例讲述了JS 数组和对象的深拷贝操作.分享给大家供大家参考,具体如下: 一.数组的深拷贝 let arr = [ undefined, function(){ console.log(123); }, true, null, { name:"123", age:23 } ]; // arr作为拷贝对象 1. Array.from() Array.from()能将一个类数组转化成一个真正的数组,因此它返回的是一个新数组. let arr1 = Array.from(arr); ar
JS数组中对象去重操作示例

本文实例讲述了JS数组中对象去重操作.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net js数组中对象去重</title> </head> <body> <script> var tmp = [ { "
JS数组的高级使用方法示例小结

本文实例讲述了JS数组的高级使用方法.分享给大家供大家参考,具体如下: //数组的高级使用 var array = [10,12,20,30]; for(var index in array){ console.log(array[index]); } //length 数组长度 for(var i = 0; i < array.length; i++){ console.log(array[i]); } //数组添加新数据 array.push(1000); array.push(2000);
js数组去重常见的方法汇总(7种)

目录 1.借助ES6提供的Set结构 new Set() 简单好用强烈推荐 2.利用 filter() 去重 3.利用for 循环搭配 indexOf 去重 4.将数组的每一个元素依次与其他元素做比较,发现重复元素,删除比较繁琐不推荐 5.借助新数组通过 indexOf 方法判断当前元素在数组中的索引,如果与循环的下标相等则添加到新数组中 6.利用双重for循环 7.利用includes实现数组去重总结 1.借助ES6提供的Set结构 new Set() 简单好用强烈推荐直接给一
高性能js数组去重(12种方法，史上最全)

数组去重,一般都是在面试的时候才会碰到,一般是要求手写数组去重方法的代码.如果是被提问到,数组去重的方法有哪些?你能答出其中的10种,面试官很有可能对你刮目相看. 在真实的项目中碰到的数组去重,一般都是后台去处理,很少让前端处理数组去重.虽然日常项目用到的概率比较低,但还是需要了解一下,以防面试的时候可能回被问到. 注:写的匆忙,加上这几天有点忙,还没有非常认真核对过,不过思路是没有问题,可能一些小细节出错而已. 数组去重的方法一.利用ES6 Set去重(ES6中最常用) function u
js数组与字符串的相互转换方法

熟悉js的朋友很多都遇到过js的数组与字符串相互转换的情况,本文就此作一简单介绍,示例如下: 一.数组转字符串需要将数组元素用某个字符连接成字符串,示例代码如下: var a, b; a = new Array(0,1,2,3,4); b = a.join("-"); 二.字符串转数组实现方法为将字符串按某个字符切割成若干个字符串,并以数组形式返回,示例代码如下: var s = "abc,abcd,aaa"; ss = s.split(","
简单谈谈JS数组中的indexOf方法

前言相信说到 indexOf 大家并不陌生,判断字符串是否包涵子字符串时特别常用,正则不熟练同学的利器.这篇文章就最近遇到的一个问题,用实例再说说说indexOf方法.本文是小知识点积累,不作为深入讨论的话题,因此这里没有解释indexOf()的第二个参数,相信大家都知道第二个参数的作用. String 类型的使用温习一下大家熟知的字符串用法,举个 let str = 'orange'; str.indexOf('o'); //0 str.indexOf('n'); //3 str.inde

JS数组及对象遍历方法代码汇总

相关推荐

随机推荐