为什么我的 javascript 对象属性消失了？答案

【问题标题】：Why is my javascript object property disappearing?为什么我的 javascript 对象属性消失了？
【发布时间】：2018-02-28 03:56:10
【问题描述】：

我正在编写一个简单的 AngularJS webapp，在我的导航服务中我有一个菜单项列表：

    class NavigationService {
        constructor($location) {
            this.$location = $location;

            this.menu = [{
                label: 'Overview',
                key: 'overview',
                children: [{
                    label: 'My Balances',
                    key: 'overview_balances',
                    click: () => {
                        this.$location.path('/balances');
                    }
                }]
            }, {
                label: 'Wallets',
                children: [{
                    label: 'Bitcoin',
                    key: 'wallets_bitcoin',
                    click: () => {
                        this.$location.path('/btc/balances');
                    }
                }, {
                    label: 'Ethereum',
                    key: 'wallets_ethereum',
                    click: () => {
                        this.$location.path('/eth/balances');
                    }
                }, {
                    label: 'Add...',
                    key: 'wallets_add',
                    click: () => {
                        this.$location.path('/wallets/add');
                    }
                }]
            }];
        }
        // some other code omitted
    }

    NavigationService.$inject = ['$location'];

    export default NavigationService;

但是，当我在其中一个菜单项的单击函数中设置断点时，key 属性未定义，即使存在标签和其他值：

我正在使用 Webpack 将 ES6 代码转换为无聊的 javascript，但检查生成的 bundle.js 仍然显示 key 属性在创建时就在那里。此外，虽然屏幕截图没有显示，但概览 key 仍然存在 - 只有 children 对象数组中的 keys 未定义。如果他们被删除，他们为什么会出现在检查员中？

我知道key 不是 JS 中的保留字，但它在 Angular 中的使用方式不同吗？我当然可以为该值选择一个不同的名称，但我想知道发生了什么。如何在内存中跟踪该变量并查看键消失的点？

【问题讨论】：

我的余额的子对象中有关键字的引号，您是否尝试删除它？
回复：“key 是保留字吗？”。使用 ECMA-262 需要一些时间才能得出结论 no。此外，保留字不排除用作属性名称。
你确定你在相同的范围内运行（相同的“菜单”）？您是否尝试过使用 var self = this;并使用 self.menu ---> 看看这是否改变了什么？
你可以为这个关键字段添加setter和getter（使用标准js机制），看看从哪里改变

标签： javascript angularjs object

【解决方案1】：

我找到了答案。奇怪的是选项卡的反应方式不同，而且无论我如何更改密钥，它都会一直设置为undefined。我意识到我对变量的使用可能是罪魁祸首。原来我在ng-class 声明中使用了= 而不是==：

    <ul class="menu-list">
        <li ng-repeat="child in menu.children">
            <a ng-bind="child.label"
                ng-class="{
                    'is-active': child.id = ctrl.Navigation.current_menu.id
                }"
                ng-click="ctrl.Navigation.select_menu(child)"></a>
        </li>
    </ul>

每当我点击菜单项时——或者每当出现摘要时—— 我猜它会将child.id 变量设置为ctrl.Navigation.current_menu.id，这将是未定义的。将其更改为 == 即可解决问题。

【讨论】：