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]