[JS]Some ES6 features

2016-11-20

128
0
Angular2
2016-11-21

在學習 Angular 2 會使用到一些 es6 的 features,

本文記錄 Destructuring Array and Object, Spread Operator, 及 String Literal Type

測試專案可以拿「angular2-seed」或是任何 NG2 的專案都可以。

然後在 button 的 click event run Compoent's method .

先建立測試的 book class

class Book{
  constructor(public bookName:string, 
          public author:string,
          public price:number,
          public desc?:string) 
          {}
}

1.Destructuring

有時我們想從一個 Array 將裡面的內容分指定到不同的變數之中，或是要將一個物件的某些屬性，指定到不同的變數之中。

這時候就可以使用 ES6 的 Destructuring 方式，如下，

let ary = ['a', 'b', 'c', 'd','e'];
let b1 = new Book('aspnet', 'louise', 13.5, 'asp desc');
//let a = ary[0];
//let b = ary[1];
let [a, b] = ary;
console.log(`a:${a}, b:${b}`)

// Spread Operator
let [d, e, ...f] = ary;  //f是一個 string[]
console.log(`d:${d}, e:${e}, f:${f}`);

//將b1.bookName 給 bookName 這個變數
//將b1.author 給 author 這個變數
let {bookName, author} = b1;
console.log(`bookName:${bookName}, author:${author}`);

//也可以使用別名，前面是對應到物件的屬性，:後面是變數名稱
let {bookName: aliasBookname, price:aliasPrice} = b1;
console.log(`aliasBookname:${aliasBookname}, aliasPrice:${aliasPrice}`);

結果如下，

2....spread and ...rest

有時想要針對集合做一些操作，有了 ... 後，可以整個集合來操作，如下，

let ary = ['a', 'b', 'c', 'd','e'];
let ary2 = ['f', 'g', 'h'];
console.log(`ary:${ary}`);
ary.push(...ary2);
console.log(`ary:${ary}`);
ary.push('i');
console.log(`ary:${ary}`);

let ary4 = [...ary, 'j', 'k'];
console.log(`ary4:${ary4}`);

//...rest
const addEs6 = (...numbers) => numbers.map(n => n * 10);
console.log(`addEs6(1, 2, 3, 4):${addEs6(1, 2, 3, 4)}`);

結果如下，

3.String Literal Type

有些變數想要限制只能輸入某些字串，則可以使用 String Literal Type ，如下，

//表示 schedule 只能給 daily or weekly 的值
let schedule : 'daily' | 'weekly';
schedule = 'weekly';
//schedule = 'monthly'; // error

//也可以將它定義成 type 
type ScheduleType = 'daily' | 'weekly';
//let mySchedule: ScheduleType = 'monthly';
let mySchedule: ScheduleType = 'weekly';

結果如下，