es6学习日记

let 和 const 命令

let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

let name = 'zach'
{
    let name = 'obama'
    console.log(name)  //obama
}
console.log(name)  //zach

使用var声明的变量在for循环的计数器中，变量被泄露为全局变量，如：

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10

上面代码中，变量i是var声明的，在全局范围内都有效。所以每一次循环，新的i值都会覆盖旧值，导致最后输出的是最后一轮的i的值。而使用let则不会出现这个问题。

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

const命令，用来声明一个只读的常量。一旦声明，常量的值就不能改变。

const PI = 3.1415;
PI // 3.1415

PI = 3;
// TypeError: Assignment to constant variable.

模板字符串

传统的JavaScript语言，输出模板通常是这样写的。

$('#result').append(
  'There are <b>' + basket.count + '</b> ' +
  'items in your basket, ' +
  '<em>' + basket.onSale +
  '</em> are on sale!'
);

上面这种写法相当繁琐不方便，ES6引入了模板字符串解决这个问题。

$('#result').append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);

用反引号（`）来标识起始，用${}来引用变量。

class定义类

传统的构造函数的写法：

function Point(x, y) {
  this.x = x;
  this.y = y;
};

Point.prototype.toString = function () {
  return '(' + this.x + ', ' + this.y + ')';
};

var p = new Point(1, 2);

ES6写法：

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

var p = new Point(1, 2);

上面代码首先用class定义了一个“类”，可以看到里面有一个constructor方法，这就是构造方法，而this关键字则代表实例对象。简单地说，constructor内定义的方法和属性是实例对象自己的，而constructor外定义的方法和属性则是所有实力对象可以共享的，等同于ES5上构造函数的prototype方法和属性。另外，方法之间不需要逗号分隔，加了会报错。

extends继承

Class之间可以通过extends关键字实现继承，super关键字，它指代父类的实例（即父类的this对象）。在子类的构造函数中，只有调用super之后，才可以使用this关键字，否则会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }

  toName(){
      return 'aaa'
  }
}
class ColorPoint extends Point {
  constructor(x, y, color) {
    super(x, y); // 调用父类的constructor(x, y)
    this.color = color;
  }

  toString() {
    return this.color + ' ' + super.toString(); // 调用父类的toString()
  }
}
var c = new ColorPoint(1,2,'red');
console.log(c.toString()) //red (1, 2)

箭头函数

ES6允许使用“箭头”（=>）定义函数。

// ES5
function(i) {
  return i + 1;
};
// ES6
(i) => i + 1;


// ES5
function(x, y) { 
    x++;
    y--;
    return x + y;
}
// ES6
(x, y) => {
    x++; 
    y--; 
    return x+y
}

箭头函数可以绑定this对象，大大减少了显式绑定this对象的写法（call、apply、bind）。

class Animal {
    constructor(){
        this.type = 'animal'
    }
    says(say){
        setTimeout(function(){
            console.log(this.type + ' says ' + say)
        }, 1000)
    }
}

var animal = new Animal()
animal.says('hi')  //undefined says hi

运行上面的代码会报错，这是因为setTimeout中的this指向的是全局对象。

class Animal {
    constructor(){
        this.type = 'animal'
    }
    says(say){
        setTimeout( () => {
            console.log(this.type + ' says ' + say)
        }, 1000)
    }
}
var animal = new Animal()
animal.says('hi')  //animal says hi

当我们使用箭头函数时，函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，它的this是继承外面的，因此内部的this就是外层代码块的this。

module模块

模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

export的写法：

方法一：单个输出
// profile.js
export var firstName = 'Michael';
export function multiply(x, y) {
  return x * y;
};
export var year = 1958;

方法二：使用大括号指定所要输出的一组变量
// profile.js
var firstName = 'Michael';
export function multiply(x, y) {
  return x * y;
};
var year = 1958;
export {firstName, multiply, year};

方法三：使用as关键字重命名
// profile.js
var firstName = 'Michael';
export function multiply(x, y) {
  return x * y;
};
var year = 1958;
export {
  v1 as firstName ,
  v2 as multiply,
  v2 as year 
};

export语句输出的接口，与其对应的值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。

export var foo = 'bar';
setTimeout(() => foo = 'baz', 500);

上面代码输出变量foo，值为bar，500毫秒之后变成baz。

import的写法：

import {firstName, multiply, year} from './profile';

//使用as关键字，将输入的变量重命名
import { firstName as surname } from './profile';

//使用用星号（*）指定一个对象，所有输出值都加载在这个对象上面
import * as preson from './profile';
console.log(preson.firstName);
console.log(preson.multiply());

export default

export default命令，为模块指定默认输出，一个模块只能有一个默认输出。使用import命令可以用任意名称指向使用export default命令输出的方法。

// import-default.js
export default function foo() {
  console.log('foo');
}

// 或者写成

function foo() {
  console.log('foo');
}

export default foo;

//main.js
import customName from './export-default';
customName(); // 'foo'

Set和Map数据结构

Set它类似于数组，但是成员的值都是唯一的，没有重复的值。

// 删除数组中的重复项
const set = new Set([1, 2, 3, 4, 4]);
[...set]
// [1, 2, 3, 4]

// size：获取数组的长度
const items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
items.size // 5

// add()：添加某个值，返回Set结构本身
const items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
items.add(8);
[...items]
// [1, 2, 3, 4,5,8]

// delete：删除某个值，返回一个布尔值，表示删除是否成功
const items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
items.delete(1);
[...items]
// [ 2, 3, 4,5]

// has：返回一个布尔值，表示该值是否为Set的成员
const items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
items.has(1) 

// clear()：清除所有成员，没有返回值
const items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
items.clear() 

Array.from方法可以将 Set 结构转为数组。

function dedupe(array) {
  return Array.from(new Set(array));
}

dedupe([1, 1, 2, 3]) // [1, 2, 3]