es6学习语法总结-函数扩展

一、函数默认值

1、ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。传空或不传则返回默认值

function log(x, y = 'World') {
  console.log(x, y);
}
log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello

参数变量是默认声明的，所以不能用let或const再次声明。

使用参数默认值时，函数不能有同名参数

function foo(x = 5) {
  let x = 1; // error
  const x = 2; // error
}
function foo(x, x, y = 1) {
  // ...
}

2、与解构赋值默认值结合使用

参数默认值可以与解构赋值的默认值，结合起来使用。

只有当函数foo的参数是一个对象时，变量x和y才会通过解构赋值而生成。

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() // TypeError: Cannot read property 'x' of undefined
function fetch(url, { body = '', method = 'GET', headers = {} }) {
  console.log(method);
}
fetch('<http://example.com>', {})
// "GET"
fetch('<http://example.com>')
// 报错

双重默认值，函数fetch没有第二个参数时，函数参数的默认值就会生效，然后才是解构赋值的默认值生效，变量method才会取到默认值GET。

function fetch(url, { body = '', method = 'GET', headers = {} }) {
  console.log(method);
}
fetch('<http://example.com>', {})
// "GET"
fetch('<http://example.com>')
// 报错
function fetch(url, { method = 'GET' } = {}) {
  console.log(method);
}
fetch('<http://example.com>')

3、参数默认值的位置

非尾部的参数设置默认值，实际上这个参数是没法省略的。

function f(x = 1, y) {
  return [x, y];
}
f() // [1, undefined]
f(2) // [2, undefined])
f(, 1) // 报错
f(undefined, 1) // [1, 1]

4、作用域

一旦设置了参数的默认值，函数进行声明初始化时，参数会形成一个单独的作用域（context）。

等到初始化结束，这个作用域就会消失。

参数y的默认值等于变量x。调用函数f时，参数形成一个单独的作用域。

在这个作用域里面，默认值变量x指向第一个参数x，而不是全局变量x，所以输出是2。

var x = 1;
function f(x, y = x) {
  console.log(y);
}
f(2) // 2

函数f调用时，参数y = x形成一个单独的作用域。

这个作用域里面，变量x本身没有定义，所以指向外层的全局变量x。

函数调用时，函数体内部的局部变量x影响不到默认值变量x。

let x = 1;
function f(y = x) {
  let x = 2;
  console.log(y);
}
f() // 1

参数的默认值是一个函数，该函数的作用域也遵守这个规则.

let foo = 'outer'function bar(func = x => foo) {
  let foo = 'inner';
  console.log(func());
}
bar(); // outer

5、应用

利用参数默认值，可以指定某一个参数不得省略，如果省略就抛出一个错误。

function throwIfMissing() {
  throw new Error('Missing parameter');
}
function foo(mustBeProvided = throwIfMissing()) {
  return mustBeProvided;
}
foo()
// Error: Missing parameter

二、rest参数

1、简介

ES6 引入 rest 参数（形式为...变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了。

rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

add函数是一个求和函数，利用 rest 参数，可以向该函数传入任意数目的参数。

function add(...values) {
  let sum = 0;
  for (var val of values) {
    sum += val;
  }
  return sum;
}
add(2, 5, 3) // 10

数组快速排序

// arguments变量的写法
function sortNumbers() {
  return Array.prototype.slice.call(arguments).sort();
}

// rest参数的写法
const sortNumbers = (...numbers) => numbers.sort();

rest 参数中的变量代表一个数组，所以数组特有的方法都可以用于这个变量。

rest 参数之后不能再有其他参数（即只能是最后一个参数），否则会报错。

function push(array, ...items) {
  items.forEach(function(item) {
    array.push(item);
    console.log(item);
  });
}
var a = [];
push(a, 1, 2, 3)