JavaScript学习--Item24 ES6新特性概览_html-js-css

概述ES6新特性概览 ES6新特性概览

本文基于lukehoban/es6features ，同时参考了大量博客资料，具体见文末援用。

ES6（ECMAScript 6）是行将到来的新版本JavaScript语言的标准，代号harmony(和谐之意，明显没有跟上我国的步伐，我们已进入中国梦版本了)。上1次标准的制定还是2009年出台的ES5。目前ES6的标准化工作正在进行中，预计会在14年12月份放出正式敲定的版本。但大部份标准已就绪，且各阅读器对ES6的支持也正在实现中。要查看ES6的支持情况请点此。

目前想要运行ES6代码的话，可以用Google/traceur-compiler将代码转译。点此访问traceur-compiler 在线版本时实编辑ES6代码并查看转换后的结果，代码运行结果会在console显示。

另外，关于Google Traceur，业界大神Addy Osmani利用前者写了个Chrome插件ES6 Tepl，安装后也能够进行ES6的测试。

固然，其实不是所有ES6新特性都被实现了，所以上面的方法可以测试大部份，有1些还是没法测试的。

虽然ES6都还没真正发布，但已有用ES6重写的程序了，各种关于ES789的提议已开始了，这你敢信。潮流不是我等大众所能追逐的。

潮流虽然太快，但我们不停下学习的步伐，就不会被潮流丢下的，下面来领略下ES6中新特性，1堵新生代Js的风采。

箭头 *** 作符

如果你会C#或Java，你肯定知道lambda表达式，ES6中新增的箭头 *** 作符=>便有异曲同工之妙。它简化了函数的书写。 *** 作符左侧为输入的参数，而右侧则是进行的 *** 作和返回的值inputs=>outputs。

我们知道在Js中回调是常常的事，而1般回调又以匿名函数的情势出现，每次都需要写1个function，甚是繁琐。当引入箭头 *** 作符后可以方便地写回调了。请看下面的例子。

var array = [1, 2, 3];//传统写法array.forEach(function(v, i, a) {    console.log(v);});//ES6array.forEach(v = > console.log(v));

大家可以打开文章开头提到的traceur在线代码转译页面输入代码来查看效果。

类的支持

ES6中添加了对类的支持，引入了class关键字（其实class在JavaScript中1直是保存字，目的就是斟酌到可能在以后的新版本中会用到，现在终究派上用处了）。Js本身就是面向对象的，ES6中提供的类实际上只是Js原型模式的包装。现在提供原生的class支持后，对象的创建，继承更加直观了，并且父类方法的调用，实例化，静态方法和构造函数等概念都更加形象化。

下面代码展现了类在ES6中的使用。再次啰嗦1句，你可以将代码贴到traceur自己查看运行结果。

//类的定义class Animal {    //ES6中新型构造器    constructor(name) {        this.name = name;    }    //实例方法    sayname() {        console.log('My name is '+this.name);    }}//类的继承class Programmer extends Animal {    constructor(name) {        //直接调用父类构造器进行初始化        super(name);    }    program() {        console.log("I'm Coding...");    }}//测试我们的类var animal=new Animal('dummy'),wayou=new Programmer('wayou');animal.sayname();//输出 ‘My name is dummy’wayou.sayname();//输出 ‘My name is wayou’wayou.program();//输出 ‘I'm Coding...’

增强的对象字面量

对象字面量被增强了，写法更加简洁与灵活，同时在定义对象的时候能够做的事情更多了。具体表现在：

可以在对象字面量里面定义原型定义方法可以不用function关键字直接调用父类方法

这样1来，对象字面量与前面提到的类概念更加吻合，在编写面向对象的JavaScript时更加轻松方便了。

//通过对象字面量创建对象var human = {    breathe() {        console.log('breathing...');    }};var worker = {    __proto__: human, //设置此对象的原型为human,相当于继承human    company: 'freelancer',    work() {        console.log('working...');    }};human.breathe();//输出 ‘breathing...’//调用继承来的breathe方法worker.breathe();//输出 ‘breathing...’

字符串模板

字符串模板相对简单易懂些。ES6中允许使用反引号 ` 来创建字符串，此种方法创建的字符串里面可以包括由美元符号加花括号包裹的变量${vraible}。如果你使用过像C#等后端强类型语言的话，对此功能应当不会陌生。

//产生1个随机数var num=Math.random();//将这个数字输出到consoleconsole.log(`your num is ${num}`);

解构

自动解析数组或对象中的值。比如若1个函数要返回多个值，常规的做法是返回1个对象，将每一个值做为这个对象的属性返回。但在ES6中，利用解构这1特性，可以直接返回1个数组，然后数组中的值会自动被解析到对应接收该值的变量中。

var [x,y]=getVal(),//函数返回值的解构    [name,age]=['wayou','male','secrect'];//数组解构function getVal() {    return [ 1, 2 ];}console.log('x:'+x+',y:'+y);//输出：x:1,y:2 console.log('name:'+name+',age:'+age);//输出： name:wayou,age:secrect

参数默许值，不定参数，拓展参数默许参数值

现在可以在定义函数的时候指定参数的默许值了，而不用像之前那样通过逻辑或 *** 作符来到达目的了。

function sayHello(name){    //传统的指定默许参数的方式    var name=name||'dude';    console.log('Hello '+name);}//应用ES6的默许参数function sayHello2(name='dude'){    console.log(`Hello ${name}`);}sayHello();//输出：Hello dudesayHello('Wayou');//输出：Hello WayousayHello2();//输出：Hello dudesayHello2('Wayou');//输出：Hello Wayou

不定参数

不定参数是在函数中使用命名参数同时接收不定数量的未命名参数。这只是1种语法糖，在之前的JavaScript代码中我们可以通过arguments变量来到达这1目的。不定参数的格式是3个句点后跟代表所有不定参数的变量名。比以下面这个例子中，…x代表了所有传入add函数的参数。

//将所有参数相加的函数function add(...x){    return x.reduce((m,n)=>m+n);}//传递任意个数的参数console.log(add(1,2,3));//输出：6console.log(add(1,3,4,5));//输出：15

拓展参数

拓展参数则是另外一种情势的语法糖，它允许传递数组或类数组直接做为函数的参数而不用通过apply。

var people=['Wayou','John','Sherlock'];//sayHello函数本来接收3个单独的参数人妖，人2和人3function sayHello(people1,people2,people3){    console.log(`Hello ${people1},${people2},${people3}`);}//但是我们将1个数组以拓展参数的情势传递，它能很好地映照到每一个单独的参数sayHello(...people);//输出：Hello Wayou,John,Sherlock //而在之前，如果需要传递数组当参数，我们需要使用函数的apply方法sayHello.apply(null,people);//输出：Hello Wayou,Sherlock

let与const 关键字

可以把let看成var，只是它定义的变量被限定在了特定范围内才能使用，而离开这个范围则无效。const则很直观，用来定义常量，即没法被更改值的变量。

for (let i=0;i<2;i++)console.log(i);//输出: 0,1console.log(i);//输出：undefined,严格模式下会报错

for of 值遍历

我们都知道for in 循环用于遍历数组，类数组或对象，ES6中新引入的for of循环功能类似，不同的是每次循环它提供的不是序号而是值。

var someArray = [ "a", "b", "c" ];for (v of someArray) {    console.log(v);//输出 a,b,c}

注意，此功能Google traceur并未实现，所以没法摹拟调试,下面有些功能也是如此

iterator,generator

这1部份的内容有点生涩，详情可以参见这里。以下是些基本概念。

iterator:它是这么1个对象，具有1个next方法，这个方法返回1个对象{done,value}，这个对象包括两个属性，1个布尔类型的done和包括任意值的valueiterable: 这是这么1个对象，具有1个obj[@@iterator]方法，这个方法返回1个iteratorgenerator: 它是1种特殊的iterator。反的next方法可以接收1个参数并且返回值取决与它的构造函数（generator function）。generator同时具有1个throw方法generator 函数: 即generator的构造函数。此函数内可使用yIEld关键字。在yIEld出现的地方可以通过generator的next或throw方法向外界传递值。generator 函数是通过function*来声明的yIEld 关键字：它可以暂停函数的履行，随后可以再进进入函数继续履行模块

在ES6标准中，JavaScript原生支持module了。这类将Js代码分割成不同功能的小块进行模块化的概念是在1些3方规范中流行起来的，比如Commonjs和AMD模式。

将不同功能的代码分别写在不同文件中，各模块只需导出公共接口部份，然后通过模块的导入的方式可以在其他地方使用。下面的例子来自tutsplus:

// point.Jsmodule "point" {    export class Point {        constructor (x, y) {            public x = x;            public y = y;        }    }}// myapp.Js//声明援用的模块module point from "/point.Js";//这里可以看出，虽然声明了援用的模块，还是可以通过指定需要的部份进行导入import Point from "point";var origin = new Point(0, 0);console.log(origin);

Map，Set 和 WeakMap，WeakSet

这些是新加的集合类型，提供了更加方便的获得属性值的方法，不用像之前1样用hasOwnProperty来检查某个属性是属于原型链上的呢还是当前对象的。同时，在进行属性值添加与获得时有专门的get，set 方法。

下方代码来自es6feature

// Setsvar s = new Set();s.add("hello").add("goodbye").add("hello");s.size === 2;s.has("hello") === true;// Mapsvar m = new Map();m.set("hello", 42);m.set(s, 34);m.get(s) == 34;

有时候我们会把对象作为1个对象的键用来寄存属性值，普通集合类型比如简单对象会禁止垃圾回收器对这些作为属性键存在的对象的回收，有造成内存泄漏的危险。而WeakMap,WeakSet则更加安全些，这些作为属性键的对象如果没有别的变量在援用它们，则会被回收释放掉，具体还看下面的例子。

正文代码来自es6feature

// Weak Mapsvar wm = new WeakMap();wm.set(s, { extra: 42 });wm.size === undefined// Weak Setsvar ws = new WeakSet();ws.add({ data: 42 });//由于添加到ws的这个临时对象没有其他变量援用它，所以ws不会保存它的值，也就是说这次添加其实没成心思

ProxIEs

Proxy可以监听对象身上产生了甚么事情，并在这些事情产生后履行1些相应的 *** 作。1下子让我们对1个对象有了很强的追踪能力，同时在数据绑定方面也很有用途。

以下例子借用自这里。

//定义被侦听的目标对象var engineer = { name: 'Joe Sixpack', salary: 50 };//定义处理程序var interceptor = {  set: function (receiver, property, value) {    console.log(property, 'is changed to', value);    receiver[property] = value;  }};//创建代理以进行侦听engineer = Proxy(engineer, interceptor);//做1些改动来触发代理engineer.salary = 60;//控制台输出：salary is changed to 60

上面代码我已加了注释，这里进1步解释。对处理程序，是在被侦听的对象身上产生了相应事件以后，处理程序里面的方法就会被调用，上面例子中我们设置了set的处理函数，表明，如果我们侦听的对象的属性被更改，也就是被set了，那这个处理程序就会被调用，同时通过参数能够得知是哪一个属性被更改，更改成了甚么值。

Symbols

我们知道对象实际上是键值对的集合，而键通常来讲是字符串。而现在除字符串外，我们还可以用symbol这类值来做为对象的键。Symbol是1种基本类型，像数字，字符串还有布尔1样，它不是1个对象。Symbol 通过调用symbol函数产生，它接收1个可选的名字参数，该函数返回的symbol是唯1的。以后就能够用这个返回值做为对象的键了。Symbol还可以用来创建私有属性，外部没法直接访问由symbol做为键的属性值。

以下例子来自es6features

(function() {  // 创建symbol  var key = Symbol("key");  function MyClass(privateData) {    this[key] = privateData;  }  MyClass.prototype = {    doStuff: function() {      ... this[key] ...    }  };})();var c = new MyClass("hello")c["key"] === undefined//没法访问该属性，由于是私有的

Math，Number，String，Object 的新API

对Math,Number,String还有Object等添加了许多新的API。下面代码一样来自es6features，对这些新API进行了简单展现。

Number.EPSILONNumber.isInteger(Infinity) // falseNumber.isNaN("NaN") // falseMath.acosh(3) // 1.762747174039086Math.hypot(3, 4) // 5Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2) // 2"abcde".contains("cd") // true"abc".repeat(3) // "abcabcabc"Array.from(document.querySelectorAll('*')) // Returns a real ArrayArray.of(1, 3) // Similar to new Array(...),but without special one-arg behavior[0, 0, 0].fill(7, 1) // [0,7,7][1,3].findindex(x => x == 2) // 1["a", "c"].entrIEs() // iterator [0,"a"],[1,"b"],[2,"c"]["a", "c"].keys() // iterator 0,1,2["a", "c"].values() // iterator "a","b","c"Object.assign(Point, { origin: new Point(0,0) })

Promises

Promises是处理异步 *** 作的1种模式，之前在很多3方库中有实现，比如jquery的deferred 对象。当你发起1个异步要求，并绑定了.when(), .done()等事件处理程序时，其实就是在利用promise模式。

//创建promisevar promise = new Promise(function(resolve, reject) {    // 进行1些异步或耗时 *** 作    if ( /*如果成功 */ ) {        resolve("Stuff worked!");    } else {        reject(Error("It broke"));    }});//绑定处理程序promise.then(function(result) {    //promise成功的话会履行这里    console.log(result); // "Stuff worked!"}, function(err) {    //promise失败会履行这里    console.log(err); // Error: "It broke"});