当前位置：首页 > 资讯 > 技术文档

详解JS中遍历语法的比较

时间：2021-03-05 08:51 编辑：来源：阅读：
扫一扫，手机访问

摘要：详解JS中遍历语法的比较

[b]for循环[/b] JavaScript 提供多种遍历语法。最原始的写法就是[code]for[/code]循环。

let arr = [1,2,3,4,5];

for (var index = 0; index < arr.length; index++) {
 console.log(myArray[index]); // 1 2 3 4 5
}

缺点：这种写法比较麻烦 [b]forEach[/b] 数组提供内置的[code]forEach[/code]方法

let arr = [1,2,3,4,5];

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

缺点：这种写法的问题在于，无法中途跳出[code]forEach[/code]循环，[code]break[/code]命令或[code]return[/code]命令都不能奏效。 [b] for...in[/b] for…in 用于遍历对象所有的可枚举属性，功能类似于Object.keys()。

let obj = {
  name: 'cloud',
  phone: '157xxxx2065'
}
 
for (let prop in obj) {
  console.log(prop); // name phone
}

可能有朋友会问，不可枚举的对象有哪些呢? 比如constructor，数组的length就属于不可枚举属性。

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

缺点： [list=1] [*]数组的键名是数字，但是[code]for...in[/code]循环是以字符串作为键名“0”、“1”、“2”等等。[/*] [*][code]for...in[/code]循环主要是为遍历对象而设计的，不适用于遍历数组[/*] [/list] [b] for...of[/b] for…of是ES6新增的遍历方式，它提供了统一的遍历机制。所有实现了[Symbol.iterator]接口的对象都可以被遍历。[code]for...of[/code]循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象（比如arguments对象、DOM NodeList 对象）、Generator 对象，以及字符串优点： [list=1] [*]有着同[code]for...in[/code]一样的简洁语法，但是没有[code]for...in[/code]那些缺点[/*] [*]不同用于[code]forEach[/code]方法，它可以与[code]break[/code]、[code]continue[/code]和[code]return[/code]配合使用[/*] [*]提供了遍历所有数据结构的统一操作接口[/*] [/list] 下面是一个使用break语句，跳出[code]for...of[/code]循环的例子。

for (var n of fibonacci) {
 if (n > 1000)
  break;
 console.log(n);
}

上面的例子，会输出斐波纳契数列小于等于1000的项。如果当前项大于1000，就会使用[code]break[/code]语句跳出[code]for...of[/code]循环。 for...of获取索引 [list=1] [*][code]entries() [/code]返回一个遍历器对象，用来遍历[code][键名, 键值][/code]组成的数组。对于数组，键名就是索引值；对于 Set，键名与键值相同。Map 结构的 Iterator 接口，默认就是调用[code]entries[/code]方法。[/*] [*][code]keys() [/code]返回一个遍历器对象，用来遍历所有的键名。[/*] [*][code]values() [/code]返回一个遍历器对象，用来遍历所有的键值。[/*] [/list]

 // demo
let arr = ['a', 'b', 'c'];
for (let pair of arr.entries()) {
 console.log(pair);
}
// [0, 'a']
// [1, 'b']
// [2, 'c']

[b]类似数组的对象[/b] 类似数组的对象包括好几类。下面是[code]for...of[/code]循环用于字符串、DOM NodeList 对象、arguments对象的例子。

// 字符串
let str = "hello";

for (let s of str) {
 console.log(s); // h e l l o
}

// DOM NodeList对象
let paras = document.querySelectorAll("p");

for (let p of paras) {
 p.classList.add("test");
}

// 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'
}

[b]普通的对象[/b] 对于普通的对象，[code]for...of[/code]结构不能直接使用，会报错，必须部署了 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

解决方法是，使用[code]Object.keys[/code]方法将对象的键名生成一个数组，然后遍历这个数组。

for (var key of Object.keys(someObject)) {
 console.log(key + ': ' + someObject[key]);
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程素材网。

全部评论(0)

上一篇：Underscore之Array_动力节点Java学院整理
下一篇：详解require.js配置路径的用法和css的引入

资讯排行榜
更多>>