Javascript so sánh hai mảng đối tượng cho phù hợp

Trong bài viết này, chúng tôi đề cập đến các phương pháp khác nhau để so sánh hai mảng và kiểm tra xem chúng có bằng nhau hay không bằng cách sử dụng javascript. Trong quá trình này, chúng tôi cũng sẽ hiểu những ưu và nhược điểm của các phương pháp khác nhau được sử dụng

Nếu bạn chưa quen với khái niệm đẳng thức mảng, mỗi phần của bài viết sẽ hữu ích. Tuy nhiên, nếu bạn ở đây để làm mới kiến ​​thức của mình, hãy chuyển thẳng sang phần triển khai. Đi đến phương pháp

Mục lục

• Giới thiệu về Bình đẳng trong Javascript
• Kiểm tra sự bằng nhau của mảng bằng javascript
• lời chia tay

Giới thiệu về bình đẳng trong javascript

Bình đẳng là một chủ đề phức tạp khi nói đến javascript. Về mặt kỹ thuật, có 4 cách để so sánh nếu hai giá trị bằng nhau trong javascript. Trong số này, hai phương thức phổ biến nhất là toán tử ==, được gọi là đẳng thức trừu tượng và toán tử ===, được gọi là đẳng thức nghiêm ngặt. Trước khi đi sâu vào việc kiểm tra sự bằng nhau của mảng, hãy cho chúng tôi hiểu cách các toán tử đẳng thức này hoạt động trong javascript

Bình đẳng nghiêm ngặt với ===

Cho trước 2 giá trị x và y, hằng đẳng thức chặt chẽ kiểm tra đẳng thức như sau

x===y

1. Kiểm tra các loại x và y. Nếu chúng khác loại, trả về false
2. Nếu x và y là các số, nó sẽ kiểm tra xem một trong hai x hoặc y có phải là NaN hay không và trả về false nếu một trong số đó là NaN. Nếu cả x và y đều là +0 hoặc -0, trả về true. Mặt khác, nó cũng kiểm tra xem chúng có cùng số không
3. Nếu x và y đều null hoặc cả hai đều không xác định, nó trả về true
4. Nếu x và y đều là boolean,  chuỗi hoặc ký hiệu, thì nó sẽ so sánh chúng theo giá trị
5. Nếu x và y đều là đối tượng, nó trả về true khi và chỉ khi chúng tham chiếu cùng một đối tượng

Trong Javascript, mảng được coi là đối tượng, vì vậy toán tử === chỉ trả về true nếu cả hai mảng có cùng tham chiếu

// comparing arrays using strict equality
const a = [1, 2, 3];
const b = [1, 2, 3];

a === a;
// true
a === b;
// false (different reference)

Bình đẳng trừu tượng Với ==

Dưới đây là tổng quan ngắn gọn về cách toán tử == so sánh nếu x và y bằng nhau

1. Nếu x và y cùng loại, hãy kiểm tra xem x === y
2. Nếu x và y đều là null hoặc không xác định, trả về true
3. Nếu x là một số và y là một chuỗi, hãy chuyển đổi y thành một số rồi so sánh bằng cách sử dụng ===. Tương tự, nếu x là một chuỗi hoặc boolean và y là một số, hãy chuyển đổi x thành một số
4. Nếu x hoặc y là một giá trị boolean, chuyển đổi giá trị khác của một số và so sánh chúng
5. Nếu x là một đối tượng và y là một ký hiệu, chuỗi hoặc số, hãy thử chuyển đổi x thành nguyên hàm bằng cách sử dụng valueof() và sau đó so sánh bằng cách sử dụng ===

So sánh bằng trừu tượng chịu trách nhiệm cho nhiều trường hợp cạnh kỳ lạ mà JavaScript rất nổi tiếng được đề cập nhiều trong bài viết này

// all true
1 == '1';
1 == [1];
'1' == [1];

Nói chung, bạn luôn nên sử dụng === thay vì == trừ khi bạn tự tin về những gì mình đang làm và có ý tưởng về kết quả mong đợi

Mặc dù có 4 cách để kiểm tra xem hai mảng có bằng nhau hay không, nhưng không có cách nào xem xét sự bằng nhau sâu sắc (trong đó bạn so sánh ngay cả nội dung của các đối tượng của mình theo cách đệ quy cho đến khi tất cả những gì bạn cần so sánh là các trường nguyên thủy) giữa các mảng

Kiểm tra sự bằng nhau của mảng bằng javascript

Dưới đây là 3 cách để kiểm tra xem hai mảng có bằng nhau không

1) Cả hai mảng có cùng độ dài và giá trị của chúng bằng nhau

Trong phương pháp này, chúng tôi so sánh nếu mỗi giá trị của a bằng giá trị của b. Chúng ta phải nhớ rằng điều này sẽ hoạt động tốt nếu tất cả các giá trị của mảng a và b là nguyên hàm và không phải đối tượng

// comparing arrays to check for equality - method 1
const a = [1, 2, 3];
const b = [4, 5, 6];
const c = [1, 2, 3];

function arrayEquals(a, b) {
    return Array.isArray(a) &&
        Array.isArray(b) &&
        a.length === b.length &&
        a.every((val, index) => val === b[index]);
}

arrayEquals(a, b);
// false
arrayEquals(a, c);
// true

2) Bình đẳng sâu sắc với POJO (Đối tượng java cũ đơn giản)

Hàm arrayEquals() hoạt động tốt đối với các đối tượng nguyên thủy như đã thấy ở trên, nhưng không phù hợp nếu bạn muốn so sánh các mảng chứa các đối tượng theo giá trị. Hãy cùng xem ví dụ dưới đây

const a = [{
    answer: 42
}, {
    powerLevel: 9001
}];
const b = [{
    answer: 42
}, {
    powerLevel: 9001
}];

// false, because { answer: 42 } !== { answer: 42 }, different references
arrayEquals(a, b);

Một cách đơn giản để thực hiện điều này với mã tối thiểu và không có thư viện bên ngoài là sử dụng so sánh chúng bằng JSON của chúng. đầu ra stringify()

// method 2 to check if two arrays with objects are equal
const a = [{
    answer: 42
}, {
    powerLevel: 9001
}];
const b = [{
    answer: 42
}, {
    powerLevel: 9001
}];
const c = [{
    answer: 42
}, {
    password: 'taco'
}];

JSON.stringify(a) === JSON.stringify(b);
// true
JSON.stringify(a) === JSON.stringify(c);
// false

Tuy nhiên, có một trường hợp cạnh. Vì không xác định không phải là một giá trị JSON hợp lệ, nên JSON. stringify() chuyển đổi không xác định thành null. Vì vậy, JSON. stringify() đầu ra của các mảng được hiển thị bên dưới sẽ giống nhau mặc dù chúng không giống nhau trong thực tế

const a = [undefined];
const b = [null];

3) So sánh các mảng để kiểm tra sự bằng nhau bằng cách sử dụng hàm isequal() của Lodash

Như đã thảo luận ở trên, sử dụng JSON. stringify() để so sánh sự bằng nhau của mảng không chỉ gây ra vấn đề không xác định so với null mà còn không tính đến các loại đối tượng. Theo như JSON. stringify(), một đối tượng có hàm toJSON() trả về 25 giống với số 25

const a = [{
    toJSON: () => 25
}];
const b = [25];

JSON.stringify(a);
// '[42]'
JSON.stringify(b);
// '[42]'

class MyClass {
  constructor(obj) {
    Object.assign(this, obj);
  }
}

const a = [new MyClass({ answer: 42 })];
const b = [{ answer: 42 }];

JSON.stringify(a) === JSON.stringify(b); 
// true

Mặt khác, việc sử dụng hàm isequal() của Lodash sẽ tính đến tất cả những điều này

Ghi chú. Lodash là một thư viện JavaScript cung cấp các chức năng tiện ích cho một tác vụ lập trình phổ biến

lời chia tay.  

Để kết luận, để so sánh các mảng để kiểm tra sự bằng nhau, hàm isEqual() của Lodash là cách tốt nhất nếu bạn cần tất cả các chuông và còi để kiểm tra xem các đối tượng có cùng lớp không. JSON. phương pháp stringify() hoạt động tốt cho POJO, chỉ cần đảm bảo rằng bạn tính đến null

Làm cách nào tôi có thể so sánh hai mảng đối tượng và thay đổi giá trị cho những đối tượng được tìm thấy trong cả hai mảng?

Làm cách nào chúng ta có thể so sánh hai mảng trong JavaScript?

Làm cách nào chúng ta có thể so sánh hai đối tượng trong JavaScript?

Làm cách nào bạn có thể biết liệu hai mảng đối tượng có bằng nhau trong bản ghi không?