ECMAScript中認識到的一些用法

最近看到一些使用 ECMAScript 的使用文章，在這裡做個記錄， 也許幫助自己記憶也能幫助別人(會用到Arrow Function，需要對 Arrow Function 先了解)

1. 建立新物件 & 新陣列的方法

未給值:
var Object = new Object( ) 或寫成 var Object = { }
var NewArray = new Array( ) 或寫成 var NewArray = [ ]

給值
var Object = {firstName: Scott, lastName: Wang, age: 31, };
var NewArray = [11,22,33,44 ]

2. 函數中未包含參數，但透過 arguments 搞定
var Add = ( ) => { alert(arguments.length); alert(arguments[2];}  // 3 45
Add(23,45,12);

3. 利用陣列當做參數計算 (利用apply )

var Add = ( ) => {
 var sum;
 for (var i = 0, j = arguments.length; i < j; i++) {
        sum += arguments[i];
}

Add.apply(null, [2,3,4,5]);  // 14

4. 函式附著到物件上( attach Function)

Circulate(Num1, Num2)
{
   return {
       first: Num1,
       last:  Num2,
       Add: ( ) => { this.first + this.last },
       Sub: ( ) => { this.first - this.last }
  }
}

Circulate cc =  Circulate(100, 25)
cc.Add( )  // 125
cc.Sub( )  //   75


5. 依上例，利用 prototype 加入新的函數

cc.Multi( )  // Type Error

Circulate.prototype.Multi = ( ) => { return this.first * this.last } // 2500


6. 利用 Closures 特性記憶 property 

var Result = (Num1) =>{return (Num2) => { return Num1 + Num2}}

X = Result(9)

X(8) // 17


7. Map 的用法及介紹

var s = new Map( );
obj = {name: Wang}
s.set(o, "Content");
console.log(s.get(obj));  // "Content"

// 鍵值可以是下列各種形式
s.set(22, "hello");
s.set("Name","hello1");
s.set(undefined, "hello2");
var func= function() {console.log("hello");}
s.set(func, "hello ES");  // 函數也行 ^^..

8. Set 的用法及介紹
var s = new Set( );
[1,2,3,4,2,1,3,5].map(x => s.add(x))
for (i of s)
console.log(i); // 1,2,3,4,5 只會有唯一的值，不會重覆

s.add(8);  //
s.has(3); // true
s.delete(2);
s.has(2); // false
s.clear( ); // 全部清除

9. 函數本身可以設定默認值:

var func = (xx = 10) => ({id:xx, name:"Wang"});

var sss = func( )
console.log('sss = ' + sss.id); // 10


10. for ...in 獲取鍵名， for ...of 可以直接取值
var ary = [11,22,33];
for (i in ary) console.log(i); // 0, 1, 2
for (i of ary) console.log(i); // 11,22,33

11. 可以使用 class 並允許定義建構式 (Constructor)
      class Person{
        constructor(n,a,y)
        {
            this.name = n;
            this.founder = a;
            this.year = y;
        }
    }

    var sss = new Language("Wang", "WW", 23);
    alert(sss.name);  // "Wang"

12. 使用 extends 繼承 class

class 同上，我們可以用extends 來繼承 Person class 範例如下

class AnotherPerson extends Person{
constructor(x, y, z, address){
display(x, y, z);
this.address = address;
}
record( ){
   //...
   display.record( );
}
}

參考連結:
http://javascript.ruanyifeng.com/advanced/ecmascript6.html

13. Generator & yield 取代了 promise

在 function 後面加上一顆* 裡面就可以使用 yield 成為 Generator ， Generator 對我的認知而言有點像是部份執行，還可再退出後再度執行，因此可以做到非同步的效果。

function* doMaker( )
{
    var index = 0;
    while(index < 3)
        yield index++;   // yield 有鎖住執行的效果，達到非同步的作用
}

var gen = doMaker( );

console.log(gen.next( ).value);  // 0
console.log(gen.next( ).value);  // 1
console.log(gen.next( ).value);  // 2
console.log(gen.next( ).value);  //  undefined