So sánh object trong JavaScript(JASON.stringify) | Laptrinhcanban.com

So sánh object trong JavaScript(JASON.stringify)

Hướng dẫn cách so sánh object trong JavaScript. Bạn sẽ học được các cách so sánh 2 object trong JavaScript sau bài học này.

Chúng ta có 3 phương pháp để trong JavaScript như sau:

  • So sánh 2 object trong JavaScript bằng JASON.stringify()
  • So sánh 2 object trong JavaScript bằng Object.entries
  • So sánh 2 object trong JavaScript bằng Object.keys()

Có thể dùng toán tử bằng để so sánh 2 object trong javascript không?

Trong JavaScript, để so sánh các giá trị thuộc kiểu dữ liệu nguyên thuỷ, ví dụ như so sánh 2 số hoặc 2 chuỗi chẳng hạn, chúng ta có thể dễ dàng sử dụng toán tử so sánh bằng để so sánh chúng với nhau.

Tuy nhiên, do object không thuộc kiểu dữ liệu nguyên thuỷ, mà thuộc kiểu dữ liệu tham chiếu, có nghĩa là các biến object không chứa chính giá trị, mà là chứa địa chỉ của giá trị đó trong bộ nhớ, nên chúng ta không thể so sánh 2 object trong javascript bằng cách sử dụng toán tử bằng được.

Nếu chúng ta sử dụng các toán tử so sánh để so sánh mảng, thì kết quả trả về sẽ không được như mong đợi như sau:

let object1 = { a: 10, b:15};
let object2 = { a: 10, b:15};
let object3 = { c: 10, d:15};


console.log( (object1 == object1) )
console.log( (object1 == object2) )
console.log( (object1 == object3) )

Kết quả:

true
false
false

Có thể thấy trong phép so sánh thứ 2 đã không đưa ra được kết quả chính xác, mặc dù 2 object này hoàn toàn giống nhau.

Để so sánh mảng trong JavaScript, chúng ta không thể so sánh trực tiếp chúng như trên, mà cần phải dùng các phương thức đặc biệt, hoặc là tự tạo hàm so sánh object như dưới đây.

So sánh 2 object trong JavaScript bằng JASON.stringify()

JASON.stringify() trong JavaScript là một hàm có sẵn có tác dụng chuyển một object thành chuỗi JSON trong JavaScript.

Do có thể so sánh 2 JSON trong JavaScript với nhau, nên bằng cách ứng dụng hàm JASON.stringify() để chuyển object thành JSON, chúng ta có thể dễ dàng so sánh 2 object một cách gián tiếp.

Ví dụ, chúng ta có thể so sánh 2 object trong JavaScript như sau:

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

Tuy nhiên cần chú ý là JASON.stringify() chỉ có thể so sánh 2 object trong JavaScript, nếu chúng có cùng thứ tự thuộc tính mà thôi. Ví dụ, nếu chúng ta đảo vị trí của 2 thuộc tính như trên thì kết quả sẽ không còn đúng nữa như sau:

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

Và đây cũng là khuyết điểm của phương pháp này.

So sánh 2 object trong JavaScript bằng Object.keys()

Chúng ta có thể tự tạo hàm để so sánh 2 object trong JavaScript, bằng cách sử dụng phương thức Object.keys() để lấy toàn bộ keys của 2 object, rồi tiến hành so sánh toàn bộ các thuộc tính giữa chúng.

Và nếu toàn bộ các thuộc tính giữa chúng giống nhau thì true được trả về, và false trong trường hợp còn lại.

Cách này đặc biệt hữu ích khi so sánh 2 object trong JavaScript trong trường hợp vị trí các thuộc tính trong object không cố định.

Và chúng ta viết hàm như sau:

function ObjCompare(obj1, obj2){
//Lấy toàn bộ key của obj1
const Obj1_keys = Object.keys(obj1);

//Lấy toàn bộ key của obj2
const Obj2_keys = Object.keys(obj2);

//Nếu số lượng thuộc tính giữa chúng khác nhau thì chúng khác nhau
if (Obj1_keys.length !== Obj2_keys.length){
return false;
}

/*So sánh từng thuộc tính giữa 2 object,
và nếu có cặp thuộc tính nào khác nhau thì sẽ khác nhau*/
for (let k of Obj1_keys){
if(obj1[k] !== obj2[k]){
return false;
}
}
/*Trừ các trường hợp 2 object không giống nhau
thì trả về true vì chúng giống nhau*/
return true;
}

Ví dụ, chúng ta sử dụng hàm trên để so sánh 2 object trong JavaScript như sau:

/*Hàm so sánh 2 object trong JavaScript*/
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 = {
name: 'Apple',
price: '2',
color: 'red'
};

const fruit3 = {
price: '2',
name: 'Apple',
color: 'red'
};
console.log(ObjCompare(fruit1,fruit2))
//true

console.log(ObjCompare(fruit1,fruit3))
//true

So sánh 2 object trong JavaScript bằng Object.entries()

Tương tự Object.keys(), chúng ta cũng có thể sử dụng Object.entries() để tự tạo hàm so sánh 2 object trong JavaScript.

Sự khác biệt duy nhất là cách lấy từng thuộc tính trong object và so sánh với object còn lại mà thôi.

Và chúng ta viết hàm như sau:

function ObjCompare(obj1, obj2){
//Lấy toàn bộ key:value của obj1
const Obj1_keys_values = Object.entries(obj1);


//Lấy toàn bộ key:value của obj2
const Obj2_keys_values = Object.entries(obj2);


//Nếu số lượng thuộc tính giữa chúng khác nhau thì chúng khác nhau
if (Obj1_keys_values.length !== Obj2_keys_values.length){
return false;
}

/*So sánh từng thuộc tính giữa 2 object,
và nếu có cặp thuộc tính nào khác nhau thì sẽ khác nhau*/
for (let i=0; i<Obj1_keys_values.length; i++){
if(Obj1_keys_values[i] !== Obj1_keys_values[i]){
return false;
}
}
/*Trừ các trường hợp 2 object không giống nhau
thì trả về true vì chúng giống nhau*/
return true;
}

Ví dụ, chúng ta sử dụng hàm trên để so sánh 2 object trong JavaScript như sau:

/*Hàm so sánh 2 object trong JavaScript*/
function ObjCompare(obj1, obj2){
const Obj1_keys_values = Object.entries(obj1);
const Obj2_keys_values = Object.entries(obj2);
if (Obj1_keys_values.length !== Obj2_keys_values.length){
return false;
}
for (let i=0; i<Obj1_keys_values.length; i++){
if(Obj1_keys_values[i] !== Obj1_keys_values[i]){
return false;
}
}
return true;
}


const fruit1 = {
name: 'Apple',
price: '2',
color: 'red'
};

const fruit2 = {
name: 'Apple',
price: '2',
color: 'red'
};

const fruit3 = {
price: '2',
name: 'Apple',
color: 'red'
};
console.log(ObjCompare(fruit1,fruit2))
//true

console.log(ObjCompare(fruit1,fruit3))
//true

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn về các cách so sánh object trong JavaScript rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.

Hãy chia sẻ và cùng lan tỏa kiến thức lập trình Nhật Bản tại Việt Nam!

HOME>> >>

Profile
きよしです!笑

Tác giả : Kiyoshi (Chis Thanh)

Kiyoshi là một cựu du học sinh tại Nhật Bản. Sau khi tốt nghiệp đại học Toyama năm 2017, Kiyoshi hiện đang làm BrSE tại Tokyo, Nhật Bản.