Как работает деструктуризация в этом примере?

Question

[StepsOnes]

Обучаюсь реату по учебнику, тут столкнулся с проблемой я не понимаю один момент:

function App() {
    const [notes, setNotes] = useState([1, 2, 3]);

    function changeHandler(index, event) {
        setNotes([...notes.slice(0, index), event.target.value, ...notes.slice(index + 1)]);
    }

    function getSum(arr) {
        let sum = 0;

        for (const elem of arr) {
            sum += +elem;
        }

        return sum;
    }

    const result = notes.map((note, index) => {
        return <input
            key={index}
            value={note}
            onChange={event => changeHandler(index, event)}
        />;
    });

    return <div>
        {result}
        {getSum(notes)}
    </div>;
}

Я вообще не понимаю как работает деструктуризация в этом примере, простая деструктуризация да, там понятно, но тут.
Кто поможет ?((

setNotes([...notes.slice(0, index), event.target.value, ...notes.slice(index + 1)]);

Answer 1

[Сергей Соколов]

Может, так понятнее. Примерно то же:

const arr = [0, 1, 2, 3, 4, 5];
const index = 3;
[ ...arr.slice(0, index), 'Habr', ...arr.slice(index + 1) ]
// [ 0, 1, 2, "Habr", 4, 5 ]

Делается новый массив, в котором сначала идут элементы исходного от 0 до index (не включая index);
затем вставляется некий новый элемент;
затем добиваются элементы исходного начиная со следующего после index'ного.

Фактически заменяется элемент под индексом index на некий новый. В отличие от метода splice(), которым можно было бы сделать тоже самое arr.splice(index, 1, 'Habr'), вариант в вопросе не изменяет исходный массив, а создаёт новый – что, в общем-то, «правильно».

Answer 2

[Rsa97]

И тут всё понятно.
Берётся часть массива notes до index исключительно, дописывается значение event.target.value, затем часть массива notes после index. Всё это заворачивается в массив.
На выходе новый массив, копия notes, в котором элемент по index заменён на event.target.value.

Answer 3

[Сергей delphinpro]

...someArray - раскладывает массив на элементы.
Таким образом можно объединять массивы

combineArray = [...firstArray, ...secondArray]