目录
- for 遍历数组
- for in 遍历数组
- for of 遍历数组
- forEach遍历数组
- 优缺点总结
原文:https://blog.fundebug.com/2019/03/11/4-ways-to-loop-array-inj-javascript/
在js中我们有很多种方法来遍历数组和对象,它们之间的区别常常让人疑惑,本文中我将详细介绍以上四种方法的区别:
常用形式:
for(let i = 0;i < arr.length;i++){}
for(let i in obj){}
for(const v of obj){}
arr.forEach((i,v) => {/语句/})
1. 遍历数字属性语法:
1.1 for
var arr = ["1","2","3","4"]
for(var i = 0 ;i < arr.length;i++){
console.log(arr[i])
}
1.2 for... in
var arr = ["1","2","3","4"]
for(let i in arr){
console.log(arr[i])
}
1.3 for... of
var arr = ["1","2","3","4"]
for(var v of arr){
console.log(v)
}
1.4 forEach()
var arr = ["1","2","3","4"]
arr.forEach((v,i)=>{console.log(v)})
2. 遍历非数字属性:
2.1 for... in
var arr = ["a","b","c","d"]
arr .test = "hahaha"
for(let i in arr){
console.log(arr[i])
} //a,b,c,d,hahaha
2.2 其他三种语法;
其他三种语法都会忽略test非数字属性,只有for ... in 会遍历。
3. holes;
holes —— 如果遍历一个有空元素的数组["a"," ","c"]时,for ... in 和 forEach()都会跳过空位,即叫做 holes;
js 数组中是可以有空元素的,且其空元素也会被算到length中
var array = ["a"," ","c"];
array.length;//3
需要注意的是四种for循环模式处理 ["a"," ","c"]和 ["a",undefined,"c"] 的方式不尽相同。
3.1
对于有holes的 ["a"," ","c"] 来说,for ... in 和 forEach() 会跳过,而 for 和 for ... of 不会忽略,
3.2
对于 没有 空元素的 ["a",undefined,"c"]来说,四种遍历方式都一样。
4. 数组的 this :
for /for ... in /for ... of 时函数外部作用域的this会保留,而使用forEach()时,除非使用箭头函数,否则会改变this。
"use strict";
const arr = ["a","b"]
arr.forEach(function(){
console.log(this) //undefined
})
arr.forEach(()=>{
console.log(this) //window
})
总结;
-
for 和 for ... in 访问数组的下标,for ... of 和 forEach()直接访问数组的属性值。
-
建议使用for ... of 方法,它比for 简单,比for ... in 和 forEach()没有那么多奇怪现象。
-
for ... of 的缺点是读取数组的索引值不方便,而且不能链式调用,使用for ... of 的方法
for(const [v,i] of arr.entries()){ console.log(i,v) }
网友评论