【问题标题】:define function execute as arguments将函数执行定义为参数
【发布时间】:2020-01-02 13:13:08
【问题描述】:

我使用 ES6 中的解构函数,我将函数执行定义为参数

这是一个例子

  reformatDate(date: Date) {
    const dd = date.getDate();
    const mm = date.getMonth() + 1;
    const yyyy = date.getFullYear();
    return `${yyyy}-${mm < 10 ? '0' + mm : mm}-${dd < 10 ? '0' + dd : dd}`;
  }

  reformatDate(new Date('2013-3-3'))

通过解构,我们可以使用

  const reformatDate = ({getDate: dd = dd(), getMonth: mm = mm(), getFullYear:yyyy=yyyy() })  => 
   `${yyyy}-${mm < 10 ? '0' + mm : mm}-${dd < 10 ? '0' + dd : dd}`;

  reformatDate(new Date('2013-3-3'))

  const reformatDate = ({getDate: dd = dd(), getMonth: mm = mm(), getFullYear:yyyy=yyyy() })  => `${yyyy}-${mm < 10 ? '0' + mm : mm}-${dd < 10 ? '0' + dd : dd}`;

  console.log(reformatDate(new Date('2013-3-3')))

但是有一些错误

function getFullYear() { [native code] }-function getMonth() { [native code] }-function getDate() { [native code] }

我用过

const reformatDate = ({getDate: dd = dd.call ,....

but same error :( 

【问题讨论】:

  • = dd() 不调用该方法,它只是设置了一个默认参数。您需要自己在函数中调用方法...这也不起作用,因为您丢失了this
  • 不,这是不可能的。不要为了使用解构而尝试使用解构。

标签: javascript ecmascript-6 destructuring


【解决方案1】:

= dd() etc 语法不调用该方法,它只是设置一个默认参数。您需要自己在函数内部调用这些方法。但是,您不能单独调用解构函数,因为 this 将不再绑定到 Date 对象。要执行您想要的操作,您需要保留原始日期。您可以做到这一点的一种方法是将日期两次传递给您的函数,或者使用对象并解构 date 属性。然后,您需要在方法上使用 .call()this 重新分配给您的日期对象,如下所示:

const reformatDate = 
  ({d, d: {getDate: dd, getMonth: mm , getFullYear:yyyy}})  => `${yyyy.call(d)}-${mm.call(d) < 10 ? '0' + mm.call(d) : mm.call(d)}-${dd.call(d) < 10 ? '0' + dd.call(d) : dd.call(d)}`;

console.log(reformatDate({d: new Date('2013-3-3')}))

然而,这从根本上违背了解构的目的,因为您可以直接在日期对象上使用这些方法。此外,我发现它比没有解构的第一个示例更难阅读和解释,因此,我非常喜欢你的第一个代码块而不是这种方法。

【讨论】:

    【解决方案2】:

    根据docs - MDN

    默认函数参数允许在未传递值或未定义的情况下使用默认值初始化命名参数。

    例如,如果你的代码是这样的:

    function test(x = 10) {
      console.log(x);
    }
    test();
    test(5)

    如果x 未通过,将应用默认值。

    在您的情况下,由于您在参数上使用破坏模式,如果破坏后的值为undefined,则将应用默认值

    以下是一个示例:

    function test({x = 10, y = 20}) {
      console.log(x, y);
    }
    test({ y: 5 });
    test({ x: 4, y: 11 })

    【讨论】:

      猜你喜欢
      • 2016-07-28
      • 1970-01-01
      • 2020-06-23
      • 1970-01-01
      • 1970-01-01
      • 2017-07-09
      • 2021-01-30
      • 2017-07-07
      • 1970-01-01
      相关资源
      最近更新 更多