循环遍历的几种方式总结

一、for

普通for循环 是最早出现的遍历语句

// 遍历数组
let arr = [1,2,3,4,5];
for(let i = 0; i < arr.length; i++){
    console.log(i);   // 索引，数组下标 0 1 2 3 4
    console.log(arr[i]);   // 数组下标所对应的元素 1 2 3 4 5
}
 
// 遍历对象
let obj = {name:"leo", age:20, country:"China"};
console.log(Object.keys(obj))     //通过Object.keys(obj)遍历返回一个数组['name','age','country']
for(let i = 0, keys = Object.keys(obj); i < keys.length; i++){
    console.log(keys[i]);   // 对象的键值 name age country
    console.log(obj[keys[i]]);   // 对象的键对应的值 leo 20 China
}
 
// 遍历字符串
let str = "abcdef";
for(let i = 0; i < str.length; i++){
    console.log(i);   // 索引，字符串的下标 0 1 2 3 4 5
    console.log(str[i]);   // 字符串下标所对应的元素 a b c d e f
}

二、forEach

forEach 是ES5版本发布的，按升序为数组中含有效值的每一项执行一次回调函数，那些已删除或者未初始化的项将被跳过（例如在稀疏数组上），一般认为是普通for循环的加强版。

// 遍历数组
let arr = [1,2,3,4,5];
arr.forEach(item => {
    console.log(item);   // 直接输出了数组的元素 1 2 3 4 5
});
 
// 遍历对象
let obj = {name:"leo", age:20, country:"China"};
let keys = Object.keys(obj);
keys.forEach(i => {
    console.log(i);   // 对象的键值 name age country
    console.log(obj[i]);   // 对象的键对应的值 leo 20 China
});

三、map

map 是ES5版本发布的，遍历时可以返回一个新数组，新数组的结果是原数组中的每个元素都调用一次提供的函数后的返回值。

let arr = [
    {name:'张三',age:'19'},
    {name:'李四',age:'34'},
    {name:'王五',age:'65'},
];
arr.map((item,index)=>{
    item.sex='男'
})
console.log(arr)
//let arr = [
//    {name:'张三',age:'19',sex:'男'},
//    {name:'李四',age:'34',sex:'男'},
//    {name:'王五',age:'65',sex:'男'},
//];


或


let arr = [
    {name:'张三',age:'19'},
    {name:'李四',age:'34'},
    {name:'王五',age:'65'},
];
var newArr=arr.map((item,index)=>{
    item.sex='男'
    return item
})
console.log(newArr)
//let arr = [
//    {name:'张三',age:'19',sex:'男'},
//    {name:'李四',age:'34',sex:'男'},
//    {name:'王五',age:'65',sex:'男'},
//];


或


let arr = [
    {name:'张三',age:'19'},
    {name:'李四',age:'34'},
    {name:'王五',age:'65'},
];
var newArr=arr.map(item=>Number(item.age))
console.log(newArr)
//let arr = [
//    {name:'张三',age:'19',sex:'男'},
//    {name:'李四',age:'34',sex:'男'},
//    {name:'王五',age:'65',sex:'男'},
//];

let arr = [1,2,3,4,5];
let newArr = arr.map(i => i * i);
console.log(newArr);   // [1, 4, 9, 16, 25]

四、for in

for in 是ES5版本发布的，以随机顺序遍历一个对象中除 Symbol 以外的可枚举属性（包括原型对象上的可枚举属性）。它是为遍历对象属性而构建的，不建议与数组一起使用。

// 遍历数组
let arr = [1,2,3,4,5];
for(let i in arr){
    console.log(i);   // 索引，数组下标 0 1 2 3 4
    console.log(arr[i]);   // 数组下标所对应的元素 1 2 3 4 5
}
 
// 遍历对象
let obj = {name:"leo", age:20, country:"China"};
for(let key in obj){
    console.log(key);   // 对象的键 name age country
    console.log(obj[key]);   // 对象的键对应的值 leo 20 China
}
 
// 遍历字符串
let str = "abcdef";
for(let i in str){
    console.log(i);   // 索引，字符串下标 0 1 2 3 4 5
    console.log(str[i]);   // 字符串下标所对应的元素 a b c d e f
}

五、for of

for of 是ES6版本发布的，在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句。用于遍历可迭代对象的数据。

// 迭代数组
let arr = [1,2,3,4,5];
for(let item of arr){
    console.log(item);   // 遍历数组元素 1 2 3 4 5
}
 
// 迭代字符串
let str = "abcdef";
for(let item of str) {
    console.log(item);   // 遍历字符串元素 a b c d e f
}
 
// 迭代Map
let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);
for (let entry of iterable) {
    console.log(entry);  // 遍历Map中可迭代元素 ["a", 1] ["b", 2] ["c", 3]
}
 
// 迭代Set
let iterable = new Set([1, 1, 2, 2, 3, 3,4]);
for (let value of iterable) {
    console.log(value);   // 遍历Set中可迭代元素 1 2 3 4
}
 
// 迭代arguments类数组对象
function fn(){
  for (let argument of arguments) {
    console.log(argument);
  }
}
fn(1, 2, 3);   // 1 2 3

四、使用建议

1、如果你需要将数组按照某种规则映射成为另一个数组，推荐使用 map。

2、如果你需要进行简单的遍历，可以用for、forEach 或者 for of。

3、如果你需要对一个纯对象进行遍历，推荐使用 for in。

4、如果你需要对迭代器进行遍历，推荐使用 for of。

5、如果你需要过滤出符合条件的项，可以用 filter。

6、如果你需要先按照规则映射为新数组，再根据条件过滤，那可以使用一个 map 加一个 filter。