在 JavaScript 中比較物件

1. 使用 JavaScript 中的 JSON.stringify() 函式比較物件
2. 在 JavaScript 中手動比較物件

本教程將討論如何手動或使用 JavaScript 中的 JSON.stringify() 函式比較物件。

使用 JavaScript 中的 JSON.stringify() 函式比較物件

在 JavaScript 中比較變數相對容易；我們只需要在兩個變數之間使用比較運算子 ===。變數可以是任何資料型別，如字串和整數。

比較運算子返回一個布林值，它可以是 true 或 false，具體取決於被比較的變數。例如，讓我們使用比較運算子比較字串型別的兩個變數。

請參考下面的程式碼。

var a = 'Apple';
var b = 'Apple';
console.log(a === b)

輸出：

true

在輸出中，布林值 true 表示兩個變數相同。同樣，你也可以比較數字。現在我們來談談 JavaScript 中物件的比較。

物件比較並不容易，因為它們包含多個值，並且它們也可以在其中包含物件。比較兩個物件的快速簡便的方法是使用 JASON.stringify() 函式。這種方法的缺點是屬性的順序比較重要。

此函式將一個物件的第一個屬性與另一個物件的第一個屬性進行比較，依此類推。如果我們更改其中一個物件中的屬性順序，則此方法將不起作用。例如，讓我們使用 JSON.strigify() 函式比較兩個物件。

請參考下面的程式碼。

const fruit1 = {
  name: 'Apple',
  price: '2'
};
const fruit2 = {
  name: 'Apple',
  price: '2'
};
console.log(JSON.stringify(fruit1) === JSON.stringify(fruit2))

輸出：

true

在這段程式碼中，我們比較了兩個分別包含兩個屬性的物件。從輸出來看，兩個物件是相等的。現在，讓我們更改一個物件中兩個屬性的順序，然後使用 JSON.stringify() 函式將其與另一個進行比較。

請參考下面的程式碼。

const fruit1 = {
  name: 'Apple',
  price: '2'
};
const fruit2 = {
  price: '2',
  name: 'Apple'
};
console.log(JSON.stringify(fruit1) === JSON.stringify(fruit2))

輸出：

false

在輸出中，結果是 false。我們改變了第二個物件的屬性順序；這是這種方法的缺點。

在 JavaScript 中手動比較物件

上面的方法有一個缺點，所以我們可以自己做一個函式來比較兩個物件，這樣我們就不用關心物件的屬性順序了。

例如，讓我們建立一個函式來比較 JavaScript 中的上述物件。請參考下面的程式碼。

function ObjCompare(obj1, obj2) {
  if (obj1.name === obj2.name && obj1.price === obj2.price) {
    return true;
  };
  return false;
}
const fruit1 = {
  name: 'Apple',
  price: '2'
};
const fruit2 = {
  price: '2',
  name: 'Apple'
};
console.log(ObjCompare(fruit1, fruit2))

輸出：

true

在上面的程式碼中，我們建立了 ObjCompare() 函式，根據它們的屬性比較兩個物件，而不考慮它們的順序。只有當兩個物件的名稱和價格相同時，該函式才返回 true；否則，它將返回 false。

你還可以建立自己的函式來比較多個屬性或比較你喜歡從所有可用屬性中比較的一個屬性。你還可以建立另一個函式來一次比較兩個以上的物件。

現在，考慮我們有兩個具有許多屬性的物件，我們想要比較所有這些屬性。製作這種功能需要很多時間。

相反，我們可以使用 Object.keys() 函式來獲取函式的所有鍵或屬性，並使用迴圈進行比較。如果所有屬性都相同，函式將返回 true；否則，它將返回 false。

例如，讓我們製作這個函式並用上面的兩個物件進行測試。請參考下面的程式碼。

function ObjCompare(obj1, obj2) {
  const Obj1_keys = Object.keys(obj1);
  const Obj2_keys = Object.keys(obj2);
  if (Obj1_keys.length !== Obj2_keys.length) {
    return false;
  }
  for (let k of Obj1_keys) {
    if (obj1[k] !== obj2[k]) {
      return false;
    }
  }
  return true;
}
const fruit1 = {
  name: 'Apple',
  price: '2',
  color: 'red'
};
const fruit2 = {
  price: '2',
  name: 'Apple',
  color: 'red'
};
console.log(ObjCompare(fruit1, fruit2))

輸出：

true

在這個程式中，ObjCompare() 函式中的第一個 if 語句用於檢查兩個物件內的屬性或鍵的長度。

如果它們不相等，函式將返回 false 並且不會進入迴圈。即使我們更改屬性的順序或任何物件的鍵，此方法也能正常工作。你還可以更改此功能以一次比較三個或更多物件。