Because JS is a weakly typed language, it is possible for the left and right value types to differ when judging equality. It is necessary to store a tool function in all knowledge base that can judge whether any two types of data are equal or not in practical development.

Usage scenarios

Learning without scenarios is like playing rogue with your own time.

1. The scene of a

   The user can modify a lot of data in the table, the background interface can only receive the modified data, so how to find the modified data?

2. Scenario 2

   Assuming that everyone has seven subjects after the gaokao, how do we filter out students with 99 points in all seven subjects?

3. Scenario 3

   Components use prop to receive parameters passed in by the parent. High-performance components only re-render when the parameters passed in change.

Scenario summary

The main problem in the above scenario is how to determine whether two pieces of data are equal.

A concrete analysis

In JS, data types are divided into basic types (undefined, NULL, String, Boolean, number, symbol, BigInt) and reference types (Object).

The basic type determines equality

1. Use the = =

   When unequal equality (==) is used, type conversions are performed. The values on the left and right sides of the equal sign will be converted to the same type and then compared. Generally speaking, this judgment method is not recommended.

2. Use = = =

   Strict equality is the most common way to compare, but NaN is not equal to itself in JS

3. Use the String ()

   The primitive type is converted to a String by the String() function and then compared with strings. This can handle all basic types of equality judgments

Object type Determines equality

1. An array type

   First determine whether the length is consistent, if the same loop to determine each element

2. The date type

   Determine the timestamp directly

3. An object type other than the above two types

   First, determine whether the number of attributes (keys) of the two objects is the same. If so, repeat to judge the value of each attribute

LooseEqual source code parsing

When learning vue source code, there is such a tool function looseEqual. After reading it, I was enlightened and thinking clearly.

Tool function

The looseEqual function uses the isObject utility function to determine whether an argument is an object type

function isObject(obj) {
    returnobj ! = =null && typeof obj === "object";
}
Copy the code

LooseEqual source code analysis

Source analysis is written in the code as comments

function looseEqual(a, b) {
    // 1-这里通过引用地址先简单判断一下,NaN不满足if
    if (a === b) {
        return true;
    }
    var isObjectA = isObject(a);
    var isObjectB = isObject(b);
    // 2- If both are objects
    if (isObjectA && isObjectB) {
        try {
            var isArrayA = Array.isArray(a);
            var isArrayB = Array.isArray(b);
            // 2.1- If both are arrays, determine the length of the array and recursively determine each child element
            if (isArrayA && isArrayB) {
                return a.length === b.length && a.every(function (e, i) {
                    return looseEqual(e, b[i]);
                });
            } 
            // 2.2- Determine the timestamp if both are dates
            else if (a instanceof Date && b instanceof Date) {
                return a.getTime() === b.getTime();
            }
            // 2.3- Determine the number of attributes if none of them are arrays, and then recursively determine each key
            else if(! isArrayA && ! isArrayB) {var keysA = Object.keys(a);
                var keysB = Object.keys(b);
                return keysA.length === keysB.length && keysA.every(function (key) {
                    return looseEqual(a[key], b[key]);
                });
            } 
            // 2.4- None of the above three cases are equal
            else {
                /* istanbul ignore next */
                return false; }}catch (e) {
            /* istanbul ignore next */
            return false; }}// 3- Is not an object type, so it is a string for judgment. This handles NaN cases
    else if(! isObjectA && ! isObjectB) {return String(a) === String(b);
    }
    // 4- Parameter types are inconsistent and unequal
    else {
        return false; }}Copy the code