數(shù)組轉(zhuǎn)對(duì)象
轉(zhuǎn)換前為數(shù)組：
轉(zhuǎn)換為對(duì)象的效果圖：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-778162.html
?
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-778162.html
return{
? ? ?editScreenVenue:[
? ? ? ? ? ? ? {label:'姓名', prop: 'name', size:'12',color: "#000",sort:0},
? ? ? ? ? ? ? {label:'單位（公司）', prop: 'company',size:'12',color: "#000",sort:1},
? ? ? ? ? ? ? {label:'手機(jī)號(hào)', prop: 'phone',size:'12',color: "#000",sort:2},
? ? ? ? ? ? ? {label:'職務(wù)', prop: 'job',size:'12',color: "#000",sort:3},
? ? ? ? ? ? ],//數(shù)組數(shù)據(jù)
} methods: {
// 數(shù)組轉(zhuǎn)對(duì)象方法
arrayToObject (arr) {
let map = {};
arr.forEach (item => {
map[item.prop] = {label: item.label, color: item.color, size: item.size};
});
return map;
},
//需要使用數(shù)組轉(zhuǎn)對(duì)象的方法
getData(){
let newObj= this.arrayToObject(this.editScreenVenue);
console.log(newObj,'newObj');
}
}數(shù)組對(duì)象的相互轉(zhuǎn)換
mounted() {
let str = '{"name":{"label":"姓名","color":"#e2534d","size":"12"},"company":{"label":"單位（公司）","color":"#8165a0","size":"12"},"phone":{"label":"手機(jī)號(hào)","color":"#f9974c","size":"12"},"job":{"label":"職務(wù)","color":"#ddd8c3","size":"12"}}';
let json = JSON.parse(str);
let editScreenVenue = Object.entries(json).map(([prop, {label, color, size}]) => ({
label,
prop,
size,
color,
}));
console.log(editScreenVenue,'json轉(zhuǎn)數(shù)組');
}, mounted() {
let editScreenVenue = [
{label:'姓名', prop: 'name', size:'12',color: "#000",sort:0},
{label:'單位（公司）', prop: 'company',size:'12',color: "#000",sort:1},
{label:'手機(jī)號(hào)', prop: 'phone',size:'12',color: "#000",sort:2},
{label:'職務(wù)', prop: 'job',size:'12',color: "#000",sort:3},
];
let result = editScreenVenue.reduce((accumulator, current) => {
accumulator[current.prop] = {
size: current.size,
color: current.color,
lable: current.label,
};
return accumulator;
}, {});
console.log(result,'數(shù)組轉(zhuǎn)對(duì)象');
},到了這里，關(guān)于vue 數(shù)組轉(zhuǎn)對(duì)象與對(duì)象轉(zhuǎn)數(shù)組（對(duì)象與數(shù)組的相互轉(zhuǎn)換）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
