在ES5中,变量声明只有var和function以及隐式声明三种,在ES6中则增加了let、const、import和class四种。

1. let

1.1 块级作用域

let声明的变量的作用域是块级作用域(这个特性有点类似于后台语言),ES5 并没有块级作用域,只有函数作用域和全局作用域。

{ let a = 'ES6'; var b = 'ES5';}console.log(b) // ES5 console.log(a) // ReferenceError: a is not defined.

那么let的块级作用域有什么好处呢?

let非常适合用于 for循环内部的块级作用域。JS中的for循环体比较特殊,每次执行都是一个全新的独立的块作用域,用let声明的变量传入到 for循环体的作用域后,不会发生改变,不受外界的影响。看一个常见的面试题目:

for (var i = 0; i <10; i++) {  setTimeout(function() { // 同步注册回调函数到异步的宏任务队列。 console.log(i); // 执行此代码时,同步代码for循环已经执行完成 }, 0);}// 输出结果10 (共10个)// 这里变量为i的for循环中,i是一个全局变量,在全局范围内都有效,所以每一次循环,新的i值都会覆盖旧值,导致最后输出的是最后一轮i的值,即i的最终结果为10,实际上都是console.log(10)。涉及的知识点:JS的事件循环机制,setTimeout的机制等

把 var改成 let声明:

for (let i = 0; i < 10; i++) {  setTimeout(function() { console.log(i); //当前的i仅在本轮的循环中有效,就是说每一次循环,i其实都是一个新产生的变量。 //用 let 声明的变量 i 只作用于循环体内部,不受外界干扰。 }, 0);}// 输出结果:0 1 2 3 4 5 6 7 8 9

1.2 暂时性死区(Temporal Dead Zone)

在一个块级作用域中,变量唯一存在,一旦在块级作用域中用let声明了一个变量,那么这个变量就唯一属于这个块级作用域,不受外部变量的影响,如下面所示。

var tmp = 'bread and dream';if(true){ tmp = 'dream or bread'; //ReferenceError let tmp;}

这个例子中tmp = 'dream or bread'的赋值会报错,因为在if块中的let对tmp变量进行了声明,导致该tmp绑定了这个作用域,而let临时死区导致了并不能在声明前使用,所以在声明前对变量赋值会报错。

暂时性死区的本质就是,只要一进入当前作用域,所要使用的变量就已经存在了,但是不可获取,只有等到声明变量的那一行代码出现,才可以获取和使用该变量。

暂时性死区的意义也是让我们标准化代码,将所有变量的声明放在作用域的最开始。

1.3 不允许重复声明

(1) 在相同的作用域内,用let声明变量时,只允许声明一遍,但 var是可以多次声明的。大家都知道ES5 多次声明会造成变量覆盖而且不会报错,这就给调试增加了难度,而let能够直接扼杀这个问题在摇篮之中,因为会直接报错。

// 不报错function demo() { var a = 'bread and dream'; var a = 'dream or bread';} // 报错,Duplicate declaration "a"function demo() { let a = 'bread and dream'; var a = 'dream or bread';}// 报错,Duplicate declaration "a"function demo() { let a = 'bread and dream'; let a = 'dream or bread';}

(2) 不能在函数内部重新声明参数:

function demo1(arg) { let arg; // 报错}demo1()function demo2(arg) { { let arg; // 不报错 }}demo2()

2. const

2.1 用于声明常量

const声明的常量是不允许改变的,只读属性,这意味常量声明时必须同时赋值, 只声明不赋值,就会报错,通常常量以大写字母命名。

const Person; // 错误,必须初始化 const Person = 'bread and dream';// 正确const Person2 = 'no'; Person2 = 'dream or bread'; //报错,不能重新赋值

这样做的两个好处:一是阅读代码的人立刻会意识到不应该修改这个值,二是防止了无意间修改变量值所导致的错误。比如我们使用nodejs的一些模块的时候,我们只是使用对应的模块(如http模块),但是并不需要修改nodejs的模块,这个时候就可以声明成const,增加了代码的可读性和避免错误。

2.2 支持块级作用域

const和let类似,也是支持块级作用域.

if (true) { const MIN = 5;}MIN // Uncaught ReferenceError: MIN is not defined

2.3 不支持变量提升,有暂时性死区

const声明的常量也是不提升,同样存在暂时性死区,只能在声明的位置后面使用。

if (true) { console.log(MIN); // ReferenceError const MIN = 5;}

2.4 特殊情况

如果声明的常量是一个对象,那么对于对象本身是不允许重新赋值的,但是对于对象的属性是可以赋值的。

const obj = {};obj.a = 'xiao hua';console.log(obj.a); //'xiao hua'

实际上const能保证的,并不是变量的值不得改动,而是变量指向的那个内存地址所保存的数据不得改动。

对于简单类型的数据(数值、字符串、布尔值),值就保存在变量指向的那个内存地址,因此等同于常量。

但对于复合类型的数据(主要是对象和数组),变量指向的内存地址,保存的只是一个指向实际数据的指针。

至于它指向的数据结构是不是可变的,就完全不能控制了。因此,将一个对象声明为常量必须非常小心。

如果要彻底将对象冻结(不可修改其属性),应该使用Object.freeze(obj)方法。同理,数组也是一样的。

3. import

ES6采用import来代替node等的require来导入模块。

import {$} from './jquery.js' 

$对象就是jquery中export暴露的对象。

如果想为输入的变量重新取一个名字,import命令要使用as关键字,将输入的变量重命名。

import { JQ as $ } from './jquery.js';

注意,import命令具有提升效果,会提升到整个模块的头部,首先执行。

4. class

ES6引入了类的概念,有了class这个关键字。类的实质还是函数对象。

先定义一个类:

//定义类class Animal { constructor(name, age) { this.name = name; this.age = age; }  setSex(_sex) { this.sex=_sex; }} 

constructor方法,就是构造方法,也就是ES5时代函数对象的主体,而this关键字则代表实例对象。

上面的类也可以改成ES5的写法:

function Animal(name, age){ this.name = name; this.age = age;}Animal.prototype.setSex = function (_sex) { this.sex=_sex;}

其实,大多数类的特性都可以通过之前的函数对象与原型来推导。

生成类的实例对象的写法,与ES5通过构造函数生成对象完全一样,也是使用new命令。

class Animal {}let dog = new Animal();

在类的实例上面调用方法,其实就是调用原型上的方法,因为类上的方法其实都是添加在原型上。

Class其实就是一个function,但是有一点不同,Class不存在变量提升,也就是说Class声明定义必须在使用之前。

5.总结

 在ES6之前,JavaScript是没有块级作用域的,如果在块内使用var声明一个变量,它在代码块外面仍旧是可见的。ES6规范给开发者带来了块级作用域,let和const都添加了块级作用域,使得JS更严谨和规范。

let 与 const 相同点:

块级作用域有暂时性死区 约束了变量提升 禁止重复声明变量 

let 与 const不同点:

const声明的变量不能重新赋值,也是由于这个规则,const变量声明时必须初始化,不能留到以后赋值。

合理的使用ES6新的声明方式,不管是面试还是工作中都有实际的应用,尤其是工作中,大家一定要尽量的多使用新的声明方式,不但可以让代码更规范,更可以避免不必要的bug,浪费调试时间,进而提高工作效率。

必须声明标量变量 @sum_level。_ES6系列—新的变量声明方式相关推荐

  1. php对多个变量进行初始化,PHP如何对变量进行初始化和初始化

    PHP如何对变量进行初始化和初始化 发布时间:2020-06-26 18:10:48 来源:亿速云 阅读:158 作者:Leah PHP如何对变量进行初始化和初始化?针对这个问题,这篇文章详细介绍了相 ...

  2. 莫名其妙的SqlServer更新错误:OleDbException 必须声明标量变量

    以前一直使用OleDbDataAdapter的方式更新数据库,今天我试了一下用OleDbCommand的方式更新数据库出现了莫名其妙的错误. 环境:Sql Server 2005 使用如下代码:    ...

  3. 可以声明一个抽象类类型变量_TypeScript系列(二)变量声明和数据类型

    一,变量声明 TypeScript是JavaScript的超集,在变量声明方式方面,关键字是和JavaScript保持一致的,并且推荐较新的 let 和 const 代替 var .至于为什么这样做, ...

  4. python用变量的值声明新的变量

    受该知乎回答启发 python能用一个变量的值作为另一个变量的变量名吗? - 川落酒的回答 - 知乎 https://www.zhihu.com/question/310121025/answer/5 ...

  5. “场•变” 新环境变量里的企业品牌价值思辨

    近两三个月,中国企业再掀上市高潮,赴美赴港还是奔赴A股,上市选择背后的逻辑正在改变:从反公知到反商业巨头垄断,社会公众的舆论场正发生着深刻的变化:从渠道为王到内容为王,优质内容的生产方式.生产组织正在 ...

  6. JavaScript进阶系列01,函数的声明,函数参数,函数闭包

    本篇主要体验JavaScript函数的声明.函数参数以及函数闭包. □ 函数的声明 ※ 声明全局函数 通常这样声明函数: function doSth() { alert("可以在任何时候调 ...

  7. C11头文件threads.h声明了创建和管理线程,信号,条件变量的函数

    作者Danny Kalev 是通过以色列系统分析师协会认证的系统分析师, 并且是专攻C++的软件工程师. Kalev 写了多本C++的书籍,同时给不同的软件开发者站点投搞C++文章. 他是C++标准委 ...

  8. JavaScript系列文章:变量提升和函数提升

    第一篇文章中提到了变量的提升,所以今天就来介绍一下变量提升和函数提升.这个知识点可谓是老生常谈了,不过其中有些细节方面博主很想借此机会,好好总结一下. 今天主要介绍以下几点: 1. 变量提升 2. 函 ...

  9. CSS3新特性-变量

    2017年三月,微软宣布 Edge 浏览器将支持 CSS 变量. 这个重要的 CSS 新功能,所有主要浏览器已经都支持了.本文全面介绍如何使用它,你会发现原生 CSS 从此变得异常强大. 一.变量的声 ...

最新文章

  1. Android 计步功能-简单实现
  2. zookeeper  虚拟机zookeeper和 win10java代码连接
  3. 实验3-4 统计字符 (15 分)
  4. jackson框架java反序列化漏洞_Jackson CVE-2019-12384: 反序列化漏洞复现
  5. 教你如何用bat程序给电脑清理缓存垃圾(普通版)
  6. FlashGot找不到FlashGet的原因之一
  7. 【游戏设计图形学】模拟自然界火焰的方法
  8. html制作电影宣传效果,宣传片制作有什么技巧可提高效果
  9. 关于大学初入计算机学习的一些建议
  10. ZUI + SSM框架下数据表格的使用
  11. 数学期望、信息量、信息熵、相对熵、交叉熵
  12. verilog中的initial语句
  13. 微软发布2015年7月安全公告 安全狗提醒及时修复
  14. 岁月的剪影【你是人间四月天】
  15. 计算机在英语写作中应用,多媒体计算机技术在初中英语写作中应用.doc
  16. php字符串6,6.PHP字符串
  17. ANS应用交付助力“武当派招生”
  18. Angelo Cangelosi:发展型机器人先驱,让机器人模仿儿童学习与发展|42问AI与机器人未来...
  19. 【数据结构】第六章:图(上)
  20. 输出一个整数的二进制表示中1的个数

热门文章

  1. XEIM 帮助文档【草稿版】
  2. 用VC写Assembly代码(3)
  3. 从C++到.NET 揭开多态的面纱
  4. 新版 chrome 将原生支持图片懒加载!
  5. 第三节:创建一个Vue实例,超简单
  6. 18春学期《计算机应用基础》,18春学期(1709、1803)《计算机应用基础》在线作业及答案.pdf...
  7. 金字塔原理只需读前几页
  8. 这一路,信念很简单,把书念下去,然后走出去,不枉活一世
  9. 获得诺贝尔奖之后影响力会下降?绘制精英科学家的职业生涯路线图
  10. 120分的转录组试题,你能得多少