Khi xử lý logic bằng JavaScript, bạn có thể cần so sánh hai mảng để xem chúng có bằng nhau hay không.
Thực sự, điều này không khó, vì bạn nghĩ chúng ta có thể dễ dàng sử dụng đẳng thức lỏng lẻo (đôi bằng – ==) hoặc đẳng thức nghiêm ngặt (bộ ba bằng – ===). Nhưng thật không may, bạn không thể sử dụng chúng trong trường hợp này.
let array1 = [11, 22, 33];
let array2 = [11, 22, 33];
console.log(array1 == array2); //false
console.log(array1 === array2); //false
Điều này xảy ra vì các mảng JavaScript có một loại Đối tượng:
let arrayType = typeof(array1);
console.log(arrayType); //"Object"
Các đối tượng không được so sánh dựa trên giá trị của chúng mà dựa trên tham chiếu của các biến:
console.log(array1[0] == array1[0]); //true
console.log(array1[1] === array1[1]); //true
Nhưng đây không phải là những gì bạn muốn. Thay vào đó, bạn muốn có thể so sánh trực tiếp cả hai mảng và chỉ trả về một giá trị boolean mà không phải kiểm tra từng phần tử một.
Trong bài viết này, bạn sẽ tìm hiểu nhiều cách khác nhau để so sánh hai mảng trong JavaScript để xem chúng có giống nhau hay không.
Cách so sánh hai mảng bằng cách chuyển đổi thành chuỗi
Một cách phổ biến và khá đơn giản mà bạn có thể sử dụng để so sánh hai mảng trước tiên là chuyển đổi các mảng này thành dạng chuỗi.
Có hai phương pháp khác nhau mà bạn có thể sử dụng: bạn có thể quyết định chuyển đổi mảng của mình thành văn bản JSON bằng cách sử dụng JSON.stringify() hoặc bạn có thể sử dụng phương pháp .toString() để trả về mảng của bạn dưới dạng một chuỗi.
Ghi chú: Cả hai phương pháp đều khác nhau, như bạn có thể thấy bên dưới:
let array = [11, 22, 33];
console.log(JSON.stringify(array)); //"[11,22,33]"
console.log(array.toString()); //"11,22,33"
Cách 1: Cách sử dụng JSON.stringify()
Phương pháp này cho phép bạn tuần tự hóa từng mảng bằng cách chuyển đổi mảng thành chuỗi JSON. Sau đó, bạn có thể so sánh hai chuỗi JSON.
let array1 = [11, 22, 33];
let array2 = [11, 22, 33];
console.log(JSON.stringify(array1) === JSON.stringify(array2)); //true
Chúng ta cũng có thể quyết định tạo một hàm có thể tái sử dụng để giúp chúng ta so sánh hai mảng bất kỳ mà chúng ta truyền vào:
const compareArrays = (a, b) => {
return JSON.stringify(a) === JSON.stringify(b);
};
let array1 = [11, 22, 33];
let array2 = [21, 22, 23];
let array3 = [11, 22, 33];
console.log(compareArrays(array1, array2)); //false
console.log(compareArrays(array1, array3)); //true
Cách 2: Cách sử dụng .toString()
tương tự như JSON.stringify()phương thức này chuyển đổi bất kỳ loại dữ liệu nào thành chuỗi và tương tự có thể chuyển đổi một đối tượng thành chuỗi.
let array1 = [11, 22, 33];
let array2 = [11, 22, 33];
console.log(array1.toString() === array2.toString()); //true
Bạn cũng có thể quyết định tạo một hàm có thể tái sử dụng để giúp bạn so sánh hai mảng bất kỳ mà bạn chuyển vào hàm đó:
const compareArrays = (a, b) => {
return a.toString() === b.toString();
};
let array1 = [11, 22, 33];
let array2 = [21, 22, 23];
let array3 = [11, 22, 33];
console.log(compareArrays(array1, array2)); //false
console.log(compareArrays(array1, array3)); //true
Ghi chú: Bạn nên sử dụng JSON.stringify() phương thức, vì nó chỉ tuần tự hóa mảng JavaScript của bạn. Mảng vẫn có hình dạng của một mảng, nhưng nó chỉ được phân tích cú pháp để trở thành phiên bản chuỗi của mảng.
Cách so sánh hai mảng bằng cách thay đổi giá trị của chúng
Các phương pháp trên không phù hợp trong một số trường hợp. Ví dụ: khi một mảng có giá trị là null và một cái khác có giá trị là undefinedkhi chúng tôi sử dụng so sánh nghiêm ngặt, chúng tôi nhận được false theo mặc định – đó là chính xác:
console.log(null === undefined); //false
Nhưng khi chúng ta sử dụng JSON.Strigify() hoặc .toString() phương pháp bạn nhận được trueđó không phải là trường hợp:
let array1 = [11, null, 33];
let array2 = [11, undefined, 33];
console.log(JSON.stringify(array1) === JSON.stringify(array2)); //true
console.log(array1.toString() === array2.toString()); //true
Một cách tiếp cận tốt hơn là so sánh độ dài của mảng rồi lặp qua và so sánh từng phần tử của mảng.
Cách 1: sử dụng every()
Các every() phương thức giúp bạn thực thi một hàm cho từng phần tử của mảng. Chức năng này được gọi là chức năng gọi lại. Nó có quyền truy cập vào một số tham số cơ bản như phần tử, chỉ mục và nhiều tham số khác mà chúng ta có thể sử dụng trong hàm:
// Syntax
array.every((currentValue, index, arr)=> { ... })
Trong phương pháp này, trước tiên chúng tôi sẽ kiểm tra xem độ dài của hai mảng có tương đương nhau không. Sau đó, chúng ta sẽ lặp qua một mảng và sử dụng chỉ mục của nó để so sánh các phần tử của nó với các phần tử trong mảng thứ hai:
const compareArrays = (a, b) =>
a.length === b.length &&
a.every((element, index) => element === b[index]);
let array1 = [11, 22, 33];
let array2 = [21, 22, 23];
let array3 = [11, 22, 33];
console.log(compareArrays(array1, array2)); //false
console.log(compareArrays(array1, array3)); //true
Và khi chúng ta có null và undefined là một phần của các phần tử Mảng, nó sẽ có thể phát hiện ra rằng chúng không giống nhau:
const compareArrays = (a, b) =>
a.length === b.length && a.every((element, index) => element === b[index]);
let array1 = [11, null, 33];
let array2 = [21, 22, 23];
let array3 = [11, undefined, 33];
console.log(compareArrays(array1, array2)); //false
console.log(compareArrays(array1, array3)); //false
Cách 2: sử dụng vòng lặp for
Phương thức every() có cú pháp tốt hơn. Tuy nhiên, một cách khác mà chúng ta có thể triển khai phương thức này là sử dụng các phương thức lặp khác như for vòng, forEach() hoặc map() bên cạnh if các câu lệnh. Những điều này có thể dễ dàng hơn cho người mới bắt đầu nắm bắt.
const compareArrays = (a, b) => {
if (a.length !== b.length) return false;
else {
// Comparing each element of your array
for (var i = 0; i < a.length; i++) {
if (a[i] !== b[i]) {
return false;
}
}
return true;
}
};
let array1 = [21, null, 33];
let array2 = [21, 22, 23];
let array3 = [21, undefined, 33];
let array4 = [21, 22, 23];
console.log(compareArrays(array1, array2)); //false
console.log(compareArrays(array1, array3)); //false
console.log(compareArrays(array2, array4)); //true
Trong cả hai phương pháp trên, trước tiên bạn sẽ kiểm tra độ dài, vì nếu độ dài không bằng nhau, điều đó tự động có nghĩa là cả hai mảng không bằng nhau và sau đó trả về false.
Nếu độ dài bằng nhau thì ta bắt đầu kiểm tra từng phần tử. Nó trở lại false ngay khi hai phần tử trên cùng index trong cả hai mảng là khác nhau.
kết thúc
Bài viết này hướng dẫn bạn cách so sánh hai mảng trong JavaScript bằng hai cách tiếp cận chính.
Các cách tiếp cận này là chuyển đổi mảng thành chuỗi trước khi so sánh chúng hoặc bạn có thể lặp lại để kiểm tra xem các giá trị của chúng có giống nhau hay không để so sánh chi tiết hơn.
Ghi chú: Dấu bằng kép kiểm tra xem cả hai giá trị có bằng nhau không, trong khi dấu bằng ba kiểm tra xem cả hai giá trị và kiểu dữ liệu của chúng có bằng nhau hay không. Bạn có thể đọc thêm về cả hai loại bình đẳng ở đây.
Hãy mã hóa vui vẻ!
