> 웹 프론트엔드 > 프런트엔드 Q&A > es6에서 let과 var의 차이점은 무엇입니까?

es6에서 let과 var의 차이점은 무엇입니까?

青灯夜游
풀어 주다: 2022-04-15 19:42:47
원래의
2183명이 탐색했습니다.

차이점: 1. 변수에는 블록 수준 범위가 있지만 var 변수에는 블록 수준 범위가 없습니다. 2. var 변수에는 변수 승격(임시 데드존 제약 없음)이 있으며 먼저 사용한 다음 선언할 수 있습니다. 변수가 존재하지 않습니다. 변수 승격(임시 데드존 제약 조건 포함)은 사용하기 전에 선언해야 합니다. 3. 변수는 반복적으로 선언할 수 없지만 var 변수는 가능합니다.

es6에서 let과 var의 차이점은 무엇입니까?

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

ES6에는 지역 변수를 선언하는 새로운 let 명령이 추가되었습니다. 사용법은 var와 비슷하지만 선언된 변수는 let 명령이 있는 코드 블록(블록 수준 범위) 내에서만 유효하며 임시 변수가 있습니다. 데드존 제약. let命令,用来声明局部变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效(块级作用域),而且有暂时性死区的约束。

先看个var的常见变量提升的面试题目:

题目1:
var a = 99;            // 全局变量a
f();                   // f是函数,虽然定义在调用的后面,但是函数声明会提升到作用域的顶部。 
console.log(a);        // a=>99,  此时是全局变量的a
function f() {
  console.log(a);      // 当前的a变量是下面变量a声明提升后,默认值undefined
  var a = 10;
  console.log(a);      // a => 10
}

// 输出结果:
undefined
10
99
로그인 후 복사

如果以上题目有理解困难的童鞋,请系统的看一下老马的免费JS高级视频教程。

ES6可以用let定义块级作用域变量

在ES6之前,我们都是用var来声明变量,而且JS只有函数作用域和全局作用域,没有块级作用域,所以{}限定不了var声明变量的访问范围。
例如:

{ 
  var i = 9;
} 
console.log(i);  // 9
로그인 후 복사

ES6新增的let,可以声明块级作用域的变量。

{ 
  let i = 9;     // i变量只在 花括号内有效!!!
} 
console.log(i);  // Uncaught ReferenceError: i is not defined
로그인 후 복사

let 配合for循环的独特应用

let非常适合用于 for循环内部的块级作用域。JS中的for循环体比较特殊,每次执行都是一个全新的独立的块作用域,用let声明的变量传入到 for循环体的作用域后,不会发生改变,不受外界的影响。看一个常见的面试题目:

for (var i = 0; i <10; i++) {  
  setTimeout(function() {  // 同步注册回调函数到 异步的 宏任务队列。
    console.log(i);        // 执行此代码时,同步代码for循环已经执行完成
  }, 0);
}
// 输出结果
10   共10个
// 这里面的知识点: JS的事件循环机制,setTimeout的机制等
로그인 후 복사

如果把 var改成 let声明:

// i虽然在全局作用域声明,但是在for循环体局部作用域中使用的时候,变量会被固定,不受外界干扰。
for (let i = 0; i < 10; i++) { 
  setTimeout(function() {
    console.log(i);    //  i 是循环体内局部作用域,不受外界影响。
  }, 0);
}
// 输出结果:
0  1  2  3  4  5  6  7  8 9
로그인 후 복사

let没有变量提升与暂时性死区

let声明的变量,不存在变量提升。而且要求必须 等let声明语句执行完之后,变量才能使用,不然会报Uncaught ReferenceError错误。

例如:

console.log(aicoder);    // 错误:Uncaught ReferenceError ...
let aicoder = &#39;aicoder.com&#39;;
// 这里就可以安全使用aicoder
로그인 후 복사

ES6 明确规定,如果区块中存在let和const命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错。
总之,在代码块内,使用let命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”(temporal dead zone,简称 TDZ)。

let变量不能重复声明

let不允许在相同作用域内,重复声明同一个变量。否则报错:Uncaught SyntaxError: Identifier &#39;XXX&#39; has already been declared

먼저 var의 공통 변수 개선 인터뷰 질문을 살펴보겠습니다.

let a = 0;
let a = &#39;sss&#39;;
// Uncaught SyntaxError: Identifier &#39;a&#39; has already been declared
로그인 후 복사
위 질문을 이해하기 어려우시면 Lao Ma의 무료 JS 고급 비디오 튜토리얼을 체계적으로 살펴보세요. .

ES6에서는 let을 사용하여 블록 수준 범위 변수를 정의할 수 있습니다

ES6 이전에는 모두 var를 사용하여 변수를 선언했고, JS에는 블록 수준 범위가 아닌 함수 범위와 전역 범위만 있었으므로 {}는 var로 선언된 변수의 액세스 범위를 제한할 수 없습니다.
예:

rrreeeES6의 새로운 let는 블록 수준 변수를 선언할 수 있습니다. rrreeelet for loop

🎜🎜let가 포함된 고유한 애플리케이션은 for 루프 내부의 블록 수준 범위에 매우 적합합니다. JS의 for 루프 본문은 특별합니다. 각 실행은 새로운 독립 블록 범위입니다. let으로 선언된 변수는 for 루프 본문의 범위로 전달된 후에는 변경되지 않으며 외부 세계의 영향을 받지 않습니다. 일반적인 면접 질문을 보세요: 🎜rrreee🎜 varlet으로 변경된 경우 진술: 🎜rrreee🎜🎜🎜let에는 변수 승격이 없고 임시 데드 존이 있습니다🎜🎜🎜🎜 let으로 선언된 변수에 대한 변수 승격은 없습니다. 그리고 let 선언문이 실행될 때까지 변수를 사용할 수 없어야 합니다. 그렇지 않으면 Uncaught ReferenceError 오류가 보고됩니다. 🎜🎜예: 🎜rrreee🎜🎜ES6에서는 블록에 let 및 const 명령이 있는 경우 이 블록에서 이러한 명령으로 선언된 변수가 처음부터 닫힌 범위를 형성한다고 명확하게 규정합니다. 선언 전에 이러한 변수를 사용하면 오류가 발생합니다.
간단히 말하면 코드 블록 내에서는 let 명령을 사용하여 변수를 선언할 때까지 변수를 사용할 수 없습니다. 구문론적으로 이를 "임시 데드존"(TDZ)이라고 합니다. 🎜🎜🎜🎜🎜let 변수는 반복적으로 선언할 수 없습니다.🎜🎜🎜🎜let은 동일한 범위에서 동일한 변수의 반복 선언을 허용하지 않습니다. 그렇지 않으면 다음과 같은 오류가 보고됩니다: Uncaught SyntaxError: Identifier 'XXX' has 이미 선언되었습니다🎜🎜예: 🎜rrreee🎜🎜🎜Summary🎜🎜🎜🎜ES6의 let을 사용하면 js가 실제로 블록-를 가질 수 있습니다. 이는 더 안전하고 표준화된 경로이지만 많은 제약 조건을 추가하지만 코드를 더 안전하게 사용하고 작성할 수 있게 해줍니다. 🎜🎜【관련 추천: 🎜javascript 비디오 튜토리얼🎜, 🎜web front-end🎜】🎜

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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿