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 mapfungsinya. Berakar dalam matematika, mapadalah konsep mengubah himpunan menjadi jenis himpunan lain, sambil mempertahankan struktur.
Dalam bahasa Inggris, itu berarti Array.mapmengembalikan larik dengan panjang yang sama setiap saat.
Untuk menggandakan daftar angka, gunakan mapdengan doublefungsi.
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 mappanggilan Anda .
numbers = [1, 2, 3]; numbersCopy = numbers.map((x) => x); Jika ingin sedikit lebih matematis, (x) => xdisebut 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 filterpredikat 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 reduceuntuk 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)
slicemengembalikan 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.