ECMAScript6（ECMAScript 2015 ，ES5，ES2016）技术已经在前端圈子很流行了，他给前端开发人员带来了很多惊喜，提供的语法糖使复杂的操作变得简单。
本文没有详细描述这些新特性，因为网上都已经有很多相关的介绍了。主要针对ES6 新特性收集了相关范例代码，他可以让你快速了解这个新的javascript规范。
箭头函数function() 函数的简写表示法，但它不绑定 this。
var odds = evens.map(v => v + 1); // no parentes and no brackets var nums = evens.map((v, i) => v + i); var pairs = evens.map(v => ({even: v, odd: v + 1})); // Statement bodies nums.forEach(v => { if (v % 5 === 0) fives.push(v); });this 是如何工作的？
var object = { name: "Name", arrowGetName: () => this.name, regularGetName: function() { return this.name }, arrowGetThis: () => this, regularGetThis: function() { return this } } console.log(this.name) console.log(object.arrowGetName()); console.log(object.arrowGetThis()); console.log(this) console.log(object.regularGetName()); console.log(object.regularGetThis());结果：
this.name -> object.arrowGetName() -> object.arrowGetThis() -> [object Window] this -> [object Window] object.regularGetName() -> Name object.regularGetThis() -> {"name":"Name"} Classes(类)我们知道“真正”语言中的类(Classes)。在 ES6 中类(Classes)其实是原型继承的语法糖。
class SkinnedMesh extends THREE.Mesh { constructor(geometry, materials) { super(geometry, materials); this.idMatrix = SkinnedMesh.defaultMatrix(); this.bones = []; this.boneMatrices = []; //... } update(camera) { //... super.update(); } get boneCount() { return this.bones.length; } set matrixType(matrixType) { this.idMatrix = SkinnedMesh[matrixType](); } static defaultMatrix() { return new THREE.Matrix4(); } } 增强的对象字面量 var theProtoObj = { toString: function() { return "The ProtoOBject To string" } } var handler = () => "handler" var obj = { // __proto__ __proto__: theProtoObj, // Shorthand for ‘handler: handler' handler, // Methods toString() { // Super calls return "d " + super.toString(); }, // Computed (dynamic) property names [ "prop_" + (() => 42)() ]: 42 }; console.log(obj.handler) console.log(obj.handler()) console.log(obj.toString()) console.log(obj.prop_42)结果：
obj.handler -> () => "handler" obj.handler() -> handler obj.toString() -> d The ProtoOBject To string obj.prop_42 -> 42 字符串插值字符串插值的好语法
字符串插值 var name = "Bob", time = "today"; var multiLine = `This Line Spans Multiple Lines` console.log(`Hello ${name},how are you ${time}?`) console.log(multiLine)结果：
`Hello ${name},how are you ${time}?` -> Hello Bob,how are you today? multiLine -> This Line Spans Multiple Lines 解构 Destructuring愚人码头注：列表匹配
// list "matching" var [a, , b] = [1,2,3]; console.log(a) console.log(b)结果：
a -> 1 b -> 3对象也能很好的解构
nodes = () => { return {op: "a", lhs: "b", rhs: "c"}} var { op: a, lhs: b , rhs: c } = nodes() console.log(a) console.log(b) console.log(c)结果：
a -> a b -> b c -> c使用速记表示法。
nodes = () => { return {lhs: "a", op: "b", rhs: "c"}} // binds `op`, `lhs` and `rhs` in scope var {op, lhs, rhs} = nodes() console.log(op) console.log(lhs) console.log(rhs)结果：
op -> b lhs -> a rhs -> c可在参数位置使用
function g({name: x}) { return x } function m({name}) { return name } console.log(g({name: 5})) console.log(m({name: 5}))结果：
g({name: 5}) -> 5 m({name: 5}) -> 5 故障弱化解构 var [a] = [] var [b = 1] = [] var c = []; console.log(a) console.log(b); console.log(c);结果：
a -> undefined b -> 1 c -> [] 参数默认值（Default） function f(x, y=12) { return x + y; } console.log(f(3)) console.log(f(3,2))结果：
f(3) -> 15 f(3,2) -> 5 扩展（Spread）在函数中：
function f(x, y, z) { return x + y + z; } // 传递数组的每个元素作为参数 console.log(f(...[1,2,3]))结果：
f(...[1,2,3]) -> 6在数组中：
var parts = ["shoulders", "knees"]; var lyrics = ["head", ...parts, "and", "toes"]; console.log(lyrics)结果：
lyrics -> ["head","shoulders","knees","and","toes"] 扩展 + 对象字面量我们可以使用这个创造很酷的对象。
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 }; console.log(x); // 1 console.log(y); // 2 console.log(z); // { a: 3, b: 4 } // Spread properties let n = { x, y, ...z }; console.log(n); // { x: 1, y: 2, a: 3, b: 4 } console.log(obj)可惜的是它还不支持：
npm install --save-dev babel-plugin-transform-object-rest-spread
Rest我们可以使用 rest 操作符来允许无限参数。
function demo(part1, ...part2) { return {part1, part2} } console.log(demo(1,2,3,4,5,6))结果：
demo(1,2,3,4,5,6) -> {"part1":1,"part2":[2,3,4,5,6]} Letlet是新的var。 因为它有块级作用域。
{ var globalVar = "from demo1" } { let globalLet = "from demo2"; } console.log(globalVar) console.log(globalLet)结果：
globalVar -> from demo1 globalLet -> ReferenceError: globalLet is not defined但是，它不会向window分配任何内容：
let me = "go"; // 全局作用域 var i = "able"; // 全局作用域 console.log(window.me); console.log(window.i);结果：
window.me -> undefined window.i -> able不能使用let重新声明一个变量：
let me = "foo"; let me = "bar"; console.log(me);结果：
SyntaxError: Identifier 'me' has already been declared var me = "foo"; var me = "bar"; console.log(me)结果：
me -> bar Constconst 是只读变量。
const a = "b" a = "a"结果：
TypeError: Assignment to constant variable.应该注意，const 对象仍然可以被改变的。
const a = { a: "a" } a.a = "b" console.log(a)结果：
a -> {"a":"b"} For..of迭代器的新类型，可以替代for..in。 它返回的是值而不是keys。
let list = [4, 5, 6]; console.log(list) for (let i in list) { console.log(i); }结果：
list -> [4,5,6] i -> 0 i -> 1 i -> 2 let list = [4, 5, 6]; console.log(list) for (let i of list) { console.log(i); }结果：
list -> [4,5,6] i -> 4 i -> 5 i -> 6 迭代器（Iterators）