将对象数组转换为新的数组，并按照其子元素进行排序

Question

将对象数组转换为新的数组，并按照其子元素进行排序

3

我有一个像这样的数组

var data = [
    {
        name: "Movies", info: "category_name",
        content: [
            { name: "Interstellar", info: "category_data" },
            { name: "Dark Knight", info: "category_data" },
        ]
    },
    {
        name: "Music", info: "category_name",
        content: [
            { name: "Adams", info: "category_data" },
            { name: "Nirvana", info: "category_data" },
        ]
    },
    {
        name: "Places", info: "category_name",
        content: [
            { name: "Jordan", info: "category_data" },
            { name: "Punjab", info: "category_data" },
        ]
    },
]

我想将它转换为这样的格式。

var transformedArray= [
  { name: "Movies", info: "category_name" },
  { name: "Interstellar", info: "category_data" },
  { name: "Dark Knight", info: "category_data" },
  { name: "Music", info: "category_name" },
  { name: "Adams", info: "category_data" },
  { name: "Nirvana", info: "category_data" },
  { name: "Places", info: "category_name" },
  { name: "Jordan", info: "category_data" },
  { name: "Punjab", info: "category_data" },
]

我不知道这种情况适合哪个关键字，我尝试将其映射到新数组中，但结果不如我所预期。

var newArr = []

var manipulate = data.map(item => {
    return (
        newArr.push(item),
        new1.map(items => {
            return (
                new1.push(items)
            )
        })
    )
})

那么如何将"data"转化为"transformedArray"?

- Khadam Ikhwanus

你介意解释一下你的代码吗？它对我来说不太有意义。 - Andreas

2个回答

4

您可以使用reduce方法和扩展语法...来实现这一点。

var data = [{"name":"Movies","info":"category_name","content":[{"name":"Interstellar","info":"category_data"},{"name":"Dark Knight","info":"category_data"}]},{"name":"Music","info":"category_name","content":[{"name":"Adams","info":"category_data"},{"name":"Nirvana","info":"category_data"}]},{"name":"Places","info":"category_name","content":[{"name":"Jordan","info":"category_data"},{"name":"Punjab","info":"category_data"}]}]

const result = data.reduce((r, {content, ...rest}) => {
  r.push({...rest}, ...content)
  return r;
}, []);

console.log(result);

你也可以使用 concat 和 reduce 代替展开语法。

var data = [{"name":"Movies","info":"category_name","content":[{"name":"Interstellar","info":"category_data"},{"name":"Dark Knight","info":"category_data"}]},{"name":"Music","info":"category_name","content":[{"name":"Adams","info":"category_data"},{"name":"Nirvana","info":"category_data"}]},{"name":"Places","info":"category_name","content":[{"name":"Jordan","info":"category_data"},{"name":"Punjab","info":"category_data"}]}]
const result = data.reduce((r, {content, ...rest}) => r.concat(rest, content), []);
console.log(result);

- Nenad Vracar

这正是 .flatMap 所做的。 - Mulan

flatMap 无法在我的控制台中使用，我认为这可能有效，但您能解释一下 r 和 rest 是从哪里来的吗？ - Khadam Ikhwanus

1

r 是累加器参数，下一个参数是迭代中当前对象，因此我们使用参数解构来获取内容属性，并使用剩余参数获取其余属性。 - Nenad Vracar

@Khadam Ikhwanus 为了更好的理解，您也可以在 https://jsfiddle.net/t28uy79g/1/ 上进行操作。 - Nenad Vracar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Patrick Roberts · Accepted Answer

使用 Array.prototype.flatMap()。如果您的浏览器或Node.js版本尚不支持此函数，请在下面包含一个简单的polyfill，基于规范。

if (!Array.prototype.flatMap) {
  Object.defineProperty(Array.prototype, 'flatMap', {
    configurable: true,
    writable: true,
    value: function flatMap (callback, thisArg = undefined) {
      return this.reduce((array, ...args) => {
        const element = callback.apply(thisArg, args);

        if (Array.isArray(element)) array.push(...element);
        else array.push(element);

        return array;
      }, []);
    }
  });
}

const data = [{name:'Movies',info:'category_name',content:[{name:'Interstellar',info:'category_data'},{name:'Dark Knight',info:'category_data'}]},{name:'Music',info:'category_name',content:[{name:'Adams',info:'category_data'},{name:'Nirvana',info:'category_data'}]},{name:'Places',info:'category_name',content:[{name:'Jordan',info:'category_data'},{name:'Punjab',info:'category_data'}]}];
const transformedArray = data.flatMap(({ content, ...o }) => [o, ...content]);

console.log(transformedArray);