优秀的编程知识分享平台

网站首页 > 技术文章 正文

ECMAScript 6的历史和未来前景展望

nanyue 2024-10-23 12:12:31 技术文章 5 ℃

ECMAScript 6

6（简称ES6）是于2015年6月正式发布的语言的标准，正式名为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没有办法区分使用区间

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>let命令</title></head><body> <script> if(true){ var a=10; console.log(a); } console.log(a); //let声明变量的方式 let b =10; //我们发现没有太大的区别，但是使用let是不能重复声明变量的 //let b = 20; console.log(b); //那我们再来说一下let的作用域 if(true){ let c =10; console.log(c); } //console.log(c); //这时候我们发现报错了，说明使用let声明的变量只要能再if这样的语句块的起到作用 //在 for()循环中也可以去翻出来 </script></body></html>

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

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>let命令</title></head><body> <script> window.onload = function () { var buts = document.getElementsByTagName("input"); for(var i=0;i<buts.length;i++){ buts[i].onclick = function () { console.log(i+1); } } } </script><input type="button" value="one"><br> <input type="button" value="two"><br> <input type="button" value="there"><br></body></html>

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

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>let命令</title></head><body> <script> window.onload = function () { var buts = document.getElementsByTagName("input"); for(var i=0;i<buts.length;i++){ (function (i) { buts[i].onclick = function () { console.log(i+1); } })(i); } } </script><input type="button" value="one"><br> <input type="button" value="two"><br> <input type="button" value="there"><br></body></html>

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

简单使用的方法

Const命令

const 声明一个只读变量，声明之后不允许改变。意味着，一旦声明必须初始化，否则会报错

注意要点：

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

Tags：

猜你喜欢

最近发表
标签列表