Return 使用映射函数 [codesandbox] 一个对象而不是对象数组

Question

代码沙盒示例 https://codesandbox.io/s/throbbing-worker-8s68n?file=/src/index.js

所以我有一个对象，我正在通过删除 __number 更新密钥名称，我想将第一个密钥 [694 & 695] 移动到对象内部作为 id = 694。我没能做到这一点，因为我为每个键值都获得了一个新对象（参见下面的代码）。

var options = 
{
    "694": {
        "title_694": "Tiger",
        "category_694": "848",
        "description_694": "long description"
    },
    "695": {
        "title_694": "Turtles",
        "category_694": "347",
        "description_694": "long description"
    }
}

这是我的代码

Object.keys(options).map( value => (
      {
        [value] : Object.keys(options[value]).map((keyName) => (
              {[keyName.replace(/_*\d+/g, '')] : options[value][keyName]}
            )) 
      }
  )
)

输出如下

[
    {
        "694": [
            {
                "title": "Tiger"
            },
            {
                "category": "848"
            },
            {
                "description": "long description"
            }
        ]
    },
    {
        "695": [
            {
                "title": "Turtles"
            },
            {
                "category": "347"
            },
            {
                "description": "long description"
            }
        ]
    }
]

如何让它输出如下

[
    {
        "id": 694,
        "title": "Tiger",
        "category": "848",
        "description": "long description"
    },
    {
        "id":695,
        "title": "Turtles",
        "category": "347",
        "description": "long description"
    }
]

Answer 1

有一种不用地图的方法：

var result = [];
Object.keys(options).forEach((element) => {
  result.push({ id: element, ...options[element] });
});

输出：

[
    {
        "id": "694",
        "title_694": "Tiger",
        "category_694": "848",
        "description_694": "long description"
    },
    {
        "id": "695",
        "title_694": "Turtles",
        "category_694": "347",
        "description_694": "long description"
    }
]

如果您有更多问题，请问我。但是您需要更多代码才能从新键对象中删除 id

Answer 2

在不更改原始对象中的键名称的情况下使用 forEach

var result = [];
Object.keys(options).forEach((element) => {

  const item = Object.fromEntries(
    Object.entries(options[element]).map(([k, v]) => {
      k = k.replace(/_*\d+/g, "");
      return [k, v]
    })
  )
  result = [...result,{ id: element, ...item }]
  // Or you could use push which is slightly faster
  // To see benchmarks Google Spread operator vs push site: measurethat.net
  // result.push({ id: element, ...options[element] });
});

document.getElementById("app").innerHTML = `<pre>${JSON.stringify(
  result,
  null,
  4
)}</pre>`;

console.log(result);

输出

[
    {
        "id": "694",
        "title": "Tiger",
        "category": "848",
        "description": "long description"
    },
    {
        "id": "695",
        "title": "Turtles",
        "category": "347",
        "description": "long description"
    }
]

Answer 3

就我个人而言，我不喜欢手动构建一个全新的数组。

var options = {
    "694": {
        "title_694": "Tiger",
        "category_694": "848",
        "description_694": "long description"
    },
    "695": {
        "title_694": "Turtles",
        "category_694": "347",
        "description_694": "long description"
    }
}

let mutated = Object.values(Object.entries(options).map(([id, option]) => {
    return Object.assign({
        id: id,
    }, Object.fromEntries(Object.entries(option).map(([key, value]) => {
        return [key.replace(/_*\d+$/g, ''), value];
    })));
}));

这让第一个 map 函数相应地创建一个新数组，Object.assign 确保每个对象都有一个对象，Object.entries 和 Object.fromEntries 进行转换到成对数组，然后转换键，然后从成对数组返回。

阅读与 Object.entries 相关的 MDN 文档：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries

也链接到 Object.fromEntries 文档。

作为旁注，我已经修改了您的正则表达式以包含 end-of-line 匹配项，因此它将以预期的方式修改 w3tag_694 之类的内容。我还建议考虑将正则表达式中的 * 更改为更严格的 +。

需要注意的是：fromEntries 是一项相对较新的功能，但仍受其制造商支持的所有主要浏览器都支持。检查支持：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries#browser_compatibility

Return 使用映射函数 [codesandbox] 一个对象而不是对象数组

Return one object insted of array of objects using map function [codesandbox]

javascript

node.js

functional-programming

map-function