处理这些数组的更好方法
better way to handle these arrays
我有一个包含 3 组复选框的菜单,用于过滤页面上的项目。它们是 store
、city
和 level
。选中任何组中的任何框,将值添加到对象中的相应数组,如下所示:
items = {
store: [],
city: [],
level: []
}
默认设置是所有项目都可见并且不选中任何复选框。选中框时,仅对应于
的项目
每次选中或取消选中一个框时,都会过滤项目。首先,项目由 store
和 city
过滤,然后该项目子集进一步由 level
过滤。如果未选中 level
个框,则显示所有级别,但如果选中任何级别,则仅显示已选中 level
中的 store/city
个。
所以我的对象可以像这样
itms = {
store: [
'north',
'evans',
'dodge'
],
city: [
'boston',
'miami',
],
level: [
'gold',
'silver'
]
}
最后,我需要一个如下所示的字符串:
.north.gold,.north.silver,.evans.gold,.evans.silver,.dodge.gold,.dodge.silver,.boston.gold,.boston.silver,.miami.gold,.miami.silver,
- 顺序无关紧要
如果我的对象是这样的:
items = {
store: [
'north',
'evans',
'dodge'
],
cite: [ 'miami' ],
level: []
}
我需要一个如下所示的字符串:
.north,.evans,.dodge,.miami
希望您明白要点...
为了从对象中导出格式正确的字符串,我正在做一些,我很确定这是非常低效的,迭代:
for (let [key, value] of Object.entries(items)) {
value.forEach(item => {
if(key !== 'level') {
finalSelectors.push(`.${item}`);
if (key === 'city') {
finalSelectors.push(`.${item}_child`);
}
}
});
}
let selectorsArr = finalSelectors;
const reFinalSelectors = [];
const selectedLevels = items.level;
if(selectedLevels.length) {
if(items.city.length || items.location.length) {
finalSelectors.forEach(selector => {
selectedLevels.forEach(level => {
reFinalSelectors.push(`.${level}${selector}`);
});
});
} else {
selectedLevels.forEach(level => {
reFinalSelectors.push(`.${level}`);
});
}
selectorsArr = reFinalSelectors;
}
我什至不知道从哪里开始更有效地执行此操作,因为我才刚刚开始学习如何使用数组函数并且不太了解更高级的函数,例如 Array.reduce()
.任何提示或帮助将不胜感激。
为了算法的目的,store 和 city 数组似乎被同等对待,因此您可以将它们放在一起。然后,您需要做的就是将每一个与每个 level
匹配 - 一个简单的 two-dimensional 迭代。
唯一复杂的是,如果 level
中没有任何内容,则仅推送前缀 (store/city) 而不是遍历 level
.
const items = {
store: [
'north',
'evans',
'dodge'
],
city: [
'boston',
'miami',
],
level: [
'gold',
'silver'
]
};
const { level } = items;
const resultArr = [];
for (const prefix of items.store.concat(items.city)) {
if (level.length) {
for (const suffix of level) {
resultArr.push(`.${prefix}.${suffix}`);
}
} else {
resultArr.push(`.${prefix}`);
}
}
console.log(resultArr.join(','));
我有一个包含 3 组复选框的菜单,用于过滤页面上的项目。它们是 store
、city
和 level
。选中任何组中的任何框,将值添加到对象中的相应数组,如下所示:
items = {
store: [],
city: [],
level: []
}
默认设置是所有项目都可见并且不选中任何复选框。选中框时,仅对应于
的项目每次选中或取消选中一个框时,都会过滤项目。首先,项目由 store
和 city
过滤,然后该项目子集进一步由 level
过滤。如果未选中 level
个框,则显示所有级别,但如果选中任何级别,则仅显示已选中 level
中的 store/city
个。
所以我的对象可以像这样
itms = {
store: [
'north',
'evans',
'dodge'
],
city: [
'boston',
'miami',
],
level: [
'gold',
'silver'
]
}
最后,我需要一个如下所示的字符串:
.north.gold,.north.silver,.evans.gold,.evans.silver,.dodge.gold,.dodge.silver,.boston.gold,.boston.silver,.miami.gold,.miami.silver,
- 顺序无关紧要
如果我的对象是这样的:
items = {
store: [
'north',
'evans',
'dodge'
],
cite: [ 'miami' ],
level: []
}
我需要一个如下所示的字符串:
.north,.evans,.dodge,.miami
希望您明白要点...
为了从对象中导出格式正确的字符串,我正在做一些,我很确定这是非常低效的,迭代:
for (let [key, value] of Object.entries(items)) {
value.forEach(item => {
if(key !== 'level') {
finalSelectors.push(`.${item}`);
if (key === 'city') {
finalSelectors.push(`.${item}_child`);
}
}
});
}
let selectorsArr = finalSelectors;
const reFinalSelectors = [];
const selectedLevels = items.level;
if(selectedLevels.length) {
if(items.city.length || items.location.length) {
finalSelectors.forEach(selector => {
selectedLevels.forEach(level => {
reFinalSelectors.push(`.${level}${selector}`);
});
});
} else {
selectedLevels.forEach(level => {
reFinalSelectors.push(`.${level}`);
});
}
selectorsArr = reFinalSelectors;
}
我什至不知道从哪里开始更有效地执行此操作,因为我才刚刚开始学习如何使用数组函数并且不太了解更高级的函数,例如 Array.reduce()
.任何提示或帮助将不胜感激。
为了算法的目的,store 和 city 数组似乎被同等对待,因此您可以将它们放在一起。然后,您需要做的就是将每一个与每个 level
匹配 - 一个简单的 two-dimensional 迭代。
唯一复杂的是,如果 level
中没有任何内容,则仅推送前缀 (store/city) 而不是遍历 level
.
const items = {
store: [
'north',
'evans',
'dodge'
],
city: [
'boston',
'miami',
],
level: [
'gold',
'silver'
]
};
const { level } = items;
const resultArr = [];
for (const prefix of items.store.concat(items.city)) {
if (level.length) {
for (const suffix of level) {
resultArr.push(`.${prefix}.${suffix}`);
}
} else {
resultArr.push(`.${prefix}`);
}
}
console.log(resultArr.join(','));