01、let、const

2024-02-03 11:11:28

ECMAScript 与 JavaScript 的关系

ES是JS的标准，JS是ES的实现。

浏览器对新标准的支持

http://kangax.github.io/compat-table/es6/

let

let与var的区别

1、let声明的变量，只在当前(块级)作用域内有效。

//块级作用域通俗的说就是 { } 包起来的内容。但是当声明是对象时，{}里面就不是块级作用域，而是对象
//记得es5是没有块级作用域的
//for循环中()为一块级作用域，{}为二块级作用域，一块级包含二块级。

2、let声明的变量不能被重复命名

//var的时候
var a= 1;
var a = 2;
//那么a最后就是2

//let的时候
let a= 1;
let a = 2;
//这样会报错，因为let的变量只能声明一次

3、不存在变量提升

console.log(a); //这里a是可以获取到的，不过是undefined。let就没有这个特性
var a = 123;

4、暂存死区

//块级作用域中存在let、const声明的变量，这个变量一开始就会存在封闭的作用域
let a = 1;
{
    console.log(a);
    let a = 2;
}
//这样就会报错

常见小例子

生成10个按钮，点击对应的按钮，弹出对应的 1-10 的数字

var 方式

//自执行的函数会形成一个独立的函数作用域for(var i = 1; i <= 10; i++){
    (function(i){　　//这个i是接收传进来的i
        var btn = document.createElement('button');
        btn.innerText = i;
        btn.addEventListener('click',function(){
            alert(i);
        },false)
    })(i)   //这个i是for那里的i。从for传给匿名函数
}

let方式

for(let i = 1; i <= 10; i++){
    var btn = document.createElement('button');
    btn.innerText = i;
    btn.addEventListener('click',function(){
        alert(i);
    },false)
    document.body.appendChild(btn);
}

const

const是用来声明常量的，且声明时必须赋值。

特性与let相同，不能重复声明，不存在提升，只在当前作用域有效

引用类型常量（修改）

常量的值是不可改变的，但当常量为引用类型的时候就可以更改（但不是完全地更改），如

const xiao = {     //声明一个引用类型的常量
    name : 'xiao',
    age : 18
}
console.log(xiao.name);  //输出引用类型的值

xiao.name = 'haha';      //更改引用类型的值
console.log(xiao.name);     //更改成功

xiao = {}; //清空里面的数据就会失败。
//说明const声明的的常量，只能保证引用类型的地址不发生变化，但是里面的数据是可以变化的。

再如

const abb = []; //声明一个引用类型的常量

abb.push(2);    //给该里面填充数据

console.log(abb); //填充成功

引用类型常量（防止修改）

防止常量为引用类型时被修改，如

const xiao = {
    name : 'xiao',
    age : 18
}
Object.freeze(xiao);  //用Object.freeze将常量包起来。只要包起来了里面的值就不能增加、修改、删除等操作

console.log(xiao.name); //没修改时的值

xiao.name = 'haha';      //这样进行修改，不会报错也不会成功
console.log(xiao.name);     //这里的值也还是没修改的值

xiao.address = 'beijing'; //给引用类型的常量添加方法，不会报错也不会成功
console.log(xiao.address);  //xiao.address的值为undefined

再如

const abb = [];

Object.freeze(abb);

abb.push(2);  //这里就会报错了，原因看上个例子

console.log(abb);

//Object.freeze(a); //a对象里面的值不能扩展、修改、删除等等

es6之前声明常量方法

第一种

var a = 123; //假装是常量的方式

第二种

var b = {}; 

b.name = 'xiaoming';  

//给对象添加常量。这个常量可以被修改、删除等操作

第三种

//还有一个添加常量的方法。这个常量可以控制是否可写、可读

Object.defineProperty(b,'age',{  
//第一个参数是表示要操作的对象。当然可以也可以为window，这样就会是一个全局的常量了
//第二个参数是属性名
//第三个参数是{}，里面是描述的操作
    
    value : '18',    //value后面是 属性值    
    writable : false;  //这里表示不可写，就是只读的意思
})

上面第三种方法可以保证变量不被修改，但是对象还是可以正常的扩展的，如

b.sex = 'nan';
console.log(b.sex); //扩展是可以成功的

要想对象不能扩展，就得这样：

Object.seal(b); //表示b对象不能被扩展。位置放在刚定义完对象的时候

//Object.seal(b); //b对象里面的值不能阔在，但是可以修改。

第三种方法 + Object.seal() = Object.freeze()

.......

码农公寓