const的使用和lES6的兼容处理|-ES6连载2

大家好，好久不见，经过上次ES6的介绍和let声明后，小编继续给大伙带来更精彩的ES6。

关键字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

<script>

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

  alert(Name);

</script>

步骤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

<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="browser.min.js"></script>

<script type="text/babel">

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

    alert(Name);

</script>

# 我们把browser.min.js引入（文件位置的路径要确保正确）。并且设置第二个script标签的type为”text/babel”。

步骤7：让const运行在IE9浏览器上

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

©著作权归作者所有：来自51CTO博客作者万和IT教育的原创作品，如需转载，请注明出处，否则将追究法律责任