简述ES5 ES6

Posted 2020-08-09 秃头披风侠

　　很久前的某一天，一位大神问我，你知道ES6相对于ES5有什么改进吗？

　　我一脸懵逼的反问，那个啥，啥是ES5、ES6啊。

　　不得不承认与大神之间的差距，回来深思了这个问题，结合以前的知识，算是有了点眉目。

　　javascript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，我们知道javascript的三个基本组成部分是ECMAJavascript(European Computer Manufacturers Association javascript,也就是前面说的ES,但之前你问我ES5orES6我就真懵逼了),BOM,DOM,es可以看出是javascript的前身，是javascript的内核定义用法，而所有前端框架、ui库都是基于javascript的，也就是用原生js写的，ES的重要性不言而喻，如果你习惯用轮子，比如各种jqueryui，平时也很少用js写东西，对这个就不很很了解，如果你是大牛，经常造轮子写东西，github上start一片，博客上粉丝众多，就必然对这要有很深的研究，不然写的东西没有深度的。

　　ES5和ES6从字面上理解是一个升级的过程，出了一代新标准，发展迅速的it行业，去了解和适应一种新标准用法很有必要，这也是我为什么选择写这个主题；想要了解一些原始的定义和由来，我则建议你阅读一些相关的资料，解释了EScript的前世今生，给大家科普一段：

Ecma标准建立在一些原本的技术上，最为著名的是JavaScript(网景)和JScript (微软)。语言由网景的Brendan Eich发明而第一次出现在这个公司的Navigator 2.0浏览器上。它出现在所有Netscape后来的浏览器以及微软从Internet Explorer 3.0之后的所有浏览器上。

这一标准的编制自1996年十一月开始。这一Ecma标准的第一个版本被1997年六月的Ecma General Assembly采纳。

上述Ecma标准被以快速跟进流程提交至ISO/IEC JTC 1，并作为于1998年四月作为ISO/IEC 16262通过。1998年六月Ecma General Assembly通过了ECMA-262第二版以保持它与ISO/IEC 16262的完全一致性。第一版到第二版的变更仅仅是编辑性质的。

第三版标准引入了强大的正则表达式，更佳的字符串处理，新的控制语句，try/catch异常处理，更严密地错误定义，格式化的数字输出以及一些为国际化和未来语言成长预留的小变更。ECMAScript标准的第三版1999年十二月的Ecma General Assembly采纳并于2002年六月作为ISO/IEC 16262:2002发布。

自第三版发布以来，ECMAScript因其与万维网的关联而获得了广泛采用，它已经成为所有web浏览器实质上都提供的一种编程语言。为了编制第四版ECMAScript，有很多有意义的工作。尽管这工作没能完成而且也没有作为ECMAScript的第四版发布，它促进了语言的进化。ECMAScript第五版（发布为ECMA-262 5th edition）纸面化了很多事实上已经在浏览器形成共识的语言规范解析并且增加了对自第三版发布以来的新功能的支持。这些功能包括访问器属性，反射创建以及对象检测，属性特性的程序控制，新增的数组操作函数，JSON对象编码格式，以及提供了改进的错误检查以及程序安全性的严格模式。

这一ECMAScript 5.1版本标准完全与国际标准ISO/IEC 16262:2011的第三版本一致。

ECMAScript是一个充满活力的语言，而且语言的演进尚未完成。有意义的技术性增强将会在未来版本的规范中持续进行。

这一Ecma规范由2011年六月Ecma General Assembly采纳             --ES5

 　　需要注意的是，EScript之前的更新迭代版本叫法都是按照ESx来的，而ES6的叫法实际上是延续了这个习惯，截止发布日期，JavaScript的官方名称是ECMAScript 2015，Ecma国际意在更频繁地发布包含小规模增量更新的新版本，下一版本将于2016年发布，命名为ECMAScript 2016。以后的更新中，新版本将按照ECMAScript+年份的形式发布，ecmascript2015官方说明。近年来更新的频率越来越高，也反映了这一语言的发展迅速，功能越来越强，作为和这些紧密相关的码农大神们也要持续的学习跟进啊。

　　ES6在2015年发布，相对于上一版本，加入了很多新特性，ES5无从说起(不知道从哪说起，就是平时码的javascript吧)，所以就说下ES6的新特性吧，ES6的新特性有：let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments;

　　相关的详细说明大家可以翻阅官网说明，下面我也会举一些小例子帮助理解；

　　let,const

　　用法和var类似，定义变量，不同的是let为javascript增加了块级作用域，声明只在所在代码块有效，不影响作用域外的同名变量；你可以尝试码下

let name="x";
if(true){
    let name="y";
    alert(name);
}
alert(name);

 　　你会发现网页会依次打印y和x，如果是var声明，name会被重新赋值；const也是声明，不同的是const声明后的值不可更改，也即readonly，这个用的地方很少吧，为避免冲突的场景可以使用，以免报错；

　　class,extends,super

　　在ES6之前，原型、构造函数、继承对于大多说人来说是个麻烦点(一直到现在，我还经常去翻工具书...)，而ES6中的class,extends,super很大程度上改观了这个问题，比如之前关于构造函数、继承可能这样写：

function Person(name,job){
      this.name="personA";
      this.job="work";
      this.dowhat=function(this.job){
          alert(this.name+" should "+this.job)  
    }
}
var person=new Person("personB","player");

　　es相对于编程语言是弱类型，一个var可以声明一切，然后在声明的对象中通过原型继承来衍生其他方法，作为习惯强类型语言的我常常在理解上出错，而结合class,extends,super的es6原型写法更清晰、更偏向面向对象的写法：

        class Person{
            constructor(){
                this.name="Person"
            } 
            dowhat(todo){
                alert(this.name+" Should "+todo);
            }
        }
        let person=new Person();
        person.dowhat("work");
        class Boy extends Person{
            constructor(){
                super();
                this.name="Boy"
            }
        }
        let boy=new Boy();
        boy.dowhat("go to school");

　　（ps：博客园为毛不提供在线测试的功能，一点击就运行测试，就不用复制了，还是我没发现这个功能？）

　　面向对象的思想有木有！有木有！有木有！通过class类定义创造一个“类”，并且有构造函数constructor，而this对象代表实例对象，构造函数定义自身的方法和属性，构造函数外的方法和属性通过继承可以共享，class之间通过extends实现继承，Boy通过extends继承了Person定义的方法和属性，比ES5好理解的多，而super这里代指父级的示例(this)，子类必须在构造函数中调用super，否则在新建实例的时候会报错，ES6的继承机制，实质是先创造父类的实例对象this，通过super的调用，实现子类的继承和修改。

　　Arrow Function

　　字面理解就是箭头功能，什么鬼；一种用箭头“=>”来定义函数的新语法，简单示范：

var sum = (num1, num2) => num1 + num2;
//等同于
function sum(num1,num2){
      return num1+num2      
}

　　它的功能不止于写法简便，与传统的js写法主要区别是，对 this 的关联，函数内置 this 的值，取决于箭头函数在哪儿定义，而非箭头函数执行的上下文环境。

　　template string

　　字面理解也即是模板字符串了，实际它的作用也是在插入比较多的html模板内容时候使用的，比如传统的拼接是这样的：

$(".class p").append(
  "There are <b>" + count + "</b> " +
  "items in your basket, " +
  "<em>" + onSale +
  "</em> are on sale!"
);

　　使用template string 是这样的：

$("#result").append(`
  There are <b>${count}</b> items
   in your basket, <em>${onSale}</em>
  are on sale!
`);

　　用反引号（`）来标识起始，用${}来引用变量，并且会保留引用中的空格和缩进，比拼接方便多了。

　　destruturing

//直接上码
var boy="lilei";
var girl="hanmeimei";
var human={boy:boy,girl:girl};
console.log(human)  //Object {boy: "lilei", girl: "hanmeimei"}

//destructuring
var boy="lilei";
var girl="hanmeimei";
var human={boy,girl};
console.log(human)  //Object {boy: "lilei", girl: "hanmeimei"}

　　也即是，ES6中允许按照一定的模式，从数组和对象中取值和赋值，就就是destruturing。

　　default

　　ES6中允许为函数设置默认值，这个很好理解：

function log(x, y = ‘world‘) {
    console.log(x, y);
}
log(‘Hello‘);   // Hello world
log(‘Hello‘, ‘China‘);  // Hello China
log(‘Hello‘, ‘‘);   // Hello

　　rest

　　休息？这个理解也比较容易，上来就懂：

function person(...types){
    console.log(types)
}
animals(‘lilei‘, ‘hanmeimei‘, ‘lili‘) //[‘lilei‘, ‘hanmeimei‘, ‘lili‘]

　　先写到这里吧，可能有理解上的误区，欢迎小伙伴们指正，以后再来慢慢补全修正。

　　中秋节到了，祝大家中秋节快乐，马上来的国庆节快乐！