for...of是一种用来遍历数据结构的方法,可遍历的对象包括:数组,对象,字符串,节点数组等
我们先来看一下现在存在的遍历方式:
var arr=[1,2,3,4]
(1)for循环
缺点:代码不够简洁
(2)forEach(): arr.forEach(function(value,index) {...});
缺点:无法中断循环
(3)for..in:我们常用来遍历对象属性
for (let i in arr){...}
缺点:每次循环得到的是字符串类型,而不是数字类型。
之后,我们来看一下ES6 的for...of
for (let value of arr ){...}
(1)终止循环(break),跳过循环(continue)
for (let value of arr ){
if(value==3){
break;
}
console.log(value) //1 2
}
for (let value of arr ){
if(value==3){
continue; //跳过当前循环
}
console.log(value) //1 2 4 5
}
(2)得到数字类型的索引 keys()
for (let index of arr.keys() ){
console.log(index) // 0 1 2 3 4
}
keys() 为数组的扩展,表示获取键名再遍历
(3)遍历多种类型的数据结构
- 字符串遍历
var str='hello';
for (let v of str){
console.log(v) // h e l l o
}
- DOM节点遍历
<li>1</li>
<li>2</li>
<li>3</li>
var lis=document.getElementsByTagName('li');
for (let li of lis){
console.log(li) //<li>1</li> <li>2</li> <li>3</li>
}