//var带来的不合理场景就是用来计数的循环变量泄露为全局变量var a = [];for (var i = 0; i < 10; i++) {  a[i] = function () {    console.log(i);  };}a[6](); // 10

function Person(name) {    this.name = name;}Person.prototype.prefixName = function (arr) {    return arr.map(function (character) {        return this.name + character; // Cannot read property ‘name‘ of undefined    });};

一个常用的解决办法是把 this 存在一个变量中： 

function Person(name) {    this.name = name;}Person.prototype.prefixName = function (arr) {    var that = this; // Store the context of this    return arr.map(function (character) {        return that.name + character;    });};

我们也可以传递一个合适的 this 上下文： 

function Person(name) {    this.name = name;}Person.prototype.prefixName = function (arr) {    return arr.map(function (character) {        return this.name + character;    }, this);}

我们还可以绑定上下文：

function Person(name) {    this.name = name;}Person.prototype.prefixName = function (arr) {    return arr.map(function (character) {        return this.name + character;    }.bind(this));};

使用 箭头函数，this 将不会受到影响，并且我们可以重写上面的函数： 

function Person(name) {    this.name = name;}Person.prototype.prefixName = function (arr) {    return arr.map(character => this.name + character);};

在我们写一个函数的时候，箭头函数更加简洁并且可以很简单地返回一个值

var squares = arr.map(function (x) { return x * x }); // Function Expressionconst arr = [1, 2, 3, 4, 5];const squares = arr.map(x => x * x); // Arrow Function for terser implementation

类Class

在 ES6 之前，我们通过构造函数来创造一个类，并且通过原型来扩展属性：

function Person(name, age, gender) {    this.name   = name;    this.age      = age;    this.gender = gender;}Person.prototype.incrementAge = function () {    return this.age += 1;};

然后可以这样继承类：

function Personal(name, age, gender, occupation, hobby) {    Person.call(this, name, age, gender);    this.occupation = occupation;    this.hobby = hobby;}Personal.prototype = Object.create(Person.prototype);Personal.prototype.constructor = Personal;Personal.prototype.incrementAge = function () {    Person.prototype.incrementAge.call(this);    this.age += 20;    console.log(this.age);};

在 ES6 中，提供了更多的语法糖，可以直接创造一个类：

class Person {    constructor(name, age, gender) {        this.name   = name;        this.age    = age;        this.gender = gender;    }    incrementAge() {      this.age += 1;    }}

使用 extends 关键字来继承一个类： 

class Personal extends Person {    constructor(name, age, gender, occupation, hobby) {        super(name, age, gender);        this.occupation = occupation;        this.hobby = hobby;    }    incrementAge() {        super.incrementAge();        this.age += 20;        console.log(this.age);    }}

字符串

.includes( )

var string = ‘food‘;var substring = ‘foo‘;console.log(string.indexOf(substring) > -1);

之前我们使用 indexOf() 函数的返回值是否 >-1 来判断字符串是否包含某些字符串，现在我们更简单地使用 .includes() 来返回一个布尔值来判断： 

const string = ‘food‘;const substring = ‘foo‘;console.log(string.includes(substring)); // true

.repeat()

function repeat(string, count) {    var strings = [];    while(strings.length < count) {        strings.push(string);    }    return strings.join(‘‘);}

在 ES6 中，可以更简便地实现：

// String.repeat(numberOfRepetitions)‘meow‘.repeat(3); // ‘meowmeowmeow‘

使用 模版字符串 我们就可以不用对某些特殊自负进行转义处理了： 

var text = "This string contains \"double quotes\" which are escaped.";let text = `This string contains "double quotes" which don‘t need to be escaped anymore.`;

模版字符串 还支持插入，可以把变量值和字符串连接起来.

var name = ‘Tiger‘;var age = 13;console.log(‘My cat is named ‘ + name + ‘ and is ‘ + age + ‘ years old.‘);

更简单：

const name = ‘Tiger‘;const age = 13;console.log(`My cat is named ${name} and is ${age} years old.`);

模版字符串 还支持表达式：

let today = new Date();let text = `The time and date is ${today.toLocaleString()}`;

结构对象

var luke = { occupation: ‘jedi‘, father: ‘anakin‘ };var occupation = luke.occupation; // ‘jedi‘var father = luke.father; // ‘anakin‘//es6let luke = { occupation: ‘jedi‘, father: ‘anakin‘ };let {occupation, father} = luke;console.log(occupation); // ‘jedi‘console.log(father); // ‘anakin‘

模块

使用commonJs输出

module.exports = 1;module.exports = { foo: ‘bar‘ };module.exports = [‘foo‘, ‘bar‘];module.exports = function bar () {};

使用es6输出

在 ES6 中我们可以暴露多个值，使用 Exports： 

export let name = ‘David‘;export let age  = 25;

或者暴露一个对象列表：

function sumTwo(a, b) {    return a + b;}function sumThree(a, b, c) {    return a + b + c;}export { sumTwo, sumThree };

模块导入：

import {    sumTwo as addTwoNumbers,    sumThree as sumThreeNumbers} from ‘math/addition’;

另外，我们可以导入所有的东西（整体加载）：

import * as util from ‘math/addition‘;

最后，我们可以从一个模块中导入一个值的列表：

import * as additionUtil from ‘math/addition‘;const { sumTwo, sumThree } = additionUtil;

可以像这样导入默认绑定的输出：

import api from ‘math/addition‘;// Same as: import { default as api } from ‘math/addition’;

虽然最好保持出口的简单，但如果需要的话我们有时可以混合默认的进口和混合进口。当我们这样出口的时候：

// foos.jsexport { foo as default, foo1, foo2 };

我们可以这样导入它们：

import foo, { foo1, foo2 } from ‘food’;

当我们用 commonjs 的语法导入一个模块的出口时（比如 React），我们可以这样做：

import React from ‘react‘;const { Component, PropTypes } = React;

还有更精简的写法：

import React, { Component, PropTypes } from ‘react’;

默认参数：

function addTwoNumbers(x, y) {    x = x || 0;    y = y || 0;    return x + y;}

ES6 中，函数的参数可以支持设置默认值：

function addTwoNumbers(x=0, y=0) {    return x + y;}

function logArguments() {    for (var i=0; i < arguments.length; i++) {        console.log(arguments[i]);    }}

function logArguments(...args) {    for (let arg of args) {        console.log(arg);    }}

function initializeCanvas(options) {    var height = options.height || 600;    var width  = options.width  || 400;    var lineStroke = options.lineStroke || ‘black‘;}

function initializeCanvas(    { height=600, width=400, lineStroke=‘black‘}) {        // Use variables height, width, lineStroke here    }

function initializeCanvas(    { height=600, width=400, lineStroke=‘black‘} = {}) {        // ...    }

Math.max.apply(null, [-1, 100, 9001, -32]); // 9001

Math.max(...[-1, 100, 9001, -32]); // 9001

let cities = [‘San Francisco‘, ‘Los Angeles‘];let places = [‘Miami‘, ...cities, ‘Chicago‘]; // [‘Miami‘, ‘San Francisco‘, ‘Los Angeles‘, ‘Chicago‘]

const refreshComponent = Symbol();React.Component.prototype[refreshComponent] = () => {    // do something}

Symbol.for(key)

Symbol(‘foo‘) === Symbol(‘foo‘) // falseSymbol.for(‘foo‘) === Symbol(‘foo‘) // falseSymbol.for(‘foo‘) === Symbol.for(‘foo‘) // true

var map = new Object();map[key1] = ‘value1‘;map[key2] = ‘value2’;

let map = new Map();> map.set(‘name‘, ‘david‘);> map.get(‘name‘); // david> map.has(‘name‘); // true

let map = new Map([    [‘name‘, ‘david‘],    [true, ‘false‘],    [1, ‘one‘],    [{}, ‘object‘],    [function () {}, ‘function‘]]);for (let key of map.keys()) {    console.log(typeof key);    // > string, boolean, number, object, function}

class Person {    constructor(age) {        this._age = age;    }    _incrementAge() {        this._age += 1;    }}

let _age = new WeakMap();class Person {    constructor(age) {        _age.set(this, age);    }    incrementAge() {        let age = _age.get(this) + 1;        _age.set(this, age);        if (age > 50) {            console.log(‘Midlife crisis‘);        }    }}

let map = new WeakMap();let el  = document.getElementById(‘someElement‘);// Store a weak reference to the element with a keymap.set(el, ‘reference‘);// Access the value of the elementlet value = map.get(el); // ‘reference‘// Remove the referenceel.parentNode.removeChild(el);el = null;// map is empty, since the element is destroyed

func1(function (value1) {    func2(value1, function (value2) {        func3(value2, function (value3) {            func4(value3, function (value4) {                func5(value4, function (value5) {                    // Do something with value 5                });            });        });    });});

func1(value1)    .then(func2)    .then(func3)    .then(func4)    .then(func5, value5 => {        // Do something with value 5    });

function* sillyGenerator() {    yield 1;    yield 2;    yield 3;    yield 4;}var generator = sillyGenerator();console.log(generator.next()); // { value: 1, done: false }console.log(generator.next()); // { value: 2, done: false }console.log(generator.next()); // { value: 3, done: false }console.log(generator.next()); // { value: 4, done: false }

function request(url) {    getJSON(url, function(response) {        generator.next(response);    });}

function* getData() {    var entry1 = yield request(‘http://some_api/item1‘);    var data1  = JSON.parse(entry1);    var entry2 = yield request(‘http://some_api/item2‘);    var data2  = JSON.parse(entry2);}

通过 yield，我们可以保证 entry1 有 data1 中我们需要解析并储存的数据。

function request(url) {    return new Promise((resolve, reject) => {        getJSON(url, resolve);    });}

function iterateGenerator(gen) {    var generator = gen();    (function iterate(val) {        var ret = generator.next();        if(!ret.done) {            ret.value.then(iterate);        }    })();}

iterateGenerator(function* getData() {    var entry1 = yield request(‘http://some_api/item1‘);    var data1  = JSON.parse(entry1);    var entry2 = yield request(‘http://some_api/item2‘);    var data2  = JSON.parse(entry2);});

var request = require(‘request‘);function getJSON(url) {  return new Promise(function(resolve, reject) {    request(url, function(error, response, body) {      resolve(body);    });  });}async function main() {  var data = http://www.mamicode.com/await getJSON();  console.log(data); // NOT undefined!}main();