在JS中取消嵌套对象数组答案

【问题标题】：Unnesting array of object in JS在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

标签： javascript arrays unnest

【解决方案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)

【讨论】：