javaScript features (ECMAScript6)

Class

define

class Queue {
    _queue;      
  constructor(contents = []) {
    this._queue = [...contents];
  }
  pop() {
    const value = this._queue[0];
    this._queue.splice(0, 1);
    return value;
  }

extends

class PeekableQueue extends Queue {
  peek() {
    return this._queue[0];
  }

class Account extends Foo {
  constructor(balance) {
    this.balance = balance;
  }

  history(done) {
    someLongTask((err, data) => {
      // Do something with data
      done(null, data);
    });
  }

  deposit(amount) {
    this.balance += amount;
    return this.balance;
  }
}

// Currently, you can only declare functions in a class
Account.types = ['checking', 'savings'];

get,set

class Account {
  constructor() {
    this.balance = 0;
  }

  get underBudget() {
    return this.balance >= 0;
  }

  get overBudget() {
    return this.balance < 0;
  }
}

const myAccount = Account();
myAccount.balance = 100;
console.log(myAccount.underBudget); // true

Iterable Class

可建立iterable class，並且可用generator建立iterator。

class MyIterable {
  constructor(items) {
    this.items = items;
  }

  *[Symbol.iterator]() {
    for (let item of this.items) {
      yield `Hello, ${item}`;
    }
  }
}

const test = new MyIterable([1, 2, 3, 4, 5]);

for (let item of test) {
  console.log(item); // => Hello, 1...
}

Map

let map = new Map(arr);

for (let key of map.keys()) {
  console.log(key);
}

for (let value of map.values()) {
  console.log(value);
}

for (let item of map.entries()) {
  console.log(item[0], item[1]
}

Module

基本定義與引用

用ES6 export，就用import；不要用require

一個文件中不要export與default export一起用

不要在import中使用*，確保module中有一個default export

//定義模組 module.js

var privateVar = "privateVar";  
//不能被外部引用的成員
export var publicVar = "and this one is public";   
//export出去，可被外部引用的成員

export function getVar() {
   return privateVar;
};

//引用模組 use.js
import { getVar, publicVar } from 'mymodule'; 
//import getVar及publicVar兩個成員
console.log(getVar());

//一次引用這個模組的所有可引用成員
X import 'mm' from 'mymodule';
X import 'mymodule' as mm;
//或是這樣
import * as 'mm' from 'mymodule';  //不建議使用*
import abc =require('mymodule');

//不一定都有implement
import defaultMember from "module-name";
import * as name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import defaultMember, { member [ , [...] ] } from "module-name";
import defaultMember, * as name from "module-name";
import "module-name";

console.log(mm.gerVar());

default export(無命名export) (文件中只有一個成員)

//------ myFunc.js ------
export default function () { ... };

//------ main1.js ------
import myFunc from 'myFunc';
myFunc();

//------ MyClass.js ------
export default class { ... };
 
//------ main2.js ------
import MyClass from 'MyClass';
let inst = new MyClass();

一個文件中同時有export(一般export)與default export(無命名export)

//------ underscore.js ------
export default function (obj) {
    ...
};

export function each(obj, iterator, context) {
    ...
}
export { each as forEach };

//------ main.js ------
import _, { each } from 'underscore';
...

default export就是another named export

//以下兩者相同
import { default as foo } from 'lib';
import foo from 'lib';

//以下兩個模組export相同
//------ module1.js ------
export default 123;

//------ module2.js ------
const D = 123;
export { D as default };

commonJS的module

//------ underscore.js ------
var _ = function (obj) {
    ...
};
var each = _.each = _.forEach =
    function (obj, iterator, context) {
        ...
    };
module.exports = _;
 

//------ main.js ------
var _ = require('underscore');
var each = _.each;
...

//------ lib.js ------
var sqrt = Math.sqrt;
function square(x) {
    return x * x;
}
function diag(x, y) {
    return sqrt(square(x) + square(y));
}
module.exports = {
    sqrt: sqrt,
    square: square,
    diag: diag,
};
 
//------ main.js ------
var square = require('lib').square;
var diag = require('lib').diag;
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5