在Javascript中搜索數組時如何修復輸出“未定義”

Question

我試圖制作一個JavaScript代碼，在對象數組內搜索文本，然后刪除整個索引（包括text屬性的索引），但是代碼失敗並始終返回“ undefined”，因此我想尋求幫助。

const todos = [{
    text: 'wake up',
    completed: true
}, {
    text: 'get some food',
    completed: false
}, {
    text: 'play csgo',
    completed: false
}, {
    text: 'play minecraft',
    completed: true
}, {
    text: 'learn javascript',
    completed: false
}]



let todo = function (todo, todoText) {
    return todo.find(function (text, index) {
        if (todo.text.toLowerCase() === todoText.toLowerCase()) {
            todo.splice(index, 1);
        }
    })
}

let deleteTodo = todo(todos, 'wake up');
console.log(deleteTodo);

我期待這個輸出：

[{
    text: 'get some food',
    completed: false
}, {
    text: 'play csgo',
    completed: false
}, {
    text: 'play minecraft',
    completed: true
}, {
    text: 'learn javascript',
    completed: false
}]

但輸出實際上是'undefined'

Answer 1

.find()要求函數在條件匹配時返回真實值。 您的函數不會返回任何內容，它只會將元素拼接起來，因此find()永遠不會返回匹配的元素。

您只需要添加return true; 拼接元素后。

 let todo = function(todo, todoText) { todoText = todoText.toLowerCase(); return todo.find(function(text, index) { if (text.text.toLowerCase() === todoText) { todo.splice(index, 1); return true; } else { return false; } }) } const todos = [{ text: 'wake up', completed: true }, { text: 'get some food', completed: false }, { text: 'play csgo', completed: false }, { text: 'play minecraft', completed: true }, { text: 'learn javascript', completed: false }]; let deleteTodo = todo(todos, 'wake up'); console.log("Object that was removed:", deleteTodo); console.log("Array that remains:", todos); 

之前我寫過，您不應在搜索時修改數組。 但是Array.prototype.find的規范允許這樣做，因為它在調用測試函數之前從數組中提取了元素。 由於僅在找到匹配項時才修改數組，因此不會影響其余的迭代。

Answer 2

出於不變性考慮，我將過濾該數組以產生一個沒有匹配記錄的新數組，即

return todo.filter(({text}) => todoText.localeCompare(text, undefined, {
  sensitivity: 'base'
}))

如果字符串匹配（忽略大小寫），則String.prototype.localeCompare()將返回0值（ falsy ）；否則，將返回-1 / +1 （ truey ）。 這可以用於讓Array.prototype.filter()知道是否在最終數組中包括該條目。

 const todos = [{ text: 'wake up', completed: true }, { text: 'get some food', completed: false }, { text: 'play csgo', completed: false }, { text: 'play minecraft', completed: true }, { text: 'learn javascript', completed: false }] let todo = (todos, todoText) => todos.filter(({ text }) => text.localeCompare(todoText, undefined, { sensitivity: 'base' })) let deleteTodo = todo(todos, 'WAKE UP'); console.log(deleteTodo); 

Answer 3

我認為有一個更好的函數來解決它：過濾器

let res = todos.filter( elem => elem.text.toLowerCase() !== 'wake up');

如果您希望它成為一個函數，它將類似於：

let result = (todos, todoText) => {
  return todos.filter( elem => elem.text.toLowerCase() !== todoText.toLowerCase() );
}
console.log(result(todos, 'wake up'));

Answer 4

並不是因為向后兼容，我會使用.find ，但是如果您堅持：

 const todos = [{ text: 'wake up', completed: true }, { text: 'get some food', completed: false }, { text: 'play csgo', completed: false }, { text: 'play minecraft', completed: true }, { text: 'learn javascript', completed: false }]; let deleteTodo = function(todos, todoText){ var e = todos.find(function(text){ if(text.text.toLowerCase() === todoText.toLowerCase()){ return true; } }); return todos.splice(todos.indexOf(e), 1); } console.log(deleteTodo(todos, 'wake up')); // deleted console.log(todos); // altered array 

這是向后兼容的版本：

 var todos = [{ text: 'wake up', completed: true }, { text: 'get some food', completed: false }, { text: 'play csgo', completed: false }, { text: 'play minecraft', completed: true }, { text: 'learn javascript', completed: false }]; function TodoWorker(todos){ this.todos = todos; this.remove = function(text){ for(var i=0,a=this.todos,l=a.length; i<l; i++){ if(a[i].text === text){ return a.splice(i, 1); } } } } var tw = new TodoWorker(todos); console.log(tw.remove('play csgo')); // deleted element console.log(tw.todos); // altered array console.log(tw.remove('play minecraft')); // deleted element console.log(tw.todos); // altered array - what you should be doing 

您可以看到第二種方法既向后兼容，又允許您在.remove方法中省略todos參數。

Answer 5

我認為您的代碼可以做一些修改：

 const todos = [{ text: 'wake up', completed: true }, { text: 'get some food', completed: false }, { text: 'play csgo', completed: false }, { text: 'play minecraft', completed: true }, { text: 'learn javascript', completed: false }] function todo(todo, todoText) { let result = []; for (let index = 0; index < todo.length; index++) { if (todoText.toLowerCase() === todo[index].text.toString().toLocaleLowerCase()) { console.log("the deleted todo :",todo[index].text.toString().toLocaleLowerCase()) }else{ result.push(todo[index]) } } return result; } let deleteTodo = todo(todos, 'wake up'); console.log(deleteTodo); 

我對循環和函數進行了一些更改，使用另一個變量存儲結果。 希望能幫助到你