分配给原语的值将丢失

Question

如果我有一个对象数组，并循环遍历它们，为每个对象分配一个属性值，WebStorm 会警告我：

分配给原语的值将丢失

但是，在控制台中进行测试时，我不会“丢失”任何值。

这只发生在循环位于函数内部时。

下面是这个错误的一个例子：

let people = [
    {
        name: 'Foo',
        age: 21,
        surname: 'FooBar'
    },

    {
        name: 'Bar',
        age: 51,
        surname: 'FooBar'
    }
];

没有函数包装：

people.forEach(function (person) {
    person.surname = 'Baz'; // No error. Works in console.
});

使用函数包装器：

function changeSurname(people) {
    people.forEach(function (person) {
        person.surname = 'Baz'; // Error warning me that value assigned to primitive will be lost.
    });
}

changeSurname(people);

这两者在控制台中产生相同的输出（姓氏更改为“baz”）。

我认为这与对象引用以及 person 指向的内容有关，但我不确定具体是什么。

为什么我会看到这个错误？

WebStorm 试图拯救我的潜在错误是什么？

Answer 1

您的代码没有什么不妥之处，WebStorm 的类型推断有点混乱（JavaScript 的这方面特别令人困惑）。

它的 linter 看到一个字符串并假设你会尝试这样的事情：

var primitive = "september";
primitive.vowels = 3;

primitive.vowels;
// => undefined

这会导致“丢失”价值。

它只捕获函数内部的这个“错误”这一事实似乎是一个应该报告的彻底错误。

为了进一步了解 JavaScript 的这个奇怪部分，我推荐 Angus Croll 的优秀深入文章 here。

Answer 2

如果您使用方括号，JetBrains 编辑器 (WebS/PhpS) 不会显示任何错误。

person['surname'] = 'Baz';

Answer 3

我也遇到了同样的问题。

您也可以要求 WebStorm 禁用对下一行的检查，但我决定改用 for of 循环：

for (person of people) {
    person.surname = 'Baz';
}

结果它实际上使我的代码更具可读性，所以我很高兴。

Answer 4

我在使用角度自定义指令时遇到了类似的问题。

下面是我的自定义指令：

function customDirective() {
      return {
        scope: {
          model: '='
        }
        link: function(scope) {
                scope.resetModel = function() {
                    scope.model.name = null;   //In these lines I was getting the above 
                    scope.model.email = null;  //mentioned warning in webstorm.
                }
            }
      }
}

在查看$compile docs 之后，我决定使用下面的代码来解决这个警告，并且可以很好地绑定到子作用域和父作用域，当然可以，除非你的模型是对象引用。

function customDirective() {
       return {
         scope: {
            model:'<' // Please refer the above linked angular docs for in detail explanation.
         }
         link: function(scope) {
            scope.resetModel = function() {
               scope.model.name = null;
               scope.model.email = null;
            }
         }
      }
}