函数的扩展

2019-01-04  本文已影响0人  始终丶

1 给函数参数设置默认值的意思是:当没有传参的时候 ,参数取设定的默认值

ES5的写法

function log (x,y) {
  if (y === 'undefined'){
    y = 'World';
  }
  console.log(x, y);
}

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


ES5的写法

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

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

1.2 与解构赋值默认值结合

function foo ({x = 1, y= 5} = {}) {
  console.log(x, y);
}
foo({x: 7}) // 7 5
foo({y: 6}) // 1 6
foo({x: 3, y: 8}) // 3 8
foo({}) // 1 5
foo() // 1 5

述函数中参数的解构赋值有两层含义:1. 参数位一个对象,其中两个属性 x 和 y 都有默认值,2. 这个对象作为一个参数也有默认值,其默认值为一个空对象{}, 因此,当没有传参而调用函数时,该参数取默认的空对象,然后呢,在空对象中,去读取 x 和 y 两个属性的时候,发现均未定义,为 undefined,则此时 x 和 y 分别去取各自的默认值, 即 1 和 5.

1.3 参数默认值的位置

通常情况下,定义了默认值的参数,应该是函数的尾参数。因为这样比较容易看出来,到底省略了哪些参数。如果非尾部的参数设置默认值,实际上这个参数是没法省略的。

通常情况下,定义了默认值的参数,应该是函数的尾参数。因为这样比较容易看出来,到底省略了哪些参数。如果非尾部的参数设置默认值,实际上这个参数是没法省略的。

function f(x, y = 5, z) {

2. rest 参数

ES6 引入 rest 参数(形式为…变量名),用于获取函数的多余参数,这样就不需要使用arguments对象了。rest参数搭配的变量是一个数组,注意,rest参数之后不能再有其他参数(即只能是最后一个参数),否则会报错

3. 箭头函数

当函数体中的代码只有一行的时候,可以省略 return和 大括号 {}

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

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function (num1, num2) {
  return num1 + num2;
};

如果箭头函数直接返回一个对象,必须在对象外面加上括号,否则会报错。

// 报错
let getTemTtem = id => { id: id, name: 'tem'};

// 不报错
let getTemTtem = id => ({ id: id, name: 'tem'});

下面是一种特殊情况,虽然可以运行,但是会得到错误的结果

let foo = () => { a: 1 };
foo() // undefined
上一篇 下一篇

猜你喜欢

热点阅读