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);  }