欢迎进入广州凡科互联网科技有限公司网站
全国服务热线
4000-399-000
微信展示类小程序_详解JS中遍历语法的比较
时间: 2021-01-12 12:21 浏览次数:
详细说明JS中解析xml英语的语法的较为 for (var index = 0; index arr.length; index++) {console.log(myArray[index]); // 1 2 3 4 5缺陷:这类书写较为不便forEach数字能量数组出示内嵌的for
详解JS中遍历语法的比较       本篇文章主要介绍了详解JS中遍历语法的比较 ,主要介绍for循环、forEach、for...in、for...of的用法和缺点,有兴趣的可以了解一下。
for (var index = 0; index arr.length; index++) { console.log(myArray[index]); // 1 2 3 4 5

缺点:这种写法比较麻烦

forEach

数组提供内置的forEach方法

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

缺点:这种写法的问题在于,无法中途跳出forEach循环,break命令或return命令都不能奏效。

 for...in

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

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

 for...of

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

优点:

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

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

for (var n i) {
 if (n 1000)
 break;
 console.log(n);
}

上面的例子,会输出斐波纳契数列小于等于1000的项。如果当前项大于1000,就会使用break语句跳出for...of循环。

 for...of获取索引

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

类似数组的对象

类似数组的对象包括好几类。下面是for...of循环用于字符串、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'

普通的对象

对于普通的对象,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方法将对象的键名生成一个数组,然后遍历这个数组。

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


下一篇:没有了


Copyright © 广州凡科互联网科技有限公司 版权所有 粤ICP备10235580号
全国服务电话:4000-399-000   传真:021-45545458
公司地址:广州市海珠区工业大道北67号凤凰创意园