var和let和const_通过示例了解var let和const

var和let和const

Var (Var)

Using var declares either a locally(within function) scoped variable or a globally scoped variable.

使用var声明局部(函数内)范围的变量或全局范围的变量。

范围 (Scope)

When var is used outside a function, it declares a globally scoped variable.

当在函数外使用var时，它将声明一个全局范围的变量。

var a = 2; // globally scoped variablefunction foo() {
    console.log(a);
}foo(); // prints out 2console.log(window.a); // prints out 2

This is similar to adding a property to window object directly, while there is a difference: you can’t delete the variable declared using var.

这类似于直接向窗口对象添加属性，但有一个区别：您不能删除使用var声明的变量。

var a = 2; // globally scoped variablewindow.b = 3; // new property of window object, also globally scopeddelete a; // returns falsedelete b; // returns true

When var is used inside a function definition, it creates a local variable which is only available within the function:

当在函数定义中使用var时，它将创建仅在函数中可用的局部变量：

function bar() {
    var a = 2; // only available inside this function
    console.log(a);
}bar(); // prints out 2console.log(a); // Uncaught ReferenceError: a is not definedconsole.log(window.a); // prints out undefined

If you happen to forget to add var in a function when declare a variable, it becomes a globally scoped variable.

如果您在声明变量时忘了在函数中添加var，它将成为全局范围的变量。

function foo() {
    a = 2; // note there is no var in front of the variable name
    console.log(a);
}foo(); // prints out 2console.log(a); // prints out 2console.log(window.a); // prints out 2

It may not be what you intended to do, for example:

它可能不是您打算要做的，例如：

var a = 2;function foo() {
    a = 3; // the value of the global variable a is overwritten here
    console.log(a);
}console.log(a); // prints out 2foo(); // prints out 3console.log(a); // prints out 3, the old value got overwritten

吊装 (Hoisting)

The variables declared with var are hoisted, which means you can use the variables even before it reaches the line in the code it declares the variable.

用var声明的变量被吊起，这意味着您甚至可以在变量到达声明变量的代码中的行之前使用这些变量。

console.log(a); // prints out undefined. This doesn't mean the variable a is not defined. It means the value of a is undefineda = 2;console.log(a); // prints out 2 as we just assigned a value to itvar a;

Note that if you try out above example in Chrome console, copy and paste above code snippet in one shot, i.e. don’t copy and execute each line one at a time; otherwise you’ll get a “Uncaught ReferenceError: a is not defined” error.

请注意，如果您在Chrome控制台中尝试上述示例，请一次性复制并粘贴以上代码段，即不要一次复制并执行每一行； 否则，您将收到“ Uncaught ReferenceError：未定义”错误。

让 (Let)

Using let declares a block scoped variable.

使用let声明块范围的变量。

范围 (Scope)

The variable declared with let is only available within the code block it is defined.

用let声明的变量仅在定义的代码块中可用。

{ // note the curly bracket here
    let a = 2;
    console.log(a); // prints out 2
}console.log(a); // Uncaught ReferenceError: a is not defined

Unlike var, the variables declared with let is not added to window object as a property even if it is globally accessible.

与var不同，使用let声明的变量即使可全局访问，也不会作为属性添加到window对象。

let a = 2;function foo() {
    console.log(a);
}foo(); // prints out 2console.log(a); // prints out 2console.log(window.a); // prints out undefined

Unlike var, you can not re-declare a let variable in the same scope.

与var不同，您不能在同一范围内重新声明let变量。

let a = 2; // declare for the first time, no problemlet a = 2; // Uncaught SyntaxError: redeclaration of let a

A fun fact is that both Chrome (84.0.4147.105) console and Microsoft Edge (83.0.478.61) allow this redeclaration, while FireFox (78.0.2) and Safari (13.1.1) don’t.

一个有趣的事实是Chrome(84.0.4147.105)控制台和Microsoft Edge(83.0.478.61)都允许重新声明，而FireFox(78.0.2)和Safari(13.1.1)不允许。

吊装 (Hoisting)

The variables declared with let are not hoisted to the top, hence let variable is still not yet initialized with undefined if user use it before declaration. That’s why there is a temporal death zone, i.e., browsers will report an error if one use the let variable before declaration.

用let声明的变量未提升到顶部，因此，如果用户在声明之前使用let，则let变量仍未使用undefined初始化。 这就是为什么存在临时死亡区的原因，即，如果一个浏览器在声明之前使用let变量，则浏览器将报告错误。

function foo() {
    console.log(a);
    let a;
}foo(); // Uncaught ReferenceError: Cannot access 'a' before initializationfunction bar() {
    let b;
    console.log(b);
}bar(); // prints undefined

康斯特 (Const)

Using const declares and initializes a block scoped constant. If the constant is a primitive type (string, number, bigint, boolean, undefined, and symbol) or null, the value could not be altered after initialization.

使用const声明并初始化块作用域常量。 如果常量是原始类型(字符串，数字，bigint，布尔值，未定义和符号)或为null，则初始化后不能更改该值。

{
    const a = 2;
    a = 3; // Uncaught TypeError: Assignment to constant variable.
}

While if it points to an object, the properties can be modified/added/deleted. The only thing that cannot be modified is the memory address of the object to which the constant is pointing.

如果它指向一个对象，则可以修改/添加/删除属性。 唯一不能修改的是常量指向的对象的内存地址。

{
    const a = {};
    a.foo = "hello";
    a.bar = "world";
    console.log(a.foo); // prints out hello
    console.log(a.bar); // prints out world
}

范围 (Scope)

Like let, const constants are block scoped.

像let一样，const常量是块范围的。

{
    const a = 2;
    console.log(a); // prints out 2
}console.log(a); // Uncaught ReferenceError: a is not defined

In addition, browsers don’t allow redeclaration of constant in the same block scope, even in Chrome and Microsoft Edge.

此外，即使在Chrome和Microsoft Edge中，浏览器也不允许在同一块范围内重新声明常量。

吊装 (Hoisting)

Like let, const constants are not available before declaration, i.e. browser will report an error if one use it before declaration.

像let一样，const常量在声明之前不可用，即如果在声明之前使用const常量，浏览器将报告错误。

翻译自: https://medium.com/@wenhe.qi/understanding-var-let-and-const-with-examples-81dd3ae78c2a

var和let和const