ES6 - 循环对象的对象并使用附加属性改变对象

dra*_*fly 1 javascript ecmascript-6

I\xe2\x80\x99m 尝试循环遍历对象的县对象,并将两个新属性(nameCombined 和 codeCombined)添加到现有键(Bucks 和 Montgomery)

\n

我才起身到这里。但无法变异:(

\n
Object.entries(object1).forEach((item, key) => item.map(item => console.log('item', item)));\n
Run Code Online (Sandbox Code Playgroud)\n

这是数据:

\n
const counties = {\n  "Bucks": {\n        "countyCode": "42017",\n        "globalStateCode": "PA",\n        "stateCode": "PA"\n    },\n    "Montgomery": {\n        "countyCode": "42091",\n        "globalStateCode": "PA",\n        "stateCode": "PA"\n    }\n};\n
Run Code Online (Sandbox Code Playgroud)\n

预期结果:

\n
"Bucks": {\n        "countyCode": "42017",\n        "globalStateCode": "PA",\n        "stateCode": "PA\xe2\x80\x9d,\n    nameCombined: \xe2\x80\x9cBucks (PA)", // basically this the end result of => key + " (" + counties[key].stateCode + ")"\n        codeCombined: \xe2\x80\x9c42017 PA Bucks\xe2\x80\x9d// basically this the end result of =>  counties[key].countyCode + " " + counties[key].stateCode + " " + key\n\n    },\n    "Montgomery": {\n        "countyCode": "42091",\n        "globalStateCode": "PA",\n        "stateCode": "PA\xe2\x80\x9d,\n    nameCombined: \xe2\x80\x9cMontgomery (PA)", // basically this the end result of => key + " (" + counties[key].stateCode + ")"\n        codeCombined: \xe2\x80\x9c42091 PA Montgomery\xe2\x80\x9d// basically this the end result of =>  counties[key].countyCode + " " + counties[key].stateCode + " " + key\n    }\n
Run Code Online (Sandbox Code Playgroud)\n

Ale*_*ied 6

entries使用and ,您走在正确的道路上forEach,但如果您想改变原始对象,那么map这不是您想要的——它的目的是迭代数组中的项目,并且最重要的是返回一个新数组。相反,您可以简单地改变 的正文中的原始内容forEach,如下所示:

const counties = {
  "Bucks": {
        "countyCode": "42017",
        "globalStateCode": "PA",
        "stateCode": "PA"
    },
    "Montgomery": {
        "countyCode": "42091",
        "globalStateCode": "PA",
        "stateCode": "PA"
    }
};

Object.entries(counties).forEach(([countyName, county]) => {
  county.nameCombined = `${county.countyCode} (${county.stateCode})`;
  county.codeCombined = `${county.countyCode} ${county.stateCode} ${countyName}`;
});

console.log(counties);
Run Code Online (Sandbox Code Playgroud)

请注意,您可以通过解构来减少county.someProperty上述所有内容,从而变得更可爱。另外值得注意的是——如果你正在改变对象,要小心——如果你做得太随意,可能会导致真正的调试噩梦。

编辑

回答评论里的问题:

为什么是[countyName, county]数组表示法?

Object.entries(someObject)的输出将是一个数组数组,其中内部数组由原始对象的属性/键和值组成。通过示例也许可以更好地理解这一点:

const lumberjanes = {
   scientist: 'Jo',
   strategist: 'Mal',
   enforcer: 'April',
   archer: 'Molly',
   wildcard: 'Ripley',
};

console.log(Object.entries(lumberjanes));

/*
Logs:
[
  ['scientist', 'Jo'],
  ['strategist', 'Mal'],
  ...etc
]
*/
Run Code Online (Sandbox Code Playgroud)

当我们循环该输出时,如果我们将其写为

Object.entries(lumberjanes)
    .forEach(entry => `Name: ${entry[1]}; Role: ${entry[0]}`);
Run Code Online (Sandbox Code Playgroud)

我们必须通过索引来访问这些值,这乍一看不太可读。相反,如果我们可以在函数体中访问参数之前使用解构将该参数分离为命名变量,如下所示:

Object.entries(lumberjanes)
    .forEach(([name, entry]) => `Name: ${name}; Role: ${entry}`);
Run Code Online (Sandbox Code Playgroud)