const & let

发布时间:2019-08-11 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了const & let脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

前世

const & let 还未出现前,JS 的世界一直是 var的统治

var:在JS中用于变量声明的关键字。

特点:

  1. 变量提升
  2. 只有函数作用域或者全局作用域,没有块级作用域
  3. 重复声明变量
  4. 循环体重的闭包会出现问题

    …….

变量提升

function test(tag) {
    console.LOG(a,b);   // a,b在下面声明,但是会打印出undefined,不会报错
    
    if(10 >= tag) {
        var a = tag + 1;
    } else {
        var b = tag - 1;
    }
}

在浏览器预解析机制中,加载函数的时候,此时的作用域为函数作用域,函数作用域中JS会先将所有的声明置顶。

function test(tag) {
    var a,b;            // 将声明置顶,但是赋值并不会
    console.log(a,b);   // a,b在下面声明,但是会打印出undefined,不会报错
    
    if(10 >= tag) {
        var a = tag + 1;
    } else {
        var b = tag - 1;
    }
}

只有函数作用域以及全局作用域,没有块级作用域

function test(tag) {
    console.log(a,b);   // a,b在下面声明,但是会打印出undefined,不会报错
    
    if(10 >= tag) {
        var a = tag + 1;
    } else {
        var b = tag - 1;
    }
    
    console.log(a);        // 9
}

test(8)  // 9

按照其他语言规则 if 是一个程序块,在 if 中声明的变量作用域只能在 if 中,但是 JS 因为只有函数作用域和全局作用域,所以才会导致在 if 判断外还可以访问 if 的变量

重复声明变量

var a = 1;
var a = 2;

console.log(a); // 2

在使用var的时候允许重复声明变量也是令人头痛的事情,也许因为这个机制,可能就会出现bug

循环体重的闭包会出现问题

var arr = [];
for(var i = 0; i < 3; i++) {
    arr.push(function () {
        return i;
    })
}

for(var j = 0; j < 3; j++) {
    console.log(arr[j]());    // 3,3,3
}

将var -> let
将会打印出 0,1,2

因为缺乏块作用域所以导致问题出现

今生

如今距离ES6规范的出现已经过去了4年多了,在项目中也早已开始大量使用ES6规范编写代码了。var也不再是JS世界的唯一了,

JS 世界出现了const & let

const & let 的出现给JS带来了块级作用域,解决了变量提升,禁止了重复声明变量,让JS少了很多疑惑的地方。

let & const

相同点:

  1. 具有块级作用域
  2. 禁止重复声明变量
  3. 不会产生变量提升

区别:

let

使用let声明的基本类型变量是可以改变

let a = 12;
a = 13;
return a;    // 13

使用let声明引用类型的变量是可以改变引用的

let info = {
    name: "ming995",
    age: 25,
    sayHi: function() {
        console.log(`Hi I'm ${this.name}`)
    }
};

let heinfo = {};

heInfo = info;

heInfo.name = "Jack";

console.log(heInfo);

const

使用const声明的基本类型变量是不可以改变值

const a = 13;
a = 14;
return a; // 报错

使用const声明引用类型的变量是不可以改变引用的

const info = {
    name: "ming995",
    age: 25,
    sayHi: function() {
        console.log(`Hi I'm ${this.name}`)
    }
};

const heInfo = {};

heInfo = info;        // 报错
    
heInfo.name = "Jack";

console.log(heInfo);

但是我们可以操作const声明的引用类型的属性值

const info = {
    name: "ming995",
    age: 25,
    sayHi: function() {
        console.log(`Hi I'm ${this.name}`)
    }
};

info.language = "js";

console.log(info);

总结

之前对于const的理解有偏差,所以就写这篇文章。var时代已经过去了,ES6各种特性用起来。

脚本宝典总结

以上是脚本宝典为你收集整理的const & let全部内容,希望文章能够帮你解决const & let所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。