ES6 十大特性简介

function calculateTotalAmount () {
  var amount = 0;
  if () {
    var amount = 1;
  }
  { // more crazy blocks!
    var amount = 100;
    {
      var amount = 1000;
    }
  }
  return amount;
}
console.log(calculateTotalAmount(true));
结果将返回1000，这真是一个bug。在ES6中，我们用let限制块级作用域。而var是限制函数作用域。

function calculateTotalAmount () {
  var amount = 0; // probably should also be let, but you can mix var and let
  if () {
    let amount = 1; // first amount is still 0
  }
  { // more crazy blocks!
    let amount = 100; // first amount is still 0
    {
      let amount = 1000; // first amount is still 0
    }
  }
  return amount;
}
 
console.log(calculateTotalAmount(true));

function calculateTotalAmount () {
  const amount = 0;
  if () {
    const amount = 1;
  }
  { // more crazy blocks!
    const amount = 100 ;
    {
      const amount = 1000;
    }
  }
  return amount;
}
console.log(calculateTotalAmount(true));

var _this = this;
$('.btn').click(function(event){
  _this.sendData();
})
在ES6中就不需要用 _this = this

$('.btn').click((event) =>{
  this.sendData();
})

var logUpperCase = function() {
  var _this = this;
 
  this.string = this.string.toUpperCase();
  return function () {
    return console.log(_this.string);
  }
}
 
logUpperCase.call({ string: 'ES6 rocks' })();

var logUpperCase = function() {
  this.string = this.string.toUpperCase();
  return () => console.log(this.string);
}
logUpperCase.call({ string: 'ES6 rocks' })();

var ids = ['5632953c4e345e145fdf2df8','563295464e345e145fdf2df9'];
var messages = ids.map(function (value) {
  return "ID is " + value; // explicit return
});

var ids = ['5632953c4e345e145fdf2df8','563295464e345e145fdf2df9'];
var messages = ids.map(value => `ID is ${value}`); // implicit return

var ids = ['5632953c4e345e145fdf2df8', '563295464e345e145fdf2df9'];
var messages = ids.map(function (value, index, list) {
  return 'ID of ' + index + ' element is ' + value + ' '; // explicit return
});

var ids = ['5632953c4e345e145fdf2df8','563295464e345e145fdf2df9'];
var messages = ids.map((value, index, list) => `ID of ${index} element is ${value} `); // implicit return

var link = function (height, color, url) {
 var height = height || 50;
 var color = color || 'red';
 var url = url || 'http://.yzmcms.';
 ...
}

var link = function(height = 50, color = 'red', url = 'http://.yzmcms.') {
  ...
}

var name = 'Your name is ' + first + ' ' + last + '.';
var url = 'http://blog.yzmcms./api/messages/' + id;

var name = `Your name is ${first} ${last}. `;
var url = `http://blog.yzmcms./api/messages/${id}`;

var roadPoem = 'Then took the other, as just as fair,nt'
    + 'And having perhaps the better claimnt'
    + 'Because it was grassy and wanted wear,nt'
    + 'Though as for that the passing therent'
    + 'Had worn them really about the same,nt';
var fourAgreements = 'You have the right to be you.n
    You can only be you when you do your best.';

var roadPoem = `Then took the other, as just as fair,
    And having perhaps the better claim
    Because it was grassy and wanted wear,
    Though as for that the passing there
    Had worn them really about the same,`;
var fourAgreements = `You have the right to be you.
    You can only be you when you do your best.`;

var data = $('body').data(), // data has properties house and mouse
 house = data.house,
 mouse = data.mouse;

var jsonMiddleware = require('body-parser').jsonMiddleware ;
var body = req.body, // body has username and password
   username = body.username,
   password = body.password;

var { house, mouse} = $('body').data(); // we'll get house and mouse variables
var {jsonMiddleware} = require('body-parser');
var {username, password} = req.body;

var [col1, col2]  = $('.column'),
   [line1, line2, line3, , line5] = file.split('n');

var serviceBase = {port: 3000, url: 'blog.yzmcms.'},
 getAounts = function(){return [1,2,3]};
var aountServiceES5 = {
 port: serviceBase.port,
 url: serviceBase.url,
 getAounts: getAounts,
 toString: function() {
 return JSON.stringify(this.valueOf());
 },
 getUrl: function() {return "http://" + this.url + ':' + this.port},
 valueOf_1_2_3: getAounts()
}

var aountServiceES5ObjectCreate = Object.create(serviceBase)
var aountServiceES5ObjectCreate = {
  getAounts: getAounts,
  toString: function() {
    return JSON.stringify(this.valueOf());
  },
  getUrl: function() {return "http://" + this.url + ':' + this.port},
  valueOf_1_2_3: getAounts()
}

var serviceBase = {port: 3000, url: 'blog.yzmcms.'},
getAounts = function(){return [1,2,3]};
var aountService = {
 __proto__: serviceBase,
 getAounts,

 toString() {
 return JSON.stringify((super.valueOf()));
 },
 getUrl() {return "http://" + this.url + ':' + this.port},
 [ 'valueOf_' + getAounts().join('_') ]: getAounts()
};
console.log(aountService)

setTimeout(function(){
  console.log('Yay!');
}, 1000);

var wait1000 =  new Promise(function(resolve, reject) {
  setTimeout(resolve, 1000);
}).then(function() {
  console.log('Yay!');
});

var wait1000 =  new Promise((resolve, reject)=> {
  setTimeout(resolve, 1000);
}).then(()=> {
  console.log('Yay!');
});

setTimeout(function(){
  console.log('Yay!');
  setTimeout(function(){
    console.log('Wheeyee!');
  }, 1000)
}, 1000);

var wait1000 =  ()=> new Promise((resolve, reject)=> {setTimeout(resolve, 1000)});
wait1000()
    .then(function() {
        console.log('Yay!')
        return wait1000()
    })
    .then(function() {
        console.log('Wheeyee!')
    });

class baseModel {
  constructor(options, data) { // class constructor，node.js 5.6暂时不支持options = {}, data = []这样传参
    this.name = 'Base';
    this.url = 'http://.yzmcms./api';
    this.data = data;
    this.options = options;
   }
 
    getName() { // class method
        console.log(`Class name: ${this.name}`);
    }
}

class AountModel extends baseModel {
    constructor(options, data) {
       // 为了调用父级构造函数，可以毫不费力的唤起super()用参数传递

       super({private: true}, ['32113123123', '524214691']); //call the parent method with super
       this.name = 'Aount Model';
       this.url +='/aounts/';
    }

get aountsData() { //calculated attribute getter
    // ... make XHR
        return this.data;
    }
}

let aounts = new AountModel(5);
aounts.getName();
console.log('Data is %s', aounts.aountsData);

Class name: Aount Model
Data is  32113123123,524214691

module.exports = {
  port: 3000,
  getAounts: function() {
    ...
  }
}

var service = require('module.js');
console.log(service.port); // 3000

export var port = 3000;
export function getAounts(url) {
  ...
}

import {port, getAounts} from 'module';
console.log(port); // 3000

import  as service from 'module';
console.log(service.port); // 3000

$ npm install --save-dev gulp-babel

var gulp = require('gulp'),
  babel = require('gulp-babel');
gulp.task('build', function () {
  return gulp.src('src/app.js')
    .pipe(babel())
    .pipe(gulp.dest('build'));
})

$ npm install --save-dev babel-core

require("babel-core").transform(ES5Code, options);