ES6 Syntax: difference var, let, const's Detailed

I beg you give attention to it! Micro-channel public number:! Full stack study notes every day to share new knowledge!
Today said es6 grammar, the most basic is var, let, const usage with the difference, let's look at love and hatred between them.
First of all say var, as long as this is learned js all know, it is used to declare a variable, but it will encounter some problems in development, more difficult to resolve. Let's look at the following code:

var str="hello world";function testVar(){
    var str="hello";
}
testVar();
console.log(str);
这段代码的结果是 "hello world",这说明在var 申明的变量,即使是同样的名字,在不同的块中,在外层块中的变量优先级更高,也就是说,在外层优先使用并且只能使用当前块中的变量;而在他的内部块中的变量,比如说这个函数里面的str,他其实也是优先使用块内的str变量,会屏蔽掉外面的str变量,这是一点。再来看看下面一段代码
function variableHoisting(){
    if(condition){
       var test="hello javaScript";
    }else{
        console.log(test)
        //这里可以访问到test,但是它是undefined,因为初始化为它赋值成了undefined
    }
    //这里也可以访问到test
}
可能你会感到奇怪,我的var 申明的变量在if 代码块里面,为什么我的else里面也能访问呢,其实上面这段代码相当于下面这段代码
function variableHoisting(){
    var test;
    if(condition){
        test="hello javaScript";
    }else{
        console.log(test)
        //这里可以访问到test,但是它是undefined,因为初始化为它赋值成了undefined
    }
    //这里也可以访问到test
}
现在知道了吧?这就是所谓的变量提升,我在if里面申明的变量,其实浏览器在预解析的时候就对var ,以及function关键字的变量或者方法进行了处理,处理后的代码就是上面这段代码(当然,我之前讲过一篇函数声明与函数表达式的区别,你可以看看,你会知道更多。)看到这里,也许你不会感觉var 有什么不好的地方,再往下看看:
var funcs = [];
for (var i = 0; i < 10; i++) {
    funcs.push(function() {
     console.log(i); 
    });
}
funcs.forEach(function(func) {
    func(); // 输出数值 "10" 十次
});
可能你想的是输出0,1,2,3,4,5,6,7,8,9但是这不是正确答案,这只能输出10个10,为什么呢?因为循环完成过后,i已经是10了,再次调用的时候,这个i值在每次迭代过程中共享了。
下面我们就来引入一下let,以及const。let 也是用来申明变量的,但是他申明的变量是块级作用域,什么意思呢,看下面
function testLet(){
    if(condition){
        let str="hello let"
    }else{
        //这里访问不到str   
    }
    //这里也访问不到str
}

Read the above, you probably know what a block-level scope, that is a big thing in parentheses, brackets is a piece. Variables declared by let is not said before lifting the said variable, so in the external block access variables which are declared not let the. In this way, said before var defective block of code through which small changes can be normal output 0 ... 9, you look at

var funcs = [];
for (let i = 0; i < 10; i++) {
    funcs.push(function () {
        console.log(i);
    });
}
funcs.forEach(function (func) {
    func(); // 输出数值 0-9
});
这就是let,与var的一个小区别,当然如果说你申明变量的时候不指名是用的var,还是let,编译的时候会将这个变量解析为var申明的变量。

不管是var,还是let,他们是不能重复申明的,比如像下面这样
var str="var";
let str="let";

This is being given, compiled, it can not be redefined.

然后就是const了,这个其实就是常量的单词的英文缩写(constant),没错,这是用来申明一个常量的。什么事常量呢,顾名思义,就是一旦赋值就不能再改变了。比如说:
const MAX=3.1415926;
MAX=3.14;

This does not work, will complain, constants can not be changed. Const take a look at the cycle in the most basic cycle for -i inside, he was being given, and it will run once after the error, but the for-in loop which he is not being given, of course, of for-in inside the loop will not

var funcs = [],
    object = {
        a: true,
        b: true,
        c: true
    };
// 不会导致错误
for (const key in object) {
    funcs.push(function () {
        console.log(key);
    });
}
funcs.forEach(function (func) {
    func(); // 依次输出 "a"、 "b"、 "c"
});

This is not being given, to see what is why?

Above that, the variables declared const can not be changed, but we do try to declare an object, and then change the value of the property of the object inside.

const object={
    name:"学习笔记",
    age:18
}
console.log(object.name)
​
object.name="hello world"
console.log(object.name)

This code first prints out "the study notes," the second will print out "hello world", why? In this reason, in fact, is not the object code to change the object variable, but the properties of this variable, know this is not difficult to understand why the for-in, for-of loop inside, const does not complain, right? If it helps you, remember to point followers Oh, if you find a mistake in the text, remember me point it out.
Micro-channel public number
Full stack study notes

Released five original articles · won praise 2 · Views 447

Guess you like

Origin blog.csdn.net/enxiaobai123/article/details/104786071