Hướng dẫn javascript compare object key values - javascript so sánh các giá trị khóa đối tượng

Question

Khác biệt đệ quy

Nội dung chính Show

Làm thế nào để bạn so sánh các giá trị trong hai đối tượng?
Cách tốt nhất để so sánh các đối tượng trong JavaScript là gì?
Làm thế nào để bạn so sánh hai cặp giá trị chính?
Làm cách nào để nhận các phím và giá trị của một đối tượng?

Gần 3 năm sau, tôi rất vui khi cung cấp một câu trả lời được làm mới cho câu hỏi này.

Chúng tôi bắt đầu với hai đối tượng khác nhau

const x =
  { a: 1, b: 2, c: 3 }

const y =
  { a: 1, b: 3, d: 4 }

console.log (diff (x, y))
// => ???

Cả hai đối tượng đều có cùng thuộc tính

console.log (diff (x, y))
// { b: { left: 2, right: 3 }, c: { left: 3 }, d: { right: 4 } }

8. Thuộc tính

console.log (diff (x, y))
// { b: { left: 2, right: 3 }, c: { left: 3 }, d: { right: 4 } }

9 không giống nhau. Chỉ

const x =
  { a: { b: { c: 1, d: 2, e: 3 } } }

const y =
  { a: { b: { c: 1, d: 3, f: 4 } } }

console.log (diff (x, y))
// { a: { b: { d: { left: 2, right: 3 }, e: { left: 3 }, f: { right: 4 } } } }

0 có thuộc tính

const x =
  { a: { b: { c: 1, d: 2, e: 3 } } }

const y =
  { a: { b: { c: 1, d: 3, f: 4 } } }

console.log (diff (x, y))
// { a: { b: { d: { left: 2, right: 3 }, e: { left: 3 }, f: { right: 4 } } } }

1 và chỉ

const x =
  { a: { b: { c: 1, d: 2, e: 3 } } }

const y =
  { a: { b: { c: 1, d: 3, f: 4 } } }

console.log (diff (x, y))
// { a: { b: { d: { left: 2, right: 3 }, e: { left: 3 }, f: { right: 4 } } } }

2 có thuộc tính

const x =
  { a: { b: { c: 1, d: 2, e: 3 } } }

const y =
  { a: { b: { c: 1, d: 3, f: 4 } } }

console.log (diff (x, y))
// { a: { b: { d: { left: 2, right: 3 }, e: { left: 3 }, f: { right: 4 } } } }

3. Vậy

const x =
  { a: { b: { c: 1, d: 2, e: 3 } } }

const y =
  { a: { b: { c: 1, d: 3, f: 4 } } }

console.log (diff (x, y))
// { a: { b: { d: { left: 2, right: 3 }, e: { left: 3 }, f: { right: 4 } } } }

4 nên chính xác là gì?

Từ quan điểm của

const x =
  { a: { b: { c: 1, d: 2, e: 3 } } }

const y =
  { a: { b: { c: 1, d: 3, f: 4 } } }

console.log (diff (x, y))
// { a: { b: { d: { left: 2, right: 3 }, e: { left: 3 }, f: { right: 4 } } } }

5, mối quan hệ giữa các đối tượng đầu vào của chúng tôi

console.log (diff (x, y))
// { b: { left: 2, right: 3 }, c: { left: 3 }, d: { right: 4 } }

8 và

console.log (diff (x, y))
// { b: { left: 2, right: 3 }, c: { left: 3 }, d: { right: 4 } }

9 có thể hoàn toàn tùy ý. Để truyền đạt đối tượng nào đóng góp một sự khác biệt,

const x =
  { a: { b: { c: 1, d: 2, e: 3 } } }

const y =
  { a: { b: { c: 1, d: 3, f: 4 } } }

console.log (diff (x, y))
// { a: { b: { d: { left: 2, right: 3 }, e: { left: 3 }, f: { right: 4 } } } }

5 gán các mô tả

const x =
  { a: { b: { c: 1, d: 2, e: 3 } } }

const y =
  { a: { b: { c: 1, d: 3, f: 4 } } }

console.log (diff (x, y))
// { a: { b: { d: { left: 2, right: 3 }, e: { left: 3 }, f: { right: 4 } } } }

9 và

const x1 =
  { a: 1, b: { c: { d: 2 } } }

const x2 =
  { a: 1, b: { c: { d: 2 } } }

console.log (diff (x1, x2))
// {}

0

console.log (diff (x, y))
// { b: { left: 2, right: 3 }, c: { left: 3 }, d: { right: 4 } }

Trong đầu ra ở trên, chúng ta có thể thấy

Thuộc tính nào khác nhau -

console.log (diff (x, y))
// { b: { left: 2, right: 3 }, c: { left: 3 }, d: { right: 4 } }

9,

const x =
  { a: { b: { c: 1, d: 2, e: 3 } } }

const y =
  { a: { b: { c: 1, d: 3, f: 4 } } }

console.log (diff (x, y))
// { a: { b: { d: { left: 2, right: 3 }, e: { left: 3 }, f: { right: 4 } } } }

1 và

const x =
  { a: { b: { c: 1, d: 2, e: 3 } } }

const y =
  { a: { b: { c: 1, d: 3, f: 4 } } }

console.log (diff (x, y))
// { a: { b: { d: { left: 2, right: 3 }, e: { left: 3 }, f: { right: 4 } } } }

3

Đối tượng nào đóng góp sự khác biệt -

const x =
  { a: { b: { c: 1, d: 2, e: 3 } } }

const y =
  { a: { b: { c: 1, d: 3, f: 4 } } }

console.log (diff (x, y))
// { a: { b: { d: { left: 2, right: 3 }, e: { left: 3 }, f: { right: 4 } } } }

9 và/hoặc

const x1 =
  { a: 1, b: { c: { d: 2 } } }

const x2 =
  { a: 1, b: { c: { d: 2 } } }

console.log (diff (x1, x2))
// {}

0

Giá trị "khác nhau" - ví dụ: bên trái

console.log (diff (x, y))
// { b: { left: 2, right: 3 }, c: { left: 3 }, d: { right: 4 } }

9 có giá trị là 2, bên phải

console.log (diff (x, y))
// { b: { left: 2, right: 3 }, c: { left: 3 }, d: { right: 4 } }

9 có giá trị là 3; hoặc bên trái

const x =
  { a: { b: { c: 1, d: 2, e: 3 } } }

const y =
  { a: { b: { c: 1, d: 3, f: 4 } } }

console.log (diff (x, y))
// { a: { b: { d: { left: 2, right: 3 }, e: { left: 3 }, f: { right: 4 } } } }

1 có giá trị là 3, bên phải

const x =
  { a: { b: { c: 1, d: 2, e: 3 } } }

const y =
  { a: { b: { c: 1, d: 3, f: 4 } } }

console.log (diff (x, y))
// { a: { b: { d: { left: 2, right: 3 }, e: { left: 3 }, f: { right: 4 } } } }

1 có giá trị không xác định

Trước khi chúng ta thực hiện chức năng này, trước tiên chúng ta sẽ kiểm tra một kịch bản phức tạp hơn liên quan đến các đối tượng được lồng sâu

const x =
  { a: { b: { c: 1, d: 2, e: 3 } } }

const y =
  { a: { b: { c: 1, d: 3, f: 4 } } }

console.log (diff (x, y))
// { a: { b: { d: { left: 2, right: 3 }, e: { left: 3 }, f: { right: 4 } } } }

Như chúng ta có thể thấy ở trên,

const x =
  { a: { b: { c: 1, d: 2, e: 3 } } }

const y =
  { a: { b: { c: 1, d: 3, f: 4 } } }

console.log (diff (x, y))
// { a: { b: { d: { left: 2, right: 3 }, e: { left: 3 }, f: { right: 4 } } } }

5 trả về một cấu trúc phù hợp với đầu vào của chúng tôi. Và cuối cùng chúng tôi mong đợi

const x =
  { a: { b: { c: 1, d: 2, e: 3 } } }

const y =
  { a: { b: { c: 1, d: 3, f: 4 } } }

console.log (diff (x, y))
// { a: { b: { d: { left: 2, right: 3 }, e: { left: 3 }, f: { right: 4 } } } }

5 của hai đối tượng giống nhau để trả về kết quả "trống"

const x1 =
  { a: 1, b: { c: { d: 2 } } }

const x2 =
  { a: 1, b: { c: { d: 2 } } }

console.log (diff (x1, x2))
// {}

Trên đây, chúng tôi mô tả một hàm

const x =
  { a: { b: { c: 1, d: 2, e: 3 } } }

const y =
  { a: { b: { c: 1, d: 3, f: 4 } } }

console.log (diff (x, y))
// { a: { b: { d: { left: 2, right: 3 }, e: { left: 3 }, f: { right: 4 } } } }

5 không quan tâm đến các đối tượng đầu vào mà nó được đưa ra. Đối tượng "trái" có thể chứa các phím đối tượng "phải" không chứa và ngược lại, nhưng chúng ta vẫn phải phát hiện các thay đổi từ hai bên. Bắt đầu từ một cấp cao, đây là cách chúng ta tiếp cận vấn đề

const diff = (x = {}, y = {}) =>
  merge
    ( diff1 (x, y, "left")
    , diff1 (y, x, "right")
    )

diff1

Chúng tôi có một sự khác biệt "một chiều" bằng cách sử dụng

const diff = (x = {}, y = {}) =>
  merge
    ( diff1 (x, y, "left")
    , diff1 (y, x, "right")
    )

3 được mô tả là mối quan hệ "trái" và chúng tôi lấy một bên khác với các đối tượng đầu vào được mô tả là mối quan hệ "phải", sau đó chúng tôi

const diff = (x = {}, y = {}) =>
  merge
    ( diff1 (x, y, "left")
    , diff1 (y, x, "right")
    )

4

Công việc của chúng tôi được chia cho chúng tôi trong các nhiệm vụ dễ thực hiện hơn bây giờ.

const diff = (x = {}, y = {}) =>
  merge
    ( diff1 (x, y, "left")
    , diff1 (y, x, "right")
    )

3 chỉ cần phát hiện một nửa các thay đổi cần thiết và

const diff = (x = {}, y = {}) =>
  merge
    ( diff1 (x, y, "left")
    , diff1 (y, x, "right")
    )

4 chỉ cần kết hợp kết quả. Chúng ta sẽ bắt đầu với

const diff = (x = {}, y = {}) =>
  merge
    ( diff1 (x, y, "left")
    , diff1 (y, x, "right")
    )

3

const empty =
  {}
  
const isObject = x =>
  Object (x) === x
  
const diff1 = (left = {}, right = {}, rel = "left") =>
  Object.entries (left)
    .map
      ( ([ k, v ]) =>
          isObject (v) && isObject (right[k])
            ? [ k, diff1 (v, right[k], rel) ]
            : right[k] !== v
              ? [ k, { [rel]: v } ]
              : [ k, empty ]
      )
    .reduce
      ( (acc, [ k, v ]) =>
          v === empty
            ? acc
            : { ...acc, [k]: v }
      , empty
      )

const diff = (x = {}, y = {}) =>
  merge
    ( diff1 (x, y, "left")
    , diff1 (y, x, "right")
    )

3 chấp nhận hai đối tượng đầu vào và bộ mô tả mối quan hệ,

const diff = (x = {}, y = {}) =>
  merge
    ( diff1 (x, y, "left")
    , diff1 (y, x, "right")
    )

9. Bộ mô tả này mặc định là

const empty =
  {}
  
const isObject = x =>
  Object (x) === x
  
const diff1 = (left = {}, right = {}, rel = "left") =>
  Object.entries (left)
    .map
      ( ([ k, v ]) =>
          isObject (v) && isObject (right[k])
            ? [ k, diff1 (v, right[k], rel) ]
            : right[k] !== v
              ? [ k, { [rel]: v } ]
              : [ k, empty ]
      )
    .reduce
      ( (acc, [ k, v ]) =>
          v === empty
            ? acc
            : { ...acc, [k]: v }
      , empty
      )

0 là "hướng" mặc định của so sánh. Dưới đây, lưu ý rằng

const diff = (x = {}, y = {}) =>
  merge
    ( diff1 (x, y, "left")
    , diff1 (y, x, "right")
    )

3 chỉ cung cấp một nửa kết quả chúng tôi cần. Đảo ngược các đối số trong cuộc gọi thứ hai đến

const diff = (x = {}, y = {}) =>
  merge
    ( diff1 (x, y, "left")
    , diff1 (y, x, "right")
    )

3 cung cấp nửa còn lại.

const x =
  { a: 1, b: 2, c: 3 }

const y =
  { a: 1, b: 3, d: 4 }
  
console.log (diff1 (x, y, "left"))
// { b: { left: 2 }, c: { left: 3 } }

console.log (diff1 (y, x, "right"))
// { b: { right: 3 }, d: { right: 4 } }

Cũng đáng chú ý là các nhãn mối quan hệ

const empty =
  {}
  
const isObject = x =>
  Object (x) === x
  
const diff1 = (left = {}, right = {}, rel = "left") =>
  Object.entries (left)
    .map
      ( ([ k, v ]) =>
          isObject (v) && isObject (right[k])
            ? [ k, diff1 (v, right[k], rel) ]
            : right[k] !== v
              ? [ k, { [rel]: v } ]
              : [ k, empty ]
      )
    .reduce
      ( (acc, [ k, v ]) =>
          v === empty
            ? acc
            : { ...acc, [k]: v }
      , empty
      )

0 và

const empty =
  {}
  
const isObject = x =>
  Object (x) === x
  
const diff1 = (left = {}, right = {}, rel = "left") =>
  Object.entries (left)
    .map
      ( ([ k, v ]) =>
          isObject (v) && isObject (right[k])
            ? [ k, diff1 (v, right[k], rel) ]
            : right[k] !== v
              ? [ k, { [rel]: v } ]
              : [ k, empty ]
      )
    .reduce
      ( (acc, [ k, v ]) =>
          v === empty
            ? acc
            : { ...acc, [k]: v }
      , empty
      )

4 có thể xác định được người dùng. Ví dụ: nếu bạn có mối quan hệ đã biết giữa các đối tượng bạn đang so sánh và bạn muốn cung cấp nhiều nhãn mô tả hơn trong đầu ra khác ...

const customDiff = (x = {}, y = {}) =>
  merge
    ( diff1 (x, y, "original")
    , diff1 (y, x, "modified")
    )

customDiff
    ( { host: "localhost", port: 80 }
    , { host: "127.0.0.1", port: 80 }
    )
// { host: { original: 'localhost', modified: '127.0.0.1' } }

Trong ví dụ trên, có thể dễ dàng hơn để làm việc với đầu ra trong các lĩnh vực khác trong chương trình của bạn vì các nhãn

const empty =
  {}
  
const isObject = x =>
  Object (x) === x
  
const diff1 = (left = {}, right = {}, rel = "left") =>
  Object.entries (left)
    .map
      ( ([ k, v ]) =>
          isObject (v) && isObject (right[k])
            ? [ k, diff1 (v, right[k], rel) ]
            : right[k] !== v
              ? [ k, { [rel]: v } ]
              : [ k, empty ]
      )
    .reduce
      ( (acc, [ k, v ]) =>
          v === empty
            ? acc
            : { ...acc, [k]: v }
      , empty
      )

5 và

const empty =
  {}
  
const isObject = x =>
  Object (x) === x
  
const diff1 = (left = {}, right = {}, rel = "left") =>
  Object.entries (left)
    .map
      ( ([ k, v ]) =>
          isObject (v) && isObject (right[k])
            ? [ k, diff1 (v, right[k], rel) ]
            : right[k] !== v
              ? [ k, { [rel]: v } ]
              : [ k, empty ]
      )
    .reduce
      ( (acc, [ k, v ]) =>
          v === empty
            ? acc
            : { ...acc, [k]: v }
      , empty
      )

6 mô tả nhiều hơn so với

const x =
  { a: { b: { c: 1, d: 2, e: 3 } } }

const y =
  { a: { b: { c: 1, d: 3, f: 4 } } }

console.log (diff (x, y))
// { a: { b: { d: { left: 2, right: 3 }, e: { left: 3 }, f: { right: 4 } } } }

9 và

const x1 =
  { a: 1, b: { c: { d: 2 } } }

const x2 =
  { a: 1, b: { c: { d: 2 } } }

console.log (diff (x1, x2))
// {}

0.

Hợp nhất

Tất cả những gì còn lại là hợp nhất hai nửa diffs thành một kết quả hoàn chỉnh. Chức năng

const diff = (x = {}, y = {}) =>
  merge
    ( diff1 (x, y, "left")
    , diff1 (y, x, "right")
    )

4 của chúng tôi cũng hoạt động chung và chấp nhận bất kỳ hai đối tượng nào làm đầu vào.

const x =
  { a: 1, b: 1, c: 1 }

const y =
  { b: 2, d: 2 }

console.log (merge (x, y))
// { a: 1, b: 2, c: 1, d: 2 }

Trong trường hợp, mỗi đối tượng chứa một thuộc tính có giá trị cũng là một đối tượng,

const diff = (x = {}, y = {}) =>
  merge
    ( diff1 (x, y, "left")
    , diff1 (y, x, "right")
    )

4 cũng sẽ tái diễn và hợp nhất các đối tượng lồng nhau.

const x =
  { a: { b: { c: 1, d: 1 } } }

const y =
  { a: { b: { c: 2, e: 2 } }, f: 2 }

console.log (merge (x, y))
// { a: { b: { c: 2, d: 1, e: 2 } }, f: 2 }

Dưới đây chúng tôi mã hóa ý định của mình trong

const diff = (x = {}, y = {}) =>
  merge
    ( diff1 (x, y, "left")
    , diff1 (y, x, "right")
    )

4

console.log (diff (x, y))
// { b: { left: 2, right: 3 }, c: { left: 3 }, d: { right: 4 } }

0

Và đó là toàn bộ bộ dụng cụ và caboodle! Mở rộng đoạn mã bên dưới để chạy trình diễn mã trong trình duyệt của riêng bạn

Nhận xét

Khi chúng tôi nhìn lại chức năng

const x =
  { a: { b: { c: 1, d: 2, e: 3 } } }

const y =
  { a: { b: { c: 1, d: 3, f: 4 } } }

console.log (diff (x, y))
// { a: { b: { d: { left: 2, right: 3 }, e: { left: 3 }, f: { right: 4 } } } }

5 của mình, tôi muốn làm nổi bật một phần quan trọng trong thiết kế của nó. Một phần tốt của công việc được xử lý bởi hàm

const diff = (x = {}, y = {}) =>
  merge
    ( diff1 (x, y, "left")
    , diff1 (y, x, "right")
    )

4 hoàn toàn tách biệt với

const x =
  { a: { b: { c: 1, d: 2, e: 3 } } }

const y =
  { a: { b: { c: 1, d: 3, f: 4 } } }

console.log (diff (x, y))
// { a: { b: { d: { left: 2, right: 3 }, e: { left: 3 }, f: { right: 4 } } } }

5, nhưng một hạt khó tự bị tự bẻ khóa. Bởi vì chúng tôi đã tách các mối quan tâm của chúng tôi thành các chức năng số ít, giờ đây thật dễ dàng để sử dụng lại chúng trong các lĩnh vực khác trong chương trình của bạn. Nơi chúng tôi muốn

const x =
  { a: { b: { c: 1, d: 2, e: 3 } } }

const y =
  { a: { b: { c: 1, d: 3, f: 4 } } }

console.log (diff (x, y))
// { a: { b: { d: { left: 2, right: 3 }, e: { left: 3 }, f: { right: 4 } } } }

5, chúng tôi đã nhận được nó và chúng tôi có chức năng

const diff = (x = {}, y = {}) =>
  merge
    ( diff1 (x, y, "left")
    , diff1 (y, x, "right")
    )

4 trực quan miễn phí.

Thêm: Hỗ trợ cho các mảng

Hàm

const x =
  { a: { b: { c: 1, d: 2, e: 3 } } }

const y =
  { a: { b: { c: 1, d: 3, f: 4 } } }

console.log (diff (x, y))
// { a: { b: { d: { left: 2, right: 3 }, e: { left: 3 }, f: { right: 4 } } } }

5 của chúng tôi rất thuận tiện vì nó có thể thu thập dữ liệu các đối tượng lồng nhau sâu, nhưng điều gì sẽ xảy ra nếu một trong các thuộc tính đối tượng của chúng tôi là một mảng? Sẽ rất tuyệt nếu chúng ta có thể khác nhau bằng cách sử dụng cùng một kỹ thuật.

Hỗ trợ tính năng này đòi hỏi các thay đổi không tầm thường đối với mã ở trên. Tuy nhiên, phần lớn cấu trúc và lý luận vẫn giữ nguyên. Ví dụ,

const x =
  { a: { b: { c: 1, d: 2, e: 3 } } }

const y =
  { a: { b: { c: 1, d: 3, f: 4 } } }

console.log (diff (x, y))
// { a: { b: { d: { left: 2, right: 3 }, e: { left: 3 }, f: { right: 4 } } } }

5 hoàn toàn không thay đổi

console.log (diff (x, y))
// { b: { left: 2, right: 3 }, c: { left: 3 }, d: { right: 4 } }

1

Để hỗ trợ các mảng trong

const diff = (x = {}, y = {}) =>
  merge
    ( diff1 (x, y, "left")
    , diff1 (y, x, "right")
    )

4, chúng tôi giới thiệu một người trợ giúp đột biến

const customDiff = (x = {}, y = {}) =>
  merge
    ( diff1 (x, y, "original")
    , diff1 (y, x, "modified")
    )

customDiff
    ( { host: "localhost", port: 80 }
    , { host: "127.0.0.1", port: 80 }
    )
// { host: { original: 'localhost', modified: '127.0.0.1' } }

0 gán một cặp

const customDiff = (x = {}, y = {}) =>
  merge
    ( diff1 (x, y, "original")
    , diff1 (y, x, "modified")
    )

customDiff
    ( { host: "localhost", port: 80 }
    , { host: "127.0.0.1", port: 80 }
    )
// { host: { original: 'localhost', modified: '127.0.0.1' } }

1 cho một đối tượng nhất định,

const customDiff = (x = {}, y = {}) =>
  merge
    ( diff1 (x, y, "original")
    , diff1 (y, x, "modified")
    )

customDiff
    ( { host: "localhost", port: 80 }
    , { host: "127.0.0.1", port: 80 }
    )
// { host: { original: 'localhost', modified: '127.0.0.1' } }

2. Các mảng cũng được coi là đối tượng, vì vậy chúng tôi có thể cập nhật cả hai mảng và đối tượng bằng cùng hàm

const customDiff = (x = {}, y = {}) =>
  merge
    ( diff1 (x, y, "original")
    , diff1 (y, x, "modified")
    )

customDiff
    ( { host: "localhost", port: 80 }
    , { host: "127.0.0.1", port: 80 }
    )
// { host: { original: 'localhost', modified: '127.0.0.1' } }

0

console.log (diff (x, y))
// { b: { left: 2, right: 3 }, c: { left: 3 }, d: { right: 4 } }

2

Hàng hóa nông hoạt động như mong đợi

console.log (diff (x, y))
// { b: { left: 2, right: 3 }, c: { left: 3 }, d: { right: 4 } }

3

Và hợp nhất sâu quá

console.log (diff (x, y))
// { b: { left: 2, right: 3 }, c: { left: 3 }, d: { right: 4 } }

4

Hỗ trợ các mảng trong

const diff = (x = {}, y = {}) =>
  merge
    ( diff1 (x, y, "left")
    , diff1 (y, x, "right")
    )

3 khó khăn hơn đáng kể

console.log (diff (x, y))
// { b: { left: 2, right: 3 }, c: { left: 3 }, d: { right: 4 } }

5

Nhưng với những thay đổi này tại chỗ, giờ đây chúng ta có thể so sánh sâu các đối tượng có chứa các mảng - và thậm chí các mảng có chứa các đối tượng!

console.log (diff (x, y))
// { b: { left: 2, right: 3 }, c: { left: 3 }, d: { right: 4 } }

6

Vì

const diff = (x = {}, y = {}) =>
  merge
    ( diff1 (x, y, "left")
    , diff1 (y, x, "right")
    )

3 thay đổi cẩn thận hành vi của nó dựa trên các loại đầu vào của nó, chúng tôi nhận được mảng khác biệt miễn phí

console.log (diff (x, y))
// { b: { left: 2, right: 3 }, c: { left: 3 }, d: { right: 4 } }

7

Chạy chương trình đầy đủ trong trình duyệt của bạn bên dưới

nông khác

Phiên bản trước của câu trả lời này đã cung cấp một hàm

const x =
  { a: { b: { c: 1, d: 2, e: 3 } } }

const y =
  { a: { b: { c: 1, d: 3, f: 4 } } }

console.log (diff (x, y))
// { a: { b: { d: { left: 2, right: 3 }, e: { left: 3 }, f: { right: 4 } } } }

5 để so sánh các đối tượng với cùng các khóa và so sánh các đối tượng với các khóa khác nhau, nhưng không có giải pháp nào thực hiện khác biệt trên các đối tượng lồng nhau.

Giao lộ đệ quy

Trong Q & A có liên quan này, chúng tôi lấy hai đối tượng đầu vào và tính toán

const customDiff = (x = {}, y = {}) =>
  merge
    ( diff1 (x, y, "original")
    , diff1 (y, x, "modified")
    )

customDiff
    ( { host: "localhost", port: 80 }
    , { host: "127.0.0.1", port: 80 }
    )
// { host: { original: 'localhost', modified: '127.0.0.1' } }

7 đệ quy thay vì

const x =
  { a: { b: { c: 1, d: 2, e: 3 } } }

const y =
  { a: { b: { c: 1, d: 3, f: 4 } } }

console.log (diff (x, y))
// { a: { b: { d: { left: 2, right: 3 }, e: { left: 3 }, f: { right: 4 } } } }

5.

Làm thế nào để bạn so sánh các giá trị trong hai đối tượng?

Trong khi phương thức bằng () so sánh hai đối tượng. Các đối tượng bằng nhau khi chúng có cùng trạng thái (thường so sánh các biến). Các đối tượng giống hệt nhau khi họ chia sẻ danh tính lớp. Ví dụ, biểu thức obj1 == obj2 kiểm tra danh tính, không bình đẳng.the equals() method compares two objects. Objects are equal when they have the same state (usually comparing variables). Objects are identical when they share the class identity. For example, the expression obj1==obj2 tests the identity, not equality.

Cách tốt nhất để so sánh các đối tượng trong JavaScript là gì?

Bình đẳng tham chiếu.JavaScript cung cấp 3 cách để so sánh các giá trị: ....

So sánh thủ công.Cách rõ ràng để so sánh các đối tượng bằng nội dung là đọc các thuộc tính và so sánh chúng theo cách thủ công.....

Bình đẳng nông.Trong quá trình kiểm tra bình đẳng nông của các đối tượng, bạn nhận được danh sách các thuộc tính (sử dụng đối tượng. ....

Bình đẳng sâu sắc.....

Summary..

Làm thế nào để bạn so sánh hai cặp giá trị chính?

Để so sánh hai đối tượng JavaScript để kiểm tra xem chúng có cùng các cặp giá trị khóa không: sử dụng json.Stringify () để chuyển đổi các đối tượng thành chuỗi và sau đó so sánh các chuỗi JSON.Sử dụng lodash, thư viện của bên thứ 3, isequal () để thực hiện so sánh sâu giữa các đối tượng.Use JSON. stringify() to convert objects into strings and then compare the JSON strings. Use Lodash, a 3rd-party library, isEqual() to perform a deep comparison between the objects.