JavaScript:const,let&var

2021-04-06

首先,const、let和var是怎么回事?

你可能是其中一种情况的见证人-let和/或const被替换为var,或者let和const同时在同一代码中使用,或者更令人困惑的是,let、const和var同时使用!?

嘿,别担心,我抓到你了。让我们一起扫除这场雾:

const

优点:

如果您正在设置一个不打算更改的变量,那么这将非常有用。

保护并防止变量重新分配。

在编译语言中,代码的运行时效率得到了提高,因此与使用纯“var”相比,总体性能得到了提升。

警惕

  • 在Chrome和Firefox中正常工作。但不是在Safari中。相反,它作为一个正态变量,就像它是var一样,因此可以重新分配。
  • 一般来说,编程约定是在所有caps中设置名称,以向阅读您的代码的其他人显示const值的值不应更改-您将看到小写和caps const编码的情况。只是一些需要注意的事情。

例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// sometimes used as lowercase as when setting up your server.
const express = require(‘express’);
const app = express();

// sometimes uppercase.
const DONT_CHANGE_ME_MAN = “I ain’t changing for no one, man.”

// change attempt #1
const DONT_CHANGE_ME_MAN = “I told I ain’t changing for no one.”
// change attempt #2
var DONT_CHANGE_ME_MAN = “Still not changing, bro.”
// change attempt #3
DONT_CHANGE_ME_MAN = “Haha, nice try, still not happening.”

// same error for all 3 attempts, const value stays the same:
Uncaught TypeError: Identifier ‘const DONT_CHANGE_ME_MAN’ has already been declared.

// DONT_CHANGE_ME_MAN still results in “I ain’t changing for no one, man.”

这有道理吗?

let

来自Ruby或Python背景的学生和经验丰富的程序员将喜欢let,因为它强制块范围!

当您迁移到ES6国家时,您可能会注意到自己正在适应一个新的let变化来接管您的编码风格,并且发现自己不再使用var的可能性。现在让它变得更加清楚,你的价值观来自何方,而不必担心它们被提升!

优点:

  • 块作用域中,变量的值与当前作用域中的值完全相同,并且它们不像var那样被提升。
  • 如果你不想让你的值被覆盖,比如在for循环中,这会非常有用。

警惕:

  • 您可能并不总是想使用let。例如,在变量不容易阻塞的情况下,var可能更方便。

例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// When using var what do we get?
var bunny = "eat carrot";

if(bunny) {
var bunny = "eat twig";
console.log(bunny) // "eat twig"
}

console.log(bunny)// "eat twig"

// When using let what do we get?
let bunny = "eat carrot";

if(bunny) {
let bunny = "eat twig";
console.log(bunny) // "eat twig"
}

console.log(bunny)// "eat carrot"

你看到区别了吗?都是关于范围的。使用var,它可以访问其父/外部作用域,因此可以更改if语句中的值。与let不同,let是块作用域,只能在当前作用域内进行更改。

让我们向前看。这就像一个人直接面对你说话,告诉你他们当时需要什么,而var也会这样做,但偶尔可能会给出意想不到的答案-由于提升和访问外部范围变量。视情况而定,任何一个都可能对你有利。

关于let好处的另一个很好的例子:

假设你想创建一个30个div的游戏板,每个div都有自己的价值。如果用var来实现这一点,每次迭代都会覆盖i索引——每个div的值都是30!哎呀!

另一方面,使用let,每个div都有自己的值,因为每个迭代都维护自己的div范围!看看区别:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// with var. See example live: <https://jsfiddle.net/maasha/gsewf5av/>
for(var i= 0; i<30; i++){
var div = document.createElement('div');
div.onclick = function() {
alert("you clicked on a box " + i);
};
document.getElementsByTagName('section')[0].appendChild(div);
}

// with let. See example live: <https://jsfiddle.net/maasha/xwrq8d5j/>
for(let i=0; i<30; i++) {
var div=document.createElement(‘div’);
div.onclick = function() {
alert("you clicked on a box " + i);
};
document.getElementsByTagName('section')[0].appendChild(div);