遍历对象数组并拼接键值为逗号分隔字符串的优化方案

我有一个包含地址信息的对象数组：

let addressArray = [
  {
    street: '123 Charm St',
    city: 'Tuscaloosa',
    state: 'AL'
  },
  {
    street: '456 Hampton Ave',
    city: 'Tuscaloosa',
    state: 'AL'
  },
  {
    street: '789 Greenview Dr',
    city: 'Austin',
    state: 'TX'
  }
]

需要把每个键对应的所有值拼接成单个逗号分隔的字符串，示例结果如下：

streets = '123 Charm St,456 Hampton Ave,789 Greenview Dr'
cities = 'Tuscaloosa,Tuscaloosa,Austin'
states = 'AL,AL,TX'

目前我通过三次map调用再加join实现：

const streets = addressArray.map((elem) => elem.street).join(",");
const cities = addressArray.map((elem) => elem.city).join(",");
const states = addressArray.map((elem) => elem.state).join(",");

想知道有没有更简洁的方式，避免重复遍历数组？另外如果有空值，也要保留逗号分隔，比如下面的数组：

let addressArray = [
  {
    street: '',
    city: 'Tuscaloosa',
    state: 'AL'
  },
  {
    street: '456 Hampton Ave',
    city: 'Tuscaloosa',
    state: 'AL'
  },
  {
    street: '789 Greenview Dr',
    city: 'Austin',
    state: 'TX'
  }
]

对应的streets应该是,456 Hampton Ave,789 Greenview Dr。

解决方案 #

方案1：用reduce单次遍历收集值 #

只遍历数组一次，将每个键的值存入对应数组，最后统一拼接：

const { streets, cities, states } = addressArray.reduce((acc, curr) => {
  acc.streets.push(curr.street);
  acc.cities.push(curr.city);
  acc.states.push(curr.state);
  return acc;
}, { streets: [], cities: [], states: [] });

const streetsStr = streets.join(',');
const citiesStr = cities.join(',');
const statesStr = states.join(',');

这种方式比三次map效率更高，空值会被正常保留，拼接后自动生成符合要求的字符串。

方案2：用forEach遍历收集（更直观） #

如果觉得reduce不够直白，用forEach实现同样逻辑：

const streets = [];
const cities = [];
const states = [];

addressArray.forEach(addr => {
  streets.push(addr.street);
  cities.push(addr.city);
  states.push(addr.state);
});

const streetsStr = streets.join(',');
const citiesStr = cities.join(',');
const statesStr = states.join(',');

代码逻辑简单清晰，同样只遍历一次数组，兼容空值场景。

方案3：通用函数处理任意键（灵活复用） #

如果需要处理不同的键集合，可以写一个通用函数，适配更多场景：

function extractAndJoin(arr, keys) {
  const result = {};
  // 初始化每个键对应的数组
  keys.forEach(key => result[key] = []);
  
  arr.forEach(item => {
    keys.forEach(key => {
      result[key].push(item[key] ?? ''); // 兼容undefined或null的情况
    });
  });
  
  // 转换为逗号分隔字符串
  keys.forEach(key => {
    result[key] = result[key].join(',');
  });
  
  return result;
}

// 使用示例
const { streets, cities, states } = extractAndJoin(addressArray, ['street', 'city', 'state']);

这个函数可以灵活处理任意键，同时保证空值、undefined都能被正确处理，生成符合要求的拼接字符串。

内容的提问来源于stack exchange，提问作者RJK