JS中的循环遍历

1. for(哈哈!这个方法就不多说了)

let arr = [1,2,3,4,5]; 
for (var index = 0; index < arr.length; index++) {
 console.log(myArray[index]); // 1 2 3 4 5}
 缺点:无法跳出循环,break和return都无效。

2. forEach(数组提供内置的forEach方法)

 let arr = [1,2,3,4,5];
arr.forEach((element,index) => {
  console.log(element); // 1 2 3 4 5
});

3. for…in( 用于遍历对象所有的***可枚举属性***,功能类似于Object.keys() )。

let obj = {
  name: 'cloud',
  phone: '157xxxx2065'
}  
for (let prop in obj) {
  console.log(prop); // name phone
}
let arr = [10, 20, 30, 40, 50]; 
for (let prop in arr) {
  console.log(prop); // '0' '1' '2' '3' '4'
}

所以,for…in循环主要是为了遍历对象,不适用于遍历数组。


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

优点:

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

下面是一个使用break语句,跳出for…of循环的例子。

for (var n of fibonacci) {
 if (n > 1000)
  break;
 console.log(n);
 //如果当前项大于1000,就会使用break语句跳出for...of循环。
}




for…of获取索引

  1. entries() 返回一个遍历器对象,用来遍历[键名, 键值]组成的数组。对于数组,键名就是索引值;对于 Set,键名与键值相同。Map 结构的 Iterator 接口,默认就是调用entries方法。
  2. keys() 返回一个遍历器对象,用来遍历所有的键名。
  3. values() 返回一个遍历器对象,用来遍历所有的键值。
let arr = ['a', 'b', 'c'];
for (let pair of arr.entries()) {
 console.log(pair);
}
// [0, 'a']
// [1, 'b']
// [2, 'c']

类似数组的对象
类似数组的对象包括好几类。下面是for…of循环用于字符串、arguments对象的例子。

// 字符串
let str = "hello";
for (let s of str) {
 console.log(s); // h e l l o
}
  
// arguments对象
function printArgs() {
 for (let x of arguments) {
  console.log(x);
 }
}
printArgs('a', 'b');
// 'a'
// 'b'

并不是所有类似数组的对象都具有 Iterator 接口,一个简便的解决方法,就是使用**Array.from()**方法将其转为数组。
let arrayLike = { length: 2, 0: 'a', 1: 'b' };
 
// 报错
for (let x of arrayLike) {
 console.log(x);
}
 
// 正确
for (let x of Array.from(arrayLike)) {
 console.log(x); // 'a' // 'b'
}

普通的对象
对于普通的对象,for…of结构不能直接使用,会报错,必须部署了 Iterator 接口后才能使用。

let es6 = {
 edition: 6,
 committee: "TC39",
 standard: "ECMA-262"
};
 
for (let e in es6) {
 console.log(e);
}
// edition
// committee
// standard
 
for (let e of es6) {
 console.log(e);
}
// TypeError: es6 is not iterable

解决方法是,使用**Object.keys()**方法将对象的键名生成一个数组,然后遍历这个数组。

let es6 = {
 edition: 6,
 committee: "TC39",
 standard: "ECMA-262"
};
for (var key of Object.keys(es6)) {
 console.log(key + ': ' + es6[key]);
}
//edition: 6
//committee: TC39
//standard: ECMA-262

快乐的学习时光总是这么短暂,如果小伙伴们有啥疑问或者发现错误可以私信我哦~大家一起进步才是最快乐的嘛!啊哈!

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值