#javascript
#javascript
Вопрос:
Как приведенный ниже код изменяет только завершенное значение третьего элемента массива?
[{id: 0, completed: true},
{id: 1, completed: false},
{id: 2, completed: false}
].map((todo) => {
if (todo.id !== 2) {
return todo;
}
return {...todo, completed: !todo.completed};
})
Комментарии:
1. Потому что 1-й и 2-й элементы массива не имеют идентификатора 2.
2. спасибо за ответ, но мне нужно знать, как пошагово работает код
3. Да, я знаю. Результат if (todo.id !== 2) { return todo; } Является [ неопределенным, { id: 1, завершено: false}, { id: 2, завершено: false} ] Но как работает return {…todo, завершено: !todo.completed}
4.
...todoэто синтаксис распространения.{...todo, completed: !todo.completed}то же{id: 2, completed: false, completed: !todo.completed}самое, что и , которое становится{id: 2, completed: true}. См. Синтаксис распространения .
Ответ №1:
Если todo.id !== 2 функция возвращает (и останавливает ее выполнение), прежде чем вносить дальнейшие изменения, и только третий элемент имеет todo.id == 2
Ответ №2:
Я также новичок в Javascript и программировании для таких. Пожалуйста, найдите добавленные комментарии к вашему коду.
[{id: 0, completed: true},
{id: 1, completed: false},
{id: 2, completed: false}
]
.map((todo) => {
if (todo.id !== 2){ // Execute only when the id is not 2
return todo;
}
// Thus when the id is 2
// this return statement will work
// return the item with the opposite of "completed" property
// and ofcourse you want the item added back to todo, hence ...todo with the following
// expression.
return {...todo, completed: !todo.completed};
})
=============================================
To better understand the spread operator, consider the following example:
------------------------------------
let numberStore = [0, 1, 2];
let newNumber = 12;
numberStore = [...numberStore, newNumber];
numberStore = [...numberStore, newNumber];
numberStore = [...numberStore, newNumber];
Result:
console.log(numberStore) ==> [0, 1, 2, 12, 12, 12]