为什么 Javascript 对象点表示法会导致错误？ [关闭]答案

【问题标题】：Why does Javascript Object dot notation cause an error? [closed]为什么 Javascript 对象点表示法会导致错误？ [关闭]
【发布时间】：2019-12-13 11:10:09
【问题描述】：

我已经阅读了很多关于 Javascript 中的点表示法和括号表示法之间的区别。我的理解如下。

点符号：

属性标识只能是字母数字（以及 _ 和 $）
属性标识符不能以数字开头。
属性标识符不能包含变量。
好的——obj.prop_1，obj.prop$
不正常 - obj.1prop，obj.prop 名称

括号表示法：

属性标识符必须是字符串或引用字符串的变量。
可以使用以数字开头的变量、空格和字符串
OK — obj["1prop"], obj["prop name"]

所以我仍然不明白为什么如果我使用点表示法，我的 linter 会抛出错误，而不是在下面的示例中使用括号表示法。

    this.contactConfig = {
        "prop": "addresses",
        groups: [
            {
                "label": "Physical Address",
                "type": "address",
                "prop": 'physical_address',
                "controls": [
                    {
                        "label": "Address Line 1",
                        "prop": "address1"
                    },
                    {
                        "label": "Address Line 2",
                        "prop": "address2"

                    },
                    {
                        "label": "City",
                        "prop": "city"

                    },
                    {
                        "label": "State",
                        "prop": "state",
                        "type": "dropdown"

                    },
                    {
                        "label": "Zip Code",
                        "prop": "zipcode"
                    }
                ]
            },
            {
                "label": "Mailing Address",
                "type": "address",
                "prop": "mailling_address",
                "same": false,
                "controls": [
                    {
                        "label": "Address Line 1",
                        "prop": "mailing_address1"

                    },
                    {
                        "label": "Address Line 2",
                        "prop": "mailing_address2"

                    },
                    {
                        "label": "City",
                        "prop": "mailing_city"
                    },
                    {
                        "label": "State",
                        "prop": "mailing_state",
                        "type": "dropdown"
                    },
                    {
                        "label": "Zip Code",
                        "prop": "mailing_zipcode"
                    }
                ]
            },
            {
                "label": "Contact",
                "prop": "contact",
                "controls": [
                    {
                        "label": "Email",
                        "prop": "email"
                    },
                    {
                        "label": "Primary Phone Number",
                        "prop": "primary_phone_number"
                    },
                    {
                        "label": "Secondary Phone Number",
                        "prop": "secondary_phone_number"
                    }
                ]
            }
        ]
    }

    this.profileForm = new FormGroup({});
    this.contactConfig["groups"].forEach(group => {
        console.log('group', group)
        group.controls.forEach(control => {
            this.formControlService.addFormGroupToFormGroup(this.profileForm, group);
        })
    })

如果我使用点表示法，我的 linter 会抛出以下错误：Property 'groups' does not exist on type '{}'.

如果我将代码更改为 "groups" groups 我仍然会遇到同样的错误。任何想法为什么我必须使用括号表示法？

TSLint 错误。

【问题讨论】：

我们在说什么“linter”？
this.contactConfig['groups]' ...您的意思是this.contactConfig['groups'] - 这是错误吗？你有一个简单的错字，]' 的顺序应该是']
contactConfig 最初定义的类型是什么？该错误可能是因为它是在没有将属性 groups 作为接口/类的一部分的情况下创建的
它被定义为一个对象。联系人配置 = {};如果是这种情况，为什么我在使用括号表示法时没有收到错误消息？

标签： javascript arrays typescript object foreach

【解决方案1】：

您可以将它与括号表示法一起使用。你只是有一个语法错误：

this.contactConfig['groups]'

应该是：

this.contactConfig['groups']

this.contactConfig = {
        prop: "addresses",
        groups: [
            {
                label: "Physical Address",
                type: "address",
                prop: 'physical_address',
                controls: [
                    {
                        label: "Address Line 1",
                        prop: "address1"
                    },
                    {
                        label: "Address Line 2",
                        prop: "address2"

                    },
                    {
                        label: "City",
                        prop: "city"

                    },
                    {
                        label: "State",
                        prop: "state",
                        type: "dropdown"

                    },
                    {
                        label: "Zip Code",
                        prop: "zipcode"
                    }
                ]
            },
            {
                label: "Mailing Address",
                type: "address",
                prop: "mailling_address",
                same: false,
                controls: [
                    {
                        label: "Address Line 1",
                        prop: "mailing_address1"

                    },
                    {
                        label: "Address Line 2",
                        prop: "mailing_address2"

                    },
                    {
                        label: "City",
                        prop: "mailing_city"
                    },
                    {
                        label: "State",
                        prop: "mailing_state",
                        type: "dropdown"
                    },
                    {
                        label: "Zip Code",
                        prop: "mailing_zipcode"
                    }
                ]
            },
            {
                label: "Contact",
                prop: "contact",
                controls: [
                    {
                        label: "Email",
                        prop: "email"
                    },
                    {
                        label: "Primary Phone Number",
                        prop: "primary_phone_number"
                    },
                    {
                        label: "Secondary Phone Number",
                        prop: "secondary_phone_number"
                    }
                ]
            }
        ]
    };

    this.contactConfig['groups'].forEach(group => {
        console.log('group', group);
        group.controls.forEach(control => {
            this.formControlService.addFormGroupToFormGroup(this.profileForm, group);
        });
    });

你也可以使用点符号：

this.contactConfig = {
        prop: "addresses",
        groups: [
            {
                label: "Physical Address",
                type: "address",
                prop: 'physical_address',
                controls: [
                    {
                        label: "Address Line 1",
                        prop: "address1"
                    },
                    {
                        label: "Address Line 2",
                        prop: "address2"

                    },
                    {
                        label: "City",
                        prop: "city"

                    },
                    {
                        label: "State",
                        prop: "state",
                        type: "dropdown"

                    },
                    {
                        label: "Zip Code",
                        prop: "zipcode"
                    }
                ]
            },
            {
                label: "Mailing Address",
                type: "address",
                prop: "mailling_address",
                same: false,
                controls: [
                    {
                        label: "Address Line 1",
                        prop: "mailing_address1"

                    },
                    {
                        label: "Address Line 2",
                        prop: "mailing_address2"

                    },
                    {
                        label: "City",
                        prop: "mailing_city"
                    },
                    {
                        label: "State",
                        prop: "mailing_state",
                        type: "dropdown"
                    },
                    {
                        label: "Zip Code",
                        prop: "mailing_zipcode"
                    }
                ]
            },
            {
                label: "Contact",
                prop: "contact",
                controls: [
                    {
                        label: "Email",
                        prop: "email"
                    },
                    {
                        label: "Primary Phone Number",
                        prop: "primary_phone_number"
                    },
                    {
                        label: "Secondary Phone Number",
                        prop: "secondary_phone_number"
                    }
                ]
            }
        ]
    };

    this.contactConfig.groups.forEach(group => {
        console.log('group', group);
        group.controls.forEach(control => {
            this.formControlService.addFormGroupToFormGroup(this.profileForm, group);
        });
    });

另外（仅供参考），使用对象文字，除非您尝试创建 JSON 字符串，否则不需要引用您的对象键/属性名称。最后，最好不要依赖自动插入分号，而是自己添加分号。

【讨论】：

感谢语法更正。当我为 StackOverFlow 格式化时，我不小心把引号放在了错误的位置，但在我的代码中它是正确的。当我使用点表示法时，我的 linter 给了我一个错误。
有没有可能在 Typescript 中更严格？
@London804 不是这个，不是，两种形式的语法都是完全有效的。

【解决方案2】：

我认为您的问题不在于数据对象的语法，而在于您尝试检索它的方式。

刚刚对您的对象进行了尝试，效果很好：

this.contactConfig.groups.forEach(group => {
    console.log(group);
});

【讨论】：

我不知道该说什么，然后我得到了上面的错误。我不认为这是 Typescript 的事情。