ECMAScript 6 - 10 Fitur Baru yang Luar Biasa

Tahukah Anda bahwa JavaScript (bersama dengan JScript dan ActionScript) adalah implementasi dari spesifikasi bahasa scripting sisi klien untuk tujuan umum yang disebut ECMAScript? Untuk membuat definisi jahat ini sedikit lebih menarik, kita dapat mengatakan bahwa ECMAScript (atau secara resmi ECMA-262) adalah standar yang menentukan bagaimana kita menggunakan JavaScript, dan apa yang bisa kita capai dengan itu.

Bahasa edisi terbaru ke-6, ECMAScript 2015 (atau ES6) mungkin merupakan pembaruan paling signifikan sejak versi pertama pada tahun 1997. Tujuan utama dari rilis terbaru ini adalah untuk memberikan dukungan yang lebih baik untuk membuat aplikasi dan perpustakaan yang lebih besar. Ini berarti sintaksis yang lebih matang, pintasan baru untuk mempermudah pengkodean, dan juga metode baru, kata kunci, tipe data, dan banyak tambahan lainnya.

Dokumentasi ES6 luas, jika Anda suka membaca banyak, Anda dapat mengunduh seluruh spesifikasi dari situs web ECMA International. Dalam posting ini kita akan melihat 10 fitur yang dipilih sendiri, meskipun ES6 memiliki lebih banyak untuk ditawarkan. Jika Anda ingin bereksperimen dengannya, ES6 Fiddle adalah tempat yang tepat untuk melakukannya, dan Anda juga dapat menemukan beberapa cuplikan kode sampel di sana.

Dukungan untuk ECMAScript 6

Vendor browser telah secara bertahap menambahkan dukungan untuk fitur-fitur ECMAScript 6. Anda dapat menemukan tabel kompatibilitas yang keren di sini tentang browser dan dukungan kompiler untuk fitur-fitur baru.

Jika Anda tertarik dengan dukungan ES6 di Node.js, lihat dokumen di sini.

Meskipun tidak semua fitur saat ini didukung, kami dapat menggunakan transpiler seperti Babel untuk mentranspilasikan kode ES6 kami ke ES5. Ada plugin Grunt keren untuk Babel, banyak plugin ES6 yang mengagumkan untuk Grunt, dan plugin Gulp-Babel yang luar biasa di luar sana, jadi untungnya kita punya banyak pilihan.

Dengan cara ini kita dapat mulai menggunakan sintaks dan kapabilitas yang ditingkatkan, sementara kita tidak perlu khawatir tentang masalah kompabilitas. Sekarang mari kita lihat fitur-fiturnya.

1. Baru membiarkan Kata kunci

ES6 memperkenalkan yang baru membiarkan kata kunci yang memungkinkan kita mendeklarasikan variabel lokal dalam lingkup blok, seperti pernyataan, ekspresi, atau fungsi (n bagian dalam). Misalnya kita dapat mendeklarasikan a untuk loop dengan cara berikut, lalu gunakan kembali nama variabel yang sama (karena cakupannya terbatas pada untuk loop) di dalam berikutnya jika pernyataan:

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

Menggunakan membiarkan kata kunci mengarah ke kode yang lebih bersih dan lebih bermanfaat. Perbedaan antara membiarkan dan var ada dalam ruang lingkup, misalnya variabel lokal yang ditentukan oleh var kata kunci dapat digunakan di seluruh fungsi melampirkan, sedangkan variabel ditentukan oleh membiarkan hanya bekerja di blok (sub) mereka sendiri. Membiarkan juga dapat digunakan secara global, dalam hal ini berperilaku dengan cara yang sama var. Tentu saja, di ES6 kita masih bisa menggunakan var jika kita mau.

2. Baru const Kata kunci

Yang baru const kata kunci memungkinkan untuk mendeklarasikan konstanta, juga dikenal sebagai variabel tidak berubah, yang nantinya tidak dapat kami tentukan kembali konten baru.

 const MY_CONST = 12; console.log (MY_CONST); // 12 MY_CONST = 16; // Kesalahan diam, karena kami tidak dapat menetapkan kembali nilai baru ke konstanta

Variabel tidak berubah tidak selalu sepenuhnya tidak berubah dalam ECMAScript 6 meskipun, seolah-olah konstanta memegang objek, kita nanti dapat mengubah nilai properti dan metode. Hal yang sama berlaku untuk elemen 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 dapat secara langsung menetapkan kembali nilai baru ke objek MY_CONSTANT dalam cuplikan kode di atas, yang berarti kami tidak dapat mengubah nama properti dan metode, dan juga tidak dapat menambahkan yang baru atau menghapus yang sudah ada, jadi kami tidak dapat melakukan hal berikut:

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

3. Fungsi panah

ECMAScript 6 memfasilitasi cara kami menulis fungsi anonim, karena kita dapat sepenuhnya menghilangkan fungsi kata kunci. Kita hanya perlu menggunakan sintaks baru untuk fungsi panah, dinamai setelah tanda panah => (panah gemuk), yang memberi kita jalan pintas yang bagus.

 // 1. Satu parameter di ES6 biarkan jumlah = (a, b) => a + b; // dalam ES5 var sum = function (a, b) return a + b; ; // 2. Tanpa parameter dalam ES6, biarkan randomNum = () => Math.random (); // dalam ES5 var randomNum = function () return Math.random (); ; // 3. Tanpa kembali dalam ES6 biarkan pesan = (nama) => waspada ("Hai" + nama + "!"); // dalam ES5 var message = function (yourName) alert ("Hai" + yourName + "!"); ;

Ada perbedaan penting antara fungsi biasa dan panah, yaitu fungsi panah tidak menerima a ini nilai secara otomatis menyukai fungsi yang didefinisikan dengan fungsi kata kunci lakukan. Fungsi panah mengikat secara leksikal itu ini nilai untuk ruang lingkup saat ini. Ini berarti bahwa kita dapat dengan mudah menggunakan kembali ini kata kunci dalam fungsi batin. Di ES5 hanya dimungkinkan dengan retasan berikut:

 // ES5 Hack untuk menggunakan kata kunci "ini" dalam fungsi bagian dalam ... addAll: function addAll (pieces) var self = this; _.each (bagian, fungsi (bagian) self.add (bagian);); , ... // ES6 fungsi dalam yang sama sekarang bisa menggunakan "this" ... addAll: function addAll (pieces) _.each (pieces, piece => this.add (piece)); , ...

Kode di atas adalah dari Mozilla Hacks

4. Baru penyebaran Operator

Yang baru penyebaran operator ditandai dengan 3 titik (...), dan kita dapat menggunakannya untuk menandatangani tempat beberapa item yang diharapkan. Salah satu kasus penggunaan paling umum dari operator spread adalah memasukkan elemen-elemen dari array ke array lain:

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

Kami juga dapat memanfaatkan penyebaran operator dalam panggilan fungsi di mana kami ingin menyampaikan argumen dari sebuah array:

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

Itu penyebaran Operator cukup fleksibel, karena dapat digunakan beberapa kali dalam array atau panggilan fungsi yang sama.

5. Nilai Default untuk Parameter & Parameter Istirahat Baru

Berita bagus, bahwa dalam ECMAScript 6 kita dapat menambahkan nilai default ke parameter fungsi. Ini berarti bahwa jika kita tidak menyampaikan argumen kemudian dalam panggilan fungsi, parameter default akan digunakan. Dalam ES5 nilai default dari parameter selalu diatur ke tidak terdefinisi, jadi kemungkinan baru untuk mengatur mereka ke apa pun yang kita inginkan jelas merupakan peningkatan besar bahasa.

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

ES6 juga memperkenalkan jenis parameter baru, the parameter istirahat. Mereka terlihat dan bekerja sama dengan operator yang tersebar. Mereka menjadi berguna jika kita tidak tahu berapa banyak argumen yang akan diteruskan nanti dalam pemanggilan fungsi. Kita dapat menggunakan properti dan metode objek Array pada parameter lainnya:

 fungsi putInAlphabet (... args) let sort = args.sort (); kembali diurutkan;  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 ... dari Pernyataan

Dengan bantuan yang baru untuk ... dari loop kita dapat mengulangi lebih dari array atau objek iterable lainnya dengan mudah. Seiring dengan yang baru untuk ... dari pernyataan, ECMAScript 6 memperkenalkan dua objek iterable baru juga, Peta untuk kunci / peta nilai, dan Ditetapkan untuk koleksi nilai unik yang juga bisa menjadi nilai primitif dan referensi objek. Ketika kita menggunakan untuk ... dari pernyataan, kode di dalam blok dieksekusi untuk setiap elemen dari objek iterable.

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

7. Templat Literal

ECMAScript 6 memberi kami alternatif baru untuk penggabungan string. Templat literal memungkinkan kita untuk dengan mudah membuat templat di mana kita dapat menanamkan nilai yang berbeda ke tempat mana pun yang kita inginkan. Untuk melakukannya kita perlu menggunakan $ ... sintaksis di mana-mana di mana kita ingin memasukkan data yang bisa kita berikan dari variabel, array, atau objek dengan cara berikut:

 biarkan pelanggan = title: 'Ms', nama depan: 'Jane', nama keluarga: 'Doe', umur: '34'; let template = 'Dear $ customer.title $ customer.firstname $ customer.surname! Selamat $ customer.age hari ulang tahun! '; console.log (templat); // Dear Jane Doe! Selamat ulang tahun ke 34!

8. Kelas

ES6 memperkenalkan kelas-kelas JavaScript yang dibangun di atas warisan berbasis prototipe yang ada. Sintaks baru membuatnya lebih mudah untuk membuat objek, memanfaatkan warisan, dan menggunakan kembali kode. Ini juga akan membuat lebih mudah bagi pemula yang datang dari bahasa pemrograman lain untuk memahami cara kerja JavaScript.

Dalam kelas ES6 dideklarasikan dengan yang baru kelas kata kunci, dan harus memiliki constructor () metode yang dipanggil ketika objek baru dipakai dengan menggunakan myClass baru () sintaksis. Dimungkinkan juga untuk memperluas kelas baru dengan kelas Anak meluas Orangtua sintaks yang bisa akrab dari bahasa berorientasi objek lain seperti PHP. Penting juga untuk diketahui bahwa, tidak seperti deklarasi fungsi dan variabel, deklarasi kelas TIDAK diangkat dalam ECMAScript 6.

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

Kode di atas dari Contoh Fiddle ES6, .

9. Modul

Pernahkah Anda bertanya-tanya tentang bagaimana kerennya jika JavaScript itu modular? Tentu saja, ada beberapa solusi seperti CommonJS (digunakan dalam Node.js) atau AMD (Asynchronous Module Definition) (digunakan dalam RequireJS) untuk melakukan itu sebelumnya, tetapi ES6 memperkenalkan modul sebagai fitur asli.

Kita perlu mendefinisikan setiap modul dalam file sendiri, lalu gunakan ekspor kata kunci untuk mengekspor variabel dan fungsi untuk file lain, dan impor kata kunci untuk mengimpornya dari file lain, sesuai dengan sintaks berikut:

 // function.js function cube (a) mengembalikan a * a * a;  function cubeRoot (a) return Math.cbrt (a);  ekspor cube, cubeRoot // atau: ekspor cube as cb, cubeRoot as cr // app.js impor cube, cubeRoot dari 'functions'; console.log (cube (4)); // 64 console.log (cubeRoot (125)); // 5

Solusi ini brilian, karena kode yang disimpan dalam modul tidak terlihat dari luar, dan kita hanya perlu mengekspor bagian yang ingin diakses oleh file lain. Kita dapat melakukan banyak hal yang lebih menakjubkan dengan Modul ES6, di sini Anda dapat menemukan penjelasan yang hebat dan terperinci tentang mereka.

10. Banyak Metode Baru

ECMAScript 6 memperkenalkan banyak metode baru untuk Prototipe String, Array Object, Array Prototype, dan Math Object yang sudah ada. Metode baru dapat secara signifikan meningkatkan cara kita dapat memanipulasi entitas ini. Mozilla Dev memiliki contoh kode tambahan yang bagus, perlu untuk meluangkan waktu dan memeriksanya secara menyeluruh.

Hanya untuk menunjukkan betapa kerennya mereka, inilah favorit saya: metode menemukan prototipe Array, yang memungkinkan kami menguji kriteria tertentu pada elemen-elemen array dengan menjalankan fungsi callback pada setiap elemen, lalu mengembalikan elemen pertama yang kembali benar.

 function isPrime (elemen, index, array) var start = 2; sementara (mulai <= Math.sqrt(element))  if (element % start++ < 1)  return false;   return element > 1;  console.log ([4, 6, 8, 12] .find (isPrime)); // tidak terdefinisi, tidak ditemukan console.log ([4, 5, 8, 12] .find (isPrime)); // 5

Kode di atas dari: Mozilla Dev