如何用JavaScript遍历数组条目及处理多层对象的map方法

一、遍历数组的常用方式 #

下面是几种JavaScript中遍历数组条目的常用方法：

• 普通for循环：适合需要手动控制索引或中断遍历的场景

const arr = ['a', 'b', 'c'];
for (let i = 0; i < arr.length; i++) {
  console.log(`索引${i}的值：${arr[i]}`);
}

• forEach() 方法：数组内置的遍历方法，无需管理索引，直接处理每个元素

const arr = ['a', 'b', 'c'];
arr.forEach((item, index) => {
  console.log(`索引${index}的值：${item}`);
});

• for...of 循环：ES6新增的遍历方式，支持break/continue中断遍历，适用于大多数可迭代对象

const arr = ['a', 'b', 'c'];
for (const item of arr) {
  console.log(item);
  if (item === 'b') break; // 遍历到'b'时停止
}

• map() 方法：遍历数组并返回新数组，常用于转换元素结构（下文会用它处理嵌套对象）

二、用map()函数扁平化多层嵌套对象 #

针对你提供的示例，我们可以用map()遍历数组中的每个对象，然后提取嵌套对象内的具体值，构建扁平化的新对象。

针对固定嵌套规则的实现 #

如果每个属性的嵌套键是固定的（比如name对应s，tel对应n），可以直接写出转换逻辑：

const myObject = [
  {
    'name' : {'s': 'name1'},
    'surname' : {'s': 'surname1'},
    'tel' : {'n': 2223456789}
  },
  {
    'name' : {'s': 'name2'},
    'surname' : {'s': 'surname2'},
    'tel' : {'n': 1234567890}
  }
];

const newObject = myObject.map(item => ({
  name: item.name.s,
  surname: item.surname.s,
  tel: item.tel.n
}));

console.log(newObject);
// 输出结果与期望一致

通用扁平化实现（适配不同嵌套键） #

如果嵌套对象的键不固定（比如有的用s，有的用n），可以写一个通用函数提取嵌套对象的唯一值：

function flattenSingleLevelObj(obj) {
  const flatObj = {};
  for (const key in obj) {
    const nestedVal = obj[key];
    // 判断是否为非null的对象
    if (typeof nestedVal === 'object' && nestedVal !== null) {
      // 取出嵌套对象的第一个值（假设每个嵌套对象只有一个键）
      flatObj[key] = Object.values(nestedVal)[0];
    } else {
      flatObj[key] = nestedVal;
    }
  }
  return flatObj;
}

// 用map调用通用函数
const newObject = myObject.map(flattenSingleLevelObj);

这个通用方法不需要提前知道嵌套键的名称，只要每个属性对应的嵌套对象只有一个键，就能完成扁平化转换。

内容的提问来源于stack exchange，提问作者Poh st'john