Apa yang dimasukkan ke dalam es6

Dalam es6, let ialah kata kunci yang digunakan untuk mengisytiharkan pembolehubah ini hanya sah dalam blok kod yang diisytiharkan Ralat akan dilaporkan di luar blok kod yang ditentukan, dan tiada pengisytiharan skop dibenarkan, dan terdapat zon mati sementara Sintaksnya ialah "let name=value;".

Persekitaran pengendalian tutorial ini: sistem Windows 10, ECMAScript versi 6.0, komputer Dell G3.

Apa yang let in es6?

let ialah perintah dalam es6 untuk mengisytiharkan pembolehubah Ia hanya sah dalam blok kod di mana ia diisytiharkan. ralat akan dilaporkan. Ia juga sangat sesuai untuk untuk gelung Nilai i dalam gelung hanya berkuat kuasa dalam penyataan gelung dan tidak boleh diperolehi di luar.

Arahan var mengisytiharkan pembolehubah global, i menunjuk kepada pembolehubah global, dan hanya nilai terakhir yang akan dikeluarkan. Biarkan hanya berkuat kuasa dalam blok pernyataan gelung Setiap gelung akan mengisytiharkan semula i, jadi nilai yang sepadan boleh diperolehi setiap gelung.

Pembolehubah dalam gelung for ialah skop induk dan tidak berada dalam skop yang sama seperti pembolehubah (skop kanak-kanak) yang ditakrifkan oleh biarkan dalam badan gelung.

Contohnya:

//1.在自身所在代码块中有效
{
    let a = 1;
    var b = 2;
}
console.log(b); // 2
console.log(a); // a is not defined
//2.在for循环语句块中有效
for(var i=0;i<10;i++) {
    //...
}
console.log(i); // 10
for(let j=0;j<10;j++) {
    //...
}
console.log(j); // j is not defined
var arr = [];
for(var a=0;a<10;a++) {
    arr[a] = function () {
        console.log(a);
    }
}
console.log(a[4]); // 10
for(let b=0;b<10;b++) {
    arr[b] = function () {
        console.log(b);
    }
}
console.log(b[4]); // 4
// 3.for循环的变量和循环体内的变量
for(var i=0;i<10;i++) {
    let i = &#39;fed&#39;;
    console.log(i);
}
/*
* 结果是
*   fed
*   fed
*   fed
*/

Perintah let tidak mempunyai promosi skop

Perintah var akan mempunyai promosi skop Sebelum ia diisytiharkan, ia tidak ditentukan ia tidak diisytiharkan, ia akan Terdapat nilai lalai. Pembolehubah yang ditakrifkan oleh let mesti digunakan selepas pengisytiharan.

console.log(fa); // undefined
var fa = 1;
console.log(fb); // fb is not defined
let fb = 2;

let mempunyai zon mati sementara

"Zon mati sementara" (TDZ) merujuk kepada peruntukan ES6, jika terdapat perintah let dan const, pembolehubah yang diisytiharkan oleh kedua-dua ini arahan telah pun membentuk skop tertutup. Pembolehubah yang diisytiharkan sebelum ini akan melaporkan ralat.

Contohnya: pembolehubah global diisytiharkan di bawah, tetapi biarkan mengisytiharkan pembolehubah lain dalam skop peringkat blok.

var food = 'apple';
if(typeof 'str' == 'string') {
    food = 'banana'; // Uncaught ReferenceError: food is not defined
    let food;
    console.log(food); // undefined
    food = 'orange';
    console.log(food); // orange
}

Nota: Akan ada beberapa perkara buruk tentang kawasan keempat sementara.

jenis pengesanan tidak selamat

typeof x; // Uncaught ReferenceError: x is not defined
let x;

Pengisytiharan pendua tidak dibenarkan

Ringkasnya, tidak dibenarkan mengisytiharkan dua pembolehubah yang sama dalam skop yang sama.

Contohnya:

{
    let a = 1;
    var a = 2; // Uncaught SyntaxError: Identifier 'a' has already been declared
}
// 或者
{
    let b = 1;
    let b = 2; // Uncaught SyntaxError: Identifier 'b' has already been declared
}

Nota: Parameter tidak boleh diisytiharkan berulang kali dalam parameter fungsi, jika tidak, ralat akan dilaporkan.

function wait(x,y) {
    let x = 1; // Uncaught SyntaxError: Identifier 'x' has already been declared
    let y = 2; // Uncaught SyntaxError: Identifier 'y' has already been declared
}
wait(3,5);

Objek peringkat atas

Sebelum ES6, sifat objek peringkat atas adalah konsisten dengan pembolehubah global, yang membawa kepada banyak masalah.

Ralat hanya boleh ditangkap dengan menjalankannya dan ralat tidak dapat dikesan dari awal.

Objek peringkat atas boleh dibaca dan ditulis pada bila-bila masa dan di mana-mana sahaja, jadi ia tidak sesuai untuk pengaturcaraan modular.

tetingkap sebenarnya merujuk kepada tetingkap penyemak imbas dan objek peringkat atas mempunyai makna entiti.

Jadi es6 telah menambah baik satu perkara, iaitu pembolehubah global yang diisytiharkan oleh let dan const tidak tergolong dalam sifat objek peringkat atas.

Contohnya:

var a = 1;
let b = 2;
console.log(window.a); // 1
console.log(window.b); // undefined

Terapkan apa yang telah anda pelajari dengan arahan let

Ada pepatah lama: Jika anda telah mempelajarinya, anda boleh menerapkannya di mana-mana sahaja ; jika anda tidak mempelajarinya, ia tidak bermakna. Jadi saya menulis contoh kecil tentang let.

Ini ialah kes tab Sebelum ini, kita perlu mentakrifkan btns[i].index = i, tetapi kini lebih mudah untuk menggunakan perintah let.

.tab {
    width: 300px;
    height: 30px;
    border: 1px solid #fff;
}
.tab > span {
    float: left;
    display: block;
    width: 98px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    border: 1px solid #aaa;
    cursor: pointer;
}
span.active {
    color: #fff;
    background-color: #f00;
    border: 1px solid #f00;
}
.content, .content > p {
    width: 300px;
    height: 300px;
}
.content > p {
    display: none;
    border: 1px solid #aaa;
}
p.active {
    display: block;
}
<div class="tab">
    <span class="active">1</span>
    <span>2</span>
    <span>3</span>
</div>
<div class="content">
    <p class="active">1的内容</p>
    <p>2的内容</p>
    <p>3的内容</p>
</div>
let btns = document.querySelectorAll(&#39;.tab span&#39;);
let contents = document.querySelectorAll(&#39;.content p&#39;);
for (let i = 0; i < btns.length; i++) {
    btns[i].onclick = function() {
        for (let j = 0; j < btns.length; j++) {
            btns[j].className = &#39;&#39;;
            contents[j].className = &#39;&#39;;
        }
        this.className = &#39;active&#39;;
        contents[i].className = &#39;active&#39;;
    }
}

[Cadangan berkaitan: tutorial video javascript, bahagian hadapan web]

Atas ialah kandungan terperinci Apa yang dimasukkan ke dalam es6. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!