如何从JavaScript对象数组的指定属性中提取元素并生成新数组

没问题，这个需求很容易实现，我给你分两种场景来写代码：

一、保留重复元素的版本 #

如果你需要保留所有重复的zones值，用flatMap是最简洁的方式，它能同时完成映射和数组扁平化的操作，还能处理没有zones属性或者zones为空数组的对象：

const array = [ 
  {userId: 'P282', zones: ['188']}, 
  {userId: 'P277', zones: []}, 
  {userId: 'P280'}, 
  {userId: 'P281'}, 
  {userId: 'P279'}, 
  {userId: 'U57', zones: ['190', '189', '188']}, 
];

const zonesWithDuplicates = array.flatMap(obj => obj.zones || []);
console.log(zonesWithDuplicates); // 输出: ['188', '190', '189', '188']

这里的obj.zones || []是关键：如果对象没有zones属性，或者zones是undefined，就用空数组代替，避免把undefined当成元素混入结果里。

二、去除重复元素的版本 #

如果需要得到去重后的zones数组，只需要在上面的基础上结合Set（它会自动过滤重复值），再把Set转回数组即可：

const uniqueZones = [...new Set(array.flatMap(obj => obj.zones || []))];
console.log(uniqueZones); // 输出: ['188', '190', '189']

兼容旧环境的替代方案 #

如果你的项目需要兼容不支持flatMap的旧浏览器，也可以用reduce来实现：

// 保留重复的兼容写法
const zonesWithDuplicatesReduce = array.reduce((result, obj) => {
  return result.concat(obj.zones || []);
}, []);

// 去重的兼容写法
const uniqueZonesReduce = [...new Set(array.reduce((result, obj) => {
  return result.concat(obj.zones || []);
}, []))];

这样不管有没有zones属性、数组是空还是有值，都能完美处理啦！

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