详解JS中遍历语法的比较

2024-02-26 03:48:03 132
for循环
JavaScript提供多种遍历语法。最原始的写法就是for循环。
letarr=[1,2,3,4,5];

for(varindex=0;index
缺点：这种写法比较麻烦
forEach
数组提供内置的forEach方法
letarr=[1,2,3,4,5];

arr.forEach((element,index)=>{
console.log(element);//12345
});

缺点：这种写法的问题在于，无法中途跳出forEach循环，break命令或return命令都不能奏效。
 for...in
for…in用于遍历对象所有的可枚举属性，功能类似于Object.keys()。 
letobj={
name:'cloud',
phone:'157xxxx2065'
}

for(letpropinobj){
console.log(prop);//namephone
}
可能有朋友会问，不可枚举的对象有哪些呢?比如constructor，数组的length就属于不可枚举属性。
letarr=[10,20,30,40,50];

for(letpropinarr){
console.log(prop);//'0''1''2''3''4'
}
缺点：



数组的键名是数字，但是for...in循环是以字符串作为键名“0”、“1”、“2”等等。
for...in循环主要是为遍历对象而设计的，不适用于遍历数组

 for...of
for…of是ES6新增的遍历方式，它提供了统一的遍历机制。所有实现了[Symbol.iterator]接口的对象都可以被遍历。for...of循环可以使用的范围包括数组、Set和Map结构、某些类似数组的对象（比如arguments对象、DOMNodeList对象）、Generator对象，以及字符串
优点：

有着同for...in一样的简洁语法，但是没有for...in那些缺点
不同用于forEach方法，它可以与break、continue和return配合使用
提供了遍历所有数据结构的统一操作接口

下面是一个使用break语句，跳出for...of循环的例子。
for(varnoffibonacci){
if(n>1000)
break;
console.log(n);
}
上面的例子，会输出斐波纳契数列小于等于1000的项。如果当前项大于1000，就会使用break语句跳出for...of循环。
 for...of获取索引

entries()返回一个遍历器对象，用来遍历[键名,键值]组成的数组。对于数组，键名就是索引值；对于Set，键名与键值相同。Map结构的Iterator接口，默认就是调用entries方法。
keys()返回一个遍历器对象，用来遍历所有的键名。
values()返回一个遍历器对象，用来遍历所有的键值。

//demo
letarr=['a','b','c'];
for(letpairofarr.entries()){
console.log(pair);
}
//[0,'a']
//[1,'b']
//[2,'c']
类似数组的对象
类似数组的对象包括好几类。下面是for...of循环用于字符串、DOMNodeList对象、arguments对象的例子。
//字符串
letstr="hello";

for(letsofstr){
console.log(s);//hello
}

//DOMNodeList对象
letparas=document.querySelectorAll("p");

for(letpofparas){
p.classList.add("test");
}

//arguments对象
functionprintArgs(){
for(letxofarguments){
console.log(x);
}
}
printArgs('a','b');
//'a'
//'b'


并不是所有类似数组的对象都具有Iterator接口，一个简便的解决方法，就是使用Array.from方法将其转为数组。 
letarrayLike={length:2,0:'a',1:'b'};

//报错
for(letxofarrayLike){
console.log(x);
}

//正确
for(letxofArray.from(arrayLike)){
console.log(x);//'a'//'b'
}

普通的对象
对于普通的对象，for...of结构不能直接使用，会报错，必须部署了Iterator接口后才能使用。
letes6={
edition:6,
committee:"TC39",
standard:"ECMA-262"
};

for(leteines6){
console.log(e);
}
//edition
//committee
//standard

for(leteofes6){
console.log(e);
}
//TypeError:es6isnotiterable

解决方法是，使用Object.keys方法将对象的键名生成一个数组，然后遍历这个数组。
for(varkeyofObject.keys(someObject)){
console.log(key+':'+someObject[key]);
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
详解JS中遍历语法的比较

热门推荐

随机推荐
