Ignite

你不知道的JS(一)

2017-09-02

javaScript数组的遍历,在项目中遇到的是这个问题:
直接上图:

主要针对数组的遍历有一下方法:

传统方法:

1
2
3
4
var arr=[1,2,3,4,5,6];
for(var i=0;i<arr.length;i++){
console.log(arr[i]);
}

for in方法

1
2
3
4
var arr=[1,2,3,4,5,6];
for(var i in arr){
console.log(arr[i]);
}

for each 方法:

1
2
3
4
5
6
Array.forEach(callback)
forEach()方法是ES2.1标准引入的。
var arr=[1,2,3,4,5,6];
arr.forEach(function(v,i){//v==value 为arr项,i==index 为arr索引
console.log(i+' 'v );
})

在最新的ES6中新增了一个方法
for of方法

遍历Array可以采用下标循环,遍历map和Set就无法使用下标,无法使用索引进行遍历
,为了统一集合类型,ES6标准引入了新的iterable类型,
Array、Map和Set都属于iterable类型。
具有iterable类型的集合可以通过新的for…of循环遍历。

1
2
3
4
var arr=[1,2,3,4,5,6];
for(var value of Arr){
console.log(value);
}

for … of循环和for … in循环有何区别
for … in循环,它遍历的实际上是对象的属性名称。

一个Array数组实际上也是一个对象,它的每个元素的索引被视为一个属性。

当我们手动给Array对象添加了额外的属性后,for … in循环将带来意想不到的意外效果:

for in 遍历数组时会为把数组索引作为键值 如:数组0、1、2、3、4、5、…的键;当我们这样写:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var arr=[1,2,3,4,5,6];
arr.value='val';
//在使用for in 遍历时
for(var i in arr){
console.log(i+' '+arr[i]);//这时的i为键值,不为数组索引
}
//输出
0 1
1 2
2 3
3 4
4 5
5 6
value val
接着执行,这时出现问题:

arr;//输出[1, 2, 3, 4, 5, 6]

//使用 console.log(arr)时,这样
console.log(arr);//输出[1, 2, 3, 4, 5, 6, value: "val"]

//alert(arr)时
alert(arr);//输出[1, 2, 3, 4, 5, 6]

而当我们使用for of 时:

1
2
3
4
5
6
7
8
9
10
11
12
13
var arr=[1,2,3,4,5,6];
arr.value='val';
//在使用for in 遍历时
for(var v of arr){
console.log(v);//v为数组的项
}
//输出
1
2
3
4
5
6

直接遍历出值

Map 遍历:

map:和forEach非常相似,都是用来遍历数组中的每一项值的,用来遍历数组中的每一项;

区别:map的回调函数中支持return返回值;

1
2
3
4
5
6
var ary = [12,23,24,42,1];
var res = ary.map(function (item,index,input) {
return item*10;
})
console.log(res);//-->[120,230,240,420,10];
console.log(ary);//-->[12,23,24,42,1];
使用支付宝打赏
使用微信打赏

若你觉得我的文章对你有帮助,欢迎点击上方按钮对我打赏

扫描二维码,分享此文章