JS递归遍历对象获得Value值方法技巧

在JavaScript中，我们经常需要遍历对象，获取对象的属性值。但是如果对象嵌套结构比较复杂，使用普通的方式遍历取值就会变得很繁琐，这时就需要用到递归遍历对象的方法。

递归函数的基本原理

递归函数是指在函数内部调用函数本身。递归函数在处理对象嵌套结构时，可以使用深度优先遍历原则，遍历到最底层的节点后，再返回到上一个节点继续执行。需要注意的是，使用递归函数时，一定要考虑好递推条件，否则会产生无限循环的情况。

递归遍历对象方法技巧

1. 首先需要定义一个函数，用来递归遍历对象。

function traverse(obj) {
  // 遍历对象属性并获取属性值
}

1. 在函数内部使用 for...in 循环遍历对象的属性，当属性值是个对象时，用递归函数继续遍历这个对象。

function traverse(obj) {
  for (var key in obj) {
    if (typeof obj[key] === 'object') {
      traverse(obj[key]);
    } else {
      // 获取属性值
    }
  }
}

1. 在获取属性值的地方，进行必要的处理或记录。

function traverse(obj) {
  for (var key in obj) {
    if (typeof obj[key] === 'object') {
      traverse(obj[key]);
    } else {
      console.log(key + ':' + obj[key]);
    }
  }
}

示例说明

示例一

假设现在有一个对象，其中嵌套了其它对象：

var obj = {
  a: {
    b: {
      c: 'value1',
      d: 'value2'
    },
    e: 'value3'
  },
  f: 'value4'
};

如果需要获取这个对象中所有的属性值，可以通过递归方法来获取：

function traverse(obj) {
  for (var key in obj) {
    if (typeof obj[key] === 'object') {
      traverse(obj[key]);
    } else {
      console.log(key + ':' + obj[key]);
    }
  }
}

traverse(obj);

此时在控制台中可以看到对象中所有的属性及对应的值。

示例二

假设现在有一个对象，其中嵌套了其它对象和数组：

var obj = {
  a: {
    b: [{
      c: 'value1',
      d: 'value2'
    }],
    e: 'value3'
  },
  f: 'value4'
};

如果需要获取这个对象中所有的属性值，可以通过递归方法来获取，需要注意的是，当取到数组时需要使用 for...of 循环来遍历数组的每一个值：

function traverse(obj) {
  for (var key in obj) {
    if (typeof obj[key] === 'object') {
      if (Array.isArray(obj[key])) { // 判断是否为数组
        for (var item of obj[key]) {
          traverse(item);
        }
      } else {
        traverse(obj[key]);
      }
    } else {
      console.log(key + ':' + obj[key]);
    }
  }
}

traverse(obj);

此时在控制台中可以看到对象中所有的属性及对应的值。