跳到主要内容

函数参数

一、剩余参数​

1.1 认识​

剩余参数 语法允许我们将一个不定数量的参数表示为一个数组。**ES6**引入剩余参数（形式为...变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了。剩余参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

1.2 语法​

function(a, b, ...theArgs) {
  // ...
}

1.3 对比​

ES6 之前
function add(x,y,z) {
  let sum = 0;

  for (var val of arguments) {
    sum += val;
  }

  return sum;
}

add(2, 5, 3) // 10
ES6新增
function add(...values) {
  let sum = 0;

  for (var val of values) {
    sum += val;
  }

  return sum;
}

add(2, 5, 3) // 10

1.4 剩余参数 Vs arguments​

剩余参数和 arguments 对象之间的区别主要有三个:

  • 剩余参数只包含那些没有对应形参的实参，而 arguments 对象包含了传给函数的所有实参。

  • **arguments**对象不是一个真正的数组，而剩余参数是真正的 **Array**实例，也就是说你能够在它上面直接使用所有的数组方法，比如 sort，map，forEach或pop。

  • **arguments**对象还有一些附加的属性 （如callee属性）。

二、解构参数​

2.1 认识​

2.2 语法​

对象解构
function foo({url,method}){
  console.log(url);
  console.log(method);
}

foo({url:'www.baidu.com',method:'post'});
数组解构
function foo([url, method]) {
  console.log(url);
  console.log(method);
}

foo(["www.baidu.com", "post"]);

三、默认参数​

3.1 认识​

函数默认参数允许在没有值或 undefined被传入时使用默认形参。

3.2 语法​

ES6之前
function log(x, y) {
  y = y || 'World';
  console.log(x, y);
}

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

log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello

四、解构剩余参数​

4.1 认识​

剩余参数可以被解构，这意味着他们的数据可以被解包到不同的变量中

4.2 语法​

function foo(...[a,b,c,...restArgu]){
  console.log(a); // 1
  console.log(b); // 2 
  console.log(c); // 3
  console.log(restArgu); // [4,5]
}
foo(1,2,3,4,5);

五、解构参数默认值​

5.1 认识​

5.2 语法​

5.3 用法​

数组解构参数: :赋值默认值: 这个不怎么适用, =赋值默认值: 这个使用场景更好一些，怎么传都可以

function foo([x, y] = [10, 20]) {
  return x + y;
}

const result1 = foo([]);
console.log(result1); //NaN
const result2 = foo();
console.log(result2); //30
const result3 = foo([100, 200]);
console.log(result3); // 300
function foo([x = 10, y = 20] = []) {
  return x + y;
}

const result1 = foo([]);
console.log(result1); //30
const result2 = foo();
console.log(result2); //30
const result3 = foo([100, 200]);
console.log(result3); // 300

对象解构参数: :赋值默认值: 这个不怎么适用, =赋值默认值 : 这个使用场景更好一些，怎么传都可以

function foo({ x, y } = { x: 10, y: 20 }) {
  return x + y;
}

const result1 = foo({});
console.log(result1); //NaN
const result2 = foo();
console.log(result2); //30
const result3 = foo({ x: 100, y: 200 });
console.log(result3); // 300
function foo({ x = 10, y = 20 } = {}) {
  return x + y;
}

const result1 = foo({});
console.log(result1); //30
const result2 = foo();
console.log(result2); //30
const result3 = foo({ x: 100, y: 200 });
console.log(result3); // 300