在JS中取消嵌套对象数组

Posted 2023-04-12

【中文标题】在JS中取消嵌套对象数组

【英文标题】：Unnesting array of object in JS

【发布时间】：2020-07-15 15:22:29

【问题描述】：

嵌套数组

[
        
            "id": 16,
            "created_at": "2020-07-01T14:09:14.066Z",
            "file": 
                "name": "Annotation 2020-04-08 135240.jpg"
            
        ,
        
            "id": 15,
            "created_at": "2020-07-01T14:08:31.558Z",
            "file": 
                "name": "Annotation 2020-04-08 135240.jpg"
            
        ,
        
            "id": 14,
            "created_at": "2020-07-01T14:07:32.869Z",
            "file": 
                "name": "Annotation 2020-04-08 135240.jpg"
            
        ]

我正在努力实现的目标

[
        
            "id": 16,
            "created_at": "2020-07-01T14:09:14.066Z",
            "name": "Annotation 2020-04-08 135240.jpg"           
        ,
        
            "id": 15,
            "created_at": "2020-07-01T14:08:31.558Z",
            "name": "Annotation 2020-04-08 135240.jpg"
        ,
        
            "id": 14,
            "created_at": "2020-07-01T14:07:32.869Z",
            "name": "Annotation 2020-04-08 135240.jpg"
        ]

【问题讨论】：

data = data.map((file: name,...o)=>(...o, name))

这能回答你的问题吗？ How to replace array of object property name in javascript

【参考方案1】：

您可以轻松地将 file.name 属性映射到它的父级，然后在完成后将 delete d.file 映射到。

基本示例：

const data = [
    "id": 16,
    "created_at": "2020-07-01T14:09:14.066Z",
    "file": 
      "name": "Annotation 2020-04-08 135240.jpg"
    
  ,
  
    "id": 15,
    "created_at": "2020-07-01T14:08:31.558Z",
    "file": 
      "name": "Annotation 2020-04-08 135240.jpg"
    
  ,
  
    "id": 14,
    "created_at": "2020-07-01T14:07:32.869Z",
    "file": 
      "name": "Annotation 2020-04-08 135240.jpg"
    
  
];

// [Option 1] Map and return new object
const targetData = data.map(d => ( id: d.id, created_at: d.created_at, name: d.file.name ));

// [Option 2] Create new property and delte old one
const targetData2 = data.map(d => 
  d.name = d.file.name;
  delete d.file;
  return d;
);



console.log(targetData);
console.log(targetData2);

您也可以使用Array.reduce 之类的方法或其他方法，但这是基本思想。

【讨论】：

最好使用解构并获取所需的属性，而不是删除它们

【参考方案2】：

这里可以使用map函数。

这将创建新数组。您可以为键赋值。

这不会删除您的原始数组。

const arr = [
  "id": 16,
  "created_at": "2020-07-01T14:09:14.066Z",
  "file": 
   "name": "Annotation 2020-04-08 135240.jpg"
  
 ,
 
  "id": 15,
  "created_at": "2020-07-01T14:08:31.558Z",
  "file": 
   "name": "Annotation 2020-04-08 135240.jpg"
  
 ,
 
  "id": 14,
  "created_at": "2020-07-01T14:07:32.869Z",
  "file": 
   "name": "Annotation 2020-04-08 135240.jpg"
  
 
]

var newArr = arr.map(function(elem) 
 return 
  id: elem.id,
  created_at: elem.created_at,
  name: elem.file.name
 
);

console.log(newArr);

【参考方案3】：

Destructure 输出file: name 属性并使用rest operator 将其余属性放入对象o。 使用 spread 运算符将对象 o 与属性名称 name 合并。使用shorthand properties。

复制所有对象。不修改数据中的原始对象。

data = [
    "id": 16,
    "created_at": "2020-07-01T14:09:14.066Z",
    "file": 
      "name": "Annotation 2020-04-08 135240.jpg"
    
  ,
  
    "id": 15,
    "created_at": "2020-07-01T14:08:31.558Z",
    "file": 
      "name": "Annotation 2020-04-08 135240.jpg"
    
  ,
  
    "id": 14,
    "created_at": "2020-07-01T14:07:32.869Z",
    "file": 
      "name": "Annotation 2020-04-08 135240.jpg"
    
  
];

data = data.map( (file: name, ...o) => (...o, name) )

console.log(data);

使用 for-of 循​​环快速就地突变（就地修改对象）。设置名称属性和删除文件属性：

data = [
    "id": 16,
    "created_at": "2020-07-01T14:09:14.066Z",
    "file": 
      "name": "Annotation 2020-04-08 135240.jpg"
    
  ,
  
    "id": 15,
    "created_at": "2020-07-01T14:08:31.558Z",
    "file": 
      "name": "Annotation 2020-04-08 135240.jpg"
    
  ,
  
    "id": 14,
    "created_at": "2020-07-01T14:07:32.869Z",
    "file": 
      "name": "Annotation 2020-04-08 135240.jpg"
    
  
];

for(const x of data) 
  x.name = x.file.name
  delete x.file


console.log(data)