JavaScript mempunyai banyak cara untuk melakukan apa sahaja. Saya telah menulis mengenai 10 Cara Menulis paip / mengarang dalam JavaScript, dan sekarang kita melakukan tatasusunan.
1. Operator Spread (Salinan cetek)
Sejak ES6 turun, ini adalah kaedah yang paling popular. Ini adalah sintaks ringkas dan anda akan merasa sangat berguna semasa menggunakan perpustakaan seperti React dan Redux.
numbers = [1, 2, 3]; numbersCopy = [...numbers]; Catatan: Ini tidak menyalin susunan pelbagai dimensi dengan selamat. Nilai array / objek disalin dengan rujukan dan bukannya dengan nilai .
Ini baik-baik saja
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 () Gelung (Salinan cetek)
Saya membayangkan pendekatan ini adalah yang paling tidak popular, memandangkan bagaimana pengaturcaraan fungsional yang bergaya menjadi terkenal di kalangan kita.
Murni atau tidak murni, deklaratif atau mustahak, ia berjaya menyelesaikannya!
numbers = [1, 2, 3]; numbersCopy = []; for (i = 0; i < numbers.length; i++) { numbersCopy[i] = numbers[i]; } Catatan: Ini tidak menyalin susunan pelbagai dimensi dengan selamat. Oleh kerana anda menggunakan =operator, ia akan menetapkan objek / tatasusunan sebagai rujukan dan bukan berdasarkan nilai .
Ini baik-baik saja
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 Lama semasa () Gelung (Salinan cetek)
Sama seperti for—sempurna, mustahak, bla, bla, bla… ia berfungsi! ?
numbers = [1, 2, 3]; numbersCopy = []; i = -1; while (++i < numbers.length) { numbersCopy[i] = numbers[i]; } Catatan: Ini juga menetapkan objek / tatasusunan dengan merujuk dan bukan berdasarkan nilai .
Ini baik-baik saja
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 cetek)
Kembali ke wilayah moden, kita akan menemui mapfungsinya. Berakar dalam matematik, mapadalah konsep mengubah set menjadi jenis set yang lain, sambil mengekalkan struktur.
Dalam bahasa Inggeris, itu bermaksud Array.mapmengembalikan susunan dengan panjang yang sama setiap masa.
Untuk menggandakan senarai nombor, gunakan mapdengan doublefungsi.
numbers = [1, 2, 3]; double = (x) => x * 2; numbers.map(double); Bagaimana dengan pengklonan ??
Benar, artikel ini mengenai susunan pengklonan. Untuk menggandakan array, kembalikan elemen dalam mappanggilan anda .
numbers = [1, 2, 3]; numbersCopy = numbers.map((x) => x); Sekiranya anda ingin menjadi lebih matematik, (x) => xdipanggil identiti . Ia mengembalikan parameter apa pun yang diberikan.
map(identity) mengklon senarai.
identity = (x) => x; numbers.map(identity); // [1, 2, 3] Catatan: Ini juga menetapkan objek / tatasusunan dengan merujuk dan bukan berdasarkan nilai .
5. Array.filter (Salinan cetek)
Fungsi ini mengembalikan susunan, seperti map, tetapi tidak dijamin panjangnya sama.
Bagaimana jika anda menapis nombor genap?
[1, 2, 3].filter((x) => x % 2 === 0); // [2] Panjang array input adalah 3, tetapi panjang yang dihasilkan adalah 1.
Sekiranya filterpredikat anda selalu kembali true, anda akan mendapat pendua!
numbers = [1, 2, 3]; numbersCopy = numbers.filter(() => true); Setiap elemen lulus ujian, jadi ia akan dikembalikan.
Catatan: Ini juga menetapkan objek / tatasusunan dengan merujuk dan bukan berdasarkan nilai .
6. Array. reduce (Salinan cetek)
Saya hampir merasa tidak senang menggunakan reduceklon array, kerana jauh lebih hebat daripada itu. Tetapi di sini kita pergi ...
numbers = [1, 2, 3]; numbersCopy = numbers.reduce((newArray, element) => { newArray.push(element); return newArray; }, []); reduce mengubah nilai awal ketika melompati senarai.
Di sini nilai awal adalah susunan kosong, dan kami mengisinya dengan setiap elemen semasa kami pergi. Susunan itu mesti dikembalikan dari fungsi yang akan digunakan dalam lelaran seterusnya.
Catatan: Ini juga menetapkan objek / tatasusunan dengan merujuk dan bukan berdasarkan nilai .
7. Array.slice (Salinan cetek)
slicemengembalikan salinan array yang cetek berdasarkan indeks permulaan / akhir yang anda berikan.
Sekiranya kita mahukan 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.