1. 程式人生 > >js物件比較

js物件比較

今天意外地發現JavaScript是不能用==或===操作符直接比較兩個陣列是否相等的。

?

1

2

alert([]==[]);  // false

alert([]===[]);  // false

以上兩句程式碼都會彈出false。

因為JavaScript裡面Array是物件,==或===操作符只能比較兩個物件是否是同一個例項,也就是是否是同一個物件引用。目前JavaScript沒有內建的操作符判斷物件的內容是否相同。

但是慣性思維讓人以為陣列也是值,是可以比較的。

如果要比較陣列是否相等,就只能遍歷陣列元素比較。

在網上流傳很普遍的一種做法是將陣列轉換成字串:

?

1

JSON.stringify(a1) == JSON.stringify(a2)

 或

?

1

a1.toString() == a2.toString()

請不要使用這種方法。

這種方法在某些情況下是可行的,當兩個陣列的元素順序相同且元素都可以轉換成字串的情況下確實可行,但是這樣的程式碼存有隱患,比如數字被轉換成字串,數字“1”和字串“1”會被認為相等,可能造成除錯困難,不推薦使用。

在StackOverflow上有大神已經提供了正確的方法,我就做下搬運工吧:

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

// Warn if overriding existing method

if(Array.prototype.equals)

  console.warn("Overriding existing Array.prototype.equals. Possible causes: New API defines the method, there's a framework conflict or you've got double inclusions in your code."

);

// attach the .equals method to Array's prototype to call it on any array

Array.prototype.equals = function (array) {

  // if the other array is a falsy value, return

  if (!array)

    return false;

  // compare lengths - can save a lot of time

  if (this.length != array.length)

    return false;

  for (var i = 0, l = this.length; i < l; i++) {

    // Check if we have nested arrays

    if (this[i] instanceof Array && array[i] instanceof Array) {

      // recurse into the nested arrays

      if (!this[i].equals(array[i]))

        return false;   

    }     

    else if (this[i] != array[i]) {

      // Warning - two different object instances will never be equal: {x:20} != {x:20}

      return false

    }     

  }   

  return true;

}

// Hide method from for-in loops

Object.defineProperty(Array.prototype, "equals", {enumerable: false});

大神還順手給了比較Object的方法:

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

Object.prototype.equals = function(object2) {

  //For the first loop, we only check for types

  for (propName in this) {

    //Check for inherited methods and properties - like .equals itself

    //https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty

    //Return false if the return value is different

    if (this.hasOwnProperty(propName) != object2.hasOwnProperty(propName)) {

      return false;

    }

    //Check instance type

    else if (typeof this[propName] != typeof object2[propName]) {

      //Different types => not equal

      return false;

    }

  }

  //Now a deeper check using other objects property names

  for(propName in object2) {

    //We must check instances anyway, there may be a property that only exists in object2

      //I wonder, if remembering the checked values from the first loop would be faster or not

    if (this.hasOwnProperty(propName) != object2.hasOwnProperty(propName)) {

      return false;

    }

    else if (typeof this[propName] != typeof object2[propName]) {

      return false;

    }

    //If the property is inherited, do not check any more (it must be equa if both objects inherit it)

    if(!this.hasOwnProperty(propName))

     continue;

    //Now the detail check and recursion

    //This returns the script back to the array comparing

    /**REQUIRES Array.equals**/

    if (this[propName] instanceof Array && object2[propName] instanceof Array) {

          // recurse into the nested arrays

      if (!this[propName].equals(object2[propName]))

            return false;

    }

    else if (this[propName] instanceof Object && object2[propName] instanceof Object) {

          // recurse into another objects

          //console.log("Recursing to compare ", this[propName],"with",object2[propName], " both named \""+propName+"\"");

      if (!this[propName].equals(object2[propName]))

            return false;

    }

    //Normal value comparison for strings and numbers

    else if(this[propName] != object2[propName]) {

      return false;

    }

  }

  //If everything passed, let's say YES

  return true;

}