迭代对象数组并用逗号连接键值

Question

我有一个包含这样的地址的对象数组：

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'

目前我映射三次（每个键一次）并用逗号连接每个值，如下所示：

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

有更简洁的方法吗？所以我没有 3 次重复的地图调用？

注意：如果有空值，仍要用逗号分隔空值，例如：

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

Answer 1

您可以使用

Array#reduce

并将每个键的连接字符串存储在对象中以避免重复逻辑。

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"}];
const { streets, citys: cities, states } = addressArray.reduce((acc, curr) => {
  Object.entries(curr).forEach(([k, v]) => 
    Object.hasOwn(acc, k + 's') ? acc[k + 's'] += ',' + v : acc[k + 's'] = v);
  return acc;
}, {});
console.log(streets);
console.log(cities);
console.log(states);