Како клонирати низ у ЈаваСцрипт-у

ЈаваСцрипт има много начина да било шта уради. Написао сам 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] 

Напомена: Ово такође додељује објекте / низове референцом уместо вредношћу .

Закључак

Па, ово је било забавно?

Покушао сам да клонирам само један корак. Пронаћи ћете много више начина ако користите више метода и техника.