ES6系列 let与const

杨大侠
308 阅读5分钟

下了个狠心准备把 ES6重新撸一遍，记上笔记，准备写一个系列可能我写的文章比较搓，但是我只是记录一下我工作中的点点滴滴，如果写的知识点不是太正确，大家不要喷我，给我指出来错误帮助我改正，也是你提升自己加深印象的一种方式 谢谢。

扫盲为主，科普为辅

比如以前的 var 变量

var price = 100；
var price = 200；
console.log(price) // 200

上面的代码出现了一个问题， 第二个 price 覆盖了第一个 price 的值，但是这样的话也为对代码造成了一些不必要的隐患。

1.let

基本用法： ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

if(true){    
    var b = 1;    
    let a = 2;
}
console.log(b); //1
console.log(a); // Uncaught ReferenceError: a is not defined

大家看上面的代码，代码在 if 代码块之中，分别用 let 和 var 声明了两个变量。然后在代码块之外调用这两个变量，结果 let 声明的变量报错，var声明的变量返回正确的值。

这就告诉我们，let 声明的变量只在它所在的代码块有效，俗称Block Scope。

for 循环就很适合 let 变量

for(let i = 1; i >= array.length; i++){ 
   const element = array[i];
}
console.log(i) // Uncaught ReferenceError: i is not defined

上面代码中，let 声明计数器 i 只在for循环内有效，在循环外引用就会报错。

for(var i = 1; i >= 10; i++){
}
console.log(i) // 10

上面代码中，变量 i 是 var 命令声明的，在全局范围内都有效，所以全局只有一个变量 i 。

每一次循环，变量i的值都会发生改变，而循环执行完毕 console.log(i)，里面的 i 就是全局的 i 。所以我们访问的i，是一个全局变量，也就是 10。

1.1 不存在变量提升

var 命令会发生 “变量提升”，即变量可以在声明之前使用，值为undefined。这种套路是有些奇怪的，按照一般的套路，变量应该在声明语句之后才可以使用。

为了纠正这种错误的套路，let 命令改变了语法行为，所声明的变量一定要在声明后使用，否则报错。

//var 的情况
console.log(banana); // undefined
var banana = 20;


// let 的情况
console.log(apple) //Uncaught ReferenceError: apple is not defined
let apple = 4999;

if (apple > 5000){    
    let apple = 6666;
}
console.log(apple); // 4999

上面代码中，变量 branana 用 var 命令声明就会出现变量提升，即 script 脚本开始运行时，变量 branana就立即创建放入内存，但没有值。

所以就会输出 undefined 。变量 apple 用 let 命令声明，不会发生变量提升。这说明声明变量之前，变量 apple 是不存在的，如果这时用到它，就会抛出错误。

1.2 不允许重复声明：

let 不许在相同作用域内，重复声明同一个变量。

function test() {  
    let banana = 10;  
    var banana = 1;
}
// Uncaught SyntaxError: Identifier 'banana' has already been declared


// 报错function 
function test() {   
    let apple = 4999;  
    let apple = 5999;
}
// Uncaught SyntaxError: Identifier 'apple' has already been declared

如上所述所示，不能在函数内部重新声明参数。

function test(apple) {  
    let apple= 10;
}
// Uncaught SyntaxError: Identifier 'apple' has already been declared

function test(apple) {  
    if(true){    
        let apple;    
        console.log(apple) 
    } 
    apple = 4999; 
    console.log(apple)
}
test(10)

这样就不报错，大家可以分析一下，函数 test 是一个 Block Scope， 实参传入 apple 在函数 test内部何处都可以使用，你也可以修改她，在判断里面又是一个出现一个apple 又是一个Block Scope，所以两个 Block Scope 互不相干，各扫门前雪。

2.const

const 声明一个只读的常量。只要声明，常量的值就不能改变。

 const apple = 123; 
 console.log(apple);//123 
 //Uncaught TypeError: Assignment to constant variable 
 apple = 1;

上面代码改变常量的值会报错, const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即赋值，不能留到以后赋值

const apple; //Uncaught SyntaxError: Missing initializer in const declaration 上面代码，对于const来说，只声明不赋值，就会报错。

const的作用域与let命令相同：只在声明所在的块级作用域内有效。

if（true）{    
    const apple = 123;
}
console.log(apple)//Uncaught ReferenceError: apple is not defined

const命令声明的常量也不存在变量提升，只能在声明的位置后面使用。

if（true）{    
    console.log(apple) //Uncaught ReferenceError: apple is not defined    
    const apple = 123;
}

上面代码在常量 aple 声明之前就调用，结果报错。 const声明的常量，也与let一样不可重复声明。

var name = "jieke";
let age = 25;
// 以下两行都会报错
const message = "lusi!";
const age = 30;

const实际上保证的，并不是变量的值不得改动，而是变量指针指向的栈区内存地址不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在指针指向的栈区内存地址

【第14期】JS基础心法 深浅拷贝

但对于对象和数组，变量指向的堆区内存地址保存的只是一个指向堆区内存的指针，const只能保证这个指针是固定的，至于它指向的堆区内存地址数据结构是不是可变的，就不受控制。

const fruits = {};
fruits[`apple`] = 4999;
console.log(apple);
// 将 fruits 指向另一个对象，就会报错
fruits = {}; // Uncaught TypeError: Assignment to constant variable.

上面代码，常量 fruits 储存的是一个堆区内存地址，指针指向一个堆区内存地址。不可变的只是这个堆区地址，不能把fruits指向堆区内存地址，但对象本身是可变的，所以可以为其添加新属性。

微信识别二维码，一起来写文章呀。

avatar
文章
阅读
粉丝