【JS】中遍历数组的几种方法

1. for 遍历数组

1.1 for 的普通遍历

1.2 for 优化版遍历

2.while 遍历数组

3. for...in 方法

3.1 遍历数组

3.2 遍历对象

4. for...of 方法 (ES6)

5. forEach() 方法

5.1 遍历普通数组

5.2 forEach() 遍历对象类型数组

6. map() 方法

1. for 遍历数组

1.1 for 的普通遍历

var name = ['Peter','Stark','Jack'];
// for 循环
for(var i = 0; i < name.length; i++) {console.log(name[i]);
}

1.2 for 优化版遍历

var name = ['Peter','Stark','Jack'];
// 先缓存 name.length
for(var i = 0, len = name.length; i < len; i++) {console.log(name[i]);
}

2.while 遍历数组

// while 循环
var i = 0;
while (i < name.length) {console.log(name[i]);i++;
}
//while 逆向遍历
var i = name.length;
while (i--) {console.log(name[i]);
}

3. for...in 方法

注意：

1.index索引为字符串型数字，不能直接进行几何运算
2.遍历顺序有可能不是按照实际数组的内部顺序
3.使用for in会遍历数组所有的可枚举属性，包括原型。例如上栗的原型方法method和name属性
所以for in更适合遍历对象，不要使用for in遍历数组。

那么除了使用for循环，如何更简单的正确的遍历数组达到我们的期望呢（即不遍历method和name），ES6中的for of更胜一筹.

for in遍历的是数组的索引（即键名），而for of遍历的是数组元素值。

for of遍历的只是数组内的元素，而不包括数组的原型属性method和索引name

3.1 遍历数组

var a = [1, 2, 3];
for (var key in a) {console.log(a[key]);
}
/* 123 */

3.2 遍历对象

const object = {name: 'Peter',age: 12,isHuman: true
};
for (let key in object) {console.log(key + '---' + object[key]);
}

4. for...of 方法 (ES6)

var arr = ['a','b','c'];
for(let item of arr) {console.log(item);
}

5. forEach() 方法

用来遍历数组中的每一项，不影响原数组，性能差

缺陷你不能使用break语句中断循环，也不能使用return语句返回到外层函数。

5.1 遍历普通数组

var arr = [1,2,3,4];
arr.forEach = (function(item) {console.log(item);
})

5.2 forEach() 遍历对象类型数组

ES5的话也可以使用forEach，ES5具有遍历数组功能的还有map、filter、some、every、reduce、reduceRight等，只不过他们的返回结果不一样。但是使用foreach遍历数组的话，使用break不能中断循环，使用return也不能返回到外层函数。

const info = [{id: 1000, name: 'zhangsan'},{id: 1001, name: 'lisi'},{id: 1002, name: 'wangwu'}
]
arr.forEach( function(item) {console.log(item.id + '---' + item.name);
})
/* 1---zhangsan2---lisi3---wangwu */

6. map() 方法

支持return，相当与原数组克隆了一份，把克隆的每项改变了，不影响原数组

var arr = [1,2,3,4];
arr.map( function(item) {return item;
})

当然有了 箭头函数 => 后更方便

var arr = ['a','b','c'];
var newArray = arr.map(x => x);
alert(newArray); // ['a','b''c']

map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果

var newArray = arr.map(function (item) {return [expression];
})

例如：

var arr = [1,2,3,4];
var newArray = arr.map(x => x * x
)
alert(newArray); // [1,4,9,16]

【JS】中遍历数组的几种方法相关推荐

js中遍历数组的6种方式
1.原生js中for循环 var arr=[1,2,3,4,5];for(var i=0;i<arr.length;i++){console.log(arr[i]) //打印每一个数组元素} 2 ...
JS中遍历数组的两种方式
方式一 for循环 //遍历arr,获取arr中Person对象for(var i=0 ; i<arr.length ; i++){var p = arr[i];//判断Person对象的age ...
js中遍历对象的几种方法
一.前言我们知道,在js的对象中,有下面几种属性: 可枚举属性不可枚举属性从原型链上继承的属性以Symbol作为key值今天,我们就来谈一谈如何遍历这些属性. 二.遍历可枚举属性首先, ...
Java中遍历数组的三种方法
方法一:for循环(最常用) 方法二:利用 foreach 方法三:利用jdk自带方法:java.util.Arrays.toString //String类型的i数组 public class St ...
JS 中迭代数组的三种方法
第一种(forEach): const todo = [{id : '1',name : 'zhangsan',age : '20',},{id : '2',name : 'lisis',age : ...
python遍历数组的两种方法及将print的内容写入文件中
python遍历数组的两种方法第一种,最常用的,通过for in遍历数组 colours = ["red","green","blue"] ...
js遍历数组foreach_JavaScript forEach –如何在JS中遍历数组
js遍历数组foreach The JavaScript forEach method is one of the several ways to loop through arrays. Each ...
java和js中遍历数组和对象的总结
java和js中遍历数组和对象的总结在这儿写遍历数组和对象,权当复习和总结 1.java中数组的三种初始化方法 ①静态初始化 [java] view plaincopy 1. int[] arr = ...
php遍历数组哪个效率高,PHP遍历数组的三种方法及效率对比分析
PHP遍历数组的三种方法及效率对比分析发布于 2015-03-04 21:55:27 | 129 次阅读 | 评论: 0 | 来源: 网友投递 PHP开源脚本语言PHP(外文名: Hypertext ...

【JS】中遍历数组的几种方法

1. for 遍历数组

1.1 for 的普通遍历

1.2 for 优化版遍历

2.while 遍历数组

3. for...in 方法

3.1 遍历数组

3.2 遍历对象

4. for...of 方法 (ES6)

5. forEach() 方法

5.1 遍历普通数组

5.2 forEach() 遍历对象类型数组

6. map() 方法

【JS】中遍历数组的几种方法相关推荐

最新文章

热门文章