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 map
fungsinya. Berakar dalam matematik, map
adalah konsep mengubah set menjadi jenis set yang lain, sambil mengekalkan struktur.
Dalam bahasa Inggeris, itu bermaksud Array.map
mengembalikan susunan dengan panjang yang sama setiap masa.
Untuk menggandakan senarai nombor, gunakan map
dengan double
fungsi.
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 map
panggilan anda .
numbers = [1, 2, 3]; numbersCopy = numbers.map((x) => x);
Sekiranya anda ingin menjadi lebih matematik, (x) => x
dipanggil 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 filter
predikat 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 reduce
klon 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)
slice
mengembalikan 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.