by Mariya Diminsky

通过玛丽亚·迪明斯基(Mariya Diminsky)

学习ES6 The Dope Way Part I：const，let＆var (Learn ES6 The Dope Way Part I: const, let & var)

Welcome to Part I of Learn ES6 The Dope Way, a series created to help you easily understand ES6 (ECMAScript 6)!

欢迎来到学习ES6的“涂料方式”第一部分，该系列旨在帮助您轻松理解ES6(ECMAScript 6)！

First up, what’s the deal with const, let, and var?

首先，用const ， let和var处理什么？

You’ve probably been a witness to one of these situations — let and/or const being substituted for var, or let and const being used in the same code at the same time, or even more perplexing, let, const AND var all being used at the once!?

您可能是这些情况之一的见证者– let和/或const代替var ，或者let和const同时在同一代码中使用，或者更加困惑， let ， const AND var全部被一次使用！！

Hey no worries, I got you. Let’s clear this fog together:

嘿，不用担心，我明白了。 让我们一起清除雾气：

const (const)

Benefits:

好处：

• Useful if you’re setting a variable that you don’t plan on changing.如果您要设置一个不打算更改的变量，则很有用。
• Protects and prevents your variables from reassignment.保护并防止变量被重新分配。

• In compiled languages, there is an increase in runtime efficiency of your code and thus an overall performance boost vs using plain ‘ol var.

  在编译语言中，代码的运行时效率提高了，因此与使用纯'ol var相比 ，整体性能得到了提高。

Beware:

谨防：

• Works as it should in Chrome and Firefox. But not in Safari. Instead it acts as a normal variable, as if it were var, and thus can be reassigned.

  可以在Chrome和Firefox中正常运行。 但不是在Safari中。 相反，它作为一个正常的变量，就好像它是变种，因此可以重新分配。

• Generally there is programming convention to set the name in all caps to show others reading your code that the value of the const value should not be changed — you will witness both lowercase and caps const coding situations. Just something to be aware of.

  通常，有一种编程约定来设置所有大写字母的名称，以向其他人显示您的代码中const值的值 不应更改-您将目睹小写和大写const编码情况。 只是要注意的事情。

Examples:

例子：

// 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.”

Does that make sense?

那有意义吗？

Think of const, like the constant sea — never-ending, never-changing…

就像不断的海洋一样，想想const- 永无止境，永不改变……

Think of const, like the constant sea — never-ending, never-changing…

就像不断的海洋一样，想想const- 永无止境，永不改变……

让 (let)

Students and experienced programmers coming from a Ruby or Python background will love let, as it enforces block scoping!

来自Ruby或Python背景的学生和经验丰富的程序员会喜欢let，因为它强制执行块作用域！

As you migrate over to ES6 country, you may notice yourself adjusting to a new let metamorphosis taking over your coding style, and find yourself less likely to using var anymore. With let it’s so much more clear now where your values are coming from without worrying about them being hoisted!

当您迁移到ES6国家时，您可能会发现自己已经适应了新的let变形，从而接管了您的编码风格，发现自己不再使用var了。 现在， 让我们更加清楚地知道您的价值来自何处，而不必担心它们会升值！

Benefits:

好处：

• Block-Scoping, your variable’s values are exactly as they should be in that current scope and they are not hoisted as with var.

  块作用域，变量的值与当前范围内的值完全相同，并且不像var那样悬挂。

• Super useful if you don’t want your values to be overwritten, like in a for loop.如果您不希望覆盖值(例如在for循环中)，则超级有用。

Beware:

谨防：

• You may not always want to use let. For example in situations where variables aren’t as easily block scoped, var may be more convenient.

  您可能并不总是想要使用let 。 例如，在变量不那么容易限制范围的情况下， var可能会更方便。

Examples:

例子：

// 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"

Do you see the difference? It’s all about scope. With var, it has access to it’s parent/outer scope and thus can change the value inside the if statement. Unlike let which is block-scoped and can only be altered within the current scope it’s in.

你看得到差别吗？ 这与范围有关。 使用var ，它可以访问其父级/外部范围，因此可以更改if语句中的值。 与let不同， let是块作用域的，只能在它所在的当前范围内更改。

let is super straight-forward. It’s like a person who speaks straight to your face and tells you exactly what they need right then and there while var does this as well but may occasionally reply with unexpected answers — due to hoisting and access to outer scope variables. Depending on the situation either one may be in your favor.

let是超级直截了当的。 这就像一个人直面你的脸，然后告诉你他们到底需要什么，而var也这样做，但是由于提升和访问外部范围变量，有时可能会以意外的答案答复。 视情况而定，一个人可能都对您有利。

Another great example on the benefits of let:

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

Say you want to create a game board of 30 divs and each one has their own value. If you were to do this with var, the i index would be overwritten for every iteration — every single div would have the value of 30! Yikes!

假设您要创建一个30个div的游戏板，每个游戏板都有自己的价值。 如果使用var进行此操作，则每次迭代都会覆盖i索引-每个div的值都为30！ kes！

On the other hand, with let, every div has its own value, as its own div scope is maintained for each iteration! See the difference:

另一方面，使用let ，每个div都有自己的值，因为每次迭代都会维护自己的div范围！ 看到不同：

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

Congrats! You’ve made it through Learn ES6 The Dope Way Part I and now you know the main differences between const, let and var! Woohoo! You rockstar, you :)

恭喜！ 您已经通过Learn ES6 The Dope Way Part I取得了成功，现在您知道const，let和var之间的主要区别！ hoo！ 你摇滚明星，你:)

Keep your knowledge updated by liking and following as more Learn ES6 The Dope Way is coming soon to Medium!

通过喜欢和关注更多来保持您的知识更新。 了解ES6涂料之路即将走向中等！

Part I: const, let & var

第一部分：const，let和var

Part II: (Arrow) => functions and ‘this’ keyword

第二部分：(箭头)=>函数和“ this”关键字

Part III: Template Literals, Spread Operators & Generators!

第三部分：模板文字，传播运算符和生成器！

Part IV: Default Parameters, Destructuring Assignment, and a new ES6 method!

第四部分：默认参数，解构分配和新的ES6方法！

Part V: Classes, Transpiling ES6 Code & More Resources!

第五部分：类，转译ES6代码及更多资源！

You can also find me on github ❤ https://github.com/Mashadim

您也可以在github❤https ://github.com/Mashadim上找到我

翻译自: https://www.freecodecamp.org/news/learn-es6-the-dope-way-i-const-let-var-ae828580472b/