js各种遍历语法

js使用循环遍历语句有很多种,比如for,forEach,for...infor...of等等

for

普通的循环遍历,根据指定的长度遍历,不能遍历对象

for (let i = 0; i < 10; i++) {
    console.log(i);
}

forEach

forEach是用来遍历数组的,只能遍历数组,不能遍历NodeLists

let arr = [1,2,3,4];
arr.forEach((item, idx, arr) => {
    console.log(item);
})

// forEach执行async函数
[1,2,3].forEach(async (item) => {
  let a = await item;
})

for和forEach区别

  • for循环要提前知道要遍历的次数,而forEach不需要
  • for可以灵活控制循环的次数,forEach只能遍历整个数组
  • for可以中途退出,forEach不行

for...in

for...in语句是以任何顺序遍历一个对象的可枚举属性,for...in会遍历原型中的属性和方法,一般配合hasOwnProperty来避免这个问题

function Person () {
  this.name = "kelen";
}

var obj = { age: 19 }
obj.__proto__ = new Person();

for (k in obj) {
  // 打印出原型中的属性和方法
  console.log(k);	// age name
}

for (k in obj) {
  if (obj.hasOwnProperty(k))
    console.log(k);	// age
}

for...of

for...of语句创建一个循环来迭代可迭代的对象,可以遍历的对象有StringArrayTypedArrayMapSet如果遍历一个Object,会报错o is not iterable,这里需要了解一下一些名词

迭代器

es6里的迭代器并不是一种新的语法或者是新的内置对象(构造函数),而是一种协议,所有遵循了这个协议的对象都可以称之为迭代器对象,所以说迭代器是一种协议,一个统一的接口标准,两个属性都不返回值也不会报错,但是不符合协议标准,就不能称作迭代器了

内置可迭代对象

都是内置可迭代对象(Object不是),因为原型对象都有一个@@iterator方法,例如

var arr = [1,2,3];
var arrIteratorFn = arr[Symbol.iterator]; // arr迭代函数
var str = '1234';    
var strIteratorFn = str[Symbol.iterator]; // str迭代函数

自定义一个可迭代对象

let myInterable = {};
myInterable[Symbol.iterator] = function* () {
  yield 1;
  yield 2;
  yield 3;
}
let arr = [...myInterable]; // 展开语法...也实现了迭代协议,结果返回[1,2,3]

for...of语句可以遍历上面的myInterable,其他遍历方法是没法实现的

for (let item of myInterable) {
  console.log(item);
}

遍历NodeLists

const elements = document.querySelectorAll('.foo');
for (const element of elements) {
    element.addEventListener('click', doSomething);
}

 

标签: javascript

目录

评论

*
*

正在加载验证码......

最新评论

  • 无评论