- 第一节:什么是 ES6?新手该如何理解
- 第二节:ES6 新增了 let 关键字,干嘛用的?
- 第三节:ES6 中另一个不得不说的关键字 const
- 第四节:教你如何快速让浏览器兼容 ES6 特性
- 第五节:一个令人兴奋的 ES6 新特性:解构赋值
- 第六节:ES6 为字符串 String 带来哪些好玩的特性?
- 第七节:ES6 为数值做了哪些扩展?
- 第八节:ES6 为数组做了哪些扩展?
- 第九节:ES6 为对象做了哪些扩展?
- 第十节:ES6 为函数做了哪些扩展?
- 第十节:函数的扩展 — 箭头函数的 this 使用(补课)
- 第十一节:JavaScript 有了一种全新的数据类型:Symbol
- 第十二节:ES6 Proxy 代理 和 去银行存款有什么关系?
- 第十三节:易学又实用的新特性:for...of
- 第十四节:ES6 的 Iterator 遍历器到底是什么?
- 第十五节:有一种特殊的函数叫:Generator 函数
- 第十六节:ES6 新增的 Set 和 WeakSet 是什么东西?
- 第十七节:ES6 新增的 Map 和 WeakMap 又是什么东西?
- 第十八节:教你如何使用 ES6 的 Promise 对象
- 第十九节:终于 JavaScript 也有了类(Class)的概念
- 第二十节:一个缺失已久的特性 module 模块
第三节:ES6 中另一个不得不说的关键字 const
之前感觉在微信上看含有代码的文章体验很差,特别是阅读代码的时候,这次我给代码部分着色了,希望大家能看得舒服点;还有配上了图,更有趣好玩了,坚持一个宗旨:相信编程讲课可以更通俗易懂、更有趣。也欢迎大家积极互动。
上一节讲了let关键字,它是用来声明一个变量,只在块级作用域起作用。这一节我们来学习ES6新增的另一个关键字const。
const 的作用const是constant(常量)的缩写,const和 let一样,也是用来声明变量的,但是const是专门用于声明一个常量的,顾名思义,常量的值是不可改变的。以前用var声明的变量,想怎么改就怎么改,同一个变量,后面的值可以轻松覆盖原来的值,这次const声明的变量,可由不得我们这么任性地想改就改了。
常量的特点
1、不可修改
const Name = '张三';
Name = '李四';//错误,企图修改常量Name
2、只在块级作用域起作用,这点与let关键字一样。
if(1){
const Name = '张三';
}
alert(Name);//错误,在代码块{ }外,Name失效
3、不存在变量提升,必须先声明后使用,这点也跟let关键字一样。
if(1){
alert(Name);//错误,使用前未声明
const Name = '张三';
}
4、不可重复声明同一个变量,这点跟let也一样。
var Name = '张三';
const Name = '李四';//错误,声明一个已经存在的变量Name
5、声明后必须要赋值
const NAME; //错误,只声明不赋值
以上这些小知识点都比较简单,不用举生活上的例子都可以理解,也不难记住。
如果常量是一个对象呢?我们接着看下面这段小代码:
const Person = {"name":"张三"};
Person.name = "李四";
Person.age = 20;
console.log(Person);
//结果:正常输出{name: "李四", age: 20}
咦?怎么常量Person好像被修改了,name改成了“李四”,而且还添加了age属性,值为20;怎么没有报错,还正常输出,不是说好了常量不可修改吗,友谊小船说翻就翻了,说好的常量说变就变,别怕,友谊还是很牢固的。
我们一起来找找原因。
传址赋值这个时候,我们先引入一个概念:在赋值过程中,我们可以分为传值赋值和传址赋值。这里我们用到了传址赋值,什么叫传址赋值?
传址:在赋值过程中,变量实际上存储的是数据的地址(对数据的引用),而不是原始数据或者数据的拷贝。
新手看不懂上面这段话,没关系的,看段代码:
var student1 = {"name":"张三"};
var student2 = student1;
student2.name = "李四";
console.log(student1);
//结果:输出 {name: "李四"}
console.log(student2);
//结果:输出 {name: "李四"}
为什么student2的name改成了“李四”,student1的那么也变成了“李四”呢?这就是传址赋值!
怎么理解传址赋值?就好比,你预约了一个装修工(张师傅)到你家进行装修,你把你家的地址告诉了他,他顺着地址来到你家,按照你的要求,把你家的门弄成红色。
仅仅过了两天,你觉得不好看,你又找了另一个装修工(王师傅),你也把地址告诉他,王师傅来到后也是按照你的要求,把门弄成了绿色。
最后,不管是张师傅还是王师傅,通过这个地址来到你家的时候,看到的门肯定是绿色的,因为最后一次修改是改成绿色。
看懂这个生活上的的例子,你就看得懂下面这段代码了:
//张师傅把你家的门改成红色
var Zhang = {"door":"red"};
//次日,你把地址也告诉了王师傅
var Wang = Zhang;
//王师傅按照地址,去到后把门改成绿色
Wang.door = "green";
//最后不管是张师傅还是王师傅来到你家,看到门都是绿色的
console.log(Wang); //结果:输出 {door: "green"}
console.log(Zhang); //结果:输出 {door: "green"}
仔细对比一下,这段代码和上一段小代码的结构一模一样(往上翻一下看看),这就知道为什么student2改了name,student1也被修改了。
花了不少篇幅来讲传址赋值,希望这个例子能形象地描述出传址赋值,让大家易懂和透彻。
讲完传址赋值,回到我们的const关键字,用const来声明一个对象类型的常量,就是传址赋值。而不可修改的是对象在内存中的地址,而不是对象本身(不可变的是你家的地址,而不是你家的门)。
所以,这就很好的解释刚刚的这段代码为什么不会报错,而是正常输出了。
const Person = {"name":"张三"};
Person.name = "李四";
Person.age = 20;
console.log(Person);
//结果:正常输出{name: "李四", age: 20}
因为修改的只是Person本身,修改的是name属性和增加一个属性age,而地址没变,也不可变,所以并没有违背常量不可修改的约定。
但是,如果这样写呢,就会报错:
const Person = {"name":"张三"};
Person.age = 20;
Person = {};
//错误,企图给常量Person赋新值(新地址)
用const声明后,张师傅、王师傅就只认得你家的地址了,不能再告诉他其他家的地址。
const关键字的学习到此就结束了,是不是发现并不难学,大部分特性都跟let的相同,但记住声明一个对象作为常量的时候要小心。此外附带讲解了传址赋值的概念,装修工的例子还算贴切,图文并茂,比较形象地描述传址赋值。
本节总结总结:const也是用于声明一个常量,并必须赋值,声明后不可修改,跟let一样,只在块级作用域起作用,不可重复声明同一个变量,不会变量提升,声明引用类型的常量时,要注意是传址赋值。
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论