Како клонирати низ у ЈаваСцрипт-у
ЈаваСцрипт има много начина да било шта уради. Написао сам 10 начина писања пипе / цомпосе у ЈаваСцрипт-у, а сада радимо низове.
1. Спреад Оператор (плитка копија)
Откад је пао ЕС6, ово је најпопуларнија метода. То је кратка синтакса и биће вам невероватно корисна када користите библиотеке попут Реацт и Редук.
numbers = [1, 2, 3]; numbersCopy = [...numbers]; Напомена: Ово не копира сигурно вишедимензионалне низове. Вредности низа / објекта копирају се референцом, уместо вредношћу .
Ово је добро
numbersCopy.push(4); console.log(numbers, numbersCopy); // [1, 2, 3] and [1, 2, 3, 4] // numbers is left alone Ово није у реду
nestedNumbers = [[1], [2]]; numbersCopy = [...nestedNumbers]; numbersCopy[0].push(300); console.log(nestedNumbers, numbersCopy); // [[1, 300], [2]] // [[1, 300], [2]] // They've both been changed because they share references 2. Добро старо за () Лооп (плитка копија)
Мислим да је овај приступ најмање популаран с обзиром на то како је модерно функционално програмирање постало у нашим круговима.
Чист или нечист, декларативни или императив, посао завршава!
numbers = [1, 2, 3]; numbersCopy = []; for (i = 0; i < numbers.length; i++) { numbersCopy[i] = numbers[i]; } Напомена: Ово не копира сигурно вишедимензионалне низове. Будући да користите =оператер, он ће доделити објекте / низове референцом уместо вредношћу .
Ово је добро
numbersCopy.push(4); console.log(numbers, numbersCopy); // [1, 2, 3] and [1, 2, 3, 4] // numbers is left alone Ово није у реду
nestedNumbers = [[1], [2]]; numbersCopy = []; for (i = 0; i < nestedNumbers.length; i++) { numbersCopy[i] = nestedNumbers[i]; } numbersCopy[0].push(300); console.log(nestedNumbers, numbersCopy); // [[1, 300], [2]] // [[1, 300], [2]] // They've both been changed because they share references 3. Добро старо док () Петља (плитка копија)
Исто као — forнечисто, императивно, бла, бла, бла ... то успева! ?
numbers = [1, 2, 3]; numbersCopy = []; i = -1; while (++i < numbers.length) { numbersCopy[i] = numbers[i]; } Напомена: Ово такође додељује објекте / низове референцом уместо вредношћу .
Ово је добро
numbersCopy.push(4); console.log(numbers, numbersCopy); // [1, 2, 3] and [1, 2, 3, 4] // numbers is left alone Ово није у реду
nestedNumbers = [[1], [2]]; numbersCopy = []; i = -1; while (++i < nestedNumbers.length) { numbersCopy[i] = nestedNumbers[i]; } numbersCopy[0].push(300); console.log(nestedNumbers, numbersCopy); // [[1, 300], [2]] // [[1, 300], [2]] // They've both been changed because they share references 4. Арраи.мап (плитка копија)
Поново на модерној територији, наћи ћемо mapфункцију. Укорењен у математици, mapконцепт је претварања скупа у другу врсту скупа, уз очување структуре.
На енглеском то значи да Array.mapвраћа низ исте дужине сваки пут.
Да бисте удвостручили листу бројева, користите mapса doubleфункцијом.
numbers = [1, 2, 3]; double = (x) => x * 2; numbers.map(double); Шта је са клонирањем ??
Тачно, овај чланак говори о клонирању низова. Да бисте дуплирали низ, само вратите елемент у mapпозиву.
numbers = [1, 2, 3]; numbersCopy = numbers.map((x) => x); Ако желите бити мало математичкији, то (x) => xсе назива идентитет . Враћа било који параметар који је дат.
map(identity) клонира листу.
identity = (x) => x; numbers.map(identity); // [1, 2, 3] Напомена: Ово такође додељује објекте / низове референцом уместо вредношћу .
5. Арраи.филтер (плитка копија)
Ова функција враћа низ, баш као и он map, али није загарантовано да ће бити исте дужине.
Шта ако филтрирате парне бројеве?
[1, 2, 3].filter((x) => x % 2 === 0); // [2] Дужина улазног низа је била 3, али резултујућа дужина је 1.
Ако се ваш filterпредикат увек врати true, добићете дупликат!
numbers = [1, 2, 3]; numbersCopy = numbers.filter(() => true); Сваки елемент пролази тест, па се враћа.
Напомена: Ово такође додељује објекте / низове референцом уместо вредношћу .
6. Арраи.редуце (плитка копија)
Скоро да се осећам лоше reduceкада клонирам низ, јер је много моћнији од тога. Али ево нас ...
numbers = [1, 2, 3]; numbersCopy = numbers.reduce((newArray, element) => { newArray.push(element); return newArray; }, []); reduce трансформише почетну вредност док се петља кроз листу.
Овде је почетна вредност празан низ и испуњавамо га сваким елементом током кретања. Тај низ мора бити враћен из функције да би се користио у следећој итерацији.
Напомена: Ово такође додељује објекте / низове референцом уместо вредношћу .
7. Арраи.слице (плитка копија)
sliceвраћа плитку копију низа на основу наведеног индекса почетка / завршетка који наведете.
Ако желимо прва 3 елемента:
[1, 2, 3, 4, 5].slice(0, 3); // [1, 2, 3] // Starts at index 0, stops at index 3 If we want all the elements, don’t give any parameters
numbers = [1, 2, 3, 4, 5]; numbersCopy = numbers.slice(); // [1, 2, 3, 4, 5] Note: This is a shallow copy, so it also assigns objects/arrays by reference instead of by value.
8. JSON.parse and JSON.stringify (Deep copy)
JSON.stringify turns an object into a string.
JSON.parse turns a string into an object.
Combining them can turn an object into a string, and then reverse the process to create a brand new data structure.
Note: This onesafely copies deeply nested objects/arrays!
nestedNumbers = [[1], [2]]; numbersCopy = JSON.parse(JSON.stringify(nestedNumbers)); numbersCopy[0].push(300); console.log(nestedNumbers, numbersCopy); // [[1], [2]] // [[1, 300], [2]] // These two arrays are completely separate! 9. Array.concat (Shallow copy)
concat combines arrays with values or other arrays.
[1, 2, 3].concat(4); // [1, 2, 3, 4] [1, 2, 3].concat([4, 5]); // [1, 2, 3, 4, 5] If you give nothing or an empty array, a shallow copy’s returned.
[1, 2, 3].concat(); // [1, 2, 3] [1, 2, 3].concat([]); // [1, 2, 3] Note: This also assigns objects/arrays by reference instead of by value.
10. Array.from (Shallow copy)
Ово може претворити било који објект који се може итирати у низ. Давање низа даје плитку копију.
numbers = [1, 2, 3]; numbersCopy = Array.from(numbers); // [1, 2, 3] Напомена: Ово такође додељује објекте / низове референцом уместо вредношћу .
Закључак
Па, ово је било забавно?
Покушао сам да клонирам само један корак. Пронаћи ћете много више начина ако користите више метода и техника.
