如何从javascript中的对象数组映射多个属性

Posted 2023-02-22

【中文标题】如何从javascript中的对象数组映射多个属性

【英文标题】：how to map more than one property from array of object in javascript

【发布时间】：2019-05-12 03:12:12

【问题描述】：

我有一个 Object 数组，如下所示：

var obj = [
  a: 1, b: 5, c: 9,
  a: 2, b: 6, c: 10,
  a: 3, b: 7, c: 11,
  a: 4, b: 8, c: 12
];

我知道如何像这样使用Array.map() 获取单个对象。

var result = obj.map(x=>x.a)

这会给我以下结果

[1, 2, 3, 4]

但我想要如下结果：

[
  a: 1, b: 5,
  a: 2, b: 6,
  a: 3, b: 7,
  a: 4, b: 8
]

简而言之，我想从对象数组中选择几个字段（多个字段）

怎么做？

【问题讨论】：

创建一个新循环来过滤包含选定元素的数组

【参考方案1】：

您可以将.map() 与Object Destructuring 一起使用：

let data = [
    a:1,b:5,c:9, a:2,b:6,c:10,
    a:3,b:7,c:11, a:4,b:8,c:12
];
          
let result = data.map(( a, b ) => (a, b));

console.log(result);

.as-console-wrapper  max-height: 100% !important; top: 0; 

【参考方案2】：

如果像您的示例一样，您想要排除一个或几个特定属性，您可以使用解构并使用其余属性来创建一个仅包含您想要的属性的对象：

var obj = [
  a:1,b:5,c:9,
  a:2,b:6,c:10,
  a:3,b:7,c:11,
  a:4,b:8,c:12
];
const mapped = obj.map(( c, ...rest ) => rest);
console.log(mapped);

如果你想包含属性，只需从.map回调中提取它们：

var obj = [
  a:1,b:5,c:9,
  a:2,b:6,c:10,
  a:3,b:7,c:11,
  a:4,b:8,c:12
];
const mapped = obj.map(( a, b ) => ( a, b ));
console.log(mapped);

【参考方案3】：

使用map():

var data = [
  a:1,b:5,c:9,
  a:2,b:6,c:10,
  a:3,b:7,c:11,
  a:4,b:8,c:12
];
          
let modified = data.map(obj => (a: obj.a, b: obj.b))

console.log(modified);

或者，如果您更喜欢解构：

var data = [
    a:1,b:5,c:9, 
    a:2,b:6,c:10,
    a:3,b:7,c:11, 
    a:4,b:8,c:12
];
          
let modified = data.map(( a, b ) => (a, b));

console.log(modified);

【参考方案4】：

var obj = [
  a: 1, b: 5, c: 9,
  a: 2, b: 6, c: 10,
  a: 3, b: 7, c: 11,
  a: 4, b: 8, c: 12
];

var result = obj.map(e => (a:e.a , b:e.b));
console.log(result)

【参考方案5】：

您可以使用map() 返回具有所需属性的自定义对象

var obj = [a:1,b:5,c:9,
           a:2,b:6,c:10,
           a:3,b:7,c:11,
           a:4,b:8,c:12
          ];
          
          
let op = obj.map(e => 
   return  a:e.a, b: e.b ;
)        

console.log(op);

【参考方案6】：

在您生成[1,2,3,4] 的解决方案中，x.a 不是一些微语法，它实际上是一个成熟的 javascript 表达式。因此，您只需将其替换为 JavaScript 即可创建具有所需属性的新对象。

var result = obj.map(x=>a: x.a, b: x.b);

...几乎。额外的复杂性是=> 之后的 被解释为函数体的开头，而不是对象字面量的开头。您可以通过将对象文字包装在 else-noop 括号中来避免这种情况。

var result = obj.map(x=>(a: x.a, b: x.b));

【参考方案7】：

您可以为此创建自己的自定义函数，并将一组要提取的属性传递给它。 ：

var array = [a:1,b:5,c:9, a:2,b:6,c:10, a:3,b:7,c:11, a:4,b:8,c:12 ];

function extractProperties(arr, properties)
  return arr.map((obj)=> Object.keys(obj).reduce((acc,key)=>
    if(properties.has(key))    
      acc[key] = obj[key];  
    return acc;
  ,));

let set = new Set(["a","b"]);
let result = extractProperties(array, set);
console.log(result);

set.add("c");
console.log("**************result2**********")
let result2 = extractProperties(array, set);
console.log(result2);