主要差异是范围差异,而让它只能在所宣布的范围内可用,如在圆圈中,可在圆圈之外可访问,例如从MDN的文档(MDN的例子):

function varTest() {
  var x = 1;
  if (true) {
    var x = 2;  // same variable!
    console.log(x);  // 2
  }
  console.log(x);  // 2
}

function letTest() {
  let x = 1;
  if (true) {
    let x = 2;  // different variable
    console.log(x);  // 2
  }
  console.log(x);  // 1
}`

var x = 'global';
let y = 'global';
console.log(this.x); // "global"
console.log(this.y); // undefined

当在区块内使用时,请将变量的范围限制在该区块上。

var a = 1;
var b = 2;

if (a === 1) {
  var a = 11; // the scope is global
  let b = 22; // the scope is inside the if-block

  console.log(a);  // 11
  console.log(b);  // 22
} 

console.log(a); // 11
console.log(b); // 2

有一些微妙的差异 - 让滑动行为更像变量滑动在更多或更少的任何其他语言。

例如,它转向封锁区块,它们在被宣布之前不存在,等等。

然而,值得注意的是,让它只是新的JavaScript实施的一部分,并且有不同的浏览器支持程度。

正如我目前正在试图深入了解JavaScript,我将分享我的简短研究,其中包含一些已经讨论的伟大作品,以及一些其他细节,从不同的角度。

理解VAR和LAT之间的差异可以更容易,如果我们理解函数和区块范围之间的差异。

让我们来看看以下案例:

(function timer() {
    for(var i = 0; i <= 5; i++) {
        setTimeout(function notime() { console.log(i); }, i * 1000);
    }
})();


   Stack            VariableEnvironment //one VariablEnvironment for timer();
                                       // when the timer is out - the value will be the same for each iteration
5. [setTimeout, i]  [i=5] 
4. [setTimeout, i]  
3. [setTimeout, i]
2. [setTimeout, i]
1. [setTimeout, i]
0. [setTimeout, i]

####################    

(function timer() {
    for (let i = 0; i <= 5; i++) {
        setTimeout(function notime() { console.log(i); }, i * 1000);
    }
})();

   Stack           LexicalEnvironment - each iteration has a new lexical environment
5. [setTimeout, i]  [i=5]       
                      LexicalEnvironment 
4. [setTimeout, i]    [i=4]     
                        LexicalEnvironment 
3. [setTimeout, i]      [i=3]       
                         LexicalEnvironment 
2. [setTimeout, i]       [i=2]
                           LexicalEnvironment 
1. [setTimeout, i]         [i=1]
                             LexicalEnvironment 
0. [setTimeout, i]           [i=0]

当按时()被称为执行内容时,将创建一个内容,该内容将包含每个字符串的变量环境和所有相应的语法环境。

更简单的例子

功能范围

function test() {
    for(var z = 0; z < 69; z++) {
        //todo
    }
    //z is visible outside the loop
}

区块范围

function test() {
    for(let z = 0; z < 69; z++) {
        //todo
    }
    //z is not defined :(
}

简而言之,Let和Var之间的区别在于Var是功能分解,Let是区块分解。

ES6 引入了两个新的关键字(let 和 const) 替代到 var。

当你需要一个区块水平下降时,你可以用Let和Const而不是VAR去。

下面的表总结了 var, let 和 const 之间的差异

此分類上一篇

函数 VS 区块范围:

与 var 和 let 的主要区别是,与 var 宣言的变量是函数分解的,而与 let 宣言的函数是区块分解的。

function testVar () {
  if(true) {
    var foo = 'foo';
  }

  console.log(foo);
}

testVar();  
// logs 'foo'


function testLet () {
  if(true) {
    let bar = 'bar';
  }

  console.log(bar);
}

testLet(); 
// reference error
// bar is scoped to the block of the if statement 

当第一个函数测试Var 被称为变量 foo 时,与 var 声明,仍然在 if 声明之外可用。

与Let的变量:

当第二个函数测试Let被称为变量栏,用Let表示,仅可在 if 声明中访问,因为用Let表示的变量是区块分开的(其中一个区块是曲线条之间的代码,例如,如果{},为{},函数{})。

请不要让变量变量:

变量与不要被抓住:

console.log(letVar);

let letVar = 10;
// referenceError, the variable doesn't get hoisted

与 var do 相容的变量:

console.log(varVar);

var varVar = 10;
// logs undefined, the variable gets hoisted

var bar = 5;
let foo  = 10;

console.log(bar); // logs 5
console.log(foo); // logs 10

console.log(window.bar);  
// logs 5, variable added to window object

console.log(window.foo);
// logs undefined, variable not added to window object

一些黑客与Let:

1。

    let statistics = [16, 170, 10];
    let [age, height, grade] = statistics;

    console.log(height)

二。

    let x = 120,
    y = 12;
    [x, y] = [y, x];
    console.log(`x: ${x} y: ${y}`);

3、

    let node = {
                   type: "Identifier",
                   name: "foo"
               };

    let { type, name, value } = node;

    console.log(type);      // "Identifier"
    console.log(name);      // "foo"
    console.log(value);     // undefined

    let node = {
        type: "Identifier"
    };

    let { type: localType, name: localName = "bar" } = node;

    console.log(localType);     // "Identifier"
    console.log(localName);     // "bar"

Getter 和 Setter 與 Let:

let jar = {
    numberOfCookies: 10,
    get cookies() {
        return this.numberOfCookies;
    },
    set cookies(value) {
        this.numberOfCookies = value;
    }
};

console.log(jar.cookies)
jar.cookies = 7;

console.log(jar.cookies)