我正在渲染本地JSON数据（“类别”），并且正在显示重复的数据。我试图使用.filter()与另外两种方法（.sort()和.map()），我不能删除重复。我的代码中有什么东西可以看到吗？
var testjson = {
"d": {
"results": [{
"Title": "Aardvark",
"Category": "Animals",
"Description": "My Test description",
"TopTrainingCourse": false,
"ID": 1,
"Modified": "2019-03-05T20:13:46Z",
"Created": "2019-03-05T20:13:36Z"
}, {
"Title": "Red Panda",
"Category": "Animals",
"Description": "Donec id dictum sem",
"TopTrainingCourse": true,
"ID": 10,
"Modified": "2019-03-06T21:08:25Z",
"Created": "2019-03-06T21:08:25Z"
}, {
"Title": "Tennis",
"Category": "Sports",
"Description": "Mauris sagittis ligula",
"TopTrainingCourse": true,
"ID": 11,
"Modified": "2019-03-06T21:08:35Z",
"Created": "2019-03-06T21:08:35Z"
}]
}
}
loadAllCourses() {
let jsonRes = testjson.d.results
.filter((elem, index, self) => {
return (index === self.indexOf(elem));
})
.sort(function(a,b) { // sorts alphabetically
return (a.Category > b.Category) ? 1 : ((b.Category > a.Category) ? -1 : 0)
})
.map(x => {
return {
"Category": x.Category,
"Title": x.Title
}
});
let curIndex = 0;
$.each(jsonRes, function(idx, val) {
$(".form-control").append("<option><div data-toggle=\"modal\" data-target=\"#modal-id\">" + val.Category + "</div></option>") // dropdown
在您的代码中，过滤器不能按预期工作。要使其按您的意愿工作，请将其更改为：
.filter((elem, index, self) => {
return (index === self.map(el => el.Category).indexOf(elem.Category));
})
最简单的解决方案是使用地图提取qazxsw poi prop。查看下面的代码。
另外还有另一种方法可以使用像这样的Category的ES6 Set从数组中删除重复项
uniq = [...new Set(array)]var testjson = {
"d": {
"results": [{
"Title": "Aardvark",
"Category": "Animals",
"Description": "My Test description",
"TopTrainingCourse": false,
"ID": 1,
"Modified": "2019-03-05T20:13:46Z",
"Created": "2019-03-05T20:13:36Z"
}, {
"Title": "Red Panda",
"Category": "Animals",
"Description": "Donec id dictum sem",
"TopTrainingCourse": true,
"ID": 10,
"Modified": "2019-03-06T21:08:25Z",
"Created": "2019-03-06T21:08:25Z"
}, {
"Title": "Tennis",
"Category": "Sports",
"Description": "Mauris sagittis ligula",
"TopTrainingCourse": true,
"ID": 11,
"Modified": "2019-03-06T21:08:35Z",
"Created": "2019-03-06T21:08:35Z"
}]
}
}
const res = testjson.d.results
.map((obj) => obj.Category)
.filter((elem, index, self) => index === self.indexOf(elem))
.sort((a, b) => a - b)
console.log(res)（虽然简单）循环超过必要。
filter搜索映射的值以查找特定值。 （部分迭代次数等于列表中的项目数量）使用您的示例数据（3个元素），您最终会迭代相同的列表1 + 3 + 3 * 0.5 = 5.5次。 （使用indexOf的平均0.5次迭代）。让我为你提供清单的规模。假设您有10个项目的列表。现在你正在迭代列表1 + 10 + 10 * 0.5 = 16次。这可以通过事先进行类别映射并且每次引用相同列表来减少。
indexOf使用上面的代码将迭代次数减少到1 + 1 + 10 * 0.5 = 7次（对于10的列表）。
但是，通过使用查找对象可以更快地完成此操作。
var testjson = { "d": { "results": [{ "Title": "Aardvark", "Category": "Animals", "Description": "My Test description", "TopTrainingCourse": false, "ID": 1, "Modified": "2019-03-05T20:13:46Z", "Created": "2019-03-05T20:13:36Z" }, { "Title": "Red Panda", "Category": "Animals", "Description": "Donec id dictum sem", "TopTrainingCourse": true, "ID": 10, "Modified": "2019-03-06T21:08:25Z", "Created": "2019-03-06T21:08:25Z" }, { "Title": "Tennis", "Category": "Sports", "Description": "Mauris sagittis ligula", "TopTrainingCourse": true, "ID": 11, "Modified": "2019-03-06T21:08:35Z", "Created": "2019-03-06T21:08:35Z" }] } }
console.log(
testjson.d.results
.filter(
function (elem, index) { return index === this.indexOf(elem.Category) },
testjson.d.results.map(el => el.Category) // <= executes only once
)
);上面只通过数组本身循环一次，然后使用查找对象来存储和检查数组中其他元素的存在。这会将迭代次数减少到1次。请记住，上面的方法确实使用了普通的JavaScript对象。意味着类别不能包含保留属性，例如var testjson = { "d": { "results": [{ "Title": "Aardvark", "Category": "Animals", "Description": "My Test description", "TopTrainingCourse": false, "ID": 1, "Modified": "2019-03-05T20:13:46Z", "Created": "2019-03-05T20:13:36Z" }, { "Title": "Red Panda", "Category": "Animals", "Description": "Donec id dictum sem", "TopTrainingCourse": true, "ID": 10, "Modified": "2019-03-06T21:08:25Z", "Created": "2019-03-06T21:08:25Z" }, { "Title": "Tennis", "Category": "Sports", "Description": "Mauris sagittis ligula", "TopTrainingCourse": true, "ID": 11, "Modified": "2019-03-06T21:08:35Z", "Created": "2019-03-06T21:08:35Z" }] } }
console.log(
testjson.d.results
.filter(function (elem) {
return !this[elem.Category] && (this[elem.Category] = true);
}, {})
);。如果这是一个问题，您可以在检查期间预先或后缀您的类别。这是一个例子：
constructor请注意，!this['_!!_' + elem.Category] && (this['_!!_' + elem.Category] = true)
关键字的上述用法是有意的。 function，因此不能与Arrow function don't have their own this binding方法中的第二个参数结合使用。