String template
Ini adalah salah satu karakteristik ES6 yang sangat saya sukai. Ini mencerminkan hubungan antara variabel dan string dengan sangat intuitif. Dalam ES5, jika kita ingin menambahkan variabel ke string, kita perlu menggunakan metode penulisan berikut:
animate (box, 'translate (-' + itemWidth * num + 'px, 0)', 1000, function () {box.style.transitionDuration = ''; box.style.transform = 'translate (-800px, 0)'; flag = true;});Sekarang menggunakan string template ES6, Anda dapat secara langsung menggabungkan string dan variabel untuk membuatnya lebih mudah dipahami.
animate (box, `translate (-$ {itemwidth*num} px, 0)`, 1000, function () {box.style.transitionduration = ''; box.style.transform = `translate (-$ {itemwidth*(item.length-2)} px, 0)`) `{{ @ itemtyle-;Apakah ini sangat intuitif dan nyaman? Dari dua contoh sederhana di atas, jelas bahwa dalam ES6, string ditandai dengan backticks (``), yang perlu diketahui.
Ada fitur lain. String template dapat menghasilkan string yang dilipat, yang tidak mungkin terjadi pada string ES5 tradisional. Itu harus digunakan (/n) dan tidak dapat ditulis untuk memasuki pengembalian kereta saat menulis. Namun, dalam templat string ES6, dapat ditulis secara langsung untuk memasukkan carriage return, ruang, dan kemudian output secara langsung ketika string adalah output, yang sangat nyaman.
let myString = `abcdeffff fas`; console.log (mystring);/*output abcdeffff fas*/
Perpanjangan fungsi
1. Tetapkan nilai default untuk fungsi
Dalam ekstensi fungsi, fungsi ditambahkan untuk mengatur nilai default untuk fungsi, yang dapat dikatakan sangat baik. Apakah Anda ingat bagaimana kami menetapkan nilai default untuk fungsi di ES5?
tes fungsi (a, b, c) {var a = a || 10; var a = b || 15; var c = c || 20; console.log (a+b+c);}Di sini kami menetapkan nilai default untuk mencapai efek yang diharapkan kami sampai suatu hari, kami melewati A = 0 in. Pada saat ini, adalah salah bagi kami untuk menulis dengan cara ini. Untuk program ini, 0 adalah salah, sehingga A akan mengambil nilai default 10, sehingga gagal mencapai efek yang diharapkan. Tapi ES6 memberi kita cara yang sangat baik untuk menetapkan nilai default. Kode di atas dapat ditulis ulang sebagai berikut:
tes fungsi (a = 10, b = 15, c = 20) {console.log (a+b+c);}2. Fungsi Panah
Siswa yang memahami Cofficscript harus jelas bahwa kekuatan Cofficescript adalah fungsi panahnya yang ada di mana -mana, yang sangat menyenangkan untuk ditulis. Sekarang, ES6 telah secara resmi memperkenalkan fungsi panah, sehingga program kami dapat disederhanakan, misalnya:
// Metode penulisan ES5 var test = fungsi (a, b) {return a+b;} // fungsi panah es6 var test2 = test (a, b) => a+b;Saat menulis korsel, Anda perlu memindahkan mouse ke titik -titik kecil berikut di objek array dari titik -titik kecil, sehingga grafik dapat bergerak ke posisi yang benar. Dalam ES5, kita perlu menambahkan atribut ke objek saat ini, yang lebih rumit untuk ditulis, dan metode penulisan adalah sebagai berikut:
var lilist = document.querySelectorAll ('li'); for (var i = 0; i <lilist.length; i ++) {lilist [i] .index = i; lilist [i] .addeventListener ('mouseenter', function () {console.log (this.index);}, false);}Atribut ini.index ini adalah indeks elemen yang ditempatkan pada mouse saat ini, dan kemudian elemen saat ini diperoleh berdasarkan indeks ini. Tetapi dalam ES6, kita dapat secara langsung menggunakan fungsi panah dan FindIndex yang baru diperkenalkan di array untuk menemukan indeks elemen aktif saat ini. Kodenya adalah sebagai berikut:
Biarkan lilist = document.querySelectorAll ('li'); let arraylilist = array.form (lilist); for (var i = 0; i <lilist.length; i ++) {lilist [i] .index = i; lilist [i] .addeventListener ('mouseEnter', function () {let thisIndex = arraylilist.findIndex ((n) => n == ini);}, false);}Iniindex yang diperoleh dengan kode di atas adalah indeks yang ditempatkan pada mouse saat ini. Di sini saya memahami parameter n dalam fungsi panah. Setelah lulus dalam parameter n, ia akan melintasi objek dalam array, sehingga menemukan objek yang sama dengan ini, dan kemudian mengembalikan indeksnya. Array.from () digunakan di sini. Ini adalah metode baru yang ditambahkan ke array di ES6, yang dapat mengubah array kelas menjadi array.
ES6 untuk ... dari loop
Loop kode JS di atas digunakan untuk, tetapi pada kenyataannya, dapat digantikan oleh untuk ... dari loop di ES6, yang membuat tulisan lebih ringkas. Apakah Anda ingat untuk… di loop di JS. Loop ini dapat mengulang tombol dalam pasangan nilai kunci, tetapi tidak dapat mengulangi nilai. Munculnya untuk ... adalah untuk menebus kekurangannya. Rentang yang dapat digunakan oleh FOR ... dari loop termasuk array, set dan struktur peta, beberapa objek seperti array (seperti objek argumen, objek daftar nodel), objek generator, dan string. Jadi kita dapat menggunakan loop ini untuk mengganti loop untuk, tetapi di sini kita harus mencatat bahwa jika Anda menggunakan untuk ... loop secara langsung, kesalahan akan dilaporkan di bawah chrome49. Pejabat telah mengkonfirmasi bahwa ini adalah bug chrome49 dan akan diperbaiki di Chrome51 . Jadi ketika saya menulis, saya menggunakan array.from () untuk mengubah objek nodelist menjadi array, sehingga saya dapat beroperasi dengan percaya diri. Kodenya adalah sebagai berikut:
Biarkan lilist = document.QuerySelectorAll ('li'); let arraylilist = array.form (lilist); for (let li of lilist) {li.addeventListener ('mouseEnterer', function () {let thisIndex = arraylilist.findindex ((n) => n == this);Meringkaskan
Di atas adalah semua konten artikel ini. Bukankah itu sangat ringkas? Melalui artikel ini, saya merasa bahwa hal -hal ini telah membuat saya merasakan pesona ES6. Saya harap ini akan membantu semua orang untuk belajar ES6.