mfa*_*ord 3 javascript arrays reduce object
我开始使用reduce,但我很难概念化如何使用它。当使用数字时我理解它,但是当涉及对象和其他数据时,我很难遵循逻辑。我想获取一个对象数组并返回一个带有countryName 键的对象,值是带有其余国家/地区数据的对象。任何帮助将不胜感激!
数据
var countries = [
{
"countryCode": "AF",
"countryName": "Afghanistan",
"population": "29121286",
"capital": "Kabul",
"continentName": "Asia"
},
{
"countryCode": "AL",
"countryName": "Albania",
"population": "2986952",
"capital": "Tirana",
"continentName": "Europe"
},
{
"countryCode": "DZ",
"countryName": "Algeria",
"population": "34586184",
"capital": "Algiers",
"continentName": "Africa"
},
]
Run Code Online (Sandbox Code Playgroud)
预期输出
{
Afghanistan: {
"countryCode": "AF",
"population": "29121286",
"capital": "Kabul",
"continentName": "Asia"
},
Albania: {
"countryCode": "AL",
"population": "2986952",
"capital": "Tirana",
"continentName": "Europe"
},
Algeria: {
"countryCode": "DZ",
"population": "34586184",
"capital": "Algiers",
"continentName": "Africa"
},
}
Run Code Online (Sandbox Code Playgroud)
基础尝试
function organizeByCountry(countries) {
return countries.reduce((acc, country) => {
return country.countryName
}, {})
}
Run Code Online (Sandbox Code Playgroud)
hex*_*ioc 10
Array.prototype.reduce的典型用法可以可视化为一个函数,它从第一个列表条目和作为第二个参数提供的累加器开始,一次逐步构建输出一个列表条目(在本例中为{})。
reduce为每个列表项调用回调(除非您不传递累加器,您可以在MDN上阅读更多相关内容)。在您的情况的第一次调用中,回调接收如下参数:
acc = {};
country = {
countryCode: "AF",
countryName: "Afghanistan",
population: "29121286",
capital: "Kabul",
continentName: "Asia"
};
Run Code Online (Sandbox Code Playgroud)
我们现在开始构建结果。我们想要一个对象,其键作为国家/地区名称,值作为对象中的其余属性。我们通过修改累加器来构建这一点:
acc[country.countryName] = {
countryCode: country.countryCode,
population: country.population,
capital: country.capital,
continentName: country.continentName
};
Run Code Online (Sandbox Code Playgroud)
然后我们从回调中返回这个修改后的累加器。在下一次调用回调时reduce,回调接收先前返回的累加器作为参数acc,并将第二个列表项接收为country:
acc = {
Afghanistan: {
countryCode: "AF",
population: "29121286",
capital: "Kabul",
continentName: "Asia"
}
};
country = {
countryCode: "AL",
countryName: "Albania",
population: "2986952",
capital: "Tirana",
continentName: "Europe"
};
Run Code Online (Sandbox Code Playgroud)
此时,我们重复并返回修改后的累加器。reduce使用更新的累加器和列表中的最后一项最后一次调用回调后,回调返回的值将由reduce函数本身返回。因此,我们现在使用reduce.
上述逻辑可以简明地实现如下,同时另外避免突变:
function organizeByCountry(countries) {
return countries.reduce((acc, country) => {
const {countryName, ...rest} = country;
return {...acc, [countryName]: rest};
}, {});
};
Run Code Online (Sandbox Code Playgroud)