上一节讲了let关键字,它是用来声明一个变量,只在块级作用域起作用。这一节我们来学习ES6新增的另一个关键字const。

const 的作用

const是constant(常量)的缩写,const和 let一样,也是用来声明变量的,但是const是专门用于声明一个常量的,顾名思义,常量的值是不可改变的。以前用var声明的变量,想怎么改就怎么改,同一个变量,后面的值可以轻松覆盖原来的值,这次const声明的变量,可由不得我们这么任性地想改就改了。

常量的特点

1、不可修改

  1.    
  1. const Name = '张三'; Name = '李四';//错误,企图修改常量Name

2、只在块级作用域起作用,这点与let关键字一样。

  1.      
  1. if(1){ const Name = '张三'; } alert(Name);//错误,在代码块{ }外,Name失效

3、不存在变量提升,必须先声明后使用,这点也跟let关键字一样。

  1.  
  1. if(1){ alert(Name);//错误,使用前未声明 const Name = '张三'; }

4、不可重复声明同一个变量,这点跟let也一样。

  1.    
  1. var Name = '张三'; const Name = '李四';//错误,声明一个已经存在的变量Name

5、声明后必须要赋值

  1.  
  1. const NAME; //错误,只声明不赋值

以上这些小知识点都比较简单,不用举生活上的例子都可以理解,也不难记住。

如果常量是一个对象呢?

我们接着看下面这段小代码:

  1.  
  1. const Person = {"name":"张三"};
  2. Person.name = "李四";
  3. Person.age = 20;
  4. console.log(Person); //结果:正常输出{name: "李四", age: 20}

咦?怎么常量Person好像被修改了,name改成了“李四”,而且还添加了age属性,值为20;怎么没有报错,还正常输出,不是说好了常量不可修改吗,友谊小船说翻就翻了,说好的常量说变就变,别怕,友谊还是很牢固的。

我们一起来找找原因。

传址赋值

这个时候,我们先引入一个概念:在赋值过程中,我们可以分为传值赋值和传址赋值。这里我们用到了传址赋值,什么叫传址赋值?

传址:在赋值过程中,变量实际上存储的是数据的地址(对数据的引用),而不是原始数据或者数据的拷贝。

新手看不懂上面这段话,没关系的,看段代码:

  1.  
  1. var student1 = {"name":"张三"};
  2. var student2 = student1;
  3. student2.name = "李四";
  4. console.log(student1); //结果:输出 {name: "李四"}
  5. console.log(student2); //结果:输出 {name: "李四"}

为什么student2的name改成了“李四”,student1的那么也变成了“李四”呢?这就是传址赋值!

怎么理解传址赋值?就好比,你预约了一个装修工(张师傅)到你家进行装修,你把你家的地址告诉了他,他顺着地址来到你家,按照你的要求,把你家的门弄成红色。

仅仅过了两天,你觉得不好看,你又找了另一个装修工(王师傅),你也把地址告诉他,王师傅来到后也是按照你的要求,把门弄成了绿色。

最后,不管是张师傅还是王师傅,通过这个地址来到你家的时候,看到的门肯定是绿色的,因为最后一次修改是改成绿色。

看懂这个生活上的的例子,你就看得懂下面这段代码了:

  1. //张师傅把你家的门改成红色
  2. var Zhang = {"door":"red"}; //次日,你把地址也告诉了王师傅
  3. var Wang = Zhang; //王师傅按照地址,去到后把门改成绿色
  4. Wang.door = "green"; //最后不管是张师傅还是王师傅来到你家,看到门都是绿色的 console.log(Wang); //结果:输出 {door: "green"}
  5. console.log(Zhang); //结果:输出 {door: "green"}

仔细对比一下,这段代码和上一段小代码的结构一模一样(往上翻一下看看),这就知道为什么student2改了name,student1也被修改了。

花了不少篇幅来讲传址赋值,希望这个例子能形象地描述出传址赋值,让大家易懂和透彻。

讲完传址赋值,回到我们的const关键字,用const来声明一个对象类型的常量,就是传址赋值。而不可修改的是对象在内存中的地址,而不是对象本身(不可变的是你家的地址,而不是你家的门)。

所以,这就很好的解释刚刚的这段代码为什么不会报错,而是正常输出了。

  1. const Person = {"name":"张三"}; Person.name = "李四"; Person.age = 20; console.log(Person); //结果:正常输出{name: "李四", age: 20}

因为修改的只是Person本身,修改的是name属性和增加一个属性age,而地址没变,也不可变,所以并没有违背常量不可修改的约定。

但是,如果这样写呢,就会报错:

  1. const Person = {"name":"张三"}; Person.age = 20; Person = {}; //错误,企图给常量Person赋新值(新地址)

用const声明后,张师傅、王师傅就只认得你家的地址了,不能再告诉他其他家的地址。

const关键字的学习到此就结束了,是不是发现并不难学,大部分特性都跟let的相同,但记住声明一个对象作为常量的时候要小心。此外附带讲解了传址赋值的概念,装修工的例子还算贴切,图文并茂,比较形象地描述传址赋值。

本节总结

总结:const也是用于声明一个常量,并必须赋值,声明后不可修改,跟let一样,只在块级作用域起作用,不可重复声明同一个变量,不会变量提升,声明引用类型的常量时,要注意是传址赋值。

最后我也发布了很多web前端的视频,大家可以去看看

web前端综合视频

ES6中不得不说的关键字const的更多相关文章

  1. JavaScript学习系列5 ---ES6中的var, let 和const

    我们都知道JavaScript中的var,在本系列的 JavaScript学习系列2一JavaScript中的变量作用域 中,我们详细阐述了var声明的变量的作用域 文章中提到,JavaScript中 ...

  2. ES6中声明变量 let和const特点

    在ES6中我们有两种定义变量的方式:let    const let特点: 1.let定义时不会进行变量声明提升 2.变量不允许被重复定义 3.变量不可以被删除 4.在for循环当中用let定义i 循 ...

  3. ES6中构造函数内super关键字的使用

    super关键字用于访问和调用一个对象的父对象上的函数. super.prop和super[expr]表达式在类和对象字面量任何方法定义中都是有效的. 语法 super([arguments]); / ...

  4. es6中let,const区别与其用法

    ECMAScript 是什么? 首先,我们都知道JavaScript由三部分组成:ECMAScript,DOM,BOM: 其中的ECMAScript是Javascript的语法规范. ECMAScri ...

  5. Nodejs与ES6系列4:ES6中的类

    ES6中的类 4.1.class基本语法 在之前的javascript语法中是不存在class这样的概念,如果要通过构造函数生成一个新对象代码 function Shape(width,height) ...

  6. ES6中的var let const应如何选择

    javascript世界里面的每个人都在说有关ECMAScript 6 (ES6,也称作ES 2015)的话题,对象的巨大变化 ( 类 , super() , 等), 函数 (默认参数等), 以及模块 ...

  7. JavaScript 中 var 和 let 和 const 关键字的区别

    var与let.const的区别 在最新的 ES6 中,新添加了两个用于变量声明的关键字 let 和 const 一.var声明的变量会挂载在window上,而let和const声明的变量不会: va ...

  8. 现代JavaScript—ES6+中的Imports,Exports,Let,Const和Promise

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者.原文出处:https://www.freecodecamp.org/news/learn-modern-jav ...

  9. es6 中的let,const

    在es6中,let的作用和var差不多,都是用来声明变量的,但是他们之间的区别在于作用域不同,大家都知道在js中没有块级作用域,例如: for(var i=0;i<10;i++){ consol ...

随机推荐

  1. coding++:thymelef 模板报错 the entity name must immediately follow the '&' in the entity reference

    thymelef模板里面是不能实用&符号的 要用&转义符代替,官网也有文档说明可以用官方的通配符代替, 官方文档 http://www.thymeleaf.org/doc/tutori ...

  2. 左手C#,右手Java

    C# takes me to develop career, Java makes me more powerful. Code is poetry.

  3. 深入理解NIO(三)—— NIO原理及部分源码的解析

    深入理解NIO(三)—— NIO原理及部分源码的解析 欢迎回到淦™的源码看爆系列 在看完前面两个系列之后,相信大家对NIO也有了一定的理解,接下来我们就来深入源码去解读它,我这里的是OpenJDK-8 ...

  4. 学习 MyBatis 的一点小总结 —— 底层源码初步分析

    目录 MyBatis 如何获取数据库源? MyBatis 如何获取 sql 语句? MyBatis 如何执行 sql 语句? MyBatis 如何实现不同类型数据之间的转换? 在过去程序员使用 JDB ...

  5. [洛谷1437&Codevs1257]敲砖块<恶心的dp>

    题目链接:https://www.luogu.org/problem/show?pid=1437#sub http://codevs.cn/problem/1257/ 不得不说,这个题非常的恶心,在初 ...

  6. 9.Metasploit制作木马后门

    01木马与后门   木马?后门? 木马和后门都有害,尤其是木马,它由攻击者主动发起,稍不留心就会被利用:后门原来是留给自己方便用的,但也有可能被非法利用,这两种程序都会给用户带来损失. 木马是指潜伏在 ...

  7. Oracle给权限和同义词

    在同一个DB下,用户A创建了一个Table(student),用户B无法访问.如果B想要访问,就需要A赋予B权限. 登录用户A执行下面语句: GRANT SELECT, INSERT, UPDATE, ...

  8. Nginx知多少系列之(三)配置文件详解

    目录 1.前言 2.安装 3.配置文件详解 4.Linux下托管.NET Core项目 5.Linux下.NET Core项目负载均衡 6.Linux下.NET Core项目Nginx+Keepali ...

  9. C语言学生管理系统(C语言课程设计/精简版)

    #include<stdio.h>#include<stdlib.h>#include<windows.h>#include<conio.h>typed ...

  10. String 对象-->substr() 方法

    1.定义和用法 substr() 方法可在字符串中抽取从 开始 下标开始的指定数目的字符. 语法: string.substr(start,length) 参数: start:提取开始下标 lengt ...