实现 JavaScript 函数 areDifferent(oldValue, newValue) 来比较空虚的类人风格

Question

我从后端获取和反对一些属性，并使用 AngularJS 将它们放入输入字段（输入、文本区域、复选框、下拉列表）。

这些属性在某些情况下是文本值，在某些情况下是数字值，但也可以是 null、undefined、false 或 ""。

我克隆了这个对象，然后通过比较旧的（存储的）值和新的（当前的）值来检查用户是否对这些值中的每一个进行了任何修改。

我不想使用 ng-dirty 类来检测更改，因为当您在之前的修改后返回到以前的值时（例如，使用 Ctrl+Z 时）它不会消失。

我认为这项任务会很简单，但是由于ambiguous nature of JS 值，我遇到了麻烦。

我当然会处理这些：

• null
• undefined
• false
• ""

一个“空值”，因为对于用户来说，“一个空字段就是一个空字段”，不管模型在下面存储什么。因此，例如，从 undefined 更改为 "" 并不是真正的更改。

到目前为止，我得到了这个：

$scope.areDifferent = function (oldValue, newValue) {

    var a = true, b = true;

    if (oldValue === null ||
       oldValue === undefined ||
       oldValue === false ||
       oldValue === "") {
        a = false; 
    }

    if (newValue === null ||
       newValue === undefined ||
       newValue === false ||
       newValue === "") {
        b = false; 
    }

    if (!a && !b) {
        return false; // both values are "empty"
    }
    else if (a != b) {
        return true; // one of the values is "non-empty"
    }
    else {
        return oldValue != newValue; // compare the value of "non-empty" properties
    }
}

但我很好奇这是否正确（是否有任何未涵盖的边缘情况？）以及是否可以简化，因为我知道在 JS 中有一些有用的shorthand coding techniques 像：

• a || ''
• if(a)
• if(a.length)
• if(a == null)

我尝试在这里使用它们，但这只会导致挫败感，因为总会有一个未涵盖的边缘情况。任何帮助表示赞赏。

Answer 1

您可以使用 exclusive OR 并检查值

if (!oldValue && newValue || oldValue && !newValue) {
    // update
}

这意味着，如果oldValue 为真且newValue 为假，或者oldValue 为假且newValue 为真，则更新数据。

对相同类型和更改的扩展检查。

if (!oldValue && newValue || oldValue && !newValue || typeof oldValue === typeof newValue && oldValue !== newValue) {
    // update
}