ECMAScript6入门简介篇

梦里梦外; 2022-11-06 12:53 175阅读 0赞

ECMAScript 6  
ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言.  
另外，一些情况下ES6也泛指ES2015及之后的新增特性，虽然之后的版本应当称为ES7、ES8等.  
ECMAScript 和 JavaScript的关系  
要讲清楚这个问题，需要回顾历史。1996 年 11 月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给标准化组织 ECMA，希望这种语言能够成为国际标准。次年，ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是 1.0 版。  
该标准从一开始就是针对 JavaScript 语言制定的，但是之所以不叫 JavaScript，有两个原因。一是商标，Java 是 Sun 公司的商标，根据授权协议，只有 Netscape 公司可以合法地使用 JavaScript 这个名字，且 JavaScript 本身也已经被 Netscape 公司注册为商标。二是想体现这门语言的制定者是 ECMA，不是 Netscape，这样有利于保证这门语言的开放性和中立性。  
因此，ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现（另外的 ECMAScript 方言还有 JScript 和 ActionScript）。日常场合，这两个词是可以互换的。  
ES6的兼容性问题  
IE10+，chrome，Firefox，移动端，nodesjs现在都支持  
兼容低版本的浏览器  
支持在线转换（这种编译会加大页面渲染的时间）  
支持提前编译（强烈建议这种方式，不影响浏览器渲染的时间）  
使用babel工具  
使用npm进行安装，npm时随同nodejs一起安装的包的管理工具，也就是需要先安装node  
我们可以来安装一下

我们创建一个普通的项目  
进入项目目录安装babel

npm install babel-cli -g

安装完之后会生成相对应的文件  
Babel -V 查看babel的环境  
因为我在安装nodejs的时候采用的全局安装，  
在命令行中使用 `npm config ls`查到npm的默认安装目录，  
即`prefix=C:\Users\xxxx\AppData\Roaming\npm`,  
然后进入这个目录使用npm install –-save-dev babel-cli安装babel，然后就成功了。。  
注意AppData是个隐藏文件夹

然后再当前项目下输入npm init -y 或者是 npm init

这是后说明我们的babel环境搭建好了

可以直接再黑窗口运行这个js文件

使用这个echo .>.babelrc生成一个.Babelrc的文件

然后打开它在里面输入  
\{  
//设置转码规则  
“presets”: \[“es2015”,“stage-2”\],  
“plugins”: \[“transform-runtime”\] //设置插件  
\}

然后我们安装需要的插件  
npm install babel-core babel-preset-es2015 babel-plugin-transform-runtime babel-preset-stage-2 -save-dev

安装成功  
我们把package.json中的错误改一下

这里就是指的将src目录下的文件转换编译成新文件到lib下面  
那么我们去创建两个目录

，把index.js放到src下面，输入npm run build 运行，我们会看到自动编译的效果

转换的支持条件

let命令  
接下来我们来学习一下ES6新增的命令 let  
再学习let的时候，我们先来回复一下var的使用方法，这是我们再学习JavaScript的时候经常使用的声明变量用的

我们运行一下，再控制台看到输出  
我们刷新一下也面会发现，这个时候输出的是40  
再这边我们想说的是，再js中var这个使用的方式，可以重复的声明变量，和其他的编程语言来比较的话，我们发现这是不可以想象的，是不可思议的。并且使用var不可以限制变量，（也就是只有一种var的声明方式，没有常量的说法）

我们还可一看到，使用var没有办法区分使用区间

let命令 接下来我们在写个例子来区分一下 let命令

这时候循行的控制台输出的都是4，说明这样写是由问题的，我们可以封装一个函数，来解决，但是代码就看上去比较怪异 let命令

这是后运行是不是就解决了刚才的问题，但是现在还是很麻烦的，而且代码不好理解，那么我们使用let就可以解决这样的问题

简单使用的方法  
Const命令  
const 声明一个只读变量，声明之后不允许改变。意味着，一旦声明必须初始化，否则会报错

注意要点：  
const 如何做到变量在声明初始化之后不允许改变的？其实 const 其实保证的不是变量的值不变，而是保证变量指向的内存地址所保存的数据不允许改动。此时，你可能已经想到，简单类型和复合类型保存值的方式是不同的。是的，对于简单类型（数值 number、字符串 string 、布尔值 boolean）,值就保存在变量指向的那个内存地址，因此 const 声明的简单类型变量等同于常量。而复杂类型（对象 object，数组 array，函数 function），变量指向的内存地址其实是保存了一个指向实际数据的指针，所以 const 只能保证指针是固定的，至于指针指向的数据结构变不变就无法控制了，所以使用 const 声明复杂类型对象时要慎重。