javascript - 实现 JavaScript 函数 areDifferent(oldValue, newValue) 以类似人类的方式比较空值

Question

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

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

我克隆此对象，然后通过将旧(存储)值与新(当前)值进行比较来检查用户是否对每个值进行任何修改。

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

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

当然，我对待所有这些:

• 空
• 未定义
• 假
• ""

“空值”，因为对于用户来说“空字段就是空字段”，无论模型在下面存储什么。因此，例如，从 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.length)
• if(a == null)

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

Answer 1

您可以使用exclusive OR并检查值

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

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

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

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