JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解

JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解

在javascript中，遍历数组和对象是非常常见的操作。它们之间有一些区别，我们需要学会如何正确遍历它们。此外，递归遍历对象、数组、属性也是非常重要的技能。在本文中，我们将详细讲解相关内容。

一、JS遍历数组和对象的区别

1. 遍历数组

遍历数组通常使用for循环或forEach()方法。for循环可以使用数组的length属性，使用索引值来遍历数组。如下所示：

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

// 输出结果：
// 1
// 2
// 3

forEach()方法是数组自带的方法，它接收一个回调函数作为参数，该函数接收当前遍历到的元素、索引值和数组本身作为参数。如下所示：

let arr = [1, 2, 3];
arr.forEach(function(num, index, array){
    console.log(num);
});

// 输出结果：
// 1
// 2
// 3

1. 遍历对象

遍历对象通常使用for-in循环或Object.keys()方法。for-in循环会遍历对象的所有可枚举属性（包括原型链上的属性），它会将属性名作为变量来遍历。如下所示：

let obj = {name: 'Jerry', age: 18};
for(let key in obj){
    console.log(key + ': ' + obj[key]);
}

// 输出结果：
// name: Jerry
// age: 18

Object.keys()方法会返回一个对象中所有可枚举的属性名组成的数组，然后我们可以使用for循环来遍历该数组。如下所示：

let obj = {name: 'Jerry', age: 18};
let keys = Object.keys(obj);
for(let i=0; i<keys.length; i++){
    let key = keys[i];
    console.log(key + ': ' + obj[key]);
}

// 输出结果：
// name: Jerry
// age: 18

二、递归遍历对象、数组、属性的方法详解

1. 递归遍历对象

递归遍历对象的方法，在函数内先获取当前对象的所有属性名，然后遍历各个属性，如果属性值是一个对象，则再次调用函数进行递归遍历，如果属性值不是对象，则输出该属性值。如下所示：

function iterateObj(obj){
    for(let key in obj){
        if(typeof obj[key] === 'object' && obj[key] !== null){
            iterateObj(obj[key]);
        }else{
            console.log(key + ': ' + obj[key]);
        }
    }
}
// 示例：
let obj = {name: 'Jerry', age: 18, address: {province: 'Zhejiang', city: 'Hangzhou'}};
iterateObj(obj);

// 输出结果：
// name: Jerry
// age: 18
// province: Zhejiang
// city: Hangzhou

1. 递归遍历数组

递归遍历数组的方法，在函数内先遍历数组各个元素，如果有元素是对象或数组，则再次调用函数进行递归遍历，如果不是，则直接输出该元素。如下所示：

function iterateArr(arr){
    for(let i=0; i<arr.length; i++){
        if(typeof arr[i] === 'object' && arr[i] !== null){
            if(Array.isArray(arr[i])){
                iterateArr(arr[i]);
            }else{
                iterateObj(arr[i]);
            }
        }else{
            console.log(arr[i]);
        }
    }
}
// 示例：
let arr = [1, 2, {name: 'Jerry', age: 18, address: {province: 'Zhejiang', city: 'Hangzhou'}}, [3, 4]];
iterateArr(arr);

// 输出结果：
// 1
// 2
// name: Jerry
// age: 18
// province: Zhejiang
// city: Hangzhou
// 3
// 4

1. 递归遍历属性

递归遍历属性可以通过递归遍历对象实现。如下所示：

function iterateProp(obj, prefix = ''){
    for(let key in obj){
        if(typeof obj[key] === 'object' && obj[key] !== null){
            iterateProp(obj[key], prefix + key + '.');
        }else{
            console.log(prefix + key + ': ' + obj[key]);
        }
    }
}
// 示例：
let obj = {name: 'Jerry', age: 18, address: {province: 'Zhejiang', city: 'Hangzhou'}};
iterateProp(obj);

// 输出结果：
// name: Jerry
// age: 18
// address.province: Zhejiang
// address.city: Hangzhou

以上是JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法的详细攻略。