Sonika. Javascript đói. Làm việc tại Walmart
Làm theo
Ngày 5 tháng 6 năm 2022
·
3 phút đọc
So sánh 2 đối tượng lồng nhau trong JavaScript [IMP]. Cuộc phỏng vấn viết mã của Apple
Đặt một phiên
2function deepComparison [first, second] { ... }
const obj_1 = { score: 12 }
const obj_2 = obj_1
const obj_3 = { score: 12 }
obj_1 === obj_2; // true, same reference
obj_1 === obj_3 // false, different reference but same keys and values
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Hãy so sánh hai đối tượng
Chúng ta cần kiểm tra nhiều thứ để so sánh hai đối tượng. Vì vậy, chúng tôi sẽ chia quá trình so sánh thành nhiều bước
Bước 1
Trước tiên hãy tạo một hàm [
function deepComparison [first, second] {
...
}
3] có hai tham số [function deepComparison [first, second] {
...
}
4, function deepComparison [first, second] {
...
}
5]function deepComparison [first, second] {
...
}
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Nếu chúng ta chuyển hai đối tượng làm đối số của hàm này, thì hàm này sẽ trả về giá trị boolean sau khi so sánh chúng
Bước 2
Công việc thực sự của chúng ta bắt đầu từ bước này. Trong bước này, chúng tôi sẽ kiểm tra xem loại và giá trị của hai đối số có giống nhau không. Nếu chúng giống nhau, chúng tôi sẽ trả lại
function deepComparison [first, second] {
...
}
6. Nếu không, chúng ta sẽ chuyển sang bước tiếp theoconst k1 = { fruit: '🥝' };2
const k2 = { fruit: '🥝' };Object.entries[k1].toString[] === Object.entries[k2].toString[];
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Bước 3
Trong bước này, chúng tôi sẽ kiểm tra xem có bất kỳ đối số nào là
function deepComparison [first, second] {
...
}
7. Nếu bất kỳ đối số nào là function deepComparison [first, second] {
...
}
7, chúng tôi sẽ trả về function deepComparison [first, second] {
...
}
9. Nhưng nếu không có cái nào là null, chúng ta sẽ chuyển sang bước tiếp theoconst k1 = { fruit: '🥝' };6
const k2 = { fruit: '🥝' };Object.entries[k1].toString[] === Object.entries[k2].toString[];
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Bước 4
Bây giờ, chúng tôi sẽ đảm bảo rằng cả hai đối số đều là đối tượng. Nếu bất kỳ đối số nào không phải là đối tượng, chúng tôi sẽ trả về
function deepComparison [first, second] {
...
}
9const k1 = { fruit: '🥝' };8
const k2 = { fruit: '🥝' };Object.entries[k1].toString[] === Object.entries[k2].toString[];
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Bước 5
Ở bước cuối cùng, chúng tôi đã đảm bảo rằng cả hai đối số đều là đối tượng. Trong bước này, chúng tôi sẽ kiểm tra xem cả hai đối tượng có cùng số thuộc tính hay không. Nếu chúng không có cùng số thuộc tính, chúng tôi sẽ trả lại
function deepComparison [first, second] {
...
}
9const equals = [a, b] => { if [a === b] return true; if [a instanceof Date && b instanceof Date]0
return a.getTime[] === b.getTime[]; if [!a || !b || [typeof a !== 'object' && typeof b !== 'object']]
return a === b; if [a.prototype !== b.prototype] return false; const keys = Object.keys[a]; if [keys.length !== Object.keys[b].length] return false;return keys.every[k => equals[a[k], b[k]]];};
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Chúng ta có thể sử dụng
const k1 = { fruit: '🥝' };22 thay vì
const k2 = { fruit: '🥝' };Object.entries[k1].toString[] === Object.entries[k2].toString[];const k1 = { fruit: '🥝' };23 không?
const k2 = { fruit: '🥝' };Object.entries[k1].toString[] === Object.entries[k2].toString[];Không. Bởi vì
const k1 = { fruit: '🥝' };22 không thể trả về tên thuộc tính Nonnumerable
const k2 = { fruit: '🥝' };Object.entries[k1].toString[] === Object.entries[k2].toString[];
nhưngconst k1 = { fruit: '🥝' };23 có thể.
const k2 = { fruit: '🥝' };Object.entries[k1].toString[] === Object.entries[k2].toString[];
Bước 6
Ở bước cuối cùng, chúng tôi đảm bảo rằng cả hai đối tượng đều có cùng số lượng thuộc tính. Bây giờ, chúng ta cần đảm bảo rằng tên thuộc tính của cả hai đối tượng đều giống nhau. Nếu chúng không giống nhau, chúng tôi sẽ trả lại
function deepComparison [first, second] {
...
}
9. Nhưng nếu chúng giống nhau, chúng ta sẽ chuyển sang bước tiếp theoconst equals = [a, b] => { if [a === b] return true; if [a instanceof Date && b instanceof Date]6
return a.getTime[] === b.getTime[]; if [!a || !b || [typeof a !== 'object' && typeof b !== 'object']]
return a === b; if [a.prototype !== b.prototype] return false; const keys = Object.keys[a]; if [keys.length !== Object.keys[b].length] return false;return keys.every[k => equals[a[k], b[k]]];};
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Chúng ta có thể sử dụng
const k1 = { fruit: '🥝' };27 thay vì
const k2 = { fruit: '🥝' };Object.entries[k1].toString[] === Object.entries[k2].toString[];const k1 = { fruit: '🥝' };28 không?
const k2 = { fruit: '🥝' };Object.entries[k1].toString[] === Object.entries[k2].toString[];Không. Bởi vì
const k1 = { fruit: '🥝' };27 không thể kiểm tra tên của thuộc tính Không thể đếm được nhưng
const k2 = { fruit: '🥝' };Object.entries[k1].toString[] === Object.entries[k2].toString[];const k1 = { fruit: '🥝' };27 có thể. Ngoài ra,
const k2 = { fruit: '🥝' };Object.entries[k1].toString[] === Object.entries[k2].toString[];const k1 = { fruit: '🥝' };28 nhằm mục đích thay thế cho
const k2 = { fruit: '🥝' };Object.entries[k1].toString[] === Object.entries[k2].toString[];const k1 = { fruit: '🥝' };27, vì vậy chúng tôi đang sử dụng
const k2 = { fruit: '🥝' };Object.entries[k1].toString[] === Object.entries[k2].toString[];const k1 = { fruit: '🥝' };28 tại đây
const k2 = { fruit: '🥝' };Object.entries[k1].toString[] === Object.entries[k2].toString[];
Bước 7
Ở bước cuối cùng, chúng tôi đảm bảo rằng tên thuộc tính của cả hai đối tượng đều giống nhau. Bây giờ, chúng ta sẽ kiểm tra xem giá trị thuộc tính của cả hai đối tượng có giống nhau hay không
Bước này hơi phức tạp một chút vì
- Các giá trị thuộc tính không chỉ có thể là chuỗi, số hoặc boolean mà còn là các đối tượng lồng nhau
- Chỉ cần kiểm tra với toán tử đẳng thức nghiêm ngặt [===] là đủ nếu các giá trị là chuỗi hoặc số hoặc boolean nhưng sẽ không đủ đối với một đối tượng vì đối tượng lồng nhau sẽ có các thuộc tính riêng của nó
- Giả sử rằng đối tượng lồng nhau có một đối tượng khác bên trong nó như một thuộc tính. Chúng ta sẽ làm gì?
Giải pháp
- Ở bước 1, chúng ta đã tạo hàm
3 này và hàm này không chỉ kiểm tra toán tử đẳng thức nghiêm ngặt [===], mà còn kiểm tra null hay không, có đối tượng hay không, thuộc tính của các đối tượng có giống nhau hay không. Vì vậy, trên thực tế, chúng ta cần một hàm như thế nàyfunction deepComparison [first, second] { ... }
3 để kiểm tra bất kỳ thuộc tính nào của đối tượng lồng nhaufunction deepComparison [first, second] { ... }
- May mắn thay, chúng ta không cần tạo bất kỳ hàm mới nào vì có một thuật ngữ gọi là hàm đệ quy. Hàm đệ quy là hàm gọi chính nó trong quá trình thực thi. Vì vậy, trên thực tế, chúng ta có thể sử dụng hàm
const k1 = { fruit: '🥝' };
66 này như một hàm đệ quy
const k2 = { fruit: '🥝' };Object.entries[k1].toString[] === Object.entries[k2].toString[];
Bây giờ, hãy sử dụng hàm
const k1 = { fruit: '🥝' };66 này để kiểm tra xem giá trị thuộc tính của cả hai đối tượng có giống nhau hay không. Nếu chúng không giống nhau, chúng tôi sẽ trả lại
const k2 = { fruit: '🥝' };Object.entries[k1].toString[] === Object.entries[k2].toString[];
function deepComparison [first, second] {
...
}
9var obj1 = { prop1: 1, prop2: "foo", prop3: [{ number: 1, prop4: "foo", prop5: "a" }, { number: 2, prop4: "foo", prop5: "b" }] }var obj2 = { prop1: 3, prop2: "foo", prop3: [{ number: 1, prop4: "bar", prop5: "b" }, { number: 2, prop4: "foo", prop5: "a" }, { number: 3, prop4: "foo", prop5: "e" }], prop6: "new" }const isObject = v => v !== null && typeof v == "object";function getDifference[x, y = x] {9
if [x === undefined] x = y; if [Array.isArray[x] && Array.isArray[y]] {
const temp = [];
for [let i = 0; i < [x.length + y.length] / 2; i++]
temp.push[getDifference[x[i], y[i]]] return temp;
} if [isObject[x] && isObject[y]] {
const temp = {};
for [const key of new Set[[...Object.keys[x], ...Object.keys[y]]]]
temp[key] = getDifference[x[key], y[key]] return temp;
}
return x === y;
}console.log[getDifference[obj1, obj2]];
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Ghi chú
Vì
const k1 = { fruit: '🥝' };66 nằm trong vòng lặp. Vì vậy, nó sẽ tiếp tục tự thực thi cho đến khi kiểm tra xong tất cả các đối tượng lồng nhau
const k2 = { fruit: '🥝' };Object.entries[k1].toString[] === Object.entries[k2].toString[];
Bước 8
Nếu chúng ta đang ở trong
const k1 = { fruit: '🥝' };80 này, điều đó có nghĩa là không có điều kiện nào của bước khác phù hợp. Vì chúng tôi đã kiểm tra gần như tất cả các cách có thể mà các đối tượng không giống nhau và không có điều kiện nào trong số đó phù hợp, vì vậy bây giờ chúng tôi có thể chắc chắn rằng các đối tượng giống nhau. Vì vậy, chúng tôi sẽ chỉ trả lại
const k2 = { fruit: '🥝' };Object.entries[k1].toString[] === Object.entries[k2].toString[];
function deepComparison [first, second] {
...
}
6 trong bước nàyconst isObject = v => v && typeof v === 'object';3
function getDifference[a, b] {
return Object.assign[...Array.from[
new Set[[...Object.keys[a], ...Object.keys[b]]],
k => [{ [k]: isObject[a[k]] && isObject[b[k]]
? getDifference[a[k], b[k]]
: a[k] === b[k]
}]
]];
}
var obj1 = { prop1: 1, prop2: "foo", prop3: { prop4: 2, prop5: "bar" } };var obj2 = { prop1: 3, prop2: "foo", prop3: { prop4: 2, prop5: "foobar" }, prop6: "new" };
console.log[getDifference[obj1, obj2]];
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Mã đầy đủ
const isObject = v => v && typeof v === 'object';4
function getDifference[a, b] {
return Object.assign[...Array.from[
new Set[[...Object.keys[a], ...Object.keys[b]]],
k => [{ [k]: isObject[a[k]] && isObject[b[k]]
? getDifference[a[k], b[k]]
: a[k] === b[k]
}]
]];
}
var obj1 = { prop1: 1, prop2: "foo", prop3: { prop4: 2, prop5: "bar" } };var obj2 = { prop1: 3, prop2: "foo", prop3: { prop4: 2, prop5: "foobar" }, prop6: "new" };
console.log[getDifference[obj1, obj2]];
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
hãy kiểm tra
function deepComparison [first, second] {
...
}
0Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
function deepComparison [first, second] {
...
}
1Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Đó là nó. 😃 Cảm ơn đã đọc. 🎉 Nếu bạn phát hiện bất kỳ lỗi chính tả hoặc lỗi nào hoặc nếu bạn muốn bổ sung điều gì đó, vui lòng ghi vào phần bình luận