typescript:根据位置排序和数组

Question

我的目标是根据其定义的位置进行排序和数组。它必须比较一个id，如果它存在，则在一个新的数组中返回它及其组件。到目前为止，我非常拘泥于这个算法

const forms: FormsToLocale = {
["ja"]: [
{ componentId: "email", position: 1 },
{ componentId: "title", position: 2 },
{ componentId: "japanName", position: 3 },
{ componentId: "phoneNumber", position: 4 },
],
["en-HK" || "en-MO"]: [
{ componentId: "email", position: 1 },
{ componentId: "verificationCode", position: 2 },
{ componentId: "title", position: 3 },
{ componentId: "firstName", position: 4 },
{ componentId: "lastName", position: 5 },
],
default: [
{ componentId: "email", position: 1 },
{ componentId: "title", position: 2 },
{ componentId: "firstName", position: 3 },
{ componentId: "lastName", position: 4 },
{ componentId: "phoneNumber", position: 5 },
],
};
const componentsFormMapping: ComponentFormMapping[] = [
{ componentId: "email", component: "EmailLightAccountComponent" },
{ componentId: "title", component: "TitleLightAccountComponent" },
{ componentId: "firstName", component: "FirstnameLightAccountComponent" },
{ componentId: "lastName", component: "LastnameLightAccountComponent" },
{ componentId: "japanName", component: "JapanNameLightAccountComponent" },
{ componentId: "phoneNumber", component: "PhoneLightAccountComponent" },
{ componentId: "verificationCode", component: "SendCodeComponent" },
];
const createForm = () => {
const japanForm = forms["ja"];
japanForm.map((componentF) => {
console.log(componentsFormMapping.find((component) => componentF.componentId === component.componentId)!.component);
})
}
createForm();

预期输出：["EmailLightAccountComponent"、"TitleLightAccountComponent(标题LightAccountComponent("、"JapanNameLightAccountComponent

感谢您的帮助

Answer 1

您可以稍微更改数据并映射相应的组件。

const
forms = {
ja: ["email", "title", "japanName", "phoneNumber"],
"en-HK": ["email", "verificationCode", "title", "firstName", "lastName"],
default: ["email", "title", "firstName", "lastName", "phoneNumber"]
},
components = {
email: "EmailLightAccountComponent",
title: "TitleLightAccountComponent",
firstName: "FirstnameLightAccountComponent",
lastName: "LastnameLightAccountComponent",
japanName: "JapanNameLightAccountComponent",
phoneNumber: "PhoneLightAccountComponent",
verificationCode: "SendCodeComponent"
},
createForm = type => forms[type].map(componentId => ({ componentId,  component: components[componentId] }));
forms["en-MO"] = forms["en-HK"];
console.log(createForm("ja"));

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

Answer 2

如果yout类型针对此任务进行了优化，则这将只是

const forms = {
ja: [
"email",
"title",
"japanName",
"phoneNumber",
],
"en-HK": [
"email",
"verificationCode",
"title",
"firstName",
"lastName",
],
get "en-MO"() { return this['en-HK'] },
"default": [
"email",
"title",
"firstName",
"lastName",
"phoneNumber",
],
} as const;
const componentsFormMapping = {
"email": "EmailLightAccountComponent",
"title": "TitleLightAccountComponent",
"firstName": "FirstnameLightAccountComponent",
"lastName": "LastnameLightAccountComponent",
"japanName": "JapanNameLightAccountComponent",
"phoneNumber": "PhoneLightAccountComponent",
"verificationCode": "SendCodeComponent",
} as const;
function createForm(lang: keyof typeof forms) {
return forms[lang].map(e => componentsFormMapping[e])
}

是否有理由使用提供的类型？如果是，那么解释一下，这样我就可以为你的用例写作了。

---

无论如何，解决方案是

function createForm(lang: keyof typeof forms) {
return forms[lang]
.sort((a, b) => a.position - b.position)
.map(e => componentsFormMapping
.find(c => c.componentId == e.componentId)!.component)
}