前言
for循环在平时开发中使用频率最高，前后端数据交互时，常见的数据类型就是数组和对象，处理对象和数组时经常使用到 for 遍历，选择合适的数组循环遍历，可以提升开发效率。
常用的for循环为：for、for…in、for….of、for await…of、forEach、map
1、for
for 循环是出现最早，也是应用最普遍的一个遍历，能够满足绝大多数的遍历，可以遍历 数组、对象、字符串。
// 遍历数组
let arr = [1, 2, 3];
for (let i = 0; i < arr.length; i++){
console.log(arr[i]);
}
//遍历对象
let obj = {
job: 'web worker',
name:'web前端开发'
}
for (let i = 0, keys = Object.keys(obj); i< keys.length; i++){
console.log(obj[keys[i]]);
}
//遍历字符串
let str = 'abc'
for (let i = 0; i < str.length; i++){
console.log(str[i]);
}
2、for … in
for … in 是在 ES5 中新增的，以任意顺序迭代一个对象的除Symbol以外的可枚举属性，包括继承的可枚举属性。
// 遍历数组
let arr = [1, 2, 3];
for (let i in arr ){
console.log(i);//0 1 2
console.log(arr[i]);//1 2 3
}
//遍历对象
let obj = {
job: 'web worker',
name:'web前端开发'
}
for (let key in obj){
console.log(key); // job name
console.log(obj[key]); // web worker web前端开发
}
//遍历字符串
let str = 'abc'
for (let i in str){
console.log(i); // 0 1 2
console.log(str[i]); // a b c
}
3、for … of
for … of 语句在可迭代对象(包括 Array、Map、Set、String、TypedArray、arguments 对象等等)上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句。
// 迭代 Array
let arr = [1, 2, 3];
for (let val of arr ){
console.log(val); // 1 2 3
}
//迭代 String
let str = 'abc';
for (let val of str){
console.log(val); // a b c
}
// 迭代 TypedArray - 一个类型化数组，描述了一个底层的二进制数据缓冲区！
let iterable = new Uint8Array([0x00, 0xff]);
for (let value of iterable) {
console.log(value); // 0 255
}
// 迭代 Map - 对象保存键值对，能够记住键的原始插入顺序
let map = new Map([['a',1],['b',2]]);
for (let key of map) {
console.log('key',key); // ['a',1] ['b',2]
}
for (let [key,value] of map) {
console.log(key); // a b
console.log(value); // 1 2
}
// 迭代 Set
let set = new Set([1,2,3,2,1])
for (let val of set) {
console.log(val); // 1 2 3
}
4、for await…of
创建一个循环，该循环遍历异步可迭代对象以及同步可迭代对象，包括内置的 String、Array，类数组对象(arguments 或 nodeList)，TypedArray, Map, Set 和用户定义的异步/同步迭代器。
它使用对象的每个不同属性的值调用要执行的语句来调用自定义迭代钩子。
类似于 await 运算符一样，该语句只能在一个async function 内部使用。
async function* asyncGenerator() {
let i = 0;
while (i < 3) {
yield i++;
}
}
(async function () {
for await (num of asyncGenerator()) {
console.log(num); // 0 1 2
}
})();
5、forEach
forEach 是ES5版本发布的，按升序为数组中含有效值的每一项执行一次回调函数，那些已删除或者未初始化的项将被跳过(例如在稀疏数组上)，一般认为是 普通for循环 的加强版。
// 遍历数组
let arr = [1, 2, 3];
arr.forEach((item, index) => {
console.log(index); // 0 1 2
console.log(item); // 1 2 3
})
//遍历对象
le obj = {
job: 'web worker',
name:'web前端开发'
}
let keys = Object.keys(obj)
keys.forEach((key) => {
console.log(key); // job name
console.log(obj[key]); // web worker web前端开发
})
6、map
遍历时可以返回一个新数组，新数组的结果是原数组中每个元素都调用一次提供的函数后返回的值。
// 遍历数组 let arr = [1, 2, 3]; let newArr = arr.map((item) => item * 2); console.log(newArr); // [2,4,6]
使用场景差异
性能比较
在测试环境、测试数据条件一致的情况下，性能排序为：
for 的使用
在项目开发中，我们应该根据实际需求，去选择一个合适的 for 遍历。以下是一些使用建议：
