当前位置:首页 >  站长 >  编程技术 >  正文

for……in for……of 区别

 2020-11-17 13:39  来源: 田珊珊个人博客   我来投稿 撤稿纠错

  域名预订/竞价,好“米”不错过

1 遍历数组通常用for循环

ES5的话也可以使用forEach,ES5具有遍历数组功能的还有map、filter、some、every、reduce、reduceRight等,只不过他们的返回结果不一样。但是使用foreach遍历数组的话,使用break不能中断循环,使用return也不能返回到外层函数。

Array.prototype.method=function(){

console.log(this.length);

}

var myArray=[1,2,4,5,6,7]

myArray.name="数组"

for (var index in myArray) {

console.log(myArray[index]);

}

2 for in遍历数组的毛病

1.index索引为字符串型数字,不能直接进行几何运算

2.遍历顺序有可能不是按照实际数组的内部顺序

3.使用for in会遍历数组所有的可枚举属性,包括原型。例如上栗的原型方法method和name属性

所以for in更适合遍历对象,不要使用for in遍历数组。

那么除了使用for循环,如何更简单的正确的遍历数组达到我们的期望呢(即不遍历method和name),ES6中的for of更胜一筹.

Array.prototype.method=function(){

console.log(this.length);

}

var myArray=[1,2,4,5,6,7]

myArray.name="数组";

for (var value of myArray) {

console.log(value);

}

for in遍历的是数组的索引(即键名),而for of遍历的是数组元素值。

for of遍历的只是数组内的元素,而不包括数组的原型属性method和索引name

3 遍历对象

遍历对象 通常用for in来遍历对象的键名

Object.prototype.method=function(){

console.log(this);

}

var myObject={

a:1,

b:2,

c:3

}

for (var key in myObject) {

console.log(key);

}

for in 可以遍历到myObject的原型方法method,如果不想遍历原型方法和属性的话,可以在循环内部判断一下,hasOwnPropery方法可以判断某属性是否是该对象的实例属性

for (var key in myObject) {

if(myObject.hasOwnProperty(key)){

console.log(key);

}

}

同样可以通过ES5的Object.keys(myObject)获取对象的实例属性组成的数组,不包括原型方法和属性

Object.prototype.method=function(){

console.log(this);

}

var myObject={

a:1,

b:2,

c:3

}

for..of适用遍历数/数组对象/字符串/map/set等拥有迭代器对象的集合.但是不能遍历对象,因为没有迭代器对象.与forEach()不同的是,它可以正确响应break、continue和return语句

for-of循环不支持普通对象,但如果你想迭代一个对象的属性,你可以用for-in循环(这也是它的本职工作)或内建的Object.keys()方法:

for (var key of Object.keys(someObject)) {

console.log(key + ": " + someObject[key]);

}

遍历map对象时适合用解构,例如;

for (var [key, value] of phoneBookMap) {

console.log(key + "'s phone number is: " + value);

}

附:跳出循环

foreach 不能终止或跳过循环

for of 支持跳出循环

const fruits = ['Apple','Banana','Orange','Mango'];

for(let fruit of fruits){

if(fruit === 'Orange'){

break;  //终止

}

console.log(fruit);  // Apple Banana

}

for(let fruit of fruits){

if(fruit === 'Orange'){

continue;  //跳出循环

}

console.log(fruit);  // Apple Banana Mango

}

文章来源:田珊珊个人博客

来源地址:http://www.tianshan277.com/756.html

申请创业报道,分享创业好点子。点击此处,共同探讨创业新机遇!

相关文章

热门排行

信息推荐