简述ES5 ES6

  好久前的某一天,一位大神问我,你知道ES6相对于ES5有什么改进吗?javascript

  我一脸懵逼的反问,那个啥,啥是ES五、ES6啊html

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

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

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

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官方说明。近年来更新的频率愈来愈高,也反映了这一语言的发展迅速,功能愈来愈强,做为和这些紧密相关的码农大神们也要持续的学习跟进啊。git

  ES6在2015年发布,相对于上一版本,加入了不少新特性,ES5无从提及(不知道从哪提及,就是平时码的javascript吧),因此就说下ES6的新特性吧,ES6的新特性有:let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments;es6

  相关的详细说明你们能够翻阅官网说明,下面我也会举一些小例子帮助理解;github

  let,constweb

  用法和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 是这样的:

$(".class p").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)
}
person('lilei', 'hanmeimei', 'lili') //['lilei', 'hanmeimei', 'lili']

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

  中秋节到了,祝你们中秋节快乐,立刻来的国庆节快乐!

  

  原文地址:简述ES5 ES6薛陈磊 | Share the world

相关文章
相关标签/搜索