ES6 默认值——帮助理解概念

Question

我正在努力提高我的 JS 技能并开始利用 ES6。

我知道您可以分配默认值，我正在模块中尝试这样做：

export var updateWidget = function (type = 'image', {
    previewId = '.image-preview',
    filepath = 'content/articles',
    baseUrl = 'http://dummy.com',
    thumbSize = '400x400'
}) {


    var options = {
            previewId: previewId,
            type: type
        },
        fileElements = {
            filepath: filepath,
            thumbPath: null,
            baseUrl: baseUrl,
            thumbSize: thumbSize

        },
}

如果我像这样启动对象：

new updateWidget('image'
            ).update('5059-081.png');

我得到一个与默认对象相关的 cannot read property undefined。如果我这样做：

new updateWidget('image', {}
            ).update('5059-081.png');

有效。

我需要将一个空白对象传递给模块才能使其正常工作，这似乎很奇怪，我本来希望完全不考虑它，默认值仍然有效。

我正在寻找更新我用来充分利用 ES6 的当前模块模式，但一次一个步骤。

那么，我怎样才能设置默认值并且只需要选择性地发送一个对象呢？最佳做法是什么？

谢谢

Answer 1

如果你想让第二个参数可选，你需要为它提供一个默认值。您已经为正在执行的解构提供了默认值，但没有提供实际参数本身。结果，您试图解构值 undefined，这就是您收到错误的原因。

为要解构的参数提供默认值，如下所示：

    export var updateWidget = function (type = 'image', {
        previewId = '.image-preview',
        filepath = 'content/articles',
        baseUrl = 'http://dummy.com',
        thumbSize = '400x400'
    } = {}) {
// −−^^^^^

实例：

const updateWidget = function (type = 'image', {
    previewId = '.image-preview',
    filepath = 'content/articles',
    baseUrl = 'http://dummy.com',
    thumbSize = '400x400'
} = {}) {
    console.log(`type = ${type}`);
    console.log(`previewId = ${previewId}`);
    console.log(`filepath = ${filepath}`);
    console.log(`baseUrl = ${baseUrl}`);
    console.log(`thumbSize = ${thumbSize}`);
}
console.log("Call 1:");
updateWidget();
console.log("Call 2:");
updateWidget(undefined, {filepath: "/different/path"});
console.log("Call 3:");
updateWidget("mytype", {filepath: "/different/path"});

.as-console-wrapper {
    max-height: 100% !important;
}

Answer 2

这是因为您已经设置了第二个参数的默认属性，但尚未将其设为可选。

只需将其默认值设置为空对象，如下所示：

export var updateWidget = function (type = 'image', {
    previewId = '.image-preview',
    filepath = 'content/articles',
    baseUrl = 'http://dummy.com',
    thumbSize = '400x400'
} = {}) { // <= Setting the default value as empty object


    var options = {
            previewId: previewId,
            type: type
        },
        fileElements = {
            filepath: filepath,
            thumbPath: null,
            baseUrl: baseUrl,
            thumbSize: thumbSize

        },
}

Answer 3

第二个参数需要一个将被解构的对象。

当它被解构时，每个产生的变量都会被赋予一个默认值，以防对象没有匹配的属性。

没有给出在没有参数传递的情况下应解构的默认值。

您可以将空对象设置为默认值。

export var updateWidget = function (type = 'image', {
    previewId = '.image-preview',
    filepath = 'content/articles',
    baseUrl = 'http://dummy.com',
    thumbSize = '400x400'
} = {})

（注意最后一行的变化）

Answer 4

由于第二个参数是undefined，解构不适用于未定义的值。

你可以这样做const getItem = (type = "image", { previewId. ="abc" } = {}) => {}

Answer 5

以下是有效的，但是当提供 undefined 时，它将抛出 TypeError 因为 undefined 不是适合解构的类型。

function foo({ a = 'a' }) {
  console.log(a)
}

foo() // TypeError: Cannot read property 'a' of undefined

为了让您的代码优雅地失败，您可以提供一个空对象作为默认参数。它这样工作的原因是，默默地 "saving" 程序员从这个错误中会降低语言的表现力，因为无法区分（在这种情况下）传递 undefined 或null 到这样的函数并传递一个空对象。

function foo({ a = 'a' } = {}) {
  console.log(a)
}

foo() // 'a'

如果您不使用解构，那么默认参数将以正常方式生效：

function foo(a = 'a') {
  console.log(a)
}

foo() // 'a'

ES6 默认值——帮助理解概念

ES6 default value - help understand the concept

javascript

ecmascript-6

es6-modules