Terangkan faedah sintaks lanjutan dan bagaimana ia berbeza daripada sintaks yang selebihnya dalam ES6?-tutorial js-php.cn

Terangkan faedah sintaks lanjutan dan bagaimana ia berbeza daripada sintaks yang selebihnya dalam ES6?

WBOY

Lepaskan： 2023-09-19 21:21:03

ke hadapan

763 orang telah melayarinya

解释一下扩展语法的好处以及它与 ES6 中的剩余语法有何不同？

Dalam versi ES6 JavaScript, sintaks lanjutan diperkenalkan sebagai ciri yang sangat berkuasa. Kita boleh menggunakan sintaks sambungan untuk memanjangkan tatasusunan atau objek ke dalam pembolehubah jenis data yang sama.

Sebagai contoh, sebelum sintaks penyebaran diperkenalkan dalam ES6, pembangun menggunakan gelung untuk menyalin semua elemen satu tatasusunan ke tatasusunan lain. Bolehkah anda menyalin semua elemen satu tatasusunan kepada yang lain dengan menulis kod linear menggunakan sintaks lanjutan dan bukannya menulis 5 hingga 7 baris kod menggunakan gelung for? Ya, anda mendengarnya betul!

Di sini kita akan mempelajari kes penggunaan sintaks sambungan yang berbeza dalam tutorial ini. Selain itu, kita akan melihat bagaimana ia berbeza daripada sintaks yang lain pada penghujung tutorial.

Tatabahasa Penyebaran

Sintaks pengembangan dalam JavaScript ialah sintaks yang membenarkan objek lelaran (seperti tatasusunan atau objek) dikembangkan menjadi pembolehubah atau elemen tunggal.

Pengguna boleh menggunakan sintaks sambungan untuk memanjangkan objek boleh lelar mengikut sintaks di bawah.

let array = [10, 40, 7, 345];
let array2 = [...array];

Salin selepas log masuk

Dalam sintaks di atas, kami menyalin semua elemen "tatasusunan" yang boleh diubah kepada pembolehubah tatasusunan2.

Faedah sintaks lanjutan

Terdapat beberapa faedah atau ciri menggunakan sintaks lanjutan -

Salin tatasusunan atau objek,
Gabungkan tatasusunan atau objek, dan
Lepasi berbilang elemen sebagai parameter fungsi.

Mari kita lihat contoh berbeza bagi setiap ciri Sintaks Lanjutan di atas.

Contoh

Salin tatasusunan menggunakan sintaks sebaran

Dalam contoh ini, kami menggunakan synatx lanjutan untuk menyalin elemen satu tatasusunan ke tatasusunan lain. Anda boleh melihat bahawa kod linear tunggal menyalin semua elemen tatasusunan ke dalam tatasusunan2.

<html>
   <body>
      <h2>Using the spread syntax to copy one array to another</h2>
      <div id="output"></div>
      <script>
         let output = document.getElementById("output");
         let array1 = [10, 40, 7, 345];
         output.innerHTML += "Original array: " + array1 + "</br>";
         
         // copy array using spread syntax
         let array2 = [...array1];
         output.innerHTML += "Copied array: " + array2 + "</br>";
      </script>
   </body>
</html>

Salin selepas log masuk

Contoh

Gunakan sintaks penyebaran untuk menggabungkan tatasusunan atau objek

Kami menggabungkan tatasusunan1 dan tatasusunan2 menggunakan sintaks lanjutan di dalam tatasusunan1 dan bukannya menggunakan kaedah concat() JavaScript. Selain itu, apabila menggabungkan dua tatasusunan, kami menukar susunan elemen tatasusunan.

<html>
<body>
   <h2>Using the spread syntax to <i> copy one array to another</i></h2>
   <div id="output"></div>
   <script>
      let output = document.getElementById("output");
      let array = [10, 40, 7, 345];
      output.innerHTML += "Array 1: " + array + "</br>";
      let array2 = ["Hi, Hello"];
      output.innerHTML += "Array 2: " + array2 + "</br>";
      array = [...array2, ...array];
      output.innerHTML += "After merging the array2 and array1: " + array + "<br/>";
   </script>
</body>
</html>

Salin selepas log masuk

Contoh

Gunakan sintaks lanjutan untuk menghantar berbilang elemen sebagai hujah fungsi

Dalam contoh ini, kami telah mencipta fungsi add() yang mengambil tiga nilai sebagai parameter dan mengembalikan jumlah ketiga-tiga parameter. Kami mencipta tatasusunan yang mengandungi tiga nilai. Kami telah menggunakan sintaks lanjutan untuk menghantar semua elemen tatasusunan sebagai parameter kepada fungsi add().

<html>
   <body>
      <h2>Using the spread syntax</h2>
      <p> Passing multiple array elements as a function argument </p>
      <div id="output"></div>
      <script>
         let output = document.getElementById("output");
      
         // function to get a sum of 3 values
         function add(param1, param2, param3) {
            return param1 + param2 + param3;
         }
         let values = [50, 54, 72];
      
         // passed array values using the spread syntax
         let result = add(...values);
         output.innerHTML += "The sum of 3 array values: " + result + "</br>";
      </script>
   </body>
</html>

Salin selepas log masuk

Contoh

Salin objek menggunakan synatx lanjutan

Dalam contoh di bawah, kami telah mencipta objek sample_obj yang mengandungi pasangan nilai kunci yang berbeza. Menggunakan sintaks lanjutan, kami telah menyalin semua pasangan nilai kunci sample_obj ke copy_object.

Memandangkan objek boleh diubah, kami boleh memanjangkan objek menggunakan sintaks lanjut.

<html>
   <body>
      <h2>Using the spread syntax to <i>create a copy of the object.</i></h2>
      <div id="output"></div>
      <script>
         let output = document.getElementById("output");
         let sample_obj = {
            name: "Shubham",
            age: 22,
            hobby: "writing",
         };
         let copy_object = {
            ...sample_obj,
         };
         output.innerHTML += "The values of the copy_object are " + copy_object.name + " , " +copy_object.age + " , " + copy_object.hobby +  "</br>";
      </script>
   </body>
</html>

Salin selepas log masuk

Baki sintaks

Dalam JavaScript, sintaks untuk sintaks rehat adalah sama dengan sintaks lanjutan. Kita boleh menggunakan sintaks rehat untuk mengumpul elemen dalam tatasusunan tunggal atau boleh lelar, tidak seperti pengembangan menggunakan sintaks penyebaran.

Biasanya, pembangun menggunakan sintaks pengembangan untuk parameter fungsi apabila jumlah bilangan parameter fungsi tidak ditentukan atau parameter pilihan diluluskan.

Tatabahasa

Pengguna boleh menggunakan sintaks yang lain mengikut sintaks berikut.

function func(...params){
   
   //params are the array of all arguments passed while calling the function
   
   //users can access the params like params[0], params[1], params[2], ...
}

Salin selepas log masuk

Dalam sintaks di atas, kami mengumpulkan semua parameter fungsi dalam tatasusunan params.

Contoh

Dalam contoh ini, kami telah mencipta tatasusunan rentetan dan lulus semua elemen tatasusunan sebagai argumen kepada fungsi mergeString() menggunakan sintaks lanjutan.

Menggunakan sintaks yang lain, kami mengumpulkan semua parameter fungsi mergeString() dalam tatasusunan params. Kami mengulangi tatasusunan params dan menggabungkan setiap elemen tatasusunan params ke dalam pembolehubah FinalString.

<html>
   <body>
      <h2>Using the rest syntax to collect function parameters</h2>
      <div id="output"></div>
      <script>
         let output = document.getElementById("output");
         
         // used the rest syntax to collect params
         function mergeString(...params) {
            let finalString = "";
            
            // Iterating through the array of params
            for (let param of params) {
               finalString += param;
               output.innerHTML += "Parameter: " + param + "<br>";
            }
            output.innerHTML += "The string after merging: " + finalString;
         }
         let strings = ["Welcome", "to", "the", "TutorialsPoint!"];
         
         // used the spread syntax to pass all elements of // the strings array as an argument.
         mergeString(...strings);
      </script>
   </body>
</html>

Salin selepas log masuk

Melalui contoh di atas, pengguna dapat memahami dengan jelas perbezaan antara sintaks rehat dan sintaks penyebaran.

Perbezaan antara sintaks Spread dan Rest dalam ES6:

Sintaks lanjutan adalah berbeza daripada sintaks yang lain, yang digunakan untuk mengumpulkan berbilang elemen atau atribut ke dalam tatasusunan. Sintaks sambungan membenarkan sambungan elemen, manakala sintaks selebihnya membenarkan koleksi elemen.

Contoh penggunaan sintaks lanjutan termasuk menyalin satu tatasusunan kepada yang lain, menggabungkan dua tatasusunan, menghantar berbilang elemen tatasusunan sebagai argumen fungsi dan menyalin sifat satu objek kepada objek yang lain.

Contoh penggunaan sintaks selebihnya termasuk mengumpul elemen, parameter fungsi, dsb.

Jadual berikut menyerlahkan perbezaan antara sintaks penyebaran dan sintaks rehat dalam ES6 -

Sintaks lanjutan	Baki sintaks
Kami boleh mengembangkan objek boleh lelar menggunakan sintaks pengembangan.	Kami boleh menggunakan sintaks rehat untuk mengumpul elemen dan menjadikan semua elemen yang dikumpul boleh diubah.
Kita boleh menggunakannya untuk melanjutkan data dalam tatasusunan atau format objek.	Kami boleh mengumpul semua elemen dalam format yang diperlukan.
Kita boleh menggunakannya untuk menghantar parameter di dalam fungsi.	Kita boleh menggunakannya untuk mengumpul parameter fungsi atau menentukan parameter pilihan.

KESIMPULAN

Sintaks pengembangan dalam JavaScript ialah sintaks yang membenarkan objek lelaran (seperti tatasusunan atau objek) dikembangkan menjadi pembolehubah atau elemen tunggal.

Sintaks Kembangkan berbeza daripada yang lain. Sintaks lanjutan berguna untuk melaksanakan tugas seperti menyalin tatasusunan, menggabungkan tatasusunan atau objek dan menghantar berbilang elemen sebagai hujah fungsi.

Sintaks selebihnya berguna untuk melaksanakan tugas seperti mengumpul berbilang elemen atau atribut ke dalam tatasusunan.

Atas ialah kandungan terperinci Terangkan faedah sintaks lanjutan dan bagaimana ia berbeza daripada sintaks yang selebihnya dalam ES6?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!