[英]Turn 3 objects into multidimensional array
我有3个对象,其中包含有关svg图标(FontAwesome)的信息。 每个对象都具有相同的结构,但prefix
属性具有不同的值。 下面的对象使用fab
作为前缀,第二个far
和第三个fas
。
{
"facebook": {
"prefix": "fab",
"iconName": "facebook-alt",
"icon": [
448,
512,
[],
"f26e",
"M103.3 344.3c-6.5-14.2-6.9-18.3 7.4-23.1 25.6-8 8 9.2 43.2 49.2h.3v-93.9c1.2-50.2 44-92.2 97.7-92.2 53.9 0 97.7 43.5 97.7 96.8 0 63.4-60.8 113.2-128.5 93.3-10.5-4.2-2.1-31.7"
]
},
"twitter": {
"prefix": "fab",
"iconName": "twitter",
"icon": [
448,
512,
[],
"f368",
"M423.9 255.8L411 413.1c-3.3 40.7-63.9 35.1-60.6-4.9l10-122.5-41.1 2.3c10.1 20.7 15.8 43.9 15.8 68.5 0 41.2-16.1 78.7-42.3 106.5l-39.3-39.3c57.9-63.7 13.1-167.2-74-167.2-25.9 0-49.5"
]
},
"instagram": {
"prefix": "fab",
"iconName": "instagram",
"icon": [
640,
512,
[],
"f369",
"M482.2 372.1C476.5 365.2 250 75 242.3 65.5c-13.7-17.2 0-16.8 19.2-16.9 9.7-.1 106.3-.6 116.5-.6 24.1-.1 28.7.6 38.4 12.8 2.1 2.7 205.1 245.8 207.2 248.3 5.5 6.7 15.2 19.1 7.2"
]
},
}
第二个对象:
{
"arrowUp": {
"prefix": "far",
"iconName": "arrow-up",
"icon": [
448,
512,
[],
"f26e",
"M103.3 344.3c-6.5-14.2-6.9-18.3 7.4-23.1 25.6-8 8 9.2 43.2 49.2h.3v-93.9c1.2-50.2 44-92.2 97.7-92.2 53.9 0 97.7 43.5 97.7 96.8 0 63.4-60.8 113.2-128.5 93.3-10.5-4.2-2.1-31.7"
]
},
"arrowLeft": {
"prefix": "far",
"iconName": "arrow-left",
"icon": [
448,
512,
[],
"f368",
"M423.9 255.8L411 413.1c-3.3 40.7-63.9 35.1-60.6-4.9l10-122.5-41.1 2.3c10.1 20.7 15.8 43.9 15.8 68.5 0 41.2-16.1 78.7-42.3 106.5l-39.3-39.3c57.9-63.7 13.1-167.2-74-167.2-25.9 0-49.5"
]
},
"arrowRight": {
"prefix": "far",
"iconName": "arrow-right",
"icon": [
640,
512,
[],
"f369",
"M482.2 372.1C476.5 365.2 250 75 242.3 65.5c-13.7-17.2 0-16.8 19.2-16.9 9.7-.1 106.3-.6 116.5-.6 24.1-.1 28.7.6 38.4 12.8 2.1 2.7 205.1 245.8 207.2 248.3 5.5 6.7 15.2 19.1 7.2"
]
},
}
第三个对象:
{
"carrot": {
"prefix": "fas",
"iconName": "carrot",
"icon": [
448,
512,
[],
"f26e",
"M103.3 344.3c-6.5-14.2-6.9-18.3 7.4-23.1 25.6-8 8 9.2 43.2 49.2h.3v-93.9c1.2-50.2 44-92.2 97.7-92.2 53.9 0 97.7 43.5 97.7 96.8 0 63.4-60.8 113.2-128.5 93.3-10.5-4.2-2.1-31.7"
]
},
"cat": {
"prefix": "fas",
"iconName": "cat",
"icon": [
448,
512,
[],
"f368",
"M423.9 255.8L411 413.1c-3.3 40.7-63.9 35.1-60.6-4.9l10-122.5-41.1 2.3c10.1 20.7 15.8 43.9 15.8 68.5 0 41.2-16.1 78.7-42.3 106.5l-39.3-39.3c57.9-63.7 13.1-167.2-74-167.2-25.9 0-49.5"
]
},
"dog": {
"prefix": "fas",
"iconName": "dog",
"icon": [
640,
512,
[],
"f369",
"M482.2 372.1C476.5 365.2 250 75 242.3 65.5c-13.7-17.2 0-16.8 19.2-16.9 9.7-.1 106.3-.6 116.5-.6 24.1-.1 28.7.6 38.4 12.8 2.1 2.7 205.1 245.8 207.2 248.3 5.5 6.7 15.2 19.1 7.2"
]
},
}
我试图把上面看到的3个对象变成这个:
"brands": [
"facebook",
"twitter",
"instagram",
],
"regular": [
"arrow-up",
"arrow-left",
"arrow-right",
],
"solid": [
"carrot",
"cat",
"dog",
],
棘手的部分也是将前缀名称更改为数组的另一个值。 fab
是品牌, far
正规, fas
固体。
我正在使用React并拥有Babel。 这是我到目前为止所拥有的......
const objects = [
...Object.values( fab ),
...Object.values( far ),
...Object.values( fas ),
]
它将所有对象转换为数组,但我不确定如何获得我想要的结构。
如果将前缀更改为名称,我相信这是一个良好的开端......这只是将fab
换成brands
一个例子
//find the index of object from array
const objIndex = objects.findIndex(obj => obj.value === 'fab');
// make new object of updated object
const updatedObj = { ...objects[objIndex], prefix: 'brands'};
// make new array of objects
const updatedObjects = [
...objects.slice(0, objIndex),
updatedObj,
...objects.slice(objIndex + 1),
];
编辑:添加了camel-case到破折号的转换
如果对象总是在您发布时被分割出来,那么您是否可以执行以下操作:
const convertStrings = (str) => {
return str.replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`);
};
const objects = {
"brands": Object.keys(fab).map(convertStrings),
"regular": Object.keys(far).map(convertStrings),
"solid": Object.keys(fas).map(convertStrings),
}
这给了我输出:
{
brands: ["facebook", "twitter", "instagram"],
regular: ["arrow-up", "arrow-left", "arrow-right"],
solid: ["carrot", "cat", "dog"]
}
您正在寻找可以从Object.keys()
轻松获取的对象键
let obj1= {"facebook": { "prefix": "fab", "iconName": "facebook-alt","icon": [ 448, 512, [], "f26e", "M103.3 344.3c-6.5-14.2-6.9-18.3 7.4-23.1 25.6-8 8 9.2 43.2 49.2h.3v-93.9c1.2-50.2 44-92.2 97.7-92.2 53.9 0 97.7 43.5 97.7 96.8 0 63.4-60.8 113.2-128.5 93.3-10.5-4.2-2.1-31.7" ]},"twitter": {"prefix": "fab", "iconName": "twitter", "icon": [ 448, 512, [], "f368", "M423.9 255.8L411 413.1c-3.3 40.7-63.9 35.1-60.6-4.9l10-122.5-41.1 2.3c10.1 20.7 15.8 43.9 15.8 68.5 0 41.2-16.1 78.7-42.3 106.5l-39.3-39.3c57.9-63.7 13.1-167.2-74-167.2-25.9 0-49.5" ] },"instagram": {"prefix": "fab","iconName": "instagram", "icon": [ 640, 512, [], "f369","M482.2 372.1C476.5 365.2 250 75 242.3 65.5c-13.7-17.2 0-16.8 19.2-16.9 9.7-.1 106.3-.6 116.5-.6 24.1-.1 28.7.6 38.4 12.8 2.1 2.7 205.1 245.8 207.2 248.3 5.5 6.7 15.2 19.1 7.2"]},} let obj2={"arrowUp": { "prefix": "far", "iconName": "arrow-up", "icon": [ 448, 512, [], "f26e", "M103.3 344.3c-6.5-14.2-6.9-18.3 7.4-23.1 25.6-8 8 9.2 43.2 49.2h.3v-93.9c1.2-50.2 44-92.2 97.7-92.2 53.9 0 97.7 43.5 97.7 96.8 0 63.4-60.8 113.2-128.5 93.3-10.5-4.2-2.1-31.7"]},"arrowLeft": { "prefix": "far", "iconName": "arrow-left", "icon": [ 448, 512,[], "f368", "M423.9 255.8L411 413.1c-3.3 40.7-63.9 35.1-60.6-4.9l10-122.5-41.1 2.3c10.1 20.7 15.8 43.9 15.8 68.5 0 41.2-16.1 78.7-42.3 106.5l-39.3-39.3c57.9-63.7 13.1-167.2-74-167.2-25.9 0-49.5" ]}, "arrowRight": { "prefix": "far", "iconName": "arrow-right", "icon": [ 640, 512, [],"f369", "M482.2 372.1C476.5 365.2 250 75 242.3 65.5c-13.7-17.2 0-16.8 19.2-16.9 9.7-.1 106.3-.6 116.5-.6 24.1-.1 28.7.6 38.4 12.8 2.1 2.7 205.1 245.8 207.2 248.3 5.5 6.7 15.2 19.1 7.2"]},} let obj3 ={"carrot": {"prefix": "fas", "iconName": "carrot","icon": [ 448, 512, [],"f26e","M103.3 344.3c-6.5-14.2-6.9-18.3 7.4-23.1 25.6-8 8 9.2 43.2 49.2h.3v-93.9c1.2-50.2 44-92.2 97.7-92.2 53.9 0 97.7 43.5 97.7 96.8 0 63.4-60.8 113.2-128.5 93.3-10.5-4.2-2.1-31.7"]}, "cat": { "prefix": "fas", "iconName": "cat", "icon": [ 448, 512, [],"f368","M423.9 255.8L411 413.1c-3.3 40.7-63.9 35.1-60.6-4.9l10-122.5-41.1 2.3c10.1 20.7 15.8 43.9 15.8 68.5 0 41.2-16.1 78.7-42.3 106.5l-39.3-39.3c57.9-63.7 13.1-167.2-74-167.2-25.9 0-49.5"]}, "dog": { "prefix": "fas", "iconName": "dog", "icon": [ 640, 512, [],"f369","M482.2 372.1C476.5 365.2 250 75 242.3 65.5c-13.7-17.2 0-16.8 19.2-16.9 9.7-.1 106.3-.6 116.5-.6 24.1-.1 28.7.6 38.4 12.8 2.1 2.7 205.1 245.8 207.2 248.3 5.5 6.7 15.2 19.1 7.2" ]},} let op = [ {'brand': Object.keys(obj1)}, {'regular': Object.keys(obj2).map(e=> obj2[e].iconName)}, {'solid': Object.keys(obj3)} ] console.log(op)
您可以使用Object.keys
获取键名,然后映射值,返回obj[k].iconName
:
let fab= {"facebook": { "prefix": "fab", "iconName": "facebook-alt","icon": [ 448, 512, [], "f26e", "M103.3 344.3c-6.5-14.2-6.9-18.3 7.4-23.1 25.6-8 8 9.2 43.2 49.2h.3v-93.9c1.2-50.2 44-92.2 97.7-92.2 53.9 0 97.7 43.5 97.7 96.8 0 63.4-60.8 113.2-128.5 93.3-10.5-4.2-2.1-31.7" ]},"twitter": {"prefix": "fab", "iconName": "twitter", "icon": [ 448, 512, [], "f368", "M423.9 255.8L411 413.1c-3.3 40.7-63.9 35.1-60.6-4.9l10-122.5-41.1 2.3c10.1 20.7 15.8 43.9 15.8 68.5 0 41.2-16.1 78.7-42.3 106.5l-39.3-39.3c57.9-63.7 13.1-167.2-74-167.2-25.9 0-49.5" ] },"instagram": {"prefix": "fab","iconName": "instagram", "icon": [ 640, 512, [], "f369","M482.2 372.1C476.5 365.2 250 75 242.3 65.5c-13.7-17.2 0-16.8 19.2-16.9 9.7-.1 106.3-.6 116.5-.6 24.1-.1 28.7.6 38.4 12.8 2.1 2.7 205.1 245.8 207.2 248.3 5.5 6.7 15.2 19.1 7.2"]},} let far={"arrowUp": { "prefix": "far", "iconName": "arrow-up", "icon": [ 448, 512, [], "f26e", "M103.3 344.3c-6.5-14.2-6.9-18.3 7.4-23.1 25.6-8 8 9.2 43.2 49.2h.3v-93.9c1.2-50.2 44-92.2 97.7-92.2 53.9 0 97.7 43.5 97.7 96.8 0 63.4-60.8 113.2-128.5 93.3-10.5-4.2-2.1-31.7"]},"arrowLeft": { "prefix": "far", "iconName": "arrow-left", "icon": [ 448, 512,[], "f368", "M423.9 255.8L411 413.1c-3.3 40.7-63.9 35.1-60.6-4.9l10-122.5-41.1 2.3c10.1 20.7 15.8 43.9 15.8 68.5 0 41.2-16.1 78.7-42.3 106.5l-39.3-39.3c57.9-63.7 13.1-167.2-74-167.2-25.9 0-49.5" ]}, "arrowRight": { "prefix": "far", "iconName": "arrow-right", "icon": [ 640, 512, [],"f369", "M482.2 372.1C476.5 365.2 250 75 242.3 65.5c-13.7-17.2 0-16.8 19.2-16.9 9.7-.1 106.3-.6 116.5-.6 24.1-.1 28.7.6 38.4 12.8 2.1 2.7 205.1 245.8 207.2 248.3 5.5 6.7 15.2 19.1 7.2"]},} let fas ={"carrot": {"prefix": "fas", "iconName": "carrot","icon": [ 448, 512, [],"f26e","M103.3 344.3c-6.5-14.2-6.9-18.3 7.4-23.1 25.6-8 8 9.2 43.2 49.2h.3v-93.9c1.2-50.2 44-92.2 97.7-92.2 53.9 0 97.7 43.5 97.7 96.8 0 63.4-60.8 113.2-128.5 93.3-10.5-4.2-2.1-31.7"]}, "cat": { "prefix": "fas", "iconName": "cat", "icon": [ 448, 512, [],"f368","M423.9 255.8L411 413.1c-3.3 40.7-63.9 35.1-60.6-4.9l10-122.5-41.1 2.3c10.1 20.7 15.8 43.9 15.8 68.5 0 41.2-16.1 78.7-42.3 106.5l-39.3-39.3c57.9-63.7 13.1-167.2-74-167.2-25.9 0-49.5"]}, "dog": { "prefix": "fas", "iconName": "dog", "icon": [ 640, 512, [],"f369","M482.2 372.1C476.5 365.2 250 75 242.3 65.5c-13.7-17.2 0-16.8 19.2-16.9 9.7-.1 106.3-.6 116.5-.6 24.1-.1 28.7.6 38.4 12.8 2.1 2.7 205.1 245.8 207.2 248.3 5.5 6.7 15.2 19.1 7.2" ]},} let op = [ {"brands": Object.keys(fab)}, {"regular": Object.keys(far).map(k => { return far[k].iconName; })}, {"solid": Object.keys(fas).map(k => { return fas[k].iconName; })} ] console.log(op)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.