搜索
您的当前位置:首页正文

JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解

2023-12-01 来源:字库网

废话不多说了,直奔主题,你,具体代码如下所示:

<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}; //为所有的对象添加clone方法,即给内置原型(object,Array,function)增加原型属性,该方法很强大,也很危险 if(typeof Object.prototype.clone ==="undefined"){ Object.prototype.clone = function(){}; } // for(var i in man){ if (man.hasOwnProperty(i)) { //filter,只
输出man的私有属性 console.log(i,":",man[i]); }; } //输出结果为print hands:2,legs:2,heads:1 for(var i in man) {//不使用过滤 console.log(i,":",man[i]); } //输出结果为 //hands : 2 index.html:20 //legs : 2 index.html:20 //heads : 1 index.html:20 //clone : function (){} for(var i in man) { if(Object.prototype.hasOwnProperty.call(man,i)) { //过滤 console.log(i,":",man[i]); } } //输出结果为print hands:2,legs:2,heads:1 </script>

接下来给大家介绍js 递归遍历对象、数组、属性

在前端工作时,有时我们需要遍历一些未知类型的对象。代码如下:

//js遍历对象function TraversalObject(obj){ for (var a in obj) { if (typeof (obj[a]) == "object") { TraversalObject(obj[a]); //递归遍历 } else { alert(a + "=" + obj[a]);//值就显示 } }}

//遍历对象中所有Ur的值function TraversalObject(obj){ for (var a in obj) {

if(a=="Url") alert(obj[a]);/ /显示URL的值 if (typeof (obj[a]) == "object") { TraversalObject(obj[a]); //递归遍历 } }}

这种遍历方法在对象不规则但需要获取相同属性时起到非常好的作用。

更多JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解相关文章请关注PHP中文网!

小编还为您整理了以下内容,可能对您也有帮助:

详谈js中数组和对象的区别

唯一的区别是,数组的属性是0-n整数
对象的属性可以是任意字符串
比如有一个数组a=[1,2,3,4],还有一个对象a={0:1,1:2,2:3,3:4},然后你运行alert(a[1]),两种情况下的运行结果是相同的!这就是说,数据集合既可以用数组表示,也可以用对象表示,那么我到底该用哪一种呢?
数组表示有序数据的集合,而对象表示无序数据的集合。如果数据的顺序很重要,就用数组,否则就用对象。
当然,数组和对象的另一个区别是,数组的数据没有”名称”(name),对象的数据有”名称”(name)。

详谈js中数组和对象的区别

唯一的区别是,数组的属性是0-n整数
对象的属性可以是任意字符串
比如有一个数组a=[1,2,3,4],还有一个对象a={0:1,1:2,2:3,3:4},然后你运行alert(a[1]),两种情况下的运行结果是相同的!这就是说,数据集合既可以用数组表示,也可以用对象表示,那么我到底该用哪一种呢?
数组表示有序数据的集合,而对象表示无序数据的集合。如果数据的顺序很重要,就用数组,否则就用对象。
当然,数组和对象的另一个区别是,数组的数据没有”名称”(name),对象的数据有”名称”(name)。

5种js遍历对象属性的方法

ES6 一共有 5 种方法可以遍历对象的属性。

(1)for...in

for...in 循环遍历对象自身的和继承的可枚举属性(不含 Symbol 属性)。

(2)Object.keys(obj)ie9

Object.keys 返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含 Symbol 属性)的键名。

(3)Object.getOwnPropertyNames(obj)ie9

Object.getOwnPropertyNames 返回一个数组,包含对象自身的所有属性(不含 Symbol 属性,但是包括不可枚举属性)的键名。

(4)Object.getOwnPropertySymbols(obj)

Object.getOwnPropertySymbols 返回一个数组,包含对象自身的所有 Symbol 属性的键名。

(5)Reflect.ownKeys(obj)

Reflect.ownKeys 返回一个数组,包含对象自身的(不含继承的)所有键名,不管键名是 Symbol 或字符串,也不管是否可枚举。

以上的 5 种方法遍历对象的键名,都遵守同样的属性遍历的次序规则。

​ 其中兼容性最好的是for... in来进行遍历,因为我们通常只需要遍历对象自身拥有的属性 所以使用 Object.prototype.hasOwnProperty() 兼容到ie5.5方法来排除继承的属性

注意:即使属性的值是 null 或 undefined ,只要属性存在, hasOwnProperty 依旧会返回 true 。

​ 如果不在意兼容性问题,用keys方法,搭配for... of来遍历也不错,、

​ for...of是es6引入的用于遍历可迭代对象的语法,相当于python里的for in。

​ js的for...in别扭的地方在于,遍历数组和对象都是返回的key值,遍历数组是下标值。for...of遍历数组会返回每一个值,跟foreach类似的效果,但是对于对象,只支持实现了迭代器的对象。

5种js遍历对象属性的方法

ES6 一共有 5 种方法可以遍历对象的属性。

(1)for...in

for...in 循环遍历对象自身的和继承的可枚举属性(不含 Symbol 属性)。

(2)Object.keys(obj)ie9

Object.keys 返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含 Symbol 属性)的键名。

(3)Object.getOwnPropertyNames(obj)ie9

Object.getOwnPropertyNames 返回一个数组,包含对象自身的所有属性(不含 Symbol 属性,但是包括不可枚举属性)的键名。

(4)Object.getOwnPropertySymbols(obj)

Object.getOwnPropertySymbols 返回一个数组,包含对象自身的所有 Symbol 属性的键名。

(5)Reflect.ownKeys(obj)

Reflect.ownKeys 返回一个数组,包含对象自身的(不含继承的)所有键名,不管键名是 Symbol 或字符串,也不管是否可枚举。

以上的 5 种方法遍历对象的键名,都遵守同样的属性遍历的次序规则。

​ 其中兼容性最好的是for... in来进行遍历,因为我们通常只需要遍历对象自身拥有的属性 所以使用 Object.prototype.hasOwnProperty() 兼容到ie5.5方法来排除继承的属性

注意:即使属性的值是 null 或 undefined ,只要属性存在, hasOwnProperty 依旧会返回 true 。

​ 如果不在意兼容性问题,用keys方法,搭配for... of来遍历也不错,、

​ for...of是es6引入的用于遍历可迭代对象的语法,相当于python里的for in。

​ js的for...in别扭的地方在于,遍历数组和对象都是返回的key值,遍历数组是下标值。for...of遍历数组会返回每一个值,跟foreach类似的效果,但是对于对象,只支持实现了迭代器的对象。

js怎么遍历

js中数组和对象的循环遍历

数组:

vararr=['a','b',c

for(设I=0;我i){

console.log(i,arr[i])

};

对象:

varperson={name:汤姆,年龄:29,性:男性'};

//如果一个对象要被for循环遍历,它需要Object.key()的方法来获取可以被迭代(遍历)的私有属性名的集合(数组)

varkeys=object.keys(person);

for(设I=0;我:

};

数组:

for(letkeyinarr){

//值得注意的是,key是数组的索引。如果需要获取属性的值,需要使用数组加索引下标的形式来获取。

console.log(key,arr[key]);

}

对象:

for(letkeyinobj){

//值得注意的是,key是对象的键名,键值应该由obj[key]获取

console.log(key,obj[key]);

}

数组:

for(让数组的值){

//值得注意的是,对于...的不同于的...在哪里...in遍历数组的索引,而对于...遍历数组的值。

console.log(值);

}

对象:

为...in不能单独遍历对象,它将报告错误。

如果对象是类数组对象,它可以由for遍历...如果由array.from方法转换为数组,则为。

或者将它与Object.keys()方法结合使用。

for(letkeyofObject.keys(obj)){

//对于...遍历输出的也是键名。

console.log(key,obj[obj]);

}

数组:

forEach()方法在遍历数组时没有返回值。

值得注意的是,数组中有几个项,所以传入的匿名回调函数需要执行几次;

arr.forEach((item,index,arr)={

console.log(项目、索引、数组)

)

//其中item是数组中的当前项,index是数组中的当前下标,arr是原始数组

对象:

原则上,forEach用于遍历数组,而不是对象,但是Object.getOnwPropertyNames()方法可用于使对象能够被forEach遍历。

Object.getOnwPropertyNames()返回一个数组,该数组的成员是parameter对象本身所有属性的属性名,而不管该属性是否可以被遍历。

Object.getOnwPropertyNames(obj)。forEach((item,index,arr)={

console.log(项目,索引,对象[项目])

})

js菜单怎么遍历?

Js菜单的遍历方法,采用深度遍历法。

js如何遍历同名的p?

只需要写上document.getElement.Tagname(p)就可以便利寻找所有的p了

请问在JS中如何在对象中用push添加一个新的属性然后遍历?

vararr={a:1,b:2,c:3};arr.d=4;//a:1,b:2,c:3,d:4for(variinarr){alert(i+":"+arr);}

javascript中怎么遍历数组js中如何遍历数组

javascript中的$是什么意思?

JS中的$表示:

$符号是php中表示变量的特征字符,它在js中也有很多功能。一般来说,我们用它来命名一个函数并获取id。

1.首先,它可以用来表示变量,比如变量vars=

2.在正则表达式中,它可以匹配结尾/sa$/。test(string)匹配字符串中的SA字符串,如string=:+items);

});

//遍历map

$.each(map_demo,function(key,value){

console.info(key:+key+,Value:+value);

})

$.map()遍历List/map//遍历List

varnew_list=$.map(list2,function(items,index){

returnitems+!;

})

console.info(new_list);

//遍历map

$.map(map_demo,function(key,value){

console.log(key+:+value);

});

小结:$.map()写法和$.each()类似,但对list的遍历时,参数顺序和$.each()是相反的,并且可以带返回值。对map的遍历和$.each()一样

2.for...in...遍历List/map//遍历map

for(varkeyinmap_demo){

console.info(key+:+map_demo);

}

//遍历List

for(varindexinlist2){

console.info(index+:+list2);

}

小结:对于List来说,能不用for...in就不要用,效率低下。

3.forEach遍历Listlist2.forEach(function(element,index,array){

console.info(element);//当前元素的值

console.info(index);//当前下标

console.info(array);//数组本身

});

小结:和for循环效率差不多。

js中遍历Map对象的方法?

对象类似于数组,且成员的值都是唯一的

constarr=

constset=newSet()

arr.forEach(item=>set.add(item))

console.log(set)//1,2,3,4,5

//数组快速去重

console.log()

Map对象是键值对集合,和JSON对象类似,但是key不仅可以是字符串还可以是对象

varmap=newMap()

varobj={name:'小缘',age:14}

map.set(obj,'小缘喵')

map.get(obj)//小缘喵

map.has(obj)//true

map.delete(obj)//true

map.has(obj)//false

js怎么把非数组数字循环加入数组中?

将小数组的值循环赋值给大数组,如果大数组未满,继续循环赋值。或者直接一个循环(大数组的长度作为循环)赋值到小数组完,重置小数组的index为0,直到大数组全部赋值完。

JSON遍历方式实例总结?

1如果过来的json数据不是javascript对象,需要先转换为对象可以用如下方法eval((+json变量字符串名+))

;2假设对象名称是obj那么obj.result就是result的数组3for(vari=0;iobj.result.length;i++){varitem=obj.result

;//这个item就是result的数组中的一个元素alert(item.proctName);}

vue怎么递归遍历数组?

functiondigui(val){

letarr=;

if(val.length!==0){

val.forEach(item=>{

letobj={};

obj.id=item.path;

obj.label=item.name;

if(item.children.length>=1){

obj.children=this.digui(item.children);

}

arr.push(obj);

});

}

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

上一篇:

下一篇:

热门图文

  • 笙歌处处楼的下一句 笙歌处处楼的下一句是什么

    笙歌处处楼的下一句:无妨思帝里。笙歌处处楼的下一句:无妨思帝里。诗词名称:《正月十五日夜月》。本名:白居易。别称:诗王、诗魔。字号:字乐天号香山居士,又号醉吟先生。所处时代:唐代。民族族群:汉族。出生地:河南新郑。出生时间:772年2月28日。去世时间:846年9月8日。主要作品:《直中书省》《新亭病后独坐招李侍郎公垂》《忆江南》《家园三绝》《赋得古原草送别》等。主要成就:新乐府运动主要倡导者、写下了不少反映人民疾苦的诗篇。我们为您从以下几个方面提供“笙歌处处楼”的详细介绍。一、《正月十五日夜月》的全文 点此查看《正月十五日夜月》的详细内容。岁熟人心乐,朝游复夜游。春风来海上,明月在江头。灯火家家市,笙歌处处楼。无妨思帝里,不合厌杭州。

  • 灯火家家市的下一句 灯火家家市的下一句是什么

    灯火家家市的下一句:笙歌处处楼。灯火家家市的下一句:笙歌处处楼。诗词名称:《正月十五日夜月》。本名:白居易。别称:诗王、诗魔。字号:字乐天号香山居士,又号醉吟先生。所处时代:唐代。民族族群:汉族。出生地:河南新郑。出生时间:772年2月28日。去世时间:846年9月8日。主要作品:《直中书省》《新亭病后独坐招李侍郎公垂》《忆江南》《家园三绝》《赋得古原草送别》等。主要成就:新乐府运动主要倡导者、写下了不少反映人民疾苦的诗篇。我们为您从以下几个方面提供“灯火家家市”的详细介绍。一、《正月十五日夜月》的全文 点此查看《正月十五日夜月》的详细内容。岁熟人心乐,朝游复夜游。春风来海上,明月在江头。灯火家家市,笙歌处处楼。无妨思帝里,不合厌杭州。

  • 明月在江头的下一句 明月在江头的下一句是什么

    明月在江头的下一句:灯火家家市。明月在江头的下一句:灯火家家市。诗词名称:《正月十五日夜月》。本名:白居易。别称:诗王、诗魔。字号:字乐天号香山居士,又号醉吟先生。所处时代:唐代。民族族群:汉族。出生地:河南新郑。出生时间:772年2月28日。去世时间:846年9月8日。主要作品:《直中书省》《新亭病后独坐招李侍郎公垂》《忆江南》《家园三绝》《赋得古原草送别》等。主要成就:新乐府运动主要倡导者、写下了不少反映人民疾苦的诗篇。我们为您从以下几个方面提供“明月在江头”的详细介绍。一、《正月十五日夜月》的全文 点此查看《正月十五日夜月》的详细内容。岁熟人心乐,朝游复夜游。春风来海上,明月在江头。灯火家家市,笙歌处处楼。无妨思帝里,不合厌杭州。

  • 春风来海上的下一句 春风来海上的下一句是什么

    春风来海上的下一句:明月在江头。春风来海上的下一句:明月在江头。诗词名称:《正月十五日夜月》。本名:白居易。别称:诗王、诗魔。字号:字乐天号香山居士,又号醉吟先生。所处时代:唐代。民族族群:汉族。出生地:河南新郑。出生时间:772年2月28日。去世时间:846年9月8日。主要作品:《直中书省》《新亭病后独坐招李侍郎公垂》《忆江南》《家园三绝》《赋得古原草送别》等。主要成就:新乐府运动主要倡导者、写下了不少反映人民疾苦的诗篇。我们为您从以下几个方面提供“春风来海上”的详细介绍。一、《正月十五日夜月》的全文 点此查看《正月十五日夜月》的详细内容。岁熟人心乐,朝游复夜游。春风来海上,明月在江头。灯火家家市,笙歌处处楼。无妨思帝里,不合厌杭州。

  • 朝游复夜游的下一句 朝游复夜游的下一句是什么

    朝游复夜游的下一句:春风来海上。朝游复夜游的下一句:春风来海上。诗词名称:《正月十五日夜月》。本名:白居易。别称:诗王、诗魔。字号:字乐天号香山居士,又号醉吟先生。所处时代:唐代。民族族群:汉族。出生地:河南新郑。出生时间:772年2月28日。去世时间:846年9月8日。主要作品:《直中书省》《新亭病后独坐招李侍郎公垂》《忆江南》《家园三绝》《赋得古原草送别》等。主要成就:新乐府运动主要倡导者、写下了不少反映人民疾苦的诗篇。我们为您从以下几个方面提供“朝游复夜游”的详细介绍。一、《正月十五日夜月》的全文 点此查看《正月十五日夜月》的详细内容。岁熟人心乐,朝游复夜游。春风来海上,明月在江头。灯火家家市,笙歌处处楼。无妨思帝里,不合厌杭州。

Top