ES6中const怎么用

这篇文章给大家分享的是有关ES6中const怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

托克逊ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为创新互联公司的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:18982081108(备注:SSL证书合作)期待与您的合作!

关键字const 的作用

const是constant(常量)的缩写,const和 let一样,也是用来声明变量的,但是const是专门用于声明一个常量的,顾名思义,常量的值是不可改变的。

常量的特点

  • 不可修改

const Name = '张三';
Name = '李四';//错误,企图修改常量Name
  • 只在块级作用域起作用,这点与let关键字一样。

if(1){
  const Name = '张三';
}
alert(Name);//错误,在代码块{ }外,Name失效
  • 不存在变量提升,必须先声明后使用,这点也跟let关键字一样。

if(1){
  alert(Name);//错误,使用前未声明
  const Name = '张三';
}
  • 4、不可重复声明同一个变量,这点跟let也一样。

var Name  = '张三';
const  Name = '李四';//错误,声明一个已经存在的变量Name
  • 声明后必须要赋值

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"}

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

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

  • 如果这样写呢,就会报错

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

const总结

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

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

浏览器兼容ES6特性

  • 为什么ES6会有兼容性问题?

由于广大用户使用的浏览器版本在发布的时候也许早于ES6的定稿和发布,而到了今天,我们在编程中如果使用了ES6的新特性,浏览器若没有更新版本,或者新版本中没有对ES6的特性进行兼容,那么浏览器肯定无法识别我们的ES6代码,好比浏览器根本看不懂我写的let和const是什么东西?
  • 如何在浏览器兼容ES6的特性

针对ES6的兼容性问题,很多团队为此开发出了多种语法解析转换工具,把我们写的ES6语法转换成ES5,相当于在ES6和浏览器之间做了一个翻译官。比较通用的工具方案有babel,jsx,traceur,es6-shim等。

此外,浏览器自身也加快速度兼容ES6的新特性,其中对ES6新特性最友好的是Chrome和Firefox浏览器。
  • 各大转换工具、javascript解析引擎对ES6的支持程度情况,可以参查看这个地址:

http://kangax.github.io/compat-table/es6/

使用转换工具babel

  • 步骤1:制作ES6.html

  • 步骤2:测试const兼容性

我们在chrome浏览器(版本不能太低)运行ES6.html,会正常运行,弹出"张三"

下来我们运行在IE 9,会看到这样的情况:"语法错误"
  • 用Babel来兼容它

我们可以使用npm来安装babel,npm是随同Nodejs一起安装的包管理工具,新版的nodejs已经继承了npm,我们只要安装nodejs即可。
  • 步骤3:安装node

  • 步骤4:检测node是否安装成功

# 安装结束后,我们检测是否安装成功:
# 点击 “开始”-> “运行”-> 输入“cmd”-> 进入命令提示符窗口,输入“node --version”来检测当前node的版本。
# 出现:v4.4.5就表示安装成功,因为我们下载的就是v4.4.5LTS。
  • 步骤5:用npm安装babel

# node安装好了,也就是它集成的npm包管理工具也安装好了,接下来,我们利用npm来安装我们最想要的babel。
# 同样我们启动命令提示符窗口并且输入:npm install babel-core@5,然后回车,这里要稍等片刻:
# 看到下面的界面就是表示你安装babel成功,你会在电脑盘中找到这样的目录:C:\Users\Lenovo\node_modules\babel-core(babel安装地方)
  • 步骤6:使用babel



    const Name = '张三';//使用新增的关键字:const声明常量
    alert(Name);


# 我们把browser.min.js引入(文件位置的路径要确保正确)。并且设置第二个script标签的type为”text/babel”。
  • 步骤7:让const运行在IE9浏览器上

这个时候IE9能正常运行我们的ES6新特性了,也就是babel转换起作用了,将const转换成IE9能执行的代码了。

感谢各位的阅读!关于“ES6中const怎么用”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!


网站名称:ES6中const怎么用
网页路径:http://bzwzjz.com/article/pihcid.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 网站制作 成都网站建设 成都做网站建设公司 成都网站设计 网站建设公司 网站建设 专业网站建设 成都网站建设 手机网站制作 网站建设方案 重庆网站制作 成都定制网站建设 达州网站设计 高端品牌网站建设 温江网站设计 企业网站设计 成都网站建设 成都网站设计公司 网站建设公司 攀枝花网站设计 成都网站制作 成都网站建设公司