函数与箭头函数

函数的长度

函数的长度会根据形参中默认值的位置发生变化。

function test(a, b, d) {}
test(1); // 输出 3
console.log(test.length);

给出默认值后：

function test(c = 1, a, b, d) {}
test(1); // 输出 0
console.log(test.length);

function test(a, b, c = 1, d) {}
test(1); // 输出 2
console.log(test.length);

参数的默认值

function foo({ x, y = 5 }) {
  console.log(x, y);
}
foo({}); // 输出 undefined 5
foo({ x: 1 }); // 输出 1 5
foo({ x: 1, y: 2 }); // 输出 1 2
// foo(); 报错

匹配默认值

function fetch(url, { body = '', method = 'GET', header = {} } = {}) {
  console.log(method); // 输出 GET
}
fetch('http://www.baidu.com');

函数作用域

var x = 1;

function foo(
  x,
  y = function () {
    x = 2;
    console.log('x1=' + x); // 输出 x1=2
  }
) {
  var x = 3;
  y();
  console.log('x2=' + x); // 输出 x2=3
}
foo();
console.log('x3=' + x); // 输出 x3=1

this 规则

默认绑定规则

隐式绑定：调用者决定 this 指向

显示绑定：使用 call、apply 或 bind 方法

new 绑定：this 指向新创建的实例对象

箭头函数

箭头函数与普通函数在某些方面不同。

var f = (a) => a;
var f = function (a) {
  return a;
};

基本形式

() => {};

只有一个参数，返回一个表达式

var f = (a) => a;
var f = (a) => a;

无参数

var f = () => 5;
// 等价于
function f() {
  return 5;
}

多个参数

let add = (a, b) => a + b;
// 等价于
function add(a, b) {
  return a + b;
}

使用大括号的返回值

let add = (a, b) => {
  return a + b;
};
console.log(add(5, 5));

排序

var arr = [12, 321, 321, 3123, 123, 2];
var sortedArr = arr.sort((a, b) => a - b);
console.log(sortedArr); // 输出 [2, 12, 123, 321, 321, 3123]

ES5 排序

function sortNumbers() {
  return Array.prototype.slice.call(arguments).sort(function (a, b) {
    return a - b;
  });
}
console.log(sortNumbers(1, 3123, 213, 2134, 412, 4215, 125, 12, 321));
// 输出 [1, 12, 125, 213, 321, 412, 2134, 3123, 4215]

arguments 对象

箭头函数没有 arguments 对象。

var sum = (a, b) => {
  console.log(arguments);
  return a + b;
};
sum(1, 2); // 报错: arguments is not defined

扩展运算符

rest 运算符用于展开或收集参数。

var sum = (...args) => {
  console.log(args);
  console.log(args[0] + args[1]);
};
sum(1, 2);

展开数组

function foo(x, y, z) {
  console.log(x, y, z);
}
// 使用 ... 展开数组，相当于传入 1, 2, 3
foo(...[1, 2, 3]); // 输出 1 2 3

数组合并

let a = [2, 3, 4];
let b = [1, ...a, 5];
console.log(b); // 输出 [1, 2, 3, 4, 5]

收集实参

扩展运算符必须是最后一个参数，否则后面的参数将无法接收实参。

let fn = (a, b, ...c) => {
  console.log(a, b, c);
};
// 收集后面的所有实参
fn(1, 2, 3, 4, 5, 6, 7); // 输出 1 2 [3, 4, 5, 6, 7]

排序

const sortNumbers = (...args) => args.sort((a, b) => a - b);
console.log(sortNumbers(1, 3123, 213, 2134, 412, 4215, 125, 12, 321));
// 输出 [1, 12, 125, 213, 321, 412, 2134, 3123, 4215]