JavaScript memiliki banyak cara untuk melakukan apapun. Saya telah menulis tentang 10 Cara Menulis pipa / menulis dalam JavaScript, dan sekarang kami sedang melakukan array.
1. Operator Penyebaran (Salinan dangkal)
Sejak ES6 turun, ini telah menjadi metode yang paling populer. Ini adalah sintaks singkat dan Anda akan merasa sangat berguna saat menggunakan pustaka seperti React dan Redux.
numbers = [1, 2, 3]; numbersCopy = [...numbers];
Catatan: Ini tidak menyalin larik multi-dimensi dengan aman. Nilai array / objek disalin oleh referensi, bukan dengan nilai .
Ini bagus
numbersCopy.push(4); console.log(numbers, numbersCopy); // [1, 2, 3] and [1, 2, 3, 4] // numbers is left alone
Ini tidak baik
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. Baik Lama untuk () Simpul (Salinan dangkal)
Saya membayangkan pendekatan ini paling tidak populer, mengingat betapa trendi pemrograman fungsional di kalangan kita.
Murni atau tidak murni, deklaratif atau imperatif, itu menyelesaikan pekerjaan!
numbers = [1, 2, 3]; numbersCopy = []; for (i = 0; i < numbers.length; i++) { numbersCopy[i] = numbers[i]; }
Catatan: Ini tidak menyalin larik multi-dimensi dengan aman. Karena Anda menggunakan =
operator, ini akan menetapkan objek / array berdasarkan referensi, bukan berdasarkan nilai .
Ini bagus
numbersCopy.push(4); console.log(numbers, numbersCopy); // [1, 2, 3] and [1, 2, 3, 4] // numbers is left alone
Ini tidak baik
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. Baik Tua sementara () Loop (Salinan dangkal)
Sama seperti for
—murni, imperatif, bla, bla, bla… berhasil! ?
numbers = [1, 2, 3]; numbersCopy = []; i = -1; while (++i < numbers.length) { numbersCopy[i] = numbers[i]; }
Catatan: Ini juga menetapkan objek / array berdasarkan referensi, bukan berdasarkan nilai .
Ini bagus
numbersCopy.push(4); console.log(numbers, numbersCopy); // [1, 2, 3] and [1, 2, 3, 4] // numbers is left alone
Ini tidak baik
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. Array.map (Salinan dangkal)
Kembali ke wilayah modern, kita akan menemukan map
fungsinya. Berakar dalam matematika, map
adalah konsep mengubah himpunan menjadi jenis himpunan lain, sambil mempertahankan struktur.
Dalam bahasa Inggris, itu berarti Array.map
mengembalikan larik dengan panjang yang sama setiap saat.
Untuk menggandakan daftar angka, gunakan map
dengan double
fungsi.
numbers = [1, 2, 3]; double = (x) => x * 2; numbers.map(double);
Bagaimana dengan kloning ??
Benar, artikel ini tentang mengkloning array. Untuk menduplikasi array, cukup kembalikan elemen dalam map
panggilan Anda .
numbers = [1, 2, 3]; numbersCopy = numbers.map((x) => x);
Jika ingin sedikit lebih matematis, (x) => x
disebut identitas . Ini mengembalikan parameter apa pun yang telah diberikan.
map(identity)
mengkloning daftar.
identity = (x) => x; numbers.map(identity); // [1, 2, 3]
Catatan: Ini juga menetapkan objek / array berdasarkan referensi, bukan berdasarkan nilai .
5. Array.filter (Salinan dangkal)
Fungsi ini mengembalikan larik, seperti halnya map
, tetapi tidak dijamin memiliki panjang yang sama.
Bagaimana jika Anda memfilter untuk bilangan genap?
[1, 2, 3].filter((x) => x % 2 === 0); // [2]
Panjang larik masukan adalah 3, tetapi panjang yang dihasilkan adalah 1.
Namun, jika filter
predikat Anda selalu kembali true
, Anda mendapatkan duplikat!
numbers = [1, 2, 3]; numbersCopy = numbers.filter(() => true);
Setiap elemen lolos pengujian, sehingga akan dikembalikan.
Catatan: Ini juga menetapkan objek / array berdasarkan referensi, bukan berdasarkan nilai .
6. Array.reduce (Salinan dangkal)
Saya hampir merasa tidak enak menggunakan reduce
untuk mengkloning sebuah array, karena itu jauh lebih kuat dari itu. Tapi ini dia ...
numbers = [1, 2, 3]; numbersCopy = numbers.reduce((newArray, element) => { newArray.push(element); return newArray; }, []);
reduce
mengubah nilai awal saat mengulang daftar.
Di sini nilai awalnya adalah larik kosong, dan kami mengisinya dengan setiap elemen saat kami melanjutkan. Array itu harus dikembalikan dari fungsi yang akan digunakan pada iterasi berikutnya.
Catatan: Ini juga menetapkan objek / array berdasarkan referensi, bukan berdasarkan nilai .
7. Array.slice (Salinan dangkal)
slice
mengembalikan salinan larik yang dangkal berdasarkan indeks awal / akhir yang Anda berikan.
Jika kita menginginkan 3 elemen pertama:
[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)
This can turn any iterable object into an array. Giving an array returns a shallow copy.
numbers = [1, 2, 3]; numbersCopy = Array.from(numbers); // [1, 2, 3]
Note: This also assigns objects/arrays by reference instead of by value.
Conclusion
Well, this was fun ?
I tried to clone using just 1 step. You’ll find many more ways if you employ multiple methods and techniques.