如何使用映射将属性添加到我的对象中

Question

我想添加这个"可见"；属性并更改我的"；国家"；阵列，"；el2"；正在正确更改，但我最后的数组并不像预期的那样。

元素正在进入条件语句并被添加到新属性中，但在循环结束时，数组并没有像预期的那样出现

const countryVisible: any = ['EUA', 'CANADA']
const countries: any = [{name: 'EUA', id: '123'}, {name: 'CANADA', id: '321'}, {name: 'Italia', id: '322'}]
countries.map((el2, index2) => {
countryVisible.forEach((el, index) => {
if (el2['name'] === el) {
el2 = {...el2, visible: true}
console.log(el2) // {name: 'EUA', id: '123', visible: true} and {name: 'CANADA', id: '321', visible: true}
} else {
el2 = {...el2, visible: false}
console.log(el2) //{name: 'Italia', id: '322', visible: false}
}
})
})
console.log(countries)

输出：

[
{
"name": "EUA",
"id": "123"
},
{
"name": "CANADA",
"id": "321",
"visible": false
},
{
"name": "Italia",
"id": "322",
"visible": false
}
]

预期输出：

[
{
"name": "EUA",
"id": "123",
"visible": true
},
{
"name": "CANADA",
"id": "321",
"visible": true
},
{
"name": "Italia",
"id": "322",
"visible": false
}
]

Answer 1

您的代码存在一些小问题；两个问题(可能是3个(：

• 在map方法中没有return el2;
• 您不会将结果分配回countries，因此
• 应使用let声明变量countries

然后，有一个主要问题：

• 由于您是基于countryVisible数组而不是基于所考虑的国家/地区对象来设置visible的状态，因此即使第一次设置为true，也可以将可见状态设置为false。例如，在最终结果中将EUA设置为false
• 换言之，不是只检查和设置每个国家对象一次，而是每个国家对象的检查次数与国家对象的数量一样多

const countryVisible = ['EUA', 'CANADA'];
let countries = [{name: 'EUA', id: '123'}, {name: 'CANADA', id: '321'}, {name: 'Italia', id: '322'}];
countries = countries.map((el2, index2) => {
if( countryVisible.includes( el2['name'] ) ) {
el2 = {...el2, visible: true};;
} else {
el2 = {...el2, visible: false};;
}
return el2;
});
console.log(countries);

更好的方法：

考虑使用map并将visible属性添加到映射的元素中。

const countryVisible = ['EUA', 'CANADA'];
const countries = [{name: 'EUA', id: '123'}, {name: 'CANADA', id: '321'}, {name: 'Italia', id: '322'}];
const output = countries.map(
({name,id}) => 
({name,id,visible:countryVisible.includes(name)})
);
console.log( output );

Answer 2

您可以用.includes方法替换forEach循环

const countryVisible = ['EUA', 'CANADA'];
const countries = [{name: 'EUA', id: '123'}, {name: 'CANADA', id: '321'}, {name: 'Italia', id: '322'}];
const result = countries.map((country) => ({
...country, 
visible: countryVisible.includes(country.name),
}));
console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 3

您可以使用此语法为JS对象分配条件属性。(ES6(

const a = {
...(someCondition && {b: 5})
}

或者您可以使用Javascript Object.defineProperty内置函数

Object.defineProperty(obj, 'foo', {
value: 1
})