您的位置 首页 java

JS遍历(循环)——JS对象&JS数组

最近在处理一些偏逻辑的代码块经常遇到遍历问题,接下来跟大家一起温习一下有关于JS的遍历吧。

js数组遍历

1、for循环

 //不缓存
var arr = [5,2,0,1,3,1,4];
for ( var i = 0; i <arr.length; i++){
   console.log(arr[i]);//遍历所得子项
}
  

for循环优化版:在JS性能优化中,有一个常见的小优化,即缓存数组长度

 //缓存
var arr = [5,2,0,1,3,1,4];
var len = arr.length;
for ( var i = 0; i <len; i++){
   console.log(arr[i]);//遍历所得子项
}
  

第二种方式是大多数的程序猿推荐的一种写法,据说是有利于性能提升,个人没有检测过,但看过一篇文章可以参考:
虽然优化版写法不太优雅,但有时候还真用得上,举个
栗子

 //不缓存
var divs = document. getElementsByTagName ("div"), i, div;
for( i=0; i<divs.length; i++ ){
  div = document.createElement("div");
    document.body.appendChild("div");
}
造成死循环,每次执行for循环都会动态获取divs的长度,而我们每次进入循环都增加了一个DOM(div),divs的长度也+1.

//缓存
var divs = document.getElementsByTagName("div"), i, div,len;
for( i=0;len=divs.length;i<len; i++ ){
  div = document.createElement("div");
    document.body.appendChild("div");
}
//使用变量保存divs的长度。
  

。。。。。。才第一个,篇幅有点长,还是简化简说吧

2、map映射

map遍历支持使用return语句,和 forEach 都是es5新增的数组方法,所以ie9以下的浏览器还不支持。

 var arr = [5,2,0,1,3,1,4];
//返回新数组,不改变旧数组
arr.map( function (v,i){
    console.log(i+'--'+v);
});
var temp=arr.map(function(v,i){
  return v*v
})
console.log(temp);
  

3、forEach

跟map一样是数组自带的方法,性能比for还弱,用 比较少,不能使用break语句中断循环,也不能使用return语句返回到外层函数。

 var arr = [5,2,0,1,3,1,4];
arr.forEach(function(v,i){
  console.log(i+'--'+v);
})
  

4、for-of遍历

es6新增,很强大,支持数组、对象、 字符串 的遍历

 var arr = [5,2,0,1,3,1,4];
for( let i of arr){
    console.log(i);
}
  

与forEach()不同的是,它可以正确响应break、continue和return语句。

对象的遍历

1,for-in遍历

for-in是为遍历对象而设计的,用于循环遍历数组或对象属性,遍历对象简洁方便。for in循环里面的index是string类型的,代码每执行一次,就会对数组的元素或者对象的属性进行一次操作,不建议用来遍历数组。

 var obj= {
j:5,
a:2,
v:0,
a:1,
s:3,
c:1,
r:4,
p:5,
t:2,
};
for (var index in obj){
    console.log(index+'------'+obj[index]);
}
  

2、使用 Object .keys()遍历

Object.keys(obj)
参数:要返回其枚举自身属性的对象
返回值:一个表示给定对象的所有可枚举属性的字符串数组
可用于数组、对象、字符串,这里只说对象的,其它的自己面向百度喔!

 let person = {name:"陈奕迅",age:3, address :"香港",getName:function(){}}
Object.keys(person) // ["name", "age", "address","getName"]
  


遍历对象

 var obj= {
j:5,
a:2,
v:0,
a:1,
s:3,
c:1,
r:4,
p:5,
t:2,
};
Object.keys(obj).forEach(function(key){
     console.log(key+'-----'+obj[key]);
});
  

3、使用Object.getOwnPropertyNames(obj)遍历

定义:返回一个数组,包含对象自身的所有属性(不含Symbol属性,但是包括不可枚举属性)

 var obj= {
j:5,
a:2,
v:0,
a:1,
s:3,
c:1,
r:4,
p:5,
t:2,
};
Object.getOwnPropertyNames(obj).forEach(function(key){
    console.log(key+'-----'+obj[key]);
});
  

文章来源:智云一二三科技

文章标题:JS遍历(循环)——JS对象&JS数组

文章地址:https://www.zhihuclub.com/191911.shtml

关于作者: 智云科技

热门文章

发表回复

您的电子邮箱地址不会被公开。

网站地图