ES6 學習筆記之函數的拓展

• 2020 年 1 月 5 日
• 筆記

本文記錄了一些 ES6 函數相關的改動，比較重要的就是箭頭函數及箭頭函數內部 this 的變化，其他一些不常見的概念我也僅僅是看了看，並沒有實際操作測試效果。待需要用到的時候再研究。

rest 參數

const add = (...values) => {    let sum = 0;      for (let value of values) {      sum += value;    }      return sum;  }    console.log(add(10, 4, 1, 5));

擴展運算符

擴展運算符就是三個點 ...，將一個數組轉為用逗號分隔的參數序列。

console.log(...[1, 2, 3, 4]);  // 1 2 3 4  console.log(1, ...[2, 3, 4], 5);  // 1 2 3 4 5

擴展運算符用於函數調用

function sum(a, b) {    return a + b;  }    var numbers = [2, 17];  console.log(sum(...numbers));  // 19    function f(v, w, x, y, z) {/*...*/}  var args = [1, 2];  f(-1, ...args, 2, ...[3]);

替代 ES5 的 apply，ES5 中如果要將一個數組轉為參數傳遞，需要用到 apply 方法，而 ES6 中拓展運算符則替代了這一功能。

let max;  // ES5 寫法  max = Math.max.apply(null, [14, 3, 77]);  console.log(max);    // ES6 寫法  max = Math.max(...[11, 2, 100]);  console.log(max);

另外一個例子是在一個數組後追加元素的例子。

// ES5 寫法  var arr1 = [1, 2, 3];  var arr2 = [4, 5, 6];  Array.prototype.push.apply(arr1, arr2);  console.log(arr1);  // [ 1, 2, 3, 4, 5, 6 ]    // ES6 寫法  var arr3 = [1, 2, 3];  var arr4 = [4, 5, 6];  arr3.push(...arr4);  console.log(arr3);  // [ 1, 2, 3, 4, 5, 6 ]

箭頭函數

// ES5  var f_es5 = function (v) {    return v;  }    // ES6  var f_es6 = v => v;

如果不需要參數或需要多個參數，則吧多個參數用括弧括起來

var f_es6_1 = () => 5;  // 等同於  var f_es5_1 = function () { return 5; };    var f_es6_2 = (value1, value2) => value1 + value2;  // 等同於  var f_es5_2 = function (value1, value2) { return value1 + value2; };

this 對象的變化，使用箭頭函數，this 是 undefined，而使用普通函數，this 返回的是全局對象。

setInterval(() => console.log(this), 1000);  // undefined  setInterval(function () { console.log(this); }, 1000);  // 返回全局對象

箭頭函數中是沒有 this 指針的，如果在箭頭函數中列印 this 有具體的值，是因為其使用了外層程式碼塊的 this。如下案例來自書中。

// ES6  function foo() {    setTimeout(() => {      console.log('id', this.id);    }, 100);  }    // 轉為 ES5 表達就是類似如下程式碼  function foo() {    var _this = this;    setTimeout(function () {      console.log('id:', _this.id);    }, 100);  }