es6에서 let은 무엇입니까?

es6에서 let은 변수를 선언하는 데 사용되는 키워드입니다. 이 키워드는 선언된 코드 블록에서만 유효합니다. 지정된 코드 블록 외부에서 오류가 보고되며 범위 승격이 없으며 반복 선언이 허용되지 않습니다. 임시 데드존이 있으며 구문은 "let name=value;"입니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, ECMAScript 버전 6.0, Dell G3 컴퓨터.

let은 es6에서 변수를 선언하는 명령입니다. 이 코드 블록이 남아 있으면 오류가 보고됩니다. 이는 for 루프에도 매우 적합합니다. 루프의 i 값은 루프 문에서만 적용되며 외부에서는 얻을 수 없습니다.

var 명령은 전역 변수를 선언하고 i는 전역 변수를 가리키며 마지막 값만 출력됩니다. 루프 문 블록에서만 적용됩니다. 루프를 돌 때마다 i가 다시 선언되므로 루프를 돌 때마다 해당 값을 얻을 수 있습니다.

for 루프의 변수는 상위 범위이며 루프 본문에서 let으로 정의된 변수(하위 범위)와 동일한 범위에 있지 않습니다.

예:

//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
*/

let 명령에는 범위 승격이 없습니다.

var 명령은 선언되기 전에는 정의되지 않습니다. let으로 정의된 변수는 선언 후에 사용해야 합니다.

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

let에 임시 데드존이 있습니다

"임시 데드존"(TDZ)은 ES6의 조항을 의미하며, 블록에 let 및 const 명령이 있는 경우 이 두 명령이 선언하는 변수는 닫힌 범위를 형성합니다. 이전에 선언된 변수는 오류를 보고합니다.

예: 전역 변수가 아래에 선언되었지만 let은 블록 수준 범위에서 다른 변수를 선언합니다.

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
}

참고: 임시 구역 4에 대해 몇 가지 나쁜 점이 있을 것입니다.

탐지 유형은 안전하지 않습니다.

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

중복 선언은 허용되지 않습니다.

즉, 동일한 범위에서 두 개의 동일한 변수를 선언하는 것은 허용되지 않습니다.

예:

{
    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
}

참고: 매개변수는 함수 매개변수 내에서 반복적으로 선언될 수 없습니다. 그렇지 않으면 오류가 보고됩니다.

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);

최상위 객체

ES6 이전에는 최상위 객체의 속성이 전역 변수와 일치하여 많은 문제가 발생했습니다.

오류는 실행해야만 잡을 수 있고, 처음부터 에러를 감지할 수는 없습니다.

최상위 객체는 언제 어디서나 읽고 쓸 수 있으므로 모듈식 프로그래밍에 도움이 되지 않습니다.

window는 실제로 브라우저 창을 의미하며 최상위 개체에는 엔터티 의미가 있습니다.

그래서 es6에서는 한 가지 개선되었습니다. 즉, let과 const로 선언된 전역 변수는 최상위 개체의 속성에 속하지 않습니다.

예:

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

학습 후 let 명령을 사용하세요

옛말에: 배우면 어디서나 사용할 수 있고, 배우지 않으면 아무 의미가 없습니다. 그래서 나는 let에 관한 작은 예를 썼습니다.

탭의 경우입니다. 이전에는 btns[i].index = i를 정의해야 했지만 이제는 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;;
    }
}

【관련 추천:

javascript 비디오 튜토리얼

, web front-end】

위 내용은 es6에서 let은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!