ES6 学习笔记之函数的拓展

本文记录了一些 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);
}

Dylan's blog

ES6 学习笔记之函数的拓展

rest 参数

扩展运算符

箭头函数