javascript - Vue、Vuex、JavaScript:includes() 无法按预期工作
问题描述
如果数组尚未包含具有相同 ID 的对象,我想将一些对象存储在数组中。无论如何,一切正常,直到我开始一次添加多个对象。
下面是使用 Vuex 的相关代码:
// filter function to check if element is already included
function checkForDuplicate(val) {
for( let sessionItem of state.sessionExercises ) {
return sessionItem._id.includes(val._id);
}
};
// related array from vuex state.js
sessionExercises: [],
// vuex mutation to store exercises to session exercises
storeSessionExercises: (state, payload) => {
// Pre filtering exercises and prevent duplicated content
if( checkForDuplicate(payload) === true ) {
console.log("Exercise ist bereits für session registriert!");
} else {
state.sessionExercises.push(payload);
}
},
// Related vuex action
storeSessionExercises: ({ commit }, payload) => {
commit("storeSessionExercises", payload)
},
正如我之前写的,只要我添加一个对象,一切正常,checkForDuplicate() 将找到重复的对象并拒绝推送到数组。
现在有一种情况,我想将一组对象推送到数组中,我通过数据库请求执行此操作,循环输出,提取对象并通过与单个对象相同的函数推送它们:
// get user related exercises from database + clear vuex storage + push db-data into vuex storage
addSessionWorkout: ({ commit, dispatch }, payload) => {
axios.post(payload.apiURL + "/exercises/workout", payload.data, { headers: { Authorization: "Bearer " + payload.token } })
.then((result) => {
// loop through output array and
for( let exercise of result.data.exercises ) {
// push (unshift) new exercise creation to userExercises array of vuex storage
dispatch("storeSessionExercises", exercise)
};
})
.catch((error) => {
console.error(error)
});
},
推送也可以正常工作,另一方面,“过滤功能”没有发挥作用。它将过滤第一个对象并拒绝将其推送到数组中,但是如果有第二个对象,即使已经包含相同的对象(相同的 ID),也会将其推送到数组中,我在这里看不到什么! ? 让我疯了!:D
我理解它就像循环将使每个对象通过 checkForDuplicate() 并查看是否有重复它应该输出 true,因此该对象不会被推入数组中。如果有人看到我目前不只是让我知道。
解决方案
错误是您的过滤功能。你想循环你的并且只有在它们中的任何一个匹配sessionExercises
时才返回。true
但是,此时您返回第一次检查的结果。您的循环将始终只运行一次。
选项1:仅在匹配时返回
function checkForDuplicate(val) {
for( let sessionItem of state.sessionExercises ) {
if (sessionItem._id.includes(val._id)) {
return true;
}
}
return false;
};
选项 2:使用 es6 过滤器
storeSessionExercises: (state, payload) => {
var exercises = state.sessionExercises.filter(ex => (ex._id.includes(payload._id)));
if(exercises.length) {
console.log("Exercise ist bereits für session registriert!");
} else {
state.sessionExercises.push(payload);
}
}
推荐阅读
- php - 如何优化此代码?(php + 查询)
- ios - 在动画期间无法正确定位子图层
- javascript - 是否有类似于 JavaScript .querySelectorAll() 的角度?
- python - 使用 PyDrive 列出共享的 Google Team Drive 文件夹中的所有文件
- html - 使用@media 查询来实现媒体兼容性
- apache - httpOnly 标志无法使用 Apache mod_headers
- autocomplete - 在目录符号链接的 tcsh 补全中添加尾部斜杠
- java - Java条件语句练习:从键盘输入数字并找到它们的总和并使用输入“EXIT”来打破循环
- pine-script - Plotshape 交叉和交叉工作错误
- python - 如何将输入流式传输到 python Popen 子进程并从中流式输出?