初探ES6第一天-变量的声明方式

前端小乌龟
301 阅读2分钟

一、什么是ES6

ES全称是ECMAScript(ECMA全称称欧洲计算机制造商协会)，其实ECMAScript是一种标准。想必大家对JavaScript肯定不陌生，其实javascript就是ECMAScript的一种实现，是遵循其规范而设计的一种语言。

ES版本是以年份命名的，比如ES2015，ES2016等等，其中ES6就是ES2015,在历年更新中，尤其以ES6版本更新内容最大，之后逐年虽在更新，但是更新幅度较小。所以人们常以ES6代表ES2015之后的所有更新。ES版本每年6月份发布一次，目前最新已经来到了ES2021（ES11）。

二、变量的声明方式

2.1 var

  • 这是ES5声明变量的方式
  • 下面是我们最常用的使用方式

image.png

  • 不知道大家有没有见过这种，这种该如何解读呢？

image.png

这种方式代表在全局对象window下定义一个属性b,赋值为6。我们可以采用delete方法来验证。首先要明确，delete只能用于删除对象的属性。

image.png

  • 还有一种情况

image.png

是不是非常疑惑，为什么window.a也能被正常打印出来。其实，这正式JS这门语言设计的最大败笔之一。他把顶层对象的属性和全局变量进行了挂钩。这样做其实是很不友好的。比如说，当我们项目足够复杂时，就会有很多全局变量，这样就造成了全局变量污染。但是，为了解决这一问题，ES6中新加入了let.

2.2 let

  • let定义的变量不属于顶层对象window

image.png

  • 不允许重复声明

image.png

  • 不存在变量提升

image.png

let就会避免这种情况

image.png

  • 暂时性死区

image.png

  • 具有块级作用域

image.png

image.png

  • 经典面试题

image.png

image.png

2.3 const

const和let的区别就是，let定义变量，而const是用来遍历常量

  • ES5如何定义常量

image.png

  • ES6定义常量

image.png

  • 不属于顶层对象window
  • 块级作用域
  • 不具有变量提升
  • 暂时性死区
  • 不允许重复声明

同时还要注意，const声明引用数据类型时，是可以被改变的

image.png

我们可以是用Object.freeze来冻结住对象，但是只能冻结浅层次，不能深层次冻结

image.png

avatar
文章
阅读
粉丝