Wells

新特性

Constants

const PI = 3.141593

//  only in ES5 through the help of object properties
//  and only in global context and not in a block scope
Object.defineProperty(typeof global === "object" ? global : window, "PI", {
    value:        3.141593,
    enumerable:   true,
    writable:     false,
    configurable: false
})

Scoping

Block-Scoped Variables

Block-scoped function

{
  function foo () { return 1 }
  foo() === 1
  {
      function foo () { return 2 }
      foo() === 2
  }
  foo() === 1
}

//  only in ES5 with the help of block-scope emulating
//  function scopes and function expressions
(function () {
    var foo = function () { return 1 }
    foo() === 1
    (function () {
        var foo = function () { return 2 }
        foo() === 2
    })();
    foo() === 1
})()

箭头（Arrow）

=>是function的简写形式，支持expression 和 statement 两种形式。同时一点很重要的是它拥有词法作用域的this值，帮你很好的解决this的指向问题，这是一个很酷的方式，可以帮你减少一些代码的编写，先来看看它的语法。

([param] [, param]) => {
   statements
}
param => expression

来看个具体的例子：

odds  = evens.map(v => v + 1)
pairs = evens.map(v => ({ even: v, odd: v + 1 }))
nums  = evens.map((v, i) => v + i)

# ECMAScript 5
odds  = evens.map(function (v) { return v + 1 })
pairs = evens.map(function (v) { return { even: v, odd: v + 1 } })
nums  = evens.map(function (v, i) { return v + i })

Extended Parameter Handling

Default Parameter Values

function f (x, y = 7, z = 42) {
    return x + y + z
}
f(1) === 50

# ECMAScript 5
function f (x, y, z) {
    if (y === undefined)
        y = 7
    if (z === undefined)
        z = 42
    return x + y + z
}
f(1) === 50

Rest Parameter

function f(x, y, ...a){
  return (x+y) * a.length
}

f(1, 2, "hello", true, 7) === 9

# ECMAScript 5
function f (x, y) {
  var a = Array.prototype.slice.call(arguments, 2)
  return (x + y) * a.length
}

Spread Operator

Spreading of elements of an iterable collection (like an array or even a string) into both literal elements and individual function parameters.

var params = [ "hello", true, 7 ]
var other = [ 1, 2, ...params ] // [ 1, 2, "hello", true, 7 ]
f(1, 2, ...params) === 9

var str = "foo"
var chars = [ ...str ] // [ "f", "o", "o" ]

# ECMAScript 5
var params = [ "hello", true, 7 ];
var other = [1, 2].conact(params);
f.apply(undefined, [1, 2].conact(params)) === 9

var str = "foo"
var chars = str.split("")

Template Literals

String Interpolation

Intuitive expression interpolation for single-line and multi-line strings.

var customer = { name: "Foo" }
var card = { amount: 7, product: "Bar", unitprice: 42 }
message = `Hello ${customer.name},want to buy ${card.amount} ${card.product} for a total of ${card.amount * card.unitprice} bucks?`

Custom Interpolation

Flexible expression interpolation for arbitrary methods.

get`http://example.com/foo?bar=${bar + baz}&quux=${quux}`

Raw String Access

Access the raw template string content (backslashes are not interpreted).

Enhanced Object Properties

Property Shorthand

Shorter syntax for common object property definition idiom.

obj = { x, y }

# ECMAScript 5
obj = { x: x, y: y }

Computed Property Names

Support for computed names in object property definitions.

obj = {
    foo: "bar",
    [ "prop_" + foo() ]: 42
}

# ECMAScript 5
obj = {
    foo: "bar"
}
obj[ "prop_" + foo() ] = 42

Method Properties

Support for method notation in object property definitions, for both regular functions and generator functions.

obj = {
    foo (a, b) {
        …
    },
    bar (x, y) {
        …
    },
    *quux (x, y) {
        …
    }
}

# ECMAScript 5
obj = {
    foo: function (a, b) {
        …
    },
    bar: function (x, y) {
        …
    },
    //  quux: no equivalent in ES5
    …
}

Destructuring Assignment

Array Matching

var list = [ 1, 2, 3 ]
var [ a, , b ] = list
[ b, a ] = [ a, b ]

# ECMAScript 5
var list = [ 1, 2, 3 ]
var a = list[0], b = list[2]
var tmp = a; a = b; b = tmp

Object Matching, Shorthand Notation

Intuitive and flexible destructuring of Objects into individual variables during assignment.

var { op, lhs, rhs } = getASTNode()

# ECMAScript 5
var tmp = getASTNode()
var op  = tmp.op
var lhs = tmp.lhs
var rhs = tmp.rhs

类（class）

ES6 引入了class（类），让javascript的面向对象编程变得更加容易清晰和容易理解。类只是基于原型的面向对象模式的语法糖。

class Animal {
  // 构造方法，实例化的时候将会被调用，如果不指定，那么会有一个不带参数的默认构造函数.
  constructor(name,color) {
    this.name = name;
    this.color = color;
  }
  // toString 是原型对象上的属性
  toString() {
    console.log('name:' + this.name + ',color:' + this.color);

  }
}

var animal = new Animal(‘dog’,’white’); animal.toString();

console.log(animal.hasOwnProperty(‘name’)); //true console.log(animal.hasOwnProperty(‘toString’)); // false console.log(animal.proto.hasOwnProperty(‘toString’)); // true

class Cat extends Animal { constructor(action) { // 子类必须要在constructor中指定super 方法，否则在新建实例的时候会报错. // 如果没有置顶consructor,默认带super方法的constructor将会被添加、 super(‘cat’,’white’); this.action = action; } toString() { console.log(super.toString()); } }

var cat = new Cat(‘catch’) cat.toString();

// 实例cat 是 Cat 和 Animal 的实例，和Es5完全一致。 console.log(cat instanceof Cat); // true console.log(cat instanceof Animal); // true

类的 `prototype` 属性和 `proto`属性

一个实例化对象会有一个 __proto__ 指向构造函数的 `````prototype属性。在 class 中。同时具有proto和prototype```` 两个属性，存在两条继承链。

子类的 __proto__ 属性，表示构造函数的继承，总是指向父类。
子类的 prototype 的 __proto__ 属性表示方法的继承，总是指向父类的 prototype 属性。

class Cat extends Animal {} console.log(Cat.proto === Animal); // true console.log(Cat.prototype.proto === Animal.prototype); // true

Module

到目前为止,javascript (ES5及以前) 还不能支持原生的模块化，大多数的解决方案都是通过引用外部的库来实现模块化。比如遵循CMD规范的 Seajs 和AMD的 RequireJS 。在ES6中，模块将作为重要的组成部分被添加进来。模块的功能主要由 export 和 import 组成.每一个模块都有自己单独的作用域，模块之间的相互调用关系是通过 export来规定模块对外暴露的接口，通过import来引用其它模块提供的接口。同时还为模块创造了命名空间，防止函数的命名冲突。

export,import 命令

//test.js
export var name = 'Rainbow'

ES6将一个文件视为一个模块，上面的模块通过 export 向外输出了一个变量。一个模块也可以同时往外面输出多个变量。

//test.js
var name = 'Rainbow';
var age = '24';
export {name, age};

定义好模块的输出以后就可以在另外一个模块通过import引用。

//index.js
import {name, age} from './test.js'

1、新增块级作用域，用关键字let、const表示；

新特性