Ecmascript6 Panduan Mulai Cepat

Perkenalan

Ecmascript 6 adalah standar berikutnya untuk JavaScript dan sedang dalam pengembangan cepat. Tujuan ECMASCRIPT 6 adalah untuk memungkinkan JavaScript digunakan untuk menulis aplikasi yang kompleks, pustaka fungsi dan generator otomatis (generator kode). Browser terbaru yang sudah sebagian mendukung sintaks ECMASCRIPT 6. ECMASCRIPT 6 pada dasarnya adalah standar industri, dan popularitasnya jauh lebih cepat daripada ES5. Alasan utamanya adalah bahwa browser modern mendukung ES6 dengan cukup cepat, terutama browser Chrome dan Firefox, yang sudah mendukung sebagian besar fitur di ES6.

1. Biarkan, Const, dan Blokir Lingkup

Mari memungkinkan membuat lingkup level blok. ES6 merekomendasikan untuk menggunakan fungsi Let In untuk mendefinisikan variabel, bukan var:

 var a = 2; {biarkan a = 3; console.log (a); // 3} console.log (a); // 2

Cara lain untuk mendeklarasikan variabel yang juga valid pada ruang lingkup level blok adalah Const, yang dapat menyatakan konstan. Dalam ES6, konstanta yang dinyatakan oleh Const mirip dengan pointer, yang menunjuk ke referensi, yang berarti bahwa "const" ini tidak statis, seperti:

 {const arr = [5,6]; Arr.push (7); console.log (arr); // [5,6,7] ARR = 10; // typeError}

Ada beberapa poin yang perlu diperhatikan:

Biarkan kata kunci variabel yang dinyatakan tidak memiliki fitur pengangkat

Deklarasi LET DAN CONST hanya valid di blok terdekat (di dalam kawat gigi keriting)

Saat menggunakan deklarasi konstan konstan, gunakan variabel huruf besar, seperti: capital_casing

const harus ditugaskan saat dinyatakan

2. Fungsi Panah

Dalam ES6, fungsi panah adalah bentuk pendek dari suatu fungsi, menggunakan tanda kurung untuk membungkus parameter, diikuti oleh =>, diikuti oleh badan fungsi:

 var getPrice = function () {return 4.55;}; // implementasi dengan panah functionVar getPrice = () => 4.55;

Perlu dicatat bahwa fungsi panah getPrice di berangan di atas menggunakan tubuh fungsi ringkas, yang tidak memerlukan pernyataan reture. Chestnut di bawah ini menggunakan tubuh fungsi normal:

 Biarkan arr = ['apel', 'pisang', 'oranye']; Biarkan sarapan = arr.map (buah => {return fruit + 's';}); Console.log (sarapan); // apel pisang jeruk

Tentu saja, fungsi panah bukan hanya tentang membuat kode ringkas, tetapi dalam fungsi ikatan ini selalu menunjuk pada objek itu sendiri. Untuk detailnya, Anda dapat melihat chestnut berikut:

 function person () {this.age = 0; setInterval (function growup () {// Dalam mode non-ketat, ini dari fungsi growup () menunjuk ke objek jendela this.age ++;}, 1000);} var person = new orang ();

Kita sering perlu menggunakan variabel untuk menyimpan ini dan kemudian merujuknya dalam fungsi growup:

 function person () {var self = this; self.age = 0; setInterval (fungsi growup () {self.age ++;}, 1000);}

Dan menggunakan fungsi panah dapat menyimpan masalah ini:

 function person () {this.age = 0; setInterval (() => {// | ini | point to Person objek this.age ++;}, 1000);} var person = orang baru ();

3. Parameter Fungsi Nilai default

ES6 memungkinkan Anda untuk mengatur nilai default untuk parameter fungsi:

 Biarkan getFinalPrice = (harga, pajak = 0.7) => Harga + Harga * Pajak; GetFinalPrice (500); // 850

4. Operator sebaran/istirahat

Operator penyebaran / istirahat mengacu pada ..., apakah itu menyebar atau istirahat tergantung pada konteksnya.

Saat digunakan dalam iterator, itu adalah operator penyebaran:

 function foo (x, y, z) {console.log (x, y, z);} biarkan arr = [1,2,3]; foo (... arr); // 1 2 3

Saat digunakan untuk transfer argumen fungsi, ini adalah operator istirahat:

 function foo (... args) {console.log (args);} foo (1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]

5. Ekstensi Leksikal Objek

ES6 memungkinkan mendeklarasikan sintaks yang disingkat ketika mendeklarasikan objek literal untuk menginisialisasi metode definisi variabel dan fungsi atribut, dan memungkinkan operasi perhitungan dalam sifat objek:

 Fungsi getCar (Make, Model, Value) {return {// Singkatan variabel make, // setara dengan membuat: membuat model, // setara dengan model: nilai model, // setara dengan nilai: nilai // atribut dapat dihitung menggunakan ekspresi ['make' + make]: true, // abaikan `function` function `function` function `function` function `function` function `function` function `function` function `function` function `function` function `function` function `function function` }};} Biarkan mobil = getCar ('Barret', 'Lee', 40000); // output: {// make: 'barret', // model: 'lee', // value: 40000, // makeBarret: true, // depeciate: function () //}

6. literal biner dan oktal

ES6 mendukung literal biner dan oktal, yang dapat dikonversi menjadi nilai biner dengan menambahkan 0o atau 0o di depan angka:

 Biarkan ovalue = 0o10; console.log (ovalue); // 8 Misalkan bvalue = 0b10; // Gunakan `0B` atau` 0B` Console.log (Bvalue); // 2

7. Objek dan Penghancuran Array

Dekonstruksi dapat menghindari generasi variabel menengah saat penugasan objek:

 function foo () {return [1,2,3];} let arr = foo (); // [1,2,3] Misalkan [a, b, c] = foo (); console.log (a, b, c); // 1 2 3 batang fungsi () {return {x: 4, y: 5, z: 6};} biarkan {x: x, y: y, z: z} = bar (); console.log (x, y, z); // 4 5 6

8. Objek Superclass

ES6 memungkinkan penggunaan metode super di objek:

 var parent = {foo () {console.log ("halo dari induk"); }} var child = {foo () {super.foo (); console.log ("halo dari anak"); }} Object.setPrototypeOf (anak, induk); child.foo (); // halo dari orang tua // halo dari anak itu

9. Sintaks Template dan Pemisah

Ada cara yang sangat ringkas untuk merakit banyak string dan variabel di ES6.

$ {...} digunakan untuk membuat variabel

`sebagai pemisah

 Biarkan user = 'barret'; console.log (`hai $ {user}!`); // Hai Barret!

10. Untuk ... dari vs untuk ... di

karena ... digunakan untuk melintasi iterator, seperti array:

 Biarkan julukan = ['di', 'boo', 'punkeye']; nicknames.size = 3; for (mari julukan julukan) {console.log (nama panggilan);} Hasil: di, boo, punkeye

untuk ... di digunakan untuk melintasi properti dalam suatu objek:

 Biarkan julukan = ['di', 'boo', 'punkeye']; nicknames.size = 3; for (let nickname in nicknames) {console.log (nama panggilan);} hasil: 0, 1, 2, ukuran

11. Peta dan Lemah

Ada dua set struktur data baru di ES6: Peta dan Lemah. Bahkan, setiap objek dapat dianggap sebagai peta.

Suatu objek terdiri dari beberapa pasangan kunci-val. Di peta, jenis apa pun dapat digunakan sebagai kunci objek, seperti:

 var mymap = peta baru (); var keystring = "a string", keyobj = {}, keyfunc = function () {}; // Atur nilai mymap.set (keyString, "nilai dikaitkan dengan 'a string'"); mymap.set (keyobj, "nilai dikaitkan dengan keyobj"); mymap.set (keyfunc, "nilai dikaitkan dengan keyfunc"); mymap.size; // 3 // Dapatkan nilai mymap.get (keyString); // "Nilai dikaitkan dengan 'a string'" mymap.get (keyobj); // "Nilai dikaitkan dengan 'a string'" mymap.get (keyobj); // "Nilai dikaitkan dengan 'a string'" mymap.get (keyobj); // "nilai asosiasi dengan keyobj" mymap.get (keyfunc); // "nilai yang terkait dengan keyfunc"

Lemah

Weakmap adalah peta, tetapi semua kunci adalah referensi yang lemah, yang berarti bahwa hal -hal di Lemah tidak dipertimbangkan saat pengumpulan sampah, dan Anda tidak perlu khawatir tentang kebocoran memori saat menggunakannya.

Hal lain yang perlu diperhatikan adalah bahwa semua kunci lemah harus menjadi objek. Ini hanya memiliki empat metode: hapus (tombol), memiliki (tombol), get (kunci) dan set (tombol, val):

 Misalkan w = new lovermap (); w.set ('a', 'b'); // TipeError Uncaught: Nilai tidak valid digunakan sebagai tombol peta lemah var o1 = {}, o2 = function () {}, o3 = window; W.Set (O1, 37); W.Set (O2, "Azerty"); W.Set (O3, tidak terdefinisi); w.get (o3); // tidak terdefinisi, karena itu adalah nilai yang ditetapkan w.has (O1); // truew.delete (O1); W.Has (O1); // PALSU

12. Set dan lemah

Objek yang ditetapkan adalah seperangkat nilai yang tidak diulang, dan nilai duplikat akan diabaikan. Jenis nilai dapat berupa tipe primitif dan referensi:

 Biarkan myset = set baru ([1, 1, 2, 2, 3, 3]); myset.size; // 3myset.has (1); // truemyset.add ('string'); myset.add ({a: 1, b: 2});

Anda dapat melintasi objek mengatur melalui foreach dan untuk ... dari:

 myset.foreach ((item) => {console.log (item); // 1 // 2 // 3 // 'string' // objek {a: 1, b: 2}}); untuk (biarkan nilai myset) {console.log (value); // 1 // 2 // 3 // 'string' // objek {a: 1, b: 2}}

Set juga memiliki metode delete () dan clear ().

Lemah

Mirip dengan Lemah Lemah, Objek Lemah Lemari memungkinkan Anda untuk menyimpan referensi lemah ke objek dalam koleksi, dan objek di Lemari hanya diperbolehkan muncul sekali:

 var ws = new lOVEMSet (); var obj = {}; var foo = {}; ws.add (jendela); ws.add (obj); ws.has (jendela); // truews.has (foo); // false, foo belum ditambahkan dengan sukses ws.delete (window); // hapus objek jendela dari kombinasi ws.has (jendela); // Salah, objek jendela telah dihapus

13. Kelas

Ada sintaks kelas di ES6. Perlu dicatat bahwa kelas di sini bukan model warisan objek baru, itu hanya ekspresi gula sintaksis dari rantai prototipe.

Metode dan sifat konstruktor didefinisikan dalam fungsi menggunakan kata kunci statis:

 Tugas kelas {konstruktor () {console.log ("Tugas Instantiated!"); } showId () {console.log (23); } static loadAll () {console.log ("Memuat semua tugas .."); }} console.log (Typeof Task); // functionlet tugas = tugas baru (); // "Tugas Instantiated!" Task.showid (); // 23Task.LoadAll (); // "Memuat semua tugas .."

Warisan dan superset di kelas:

 class car {constructor () {console.log ("Membuat mobil baru"); }} class Porsche Extends Car {constructor () {super (); Console.log ("Membuat Porsche"); }} biarkan c = new Porsche (); // Membuat mobil baru // Membuat Porsche

Extends memungkinkan subclass untuk mewarisi kelas induk. Perlu dicatat bahwa fungsi super () perlu dieksekusi dalam fungsi konstruktor subkelas.

Tentu saja, Anda juga dapat memanggil metode kelas induk dalam metode subclass, seperti super.parentmethodname ().

Baca lebih lanjut tentang kelas di sini.

Ada beberapa poin yang patut dicatat:

Deklarasi kelas tidak akan diangkat. Jika Anda ingin menggunakan kelas, Anda harus mendefinisikannya sebelum menggunakannya, jika tidak, kesalahan ReferenceError akan dilemparkan.

Menentukan fungsi di kelas tidak memerlukan penggunaan kata kunci fungsi

14. Simbol

Simbol adalah tipe data baru yang nilainya unik dan tidak berubah. Tujuan simbol yang diusulkan dalam ES6 adalah untuk menghasilkan pengidentifikasi yang unik, tetapi Anda tidak dapat mengakses pengidentifikasi ini:

 var sym = simbol ("Beberapa deskripsi opsional"); console.log (typeof sym); // Simbol

Perhatikan bahwa operator baru tidak dapat digunakan di depan simbol.

Jika digunakan sebagai properti objek, maka properti ini tidak dapat dienumerik:

 var o = {val: 10, [simbol ("acak")]: "Saya simbol",}; console.log (objek.getOwnPropertynames (o)); // val

Jika Anda ingin mendapatkan properti simbol objek, Anda perlu menggunakan objek.getOwnPropertymbols (o).

15. Iterator

Iterator memungkinkan akses ke elemen set data setiap kali elemen diakses. Ketika pointer menunjuk ke elemen terakhir dari set data, Iterator keluar. Ini menyediakan fungsi berikutnya () untuk mengulangi urutan, yang mengembalikan objek yang berisi atribut yang dilakukan dan nilai.

Di ES6, Anda dapat mengatur traverser default untuk objek melalui simbol.iterator. Tidak masalah kapan objek perlu dilalui, metode @@ iterator yang mengeksekusi metode @@ iterator dapat mengembalikan iterator untuk mendapatkan nilainya.

Array adalah iterator secara default:

 var arr = [11,12,13]; var itr = arr [simbol.iterator] (); itr.next (); // {value: 11, selesai: false} itr.next (); // {value: 12, selesai: false} itr.next (); // {value: 13, selesai: false} itr.next (); // {value: Undefined, Done: True}

Anda dapat menyesuaikan iterator untuk objek melalui [simbol.iterator] ().

16. Generator

Fungsi generator adalah fitur baru ES6, yang memungkinkan fungsi untuk mengembalikan objek yang dapat dilalui untuk menghasilkan banyak nilai.

Dalam penggunaan Anda akan melihat * sintaks dan hasil kata kunci baru:

 fungsi *infinitenumbers () {var n = 1; while (true) {hasil n ++; }} var angka = infinitenumbers (); // Mengembalikan objek iterable numbers.next (); // {value: 1, selesai: false} numbers.next (); // {value: 2, selesai: false} numbers.next (); // {value: 3, selesai: false}

Setiap kali hasil dieksekusi, nilai yang dikembalikan menjadi nilai berikutnya dari iterator.

17. Janji

ES6 memiliki dukungan asli untuk janji. Janji adalah objek yang menunggu eksekusi asinkron. Ketika eksekusi selesai, keadaannya akan diselesaikan atau ditolak.

 var p = new janji (function (resolve, reject) {if (/ * condition */) {// terpenuhi berhasil menyelesaikan (/ * value */);} else {// error, ditolak tolak (/ * alasan */);}});

Setiap janji memiliki metode .then, yang menerima dua parameter. Yang pertama adalah menangani panggilan balik dari keadaan terselesaikan, dan yang lainnya adalah menangani panggilan balik dari keadaan yang ditolak:

 p.then ((val) => console.log ("janji diselesaikan", val), (err) => console.log ("janji ditolak", err));

Di atas adalah pengantar untuk awal cepat Ecmascript 6 yang disusun untuk semua orang. Teman yang membutuhkannya dapat belajar dan merujuknya.