ECMAScript 6 - 10 Ciri-ciri Baru Awesome

Tahukah anda bahawa JavaScript (bersama dengan JScript dan ActionScript) adalah pelaksanaan spesifikasi bahasa skrip sisi klien yang disebut ECMAScript? Untuk menjadikan definisi jahat ini lebih menarik, kita boleh mengatakan bahawa ECMAScript (atau secara rasmi ECMA-262) adalah standard yang mentakrifkan cara kita menggunakan JavaScript, dan apa yang dapat kita capai dengannya.

Bahasa edisi ke-6 terkini, ECMAScript 2015 (atau ES6) mungkin merupakan kemas kini yang paling penting sejak versi pertama pada tahun 1997. Matlamat utama pembebasan terkini adalah untuk menyediakan sokongan yang lebih baik untuk mewujudkan aplikasi dan perpustakaan yang lebih besar. Ini bermakna sintaks yang lebih matang, jalan pintas baru untuk membuat pengekodan lebih mudah, dan juga kaedah baru, kata kunci, jenis data, dan banyak tambahan lain.

Dokumentasi ES6 adalah luas, jika anda suka membaca banyak, anda boleh memuat turun semua spesifikasi dari laman web ECMA International. Dalam catatan ini, kita akan melihat 10 ciri yang dipilih, walaupun ES6 mempunyai banyak lagi tawaran. Sekiranya anda ingin bereksperimen dengannya, ES6 Rebab adalah tempat yang bagus untuk melakukannya, dan anda juga boleh mencari beberapa coretan kod sampel di sana.

Sokongan untuk ECMAScript 6

Pembekal penyemak imbas secara beransur-ansur menambah sokongan untuk ciri-ciri ECMAScript 6. Anda boleh mencari jadual keserasian sejuk di sini mengenai penyemak imbas dan sokongan penyusun untuk ciri-ciri baru.

Sekiranya anda berminat dengan sokongan ES6 di Node.js, periksa dokumen di sini.

Walaupun tidak semua ciri kini disokong, kita boleh menggunakan transpiler seperti Babel untuk mengalihkan kod ES6 kami kepada ES5. Terdapat plugin Grunt yang sejuk untuk Babel, banyak plugin ES6 hebat untuk Grunt, dan plugin Gulp-Babel hebat di luar sana, jadi bernasib baik kami mempunyai banyak pilihan.

Dengan cara ini kita boleh mula menggunakan sintaks dan keupayaan yang dipertingkatkan, sementara kita tidak perlu bimbang tentang isu-isu ketidaksadaran. Sekarang mari lihat ciri-ciri itu.

1. Baru biarlah Kata kunci

ES6 memperkenalkan yang baru biarlah kata kunci yang membolehkan kita mengisytiharkan pembolehubah tempatan dalam skop blok, seperti pernyataan, ungkapan, atau fungsi (n inner). Contohnya kita boleh mengisytiharkan a untuk gelung dengan cara berikut, kemudian gunakan semula nama pembolehubah yang sama (kerana skopnya terhad kepada untuk gelung) di dalam seterusnya jika pernyataan:

 untuk (biarkan i = 0; i < myArray.length; i++)  // Do something inside the block  if (x > 0 && x! = Y) // Kami menggunakan semula "i" biarkan i = x * y

Menggunakan biarlah Kata kunci membawa kepada kod yang lebih bersih dan lebih berguna. Perbezaan antara biarlah dan var dalam skop, contohnya pembolehubah setempat yang ditakrifkan oleh var kata kunci boleh digunakan dalam keseluruhan fungsi yang melampirkan, manakala pembolehubah yang ditentukan oleh biarlah hanya bekerja di blok sendiri (sub). Biarkan juga boleh digunakan secara global, dalam hal ini ia bertindak dengan cara yang sama seperti var. Sudah tentu, dalam ES6 kita masih boleh menggunakannya var jika kita mahu.

2. Baru const Kata kunci

Baru const kata kunci memungkinkan untuk mengisytiharkan pemalar, juga dikenali sebagai pemboleh ubah yang tidak dapat diubah, yang mana kita tidak boleh menetapkan semula kandungan baru kemudian.

 const MY_CONST = 12; console.log (MY_CONST); // 12 MY_CONST = 16; / / Kesilapan senyap, kerana kita tidak boleh menetapkan semula nilai baru kepada pemalar

Pembolehubah tidak berubah tidak selalunya tidak berubah dalam ECMAScript 6 walaupun, seolah-olah pemalar memegang objek, kita kemudiannya boleh mengubah nilai sifat dan kaedahnya. Begitu juga dengan unsur-unsur array.

 const MY_CONSTANT = myProperty: 6; console.log (MY_CONSTANT.myProperty); // 6 MY_CONSTANT.myProperty = 18; console.log (MY_CONSTANT.myProperty); // 18 const OTHER_CONSTANT = [12, 14, 16]; console.log (OTHER_CONSTANT [0]); // 12 OTHER_CONSTANT [0] = 22; console.log (OTHER_CONSTANT [0]); // 22

Kami masih tidak boleh secara langsung menetapkan nilai baru kepada objek MY_CONSTANT dalam coretan kod di atas, yang bermaksud kita tidak boleh mengubah nama sifat dan kaedah, yang juga tidak boleh menambah yang baru atau memadamkan yang sedia ada, jadi kita tidak boleh melakukan perkara berikut:

 MY_CONSTANT = newProperty: 18; console.log (MY_CONSTANT.newProperty); // ralat

3. Fungsi panah

ECMAScript 6 memfasilitasi cara kita menulis fungsi tanpa nama, kerana kita dapat mengabaikan sepenuhnya fungsi kata kunci. Kami hanya perlu menggunakan sintaks baru untuk fungsi anak panah, diberi nama selepas => tanda panah (anak panah fat), yang memberikan kita pintasan yang bagus.

 // 1. Satu parameter dalam ES6 biarkan jumlah = (a, b) => a + b; // dalam ES5 var sum = fungsi (a, b) return a + b; ; // 2. Tanpa parameter dalam ES6 biarkan randomNum = () => Math.random (); // dalam ES5 var randomNum = function () return Math.random (); ; // 3. Tanpa pengembalian dalam ES6 mari mesej = (nama) => waspada ("Hi" + name + "!"); // dalam ES5 var message = function (yourName) alert ("Hi" + yourName + "!"); ;

Terdapat perbezaan penting antara fungsi biasa dan anak panah, iaitu fungsi anak panah tidak menerima ini nilai secara automatik seperti fungsi yang ditakrifkan dengan fungsi kata kunci lakukan. Fungsi panah mengikat secara leksikal yang ini nilai kepada skop semasa. Ini bermakna kita dapat menggunakan semula dengan mudah ini kata kunci dalam fungsi dalaman. Dalam ES5 hanya mungkin dengan hack berikut:

 // ES5 Hack untuk menggunakan kata kunci "ini" dalam fungsi dalaman ... addAll: function addAll (keping) var self = this; _.each (keping, fungsi (sekeping) self.add (sekeping);); , ... // ES6 fungsi dalaman yang sama sekarang boleh menggunakan sendiri "ini" ... addAll: function addAll (keping) _.each (keping, sekeping => this.add (sekeping)); , ...

Kod di atas adalah dari Hacks Mozilla

4. Baru tersebar Pengendali

Baru tersebar pengendali ditandakan dengan 3 titik (...), dan kami boleh menggunakannya untuk menandatangani tempat pelbagai barangan yang dijangka. Salah satu kes yang paling biasa digunakan pengendali penyebaran ialah memasukkan unsur-unsur array ke dalam array lain:

 biarkan myArray = [1, 2, 3]; mari baruArray = [... myArray, 4, 5, 6]; console.log (newArray); // 1, 2, 3, 4, 5, 6 

Kita juga boleh mengambil leverage tersebar pengendali dalam panggilan fungsi di mana kita mahu lulus dalam hujah dari pelbagai:

 biarkan myArray = [1, 2, 3]; jumlah fungsi (a, b, c) kembali a + b + c;  console.log (jumlah (... myArray)); // 6

The tersebar pengendali agak fleksibel, kerana ia boleh digunakan beberapa kali dalam array yang sama atau fungsi panggilan.

5. Nilai Default untuk Parameter & Paras Rehat Baru

Berita baik, bahawa dalam ECMAScript 6 kita boleh menambah nilai lalai kepada parameter fungsi. Ini bermakna jika kita tidak lulus dalam hujah kemudian dalam panggilan fungsi, parameter piawai akan digunakan. Dalam ES5 nilai piawai parameter sentiasa ditetapkan undefined, jadi kemungkinan baru untuk menetapkannya kepada apa yang kita inginkan pastinya merupakan peningkatan hebat bahasa.

 jumlah fungsi (a = 2, b = 4) return a + b;  console.log (jumlah ()); // 6 console.log (jumlah (3, 6)); // 9

ES6 juga memperkenalkan jenis parameter baru, iaitu rehat parameter. Mereka melihat dan bekerja sama dengan penyebaran pengendali. Mereka berguna jika kita tidak tahu berapa banyak hujah akan diluluskan kemudian dalam panggilan fungsi. Kita boleh menggunakan sifat dan kaedah objek Array pada parameter rest:

 fungsi putInAlphabet (... args) let sorted = args.sort (); kembali disusun;  console.log (putInAlphabet ("e", "c", "m", "a", "s", "c", "r", "i", "p", "t"); // a, c, c, e, i, m, p, r, s, t

6. Baru untuk ... daripada Kenyataan

Dengan bantuan yang baru untuk ... daripada gelung kita boleh melaraskan lebih banyak susunan atau objek lain yang boleh diabaikan. Bersama dengan yang baru untuk ... daripada pernyataan, ECMAScript 6 memperkenalkan dua objek terbitan baru juga, Peta untuk peta kunci / nilai, dan Tetapkan untuk koleksi nilai unik yang juga boleh menjadi nilai primitif dan rujukan objek. Apabila kita menggunakannya untuk ... daripada pernyataan, kod di dalam blok dilaksanakan untuk setiap unsur objek yang boleh dialihkan.

 biarkan myArray = [1, 2, 3, 4, 5]; biarkan jumlah = 0; untuk (biarkan i of myArray) jumlah + = i;  console.log (jumlah); // 15 (= 1 + 2 + 3 + 4 + 5)

7. Literal Templat

ECMAScript 6 menyediakan kami dengan alternatif baru untuk penyambungan tali. Literal template membolehkan kami dengan mudah membuat templat di mana kami boleh membenamkan nilai yang berbeza ke mana-mana tempat yang kami mahukan. Untuk berbuat demikian, kita perlu menggunakannya $ ... sintaks mana-mana di mana kita mahu memasukkan data yang boleh kita lulus dari pembolehubah, susunan, atau objek dengan cara yang berikut:

 biarkan pelanggan = title: 'Ms', firstname: 'Jane', nama keluarga: 'Doe', umur: '34'; mari template = 'Dear $ customer.title $ customer.firstname $ customer.surname! Happy $ customer.age th birthday! '; console.log (template); // Dear Ms Jane Doe! Selamat ulang tahun ke-34!

8. Kelas

ES6 memperkenalkan kelas JavaScript yang dibina atas warisan berasaskan prototaip yang sedia ada. Sintaks baru menjadikannya lebih mudah untuk membuat objek, mengambil kepemilikan warisan, dan menggunakan semula kod. Ia juga akan mempermudah pemula yang datang dari bahasa pengaturcaraan lain untuk memahami cara kerja JavaScript.

Dalam kelas ES6 diisytiharkan dengan yang baru kelas kata kunci, dan perlu mempunyai pembina () kaedah yang dipanggil apabila objek baru ditiru dengan menggunakan myClass baru () sintaks. Ia juga mungkin untuk melanjutkan kelas baru dengan Kelas Kanak-kanak meluaskan Ibu Bapa sintaks yang boleh dipahami daripada bahasa berorientasikan objek lain seperti PHP. Ia juga penting untuk mengetahui bahawa, tidak seperti fungsi dan pengisytiharan berubah, pengisytiharan kelas TIDAK dikuatkan dalam ECMAScript 6.

 kelas Polygon constructor (height, width) // class constructor this.name = 'Polygon'; this.height = height; this.width = lebar;  sayName () // method class console.log ('Hi, I am a', this.name + '.');  biarkan myPolygon = Polygon baru (5, 6); console.log (myPolygon.sayName ()); // Hai, saya seorang Polygon.

Kod di atas dari ES6 Contoh-contoh Fiddle, .

9. Modul

Pernahkah anda tertanya-tanya bagaimana ia menjadi sejuk jika JavaScript adalah modular? Sudah tentu, terdapat penyelesaian seperti CommonJS (digunakan dalam Node.js) atau AMD (Takrif Modul Asynchronous) (digunakan dalam RequireJS) untuk melakukan itu sebelum ini, tetapi ES6 memperkenalkan modul sebagai ciri asal.

Kita perlu menentukan setiap modul dalam fail sendiri, kemudian gunakan eksport kata kunci untuk mengeksport pemboleh ubah dan fungsi kepada fail lain, dan import kata kunci untuk mengimportnya dari fail lain, mengikut sintaks yang berikut:

 / Fungsi functions.js kiub (a) return a * a * a;  fungsi cubeRoot (a) return Math.cbrt (a);  eksport kiub, cubeRoot // atau: eksport kubus sebagai cb, cubeRoot sebagai cr // app.js import cube, cubeRoot daripada 'fungsi'; console.log (kiub (4)); // 64 console.log (cubeRoot (125)); // 5

Penyelesaian ini adalah bijak, kerana kod yang tersimpan dalam modul tidak dapat dilihat dari luar, dan kita perlu mengeksport hanya bahagian yang kita mahu dapat diakses oleh fail lain. Kita boleh melakukan perkara yang lebih menakjubkan dengan Modul ES6, di sini anda boleh mencari penjelasan yang hebat dan terperinci mengenai mereka.

10. Banyak Kaedah Baru

ECMAScript 6 memperkenalkan banyak kaedah baru untuk Prototaip String, Objek Array, Prototaip Array, dan Objek Matematik yang sedia ada. Kaedah-kaedah baru dengan ketara dapat memperbaiki cara kita boleh memanipulasi entiti ini. Mozilla Dev mempunyai contoh kod hebat tentang penambahan baru, ia patut mengambil masa dan memeriksa dengan teliti.

Hanya untuk memperlihatkan betapa hebatnya mereka, inilah kegemaran saya: kaedah mencari prototaip Array, yang membolehkan kita menguji kriteria tertentu pada elemen array dengan melaksanakan fungsi panggil balik pada setiap elemen, kemudian mengembalikan elemen pertama yang pulangan benar.

 fungsi isPrime (elemen, indeks, array) var start = 2; semasa (mula <= Math.sqrt(element))  if (element % start++ < 1)  return false;   return element > 1;  console.log ([4, 6, 8, 12] .find (isPrime)); / / undefined, tidak dijumpai console.log ([4, 5, 8, 12] .find (isPrime)); // 5

Kod di atas dari: Mozilla Dev