基本語法

• delete：刪除物件屬性
• in：確認物件是否擁有某屬性 property in object

• 確認屬性值是否為 undefined→ 應用：option object，可避免屬性值為期他的 Falsy family (0、''、false、null)：

    function has(obj, name){
        return typeof obj[name] !== 'undefined';
    }
  
    let obj = {x: undefined, y: 0};
    console.log(has(obj, 'x'));   // false
    console.log(has(obj, 'y'));   // true
    console.log(has(obj, 'x'));   // false
  

this

1. 最基本用法：參考至 . operator 左邊的物件

   function forEach(callback){
     for(let i = 0; i < this.length; ++i){
         callback(this[i]);
     }
   }
   
   let arrayLikeObj = {
     '0': 100,
     '1': 200,
     '2': 300,
     length: 3,
     forEach: forEach
   }
   obj.forEach(function(elem){
     console.log(elem);
   });
   

2. this 參考對象其實會以呼叫方式而定，並非以是否附屬於某個物件而定（參考 call()、apply()、bind() 用法）

call(), apply(), bind()

call(), apply()

• 繼承自 Function，可綁定 this 參考的對象

    // call(), apply()
    function add(num1, num2){
        return this.num + num1 + num2;
    }
  
    let o1 = {num: 10};
    let o2 = {num: 100}
    let args = [20, 30];
    console.log(add.call(o1, 10, 20));   // 40
    console.log(add.apply(o2, args));    // 150
  

bind()

• 回傳新函式並固定 this 參考對象

    function forEach(callback){
        for(let i = 0; i < this.length; ++i){
            callback(this[i]);
        }
    }
  
    let obj = {
        '0': 100,
        '1': 200,
        '2': 300,
        length: 3
    };
  
    let f = forEach.bind(obj);
    f(function(elem){
        console.log(elem);
    });
  

• 將 this 指定為 undefined：Partial function 效果

    function plus(a, b){
         return a + b;
    }
  
    let addFive = plus.bind(undefined, 5);
    console.log(addFive(5));    // 10
    console.log(addFive(10));   // 15
  

對於一個單純是函式且不需使用到this的情況下，建議將this設為undefined

箭頭函式 & this

• arrow function 的 this 由自己所在的環境(lexical environment)決定

• arrow function 的 this 一旦綁定就不能變更

    // Node.js
    this.x = 1;   // this 是全域物件
    function foo1(){
        return this.x;
    }
  
    let o1 = {x: 10, foo1:foo1};
    o1.foo1();   // 10
  
    // 模擬箭頭函式
    let self = this;
    self.x = 1;
  
    function foo2(){
        return self.x;
    }
  
    let o2 = {x: 10, foo2: foo2};
    o2.foo2();   // 1
  

全域物件

• 嚴格模式的全域 this 是 undefined
  • 非嚴格模式則參考至全域物件
• 取得全域物件

    Function('return this')()   // Function建立函式必須用字串指定函式內容
  

• <globalThis>
  
  

ES6 Sugar syntax for object

object literal

• function

    // ES6以前
    var obj1 = {
        '0': 100,
        '1': 200,
        '2': 300,
        length: 3,
        forEach: function(callback){
            for(var i = 0; i < this.length; ++i){
                callback(this[i]);
            }
        }
    }
  
    // ES6
    let obj2 = {
        '0': 100,
        '1': 200,
        '2': 300,
        length: 3,
        forEach(callback){   // 省略 function
            for(let i = 0; i < this.length; ++i){
                callback(this[i]);
            }
        }
    }
  

• 運算結果作為屬性名稱

    // ES6以前
    let prefix = 'doSome';
    let n = 1;
    let o = {};
    o[prefix + n]: function(){};
  
    // ES6
    let o1 = { [prefix + n]: function(){} };
    let o2 = { [prefix + n](){} };
  

settet-getter

• set 設值方法：object.property = value 會呼叫設值方法
• get 取值方法：object.property 會呼叫此方法取值

• 以下範例將 set 和 get 封裝在 function 內，無法以 object() 存取 obj_privates

    function object(){
        let obj_privates = {};
        let obj = {
            set name(value){
                obj_privates.name = value.trim();
            }.
            get name(){
                return obj_privates.name.toUpperCase();
            }
        };
        return obj;
    }
  
    let obj = object();
    obj.name = '    Justin        ';
    console.log(`[${obj.name}]`);   // [JUSTIN]
  

Destructuring 解構

• 只要是可迭代的物件（i.e., 可傳回迭代器）都可以解構

• array

    // ES6以前
    var points = [80, 90, 99];
    var x = point[0];
    var y = point[1];
    var z = point[2];
  
    // ES6
    let point = [80, 90, 99];
    let [x, y, z] = scores;
  
    // 可迭代物件(會傳回迭代器)
    let [x, y, z] = 'XYZ';
  
    // Partial destructuring
    let [x, , y, , z] = [1, 2, 3, 4, 5];
    console.log(x);   // 1
    console.log(y);   // 3
    console.log(z);   // 5
  

• object

    // ex1.
    let point = {x: 10, y: 20};
    let {x, y, z = 30} = point;   // 指定z有預設值, 否則z為undefined
  
    // ex2.
    function foo({x, y}){
         console.log(x, y);
    }
    foo({x: 10, y: 20});  // 10 20
  
    // ex3. Rest
    let {x, y, ...z} = {x: 1, y: 2, a: 3, b: 4};
    console.log(x);   // 1
    console.log(y);   // 2
    console.log(z);   // {a: 3, b: 4}
  
    // ex4. Spread
    z = {a: 9, b: 10}
    let n = {x, y, ...z};
    console.log(n);   // {x: 1, y: 2, a: 9, b: 10}
  

• 變數置換

    let x = 10, y = 20;
    [x, y] = [y, x];
    console.log(x);   // 20
    console.log(y);   // 10
  

• 用解構+遞迴執行sum運算範例

    // ex1.
    function sum1(numbers){
        let [head, ...rest] = numbers;
        if(head){
            return head + sum1(tail);
        }else{
            return 0;
        }
    }
  
    console.log(sum1([1, 2, 3, 4, 5]));   // 15
  
    // ex2.
    function sum2([head, ...tail]){
        return head ? head + sum2(tail) : 0;
    }
    console.log(sum2([1, 2, 3, 4, 5]));   // 15
  

...operator

• Rest 餘集

    let lt = [10, 9, 8, 7, 6];
    let [head, ...tail] = lt;
    console.log(head);   // 10
    console.log(tail);   // [9, 8, 7, 6]
  
    let [, ...tail] = [1, 2, 3, 4, 5];
    console.log(tail);   // [2, 3, 4, 5];
  

• Spread

    // ex1.
    let arr = [1, 2, 3];
    let arr2 = [...arr, 4, 5];
    console.log(arr2);   // [1, 2, 3, 4, 5];
  
    // ex2.
    function plus(a, b){
        return a + b;
    }
    console.log(plus(...[1, 2]));   // 3