ECMAScript6的历史和前景展望

2021-03-09 23:02:27 阅读：218 来源： 互联网

标签：ECMAScript6 npm 变量展望 babel 前景 JavaScript let var

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,npm,变量,展望,babel,前景,JavaScript,let,var
来源： https://blog.51cto.com/2096101/2653257

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

ECMAScript6的历史和前景展望