ECMAScript6的历史和前景展望

2024-02-21 19:01:34

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没有办法区分使用区间
<!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 声明复杂类型对象时要慎重。

上一篇：ECMAScript6的历史和前景展望


下一篇：前端----ES6(二)