0%

ES6 筆記

Posted on Edited on

ES6

Babel

JavaScript compiler(es6 to es5)
https://babeljs.io/

Choose your tool (try CLI)
http://babeljs.io/docs/setup/#installation

npm install --save-dev babel-cli

package.json

1
2
3
"scripts": {
  "build": "babel src -d output"
}

npm install babel-preset-env --save-dev

.babelrc

1
2
3
{
  "presets": ["env"]
}

npm run build

Varibale 變數

var : 小心Hoisting、Global
let : Local
const : 不能修改、可以push

Arror 箭頭函式

Ex 1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
class Collection {
  constructor(items = []) {
    this.items = items;
  }
  print() {
    this.items.forEach(function (item) {
      console.log(item);
    });
  }
}
class Item {}
new Collection([
  new Item, new Item
]).print();

一樣, 空或兩個參數以上要加parentheses

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
print() {
  this.items.forEach(function (item) {
    console.log(item);
  });
}
print() {
  this.items.forEach((item) => {
    console.log(item);
  });
}
print() {
  this.items.forEach(item => console.log(item));
}
print() {
  this.items.forEach((item,index) => console.log(item,index));
}

Ex2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
let items = ['A', 'B', 'C'];
// 原始作法
// items = items.map(function (i) {
//   return i + ' hi';
// });
// 箭頭
// items = items.map(i => {
//   return i + ' hi';
// });
// 縮成一排 return是implicit
// items = items.map(i => i + ' hi');
// template語法
items = items.map(i => `${i} hi`);
console.log(items);

Default Parameters 預設參數

1
2
3
4
5
function hihi(paraA = 2, paraB = 3) {
  return paraA + paraB;
}
console.log(hihi(20, 30));
console.log(hihi());

Rest and Spread 其餘參數與展開運算子

以前會用argument key word
都是用 ...

Rest

http://www.w3schools.com/jsref/jsref_reduce.asp

reduce()

1
2
3
4
5
6
7
function sum(...numbers) {
  console.log(numbers);
  return numbers.reduce( function(total, current) {
      return total + current;
  })
}
console.log(sum(1,2,3,4));
1
2
3
4
5
6
7
8
function sum(hi, ...numbers) {
  console.log(numbers);
  console.log(hi);
  return numbers.reduce( function(total, current) {
      return total + current;
  })
}
console.log(sum('QQ', 1,2,3,4));

Spread

1
2
3
4
5
function sum(x, y) {
  return x+y;
}
let numbers = [1, 2];
console.log(sum(...numbers));

Template Strings 字串模板

http://www.w3schools.com/jsref/jsref_join.asp
join()

以前

1
2
3
4
5
6
let template = [
  '<div>',
    '<h1>hihi</h1>',
  '</div>'
].join('');
console.log(template);

現在

1
2
3
4
5
6
7
let parm = 'hihi';
let template = `
  <div>
    <h1>${parm}</h1>
  </div>
`;
console.log(template);

Object 物件的改進

Ex1 Object shorthand

以前

1
2
3
4
5
6
7
8
9
function getItem() {
  let item1 = 'A';
  let item2 = 'B';
  return {
    item1: item1,
    item2: item2
  }
}
console.log(getItem());

現在 他會自動配對參數

1
2
3
4
5
6
7
8
9
function getItem() {
  let item1 = 'A';
  let item2 = 'B';
  return {
    item1,
    item2
  }
}
console.log(getItem());

Ex2 Method shorthand

拿掉冒號跟function關鍵字很方便

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function getItem() {
  let item1 = 'A';
  let item2 = 'B';
  return {
    item1,
    item2,
    // hihi: function () {
    //   return item1 + ' ' + item2;
    // }
    hihi() {
      return `${item1} ${item2}`;
    }
  }
}
console.log(getItem().hihi());

Ex3 Object Destructuring

1
2
3
4
5
6
7
let person = {
  name: 'Ken',
  age: 11
};
// var name = person.name // es5
let { name, age } = person; // es6
console.log(name);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// es5
// function getData(data) {
//   var name = data.name;
//   var age = data.age;
//   console.log(name, age);
// }
// es6
function getData({ name, age }) {
  console.log(name, age);
}
getData({
  name: 'Ken',
  age: 12
});

Classes 類別

以前用prototype

1
2
3
4
5
6
7
8
9
10
11
12
13
function User(name, age) {
  this.name = name;
  this.age = age;
}
User.prototype.setName = function (newName) {
  this.name = newName;
}
var user = new User('Ken', 14);
console.log(user);
user.setName('King');
console.log(user);

現在

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
class User {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  setName(newName) {
    this.name = newName;
  }
}
let user = new User('Ken', 12);
console.log(user);
user.setName('King');
console.log(user);

static

1
2
3
4
5
6
7
8
9
10
11
12
13
class User {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  static createUser(name, age) {
    return new User(name, age);
  }
}
let user2 = User.createUser('Kenne', 22);
console.log(user2);

get set accessors

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
class User {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  // get or set accessors, computed properties.
  get getFullName() {
    return this.name.toUpperCase();
  }
}
let user = new User('Ken', 22);
console.log(user.getFullName);

Modules 模組

語法

以前我們用
CommonJS
AMD
UMD
現在
ES6 !!! export class …..

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// Item.js
// 只能有一個default
export default class Item {
  constructor(items = []) {
    this.items = items;
  }
  getItems() {
    console.log(this.items);
  }
}
export let foo = 'bar';
export function myfunc() {
  console.log('0.0');
}
1
2
3
4
5
6
7
8
9
10
11
12
13
// main.js
// export default的 不用加{}, 一般export要Destructuring
import Item, { foo, myfunc } from './Item';
new Item([
  'A',
  'B',
  'C'
]).getItems();
console.log(foo);
myfunc();

rollup.js

A JavaScript module bundler
http://rollupjs.org/guide/#creating-your-first-bundle
npm install rollup --global

rollup src/main.js > src/main.dist.js
it’s es6… ,so

Buble(很像Babel)
https://www.npmjs.com/package/rollup-plugin-buble
npm install --save-dev rollup-plugin-buble

1
2
3
4
5
6
7
// rollup.config.js
import buble from 'rollup-plugin-buble';
export default {
  entry: 'src/main.js',
  plugins: [ buble() ]
}

rollup --config or rollup -c
rollup -c > src/main.dist.js

Webpack.js

npm install webpack@2.2.0-rc.7 --save-dev

test
./node_modules/.bin/webpack src/main.js dist/main.js

1
2
3
4
5
6
7
8
9
10
// webpack.config.js
var webpack = require('webpack');
module.exports = {
  entry: './src/main.js',
  devtool: 'source-map',
  output: {
    filename: './dist/main.js'
  }
}

./node_modules/.bin/webpack
it’s es6… ,so

https://www.npmjs.com/package/buble-loader
npm install buble-loader buble --save-dev

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// webpack.config.js
var webpack = require('webpack');
module.exports = {
  entry: './src/main.js',
  devtool: 'source-map',
  output: {
    filename: './dist/main.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/, // which file type should run
        loader: 'buble-loader'
      }
    ]
  }
}

./node_modules/.bin/webpack

1
2
3
4
// package.json
"scripts": {
  "webpack": "webpack"
}

npm run webpack

Promises

避免Callback hell

Ex1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// main.js
let start, end;
var timer = new Promise(function (resolve, reject) {
  start = new Date();
  console.log('Init');
  setTimeout(function () {
    end = new Date();
    console.log('Done');
    resolve();
  }, 3000);
})
timer.then(function () {
  console.log('花費時間：' + (end - start));
})

Ex2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// main.js
let start, end;
var timer = function (length) {
  return new Promise(function (resolve, reject) {
    start = new Date();
    console.log('Init');
    setTimeout(function () {
      end = new Date();
      console.log('Done');
      resolve();
    }, length);
  });
};
timer(3000).then( () => console.log('花費時間：' + (end - start)) );

String

新字串函式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// main.js
let title = 'Red QQ';
// es5
// if (title.indexOf('R') == 0) {
//   console.log('R is first.');
// }
// if (title.indexOf('Blue') == -1) {
//   console.log('It is not blue begin.');
// }
// es6
if (title.includes('Red')) {
  console.log('Includes Red');
}
if (title.startsWith('Red')) {
  console.log('Start with Red');
}
if (title.startsWith('QQ', 4)) {
  console.log('4個字之後存在QQ');
}
if (title.endsWith('QQ')) {
  console.log('End with QQ');
}
let str = 'hihi';
console.log(str.repeat(100));

Array

新陣列函式

Ex1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// main.js
let arr = [2, 4, 6, 8, 10];
// es5
console.log(arr.indexOf(8) > -1);
console.log(arr.indexOf(28) > -1);
// es6
// get first one itme > 4
console.log(arr.find(function (item) {
  return item > 4;
}));
// es7 非es6, 雖然chrome已實作
console.log(arr.includes(22));

Ex2

1
2
3
4
5
6
7
8
9
10
11
12
13
class User {
  constructor(name, isAdmin) {
    this.name = name;
    this.isAdmin = isAdmin;
  }
}
let users = [
  new User('Ken', false),
  new User('Kenne', true)
];
console.log( users.find(user => user.isAdmin).name );

Generators

神奇的東西

Ex1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// main.js
function *numbers() {
  console.log('Begin');
  yield 1;
  yield 2;
  yield 3;
}
let iterator = numbers();
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next().value);

Ex2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// main.js
function *range(start, end) {
  while (start <= end) {
    yield start;
    start++;
  }
}
let iterator = range(1, 5);
// console.log(iterator.next());
// console.log(iterator.next());
// console.log(iterator.next());
// console.log(iterator.next());
// console.log(iterator.next());
for (let i of iterator) {
  console.log(i);
}
console.log( [...range(1, 5)] );

Set

一個不重複的陣列

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// main.js
let items = new Set(['one', 'two', 'three', 'one']);
console.log(items);
console.log(items.size);
console.log(items.add('four'));
console.log(items.delete('two'));
console.log(items);
console.log(items.has('four'));
items.forEach(item => console.log(item));
items.clear();
console.log(items);