Pengenalan kepada ciri baharu yang sangat praktikal dalam kemahiran ES6_javascript

ECMAScript 6 semakin dekat dengan kami Memandangkan dialeknya yang paling penting, Javascript akan mengalami perubahan tatabahasa yang besar secara khusus telah membuka lajur "ES6 secara ringkas" untuk melihat apa yang akan dibawa oleh ES6 kami.

ditulis di hadapan

ES6 telah diserahkan kepada persidangan Ecma untuk semakan, yang bermaksud bahawa kami akan membawa gelombang besar piawaian terkini untuk javascript, serta beberapa gula sintaksis. Terdapat banyak perkara yang patut diberi perhatian kami dalam ES6 Berikut ialah beberapa ciri baharu yang saya dapati yang paling kerap kami gunakan, untuk merekodkannya.

1. untuk gelung

Perkara ini bagus untuk menggelung tatasusunan Sebabnya ialah ia mengimbangi semua kekurangan gelung tatasusunan dalam es5 pada masa ini.

Sebagai contoh, for-in akan merentasi sifat tambahan objek tatasusunan, bukan hanya nilai tatasusunan. Perkara lain ialah indeks dalam for-in adalah daripada jenis rentetan, yang amat penting.

var arrObj=['alexchen',1,{}];
arrObj._name='attr-AlexChen';
for(var i in arrObj){
console.log(arrObj[i]) // 会把_name属性也遍历出来 
console.log(typeof(i)) // 全部输出 string
}

Sudah tentu kami juga mempunyai fungsi forEach(), yang juga mempunyai masalah, seperti anda tidak boleh memecahkan pulangan di dalamnya:

var arrObj = ['alexchen','boy','great'];
arrObj.forEach(function (v) {
if (v == 'boy') {
return 'can not return';
}
console.log(v) //会输出alexchen great
})

Ini nampaknya lebih mudah daripada untuk masuk. Tetapi seperti yang dinyatakan di atas, ia mempunyai kekurangannya. Jadi mari cuba untuk:

var arrObj = ['alexchen',1,{}];
arrObj._name = 'attr-alexchen';
for (var i of arrObj) {
console.log(i);//这里只会输出,alexchen,1,object{},不会输出attr-alexchen
console.log(typeof(i))//这里会输出 string,number,object
if (i == 1) {
break;
}
console.log(i)//只会输出 alexchen，满足条件之后就不在继续循环，提高了效率并且可以自由控制跳出循环或继续循环
}

Anda boleh lihat:

Apabila menggunakan for-of, elemen di dalam tatasusunan digelung dan atribut tambahan tidak akan dilalui dalam for-in Kedua, jenis pembolehubah gelung adalah konsisten dengan jenisnya dalam tatasusunan dan bukannya semua rentetan .

Hanya dua perkara ini menjadikan kami berbaloi untuk memilih for-of dan bukannya forEach() atau for-in Sudah tentu, masih terdapat beberapa penyemak imbas yang tidak menyokongnya. Walau bagaimanapun, kod di atas boleh dilaksanakan dengan jayanya dan mendapatkan hasil yang diharapkan dalam versi terbaru FireFox. Sudah tentu, for-of bukan sahaja digunakan pada tatasusunan, anda boleh menggunakannya pada mana-mana objek seperti tatasusunan, seperti DOM NodeList, rentetan, dsb.

2. Rentetan templat

Perkara ini juga sangat menyeronokkan dan boleh digunakan untuk penyambungan tali. Dari namanya kita tahu apa yang dilakukannya. Dalam proses pembangunan bahagian hadapan, tidak dapat dielakkan untuk menghadapi situasi di mana rentetan perlu disambung secara dinamik (penjanaan DOM dinamik, pemformatan data), dsb.:

(function sayHello(name, words) { 
console.log(`hello: ${name},welcome es6,your words is: ${words}`); //
})('alexchen','im admin')//运行之后将会输出：hello: alexchen,welcome es6,your words is: im admin

Perhatikan bahawa rentetan yang digunakan sebagai templat dibalut dengan tanda `. Antaranya, $(paramenter) ialah pemegang tempat dan menyokong objek, seperti:$(obj.name). Berbanding dengan rentetan biasa, rentetan templat boleh ditulis dalam berbilang baris tanpa menggunakan + penggabungan:

hello:$(name),
welcome es6,
your words is $(words)

Perlu diingat bahawa rentetan templat tidak terlepas daripada aksara khas, jadi anda perlu menangani sendiri risiko keselamatan. Rentetan templat tidak boleh menggantikan rangka kerja templat kerana rentetan templat tidak mempunyai sintaks gelung terbina dalam dan pernyataan bersyarat. Jadi, untuk penggabungan rentetan biasa biasa, kami boleh menggunakannya untuk melakukannya, yang akan menjadikan kod anda kelihatan lebih sejuk. PS(Selain itu, saya rasa ia tidak berguna. ψ(╰_╯))

Berikut ialah pengenalan yang lebih terperinci untuk menyelesaikan masalah tiada gelung terbina dalam dan cabang penghakiman yang dinyatakan di atas:

es6-template rentetan-mozilla

3 Parameter lalai

Ini agak menarik. Kita semua tahu bahawa fungsi js tidak perlu menetapkan nilai lalai untuk parameter fungsi, contohnya, kod berikut akan melaporkan ralat:

(function(a=0,b=0){return a+b;})(1,2)//不支持es6的浏览器下会报错的SyntaxError: Unexpected token =

Ini juga bermakna parameter kami tidak boleh diberikan nilai lalai Jika kami perlu memberikan nilai lalai kepada parameter, kami perlu menentukan sama ada ia tidak ditentukan di dalam fungsi. Walau bagaimanapun, dalam ES6, kita boleh menetapkan nilai lalai untuk parameter dan bukannya memberikan nilai lalai selepas penghakiman di dalam fungsi Bukan sahaja kita boleh menetapkan nilai lalai, kita juga boleh menggunakan ungkapan operasi, seperti berikut:

(function testDefaultsParams(pars1 = "alexchen",
pars2 = (pars1 == "alexchen") ? "admin" : "not admin") {
console.log(`welcome ${pars1} ,u r ${pars2}!!`)//用到了上面说的模版字符串
})();
/**参数为空时输出，welcome alexchen ,u r admin!!,
如果第一个参数不是alexchen则输出，welcome alexchen ,u r not admin!!**/

Kaedah ini sangat mudah semasa menulis kod, sama seperti dalam bahasa dinamik, seperti c#. Ini adalah intuitif dan mudah. Jadi ia masih sangat bagus untuk digunakan. Terdapat juga parameter rehat (Parameter rehat).

Parameter lalai dan baki parameter -mozilla

Terdapat banyak ciri dan sintaks baharu dalam ES6. Jika anda berminat, anda boleh lihat di blog pasukan mozilla yang mempunyai pengenalan yang sangat terperinci dan merupakan satu siri artikel.

pengenalan siri mozilla-ES6

Baiklah, di atas adalah tiga perkara baru yang praktikal yang saya dapati dalam ES6 ini adalah yang paling banyak digunakan dalam pembangunan harian.

Ini semua tentang ciri baharu yang sangat praktikal dalam ES6 saya harap ia akan membantu anda!