一、ES5之常用的for遍历
for循环是我们最常用的循环了,而且他能使用break和continue两个方法,在这里不做过多的赘述,直接上代码欣赏下!
let arr = [1, 2, 3, 4, 5, 6]
for (let i = 0, length = arr.length; i < length; i++) {
if(arr[i] === 2){
continue
}
if(arr[i] === 5){
break
}
console.log(i, arr[i])
}
演示结果:
二、ES5之forEach遍历
1.基本用法forEach方法有三个参数
array.forEach(function(currentValue, index, arr), thisValue)
currentValue
数组中正在处理的当前元素。
index
可选数组中正在处理的当前元素的索引。
array
可选
forEach()
方法正在操作的数组。
thisArg
可选可选参数。当执行回调函数时用作
this
的值(参考对象)。返回值
2.这个语法看起来要简洁很多,不需要通过索引去访问数组项,然而它的缺点也是很明显,不支持 break、continue 等。而且原本 false是出现跳出函数体的的,但是,这里的false却是和continue相似,这是不是让你大跌眼镜。下面送上代码。
let arr = [1, 2, 3, 4, 5, 6]
arr.forEach(function(item){
// if(item === 2){
// forEach不能使用continue和break
// continue
// }
// 原本 false的出现是跳出函数体的,但是,这里的false却是和continue相似,这是不是让你大跌眼镜
if(item === 2){
// continue
return false
}else{
// console.log(item)
}
})
输出结果:
三、ES5之every遍历
1.基本用法语法
array.every(function(element,index,array), thisArg)
element
用于测试的当前值。
index
可选用于测试的当前值的索引。
array
可选调用
every
的当前数组。
thisArg
执行
callback
时使用的this
值。返回值
如果回调函数的每一次返回都为 truthy 值,返回
true
,否则返回false
。示例如下:
function isBigEnough(element, index, array) { return element >= 10; } console.log(arr.every(isBigEnough)) // false
2.同样完成刚才的目标,使用 every 遍历就可以做到 break 那样的效果,简单的说 return false 等同于 break,return true 等同于 continue。如果不做处理,这里不写任何代码,相当于continue。代码如下所示。
let arr = [1, 2, 3, 4, 5, 6]
// every需要你写返回值的,every默认返回的是false
arr.every(function(item){
if(item === 4){
// return false相当于break
// 如果不做处理,这里不写任何代码,相当于continue
}else {
console.log(item)
}
return true
})
效果如下:
四、ES5之for...in...循环
1.基本用法语法:
for (let index in object) { // 执行的代码块 }
var 必须。指定的变量可以是数组元素,也可以是对象的属性。 object 必须。指定迭代的的对象。
2.特殊点
① for…in 确实可以遍历数组,因为数组也是对象,而且还支持 continue、break等功能,但是它却有瑕疵,这是因为 for…in 是为遍历对象创造的({a:1,b:2}),不是为数组设计的,如果 array 有自定义属性,你发现也会被遍历出来(显然不合理)【代码1】。有趣的是,for(let index in arr)中的index并非数字,而是字符串,其实这与普通object常用字符串作为属性标识符也是有关系的【代码2】
代码1:显然for in不只是遍历数组,还可以遍历对象,甚至还可以遍历自定义属性
let arr = [1, 2, 3, 4, 5, 6]
arr.a = 11
for (let index in arr){
console.log(index, arr[index])
}
结果:
代码2:显然index是个字符串而非数字类型,而且支持break和continue。其实结果截图左边黑色字体就是字符串的说明代表了
for (let index in arr){
if(Number(index) === 2){
console.log(typeof index)
continue
}
console.log(index, arr[index])
}
结果:
[!DANGER]
for…in代码块中不能有 return,不然会抛出异常。
五、ES6之for...of...循环
1.语法
for (variable of iterable) { }
看下这个伪代码,of 后面是 iterable 既不是 for 循环规定的 array,也不是 for…in 规定的 Object,而是 iterable。如果查查 iterable 的含义就很直观的感受到 for…of 遍历的是一切可遍历的元素(数组、对象、集合)等,不要小瞧这个功能,因为在 ES6 中允许开发者自定义遍历,换句话说任何数据结构都可以自定义一个遍历,这个遍历是不能被 for、for…in 理解和实现的。(这部分在新的博客中介绍)
简单的示例,上代码
let arr = [1, 2, 3, 4, 5, 6]
for (let value of arr) {
console.log(value)
}
结果:
[!TIP]
for…of是支持 break、continue、return的,所以在功能上非常贴近原生的 for。
说明:for of是可以直接把他的value值给遍历出来的,而不用像for in一样还要有通过arr[key]属性才能把值给遍历出来