Question

我正在尝试从结果中隐藏“未定义”。第一个联系人具有名字和姓氏，但是第二个联系人没有姓氏，所以名字不确定。

试图使用此过滤器

.filter(({ familyName }) => familyName !== undefined)

但是它隐藏了整行。

function contacts_callback(obj) {
    var contactinfo = obj.contacts
        .map(({ givenName, familyName, organizationName, phoneNumbers }) => 
            `${givenName} ${familyName} ${organizationName} ${
                 phoneNumbers.map(({ phoneNumber }) => phoneNumber)
            }`)
        .join("<br>");
    document.getElementById("demo").innerHTML = contactinfo;
}

// Demo
var obj = { success: true, contacts: [{ emailAddresses: [], phoneNumbers: [{ label: "unknown", phoneNumber: "XXX-XXXXXXX" }], givenName: "John", organizationName: "", familyName: "Appleseed" }, { emailAddresses: [], phoneNumbers: [{ label: "unknown", phoneNumber: "XXX-XXXXXXX" }], givenName: "John Appleseed", organizationName: "" }] };

contacts_callback(obj);

<div id="demo"></div>

Answer 1

为可能为this._actions .pipe( ofActionSuccessful(SubmissionActions.GetSuccess), takeUntil(this._onDestroy$), ) .subscribe(action => { this._store.dispatch(new SubmissionActions.SetActive(action.payload.id)); this.submissionEditForm.patchValue(action.payload); });的字段设置一个空字符串作为默认= ''：

undefined

function contacts_callback(obj) {
    var contactinfo = obj.contacts
        .map(({ givenName, familyName = '', organizationName = '', phoneNumbers }) => 
            `${givenName} ${familyName} ${organizationName} ${
                 phoneNumbers.map(({ phoneNumber }) => phoneNumber)
            }`)
        .join("<br>");
    document.getElementById("demo").innerHTML = contactinfo;
}

// Demo
var obj = { success: true, contacts: [{ emailAddresses: [], phoneNumbers: [{ label: "unknown", phoneNumber: "XXX-XXXXXXX" }], givenName: "John", organizationName: "", familyName: "Appleseed" }, { emailAddresses: [], phoneNumbers: [{ label: "unknown", phoneNumber: "XXX-XXXXXXX" }], givenName: "John Appleseed", organizationName: "" }] };

contacts_callback(obj);

Answer 2

由于您不想在<div id="demo"></div>为familyName时忽略整行，因此可以在您的undefined调用中为其提供解构默认值 ：

map

实时示例：

.map(({ givenName, familyName = "", organizationName, phoneNumbers }) => 
// --------------------------^^^^^

function contacts_callback(obj) {
    var contactinfo = obj.contacts
        .map(({ givenName, familyName = "", organizationName, phoneNumbers }) => 
            `${givenName} ${familyName} ${organizationName} ${
                 phoneNumbers.map(({ phoneNumber }) => phoneNumber)
            }`)
        .join("<br>");
    document.getElementById("demo").innerHTML = contactinfo;
}

// Demo
var obj = { success: true, contacts: [{ emailAddresses: [], phoneNumbers: [{ label: "unknown", phoneNumber: "XXX-XXXXXXX" }], givenName: "John", organizationName: "", familyName: "Appleseed" }, { emailAddresses: [], phoneNumbers: [{ label: "unknown", phoneNumber: "XXX-XXXXXXX" }], givenName: "John Appleseed", organizationName: "" }] };

contacts_callback(obj);

如果传递给<div id="demo"></div>回调的对象没有map属性，或者没有，但是该属性的值为familyName，则将使用该默认项。（没有其他任何伪造的值，特别是undefined。）

如果您愿意的话，显然也可以对其他属性执行此操作，如果它们也可能丢失或undefined。

如果您不使用解构，则可以使用undefined技巧：

||

如果${familyName || ""}是任何 fassy 值（{{1}，""，familyName，{{1 }}，undefined，或者当然是null）。

Answer 3

您可以使用默认值，因此如果使用undefined，将使用默认值。

.map(({ givenName='', familyName='',...})
                                  |______________ default value

function contacts_callback(obj) {
    var contactinfo = obj.contacts
        .map(({ givenName='', familyName='', organizationName='', phoneNumbers='' }) => 
            `${givenName} ${familyName} ${organizationName} ${
                 phoneNumbers.map(({ phoneNumber }) => phoneNumber)
            }`)
        .join("<br>");
    document.getElementById("demo").innerHTML = contactinfo;
}

// Demo
var obj = { success: true, contacts: [{ emailAddresses: [], phoneNumbers: [{ label: "unknown", phoneNumber: "XXX-XXXXXXX" }], givenName: "John", organizationName: "", familyName: "Appleseed" }, { emailAddresses: [], phoneNumbers: [{ label: "unknown", phoneNumber: "XXX-XXXXXXX" }], givenName: "John Appleseed", organizationName: "" }] };

contacts_callback(obj);

<div id="demo"></div>

Answer 4

使用||可让您快速检查值是否为undefined or null

.map(({ givenName, familyName, organizationName, phoneNumbers }) => 
  `${givenName} ${familyName || ''} ${phoneNumbers.map(({ phoneNumber }) => phoneNumber)
}`)

尝试从javascript地图结果中隐藏“未定义”

4 个答案: