4 Sintaks baru di JavaScript 6

Versi ES6 dari JS telah banyak didukung oleh browser besar, dan banyak kerangka kerja front-end juga menggunakan ES6, dan Babel dapat digunakan untuk kompatibilitas, sehingga ES6 telah memasuki tahap aplikasi.

Jika Anda tidak terbiasa dengan ES6, berikut adalah 4 penggunaan dasar sederhana yang dapat membantu Anda dengan cepat memahami ES6

1. Deklarasikan variabel menggunakan let and const

Dalam kode ES5 tradisional, ada dua masalah utama dengan deklarasi variabel

(1) Kurangnya dukungan untuk cakupan blok

(2) Konstanta tidak dapat dinyatakan

Di ES6, kedua masalah ini diselesaikan, menambahkan dua kata kunci baru: biarkan dan const

Gunakan Let for Block Scope

 var a = 1; if (true) {var b = 2;} console.log (a); // 1console.log (b); // 2

Di ES5, variabel B yang dideklarasikan dalam blok IF dapat diakses di luar blok.

 // di es6let a = 1; if (true) {let b = 2;} console.log (a); // 1console.log (b); // ReferenceError: B tidak didefinisikan

Di ES6, variabel B dideklarasikan menggunakan Let In If Block tidak dapat diakses di luar blok

Kode berikut adalah situasi membingungkan yang umum

 var a = []; untuk (var i = 0; i <5; i ++) {a.push (function () {console.log (i);});} a.foreach (function (value) {value ();});

Hasil menjalankan adalah: 5, 5, 5, 5, 5

Gunakan Let untuk mendeklarasikan variabel i di loop

 var b = []; untuk (biarkan i = 0; i <5; i ++) {b.push (function () {console.log (i);});} b.foreach (function (value) {value ();});

Hasil menjalankan adalah: 0, 1, 2, 3, 4

Tentukan konstanta menggunakan const

 // di es5var my_constant = true; my_constant = false;

Konstanta tidak dapat didefinisikan dalam ES5, nilai dapat diubah, dan kami hanya dapat menjamin mereka sendiri.

 // di es6const my_constant = true; my_constant = false; // TipeError Uncaught: Tugas ke Variabel Konstan

Const dinyatakan dalam ES6 tidak dapat diubah

2. String template

Metode berikut dari splicing string dan variabel lebih umum

var url = 'http: // www.' + domain + '.com/' + path + '?' + queryparams;

ES6 memberikan penggunaan ringkas

Biarkan url = `http: //www.$ {domain} .com/$ {path}? $ {queryparams}`;

3. Objek Set dan Peta Baru

Di ES5, kami sering menggunakan array untuk menyimpan data dinamis, misalnya

 var collection = []; collection.push (1, 2, 1); console.log (collection); // [1, 2, 1]

Ini berisi data duplikat. Jika Anda tidak ingin data duplikat, Anda perlu menggunakan kode untuk menilai itu.

 fungsi addTocollection (collection, value) {if (collection.indexof (value) <0) {collection.push (value)}}

ES6 menyediakan objek yang ditetapkan, yang membuatnya jauh lebih nyaman untuk menangani situasi ini.

 Biarkan koleksi = set baru (); collection.add (1); collection.add (2); collection.add (1); console.log (collection); // atur {1, 2}

Set juga dapat dengan mudah melintasi set dan memproses data dalam set.

ES5 biasanya digunakan untuk menyimpan data pasangan nilai kunci, misalnya

 var collection = {}; collection.a = 'abc'; collection.b = 'xyz';

ES6 memiliki peta, sehingga dapat digunakan

 Biarkan koleksi = peta baru (); collection.set ('a', 'abc'); collection.set ('b', 'xyz');

Traversal juga sangat sederhana

 collection.foreach (function (value, key) {console.log (key + ":" + value);}); console.log (collection.size);

4. Parameter fungsi

Ada dua fitur baru untuk parameter fungsi di ES6

nilai default

 function dosomething (someObject) {console.log (someObject);}

Mungkin ada kesalahan runtime di sini dan parameter perlu diverifikasi.

 function dosomething (someObject) {if (someObject === tidak terdefinisi) {someObject = {}; } console.log (someObject);}

Jenis kode verifikasi ini sangat umum. Anda dapat mengatur nilai default untuk parameter di ES6, yang jauh lebih sederhana.

 function dosomething (someObject = {}) {console.log (someObject);}

Penghancuran Objek

Kami sering melewati objek yang berisi pasangan nilai kunci sebagai parameter ke fungsi, dan kemudian mendapatkan berbagai sifat objek dalam fungsi

 function dosomething (someObject) {var one = someObject.propone; console.log (satu); var dua = someObject.proptwo; Console.log (dua); var tiga = someObject.propThree; console.log (tiga);}

ES6 memungkinkan kita untuk mendekonstruksi parameter objek secara langsung dalam parameter

 fungsi dosomething ({propone, proptwo, propThree}) {console.log (propone); console.log (proptwo); console.log (propThree);}

Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.