ES6基础入门之let、const

水深无声 2021-08-19 21:56 381阅读 0赞

![file][]

作者 | Jeskson来源 | 达达前端小酒馆

首先呢？欢迎大家来学习ES6入门基础let，const的基础知识内容。初始ECMA Script6。

ESMAScript与JavaScript的关系：

ES是JS的标准（ES是对ECMAScript的缩写）JS是ES的实现

![file][file 1]

![file][file 2]

ESMAScript的部分历史：

1998-06 ES2发布，1999-12 ES3发布，成为js的通行标准

2007-10 ES4草案发布

2008-07 将ES4小部分内容提取，发布为ES3.1

2009-12 ES5发布

学习let和const关键字，块级作用域

let与块级作用域

变量声明：var，直接使用

window.location.href === location.href // true

let与var的主要区别

let声明的变量只在当前块级作用域内有效，let声明的变量不能被重复声明，不存在变量的提升。

ES6之前的作用域

全局作用域函数作用域eval作用域

块级作用域

就是一对花括号的区域

{...}
    
    if() {}
    switch() {}
    for() {}
    try {} catch (err) {}
    {}

块级作用域可以嵌套

{
     {
      }
    }

代表对象，不是块级作用域：

var da = {
     name: dada,
    }

let只作用在当前块级作用域内

{
     var a = 1;
     let b = 2;
     }
     console.log(a);
     console.log(b);

{ 
     // 1
     let a = 1;
     {
      console.log(a); // 1
      let b = 2;
     }
     console.log(b); // 错误
    }

for(let i = o; i<3; i  ) {
    };
    console.log(i);

使用let或者const声明的变量，不能在被重新赋值

let不存在变量提升

console.log(da);
    var da = 'dada';
    
    console.log(dada);
    let dada = 'dada';

暂时性死区

var da = '1';
    {
     console.log(da);
     var da = '2';
    }
    console.log(da);

let da = '1';
    {
     console.log(da);
     let da = '2';
    }
    console.log(da);

面试题：

生成10个按钮，点击弹出1-10：

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

const常量，不可改变的量

常量是必须要赋值的，否则报错

与let相似

不能重复声明，不存在变量提升，只在当前块级作用域内有效

常量是不可改变的？

![file][file 3]

一旦声明常量，就不能再改变？

常量为引用类型的时候，不能保证不可变

解决引用类型，不可保证不可变

const只能保证地址的指向不改变，但是不能保证地址上的值不能改变

![file][file 4]

怎么去防止常量去引用类型的时候能被修改的情况

Object.freeze(); // 冻结

![file][file 5]

es6之前声明常量

var Da = '123';
    
    Object.defineProperty();

![file][file 6]

![file][file 7]

![file][file 8]

![file][file 9]

![file][file 10]

Object.seal(); // 防止对象被扩展

![file][file 11]

![file][file 12]

![file][file 13]

![file][file 14]

![file][file 15]

hasOwnProperty()自身的属性

![file][file 16]

![file][file 17]

seal()，defineProperty()，hasOwnperty()，freeze()。

Object.freeze() 方法可以冻结一个对象。

一个被冻结的对象再也不能被修改；冻结了一个对象则不能向这个对象添加新的属性，不能删除已有属性，不能修改该对象已有属性的可枚举性、可配置性、可写性，以及不能修改已有属性的值。freeze() 返回和传入的参数相同的对象。

const obj = {
      prop: 42
    };
    
    Object.freeze(obj);
    
    obj.prop = 33;
    // Throws an error in strict mode
    
    console.log(obj.prop);
    // expected output: 42

hasOwnPreperty()剔除原型链上的属性，如果是true,说明不是原型的属性

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。

obj要在其上定义属性的对象。prop要定义或修改的属性的名称。descriptor将被定义或修改的属性描述符。

Object.seal()方法封闭一个对象，阻止添加新属性并将所有现有属性标记为不可配置。

const object1 = {
      property1: 42
    };
    
    Object.seal(object1);
    object1.property1 = 33;
    console.log(object1.property1);
    // expected output: 33
    
    delete object1.property1; // cannot delete when sealed
    console.log(object1.property1);
    // expected output: 33

推荐阅读

1、你知道多少this，new，bind，call，apply？那我告诉你

2、为什么学习JavaScript设计模式，因为它是核心

3、一篇文章把你带入到JavaScript中的闭包与高级函数

4、大厂HR面试ES6中的深入浅出面试题知识点

5、一篇JavaScript技术栈带你了解继承和原型链

关于目前文章内容即涉及前端，PHP知识点，如果有兴趣即可关注，很荣幸，能被您发现，真是慧眼识英！也感谢您的关注，在未来的日子里，希望能够一直默默的支持我，我也会努力写出更多优秀的作品。我们一起成长，从零基础学编程，将 Web前端领域、数据结构与算法、网络原理等通俗易懂的呈现给小伙伴。分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯。

###  ###

若本号内容有做得不到位的地方（比如：涉及版权或其他问题），请及时联系我们进行整改即可，会在第一时间进行处理。

###  ###

## 请点赞！因为你们的赞同/鼓励是我写作的最大动力！ ##

### 欢迎关注[达达][Link 1]的CSDN！ ###

**这是一个有质量，有态度的博客**

![7d927f18ebd05ea1d505a572393fbc87.jpg][]

[file]: /images/20210724/bcde77dc99074b4c9142932888929a8f.png
[file 1]: /images/20210724/1e4e762d780947f48b19f4d6b1fe37c7.png
[file 2]: /images/20210724/f842e5f017b3486d8130abcfed8d0f08.png
[file 3]: /images/20210724/5b2470674ef34d4fbe2be97b78ebf237.png
[file 4]: /images/20210724/c20260e5892c4b64b12eae3ef8c6a0e3.png
[file 5]: /images/20210724/3487714fdb7246479225013ca7475e43.png
[file 6]: /images/20210724/57759f82a3824da485b734de48d04ad6.png
[file 7]: /images/20210724/4575031fb0464bd3a209115c6ea4343c.png
[file 8]: /images/20210724/00740b7f61e34beebb478b3c4e6477e4.png
[file 9]: /images/20210724/322d2fa322f14473b693ac424b010f61.png
[file 10]: /images/20210724/6b34341bc6b043d4a2e2bdc094dbde9a.png
[file 11]: /images/20210724/3bf54cb827204080895d13f44317dd6b.png
[file 12]: /images/20210724/27faee4232db41b6932c6dd1235769d9.png
[file 13]: /images/20210724/6344701dffc84381b2db7f2467a28ed1.png
[file 14]: /images/20210724/587b89e89ce1497dbb57033ae4f55006.png
[file 15]: /images/20210724/424db2985fbf48619cd0dafa51f20f23.png
[file 16]: /images/20210724/97624c2c5b9c4730845b1e139d2131b5.png
[file 17]: /images/20210724/b9856b25bd0644c6bf19032996ce5c54.png
[Link 1]: https://blog.csdn.net/qq_36232611
[7d927f18ebd05ea1d505a572393fbc87.jpg]: /images/20210724/262689979ace4b79b351c7c8b7843e0c.png