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