Hướng dẫn compare 2 object javascript - so sánh 2 đối tượng javascript

Nếu tất cả các khóa và giá trị cho các khóa đó giống nhau trong cả hai đối tượng thì nó sẽ trả về đúng, nếu không thì hãy trả về sai.

Đối tượng là các loại tham chiếu để bạn có thể chỉ sử dụng === hoặc == để so sánh 2 đối tượng. Một cách nhanh chóng để so sánh nếu 2 đối tượng có cùng giá trị khóa, là sử dụng JSON.stringify. Một cách khác là sử dụng chức năng lodash

// es module
import { isEqual, uniq } from "lodash";

// OR commonJS
const _ = require("lodash");
const { isEqual, uniq } = _;

const getUpdatedKey = (oldData, newData) => {
  const data = uniq([...Object.keys(oldData), ...Object.keys(newData)]);

  for(const key of data){
    if(!isEqual(oldData[key], newData[key])){
      return key;
    }
  }

  return null;
}

Yup, 2 cách cũng hoạt động cho các vật thể lồng sâu.

Điều đó phụ thuộc. Đối với // es module import { isEqual, uniq } from "lodash"; // OR commonJS const _ = require("lodash"); const { isEqual, uniq } = _; const getUpdatedKey = (oldData, newData) => { const data = uniq([...Object.keys(oldData), ...Object.keys(newData)]); for(const key of data){ if(!isEqual(oldData[key], newData[key])){ return key; } } return null; } 1, vấn đề đặt hàng. Vì vậy, nếu cặp giá trị khóa được đặt hàng khác nhau trong hai đối tượng nhưng giống nhau, nó sẽ trả về sai. Trong khi nó không quan trọng trong lodash // es module import { isEqual, uniq } from "lodash"; // OR commonJS const _ = require("lodash"); const { isEqual, uniq } = _; const getUpdatedKey = (oldData, newData) => { const data = uniq([...Object.keys(oldData), ...Object.keys(newData)]); for(const key of data){ if(!isEqual(oldData[key], newData[key])){ return key; } } return null; } 0, nó sẽ trả về đúng khi cặp giá trị khóa tồn tại.

Đây là đề xuất của tôi. Đối với một giải pháp nhanh chóng và bẩn thỉu, tôi sẽ sử dụng

// es module
import { isEqual, uniq } from "lodash";

// OR commonJS
const _ = require("lodash");
const { isEqual, uniq } = _;

const getUpdatedKey = (oldData, newData) => {
  const data = uniq([...Object.keys(oldData), ...Object.keys(newData)]);

  for(const key of data){
    if(!isEqual(oldData[key], newData[key])){
      return key;
    }
  }

  return null;
}

Mã giải thích:

• Nhận các phím độc đáo từ cả hai đối tượng trong một mảng phẳng.unique keys from both objects in a flat array.unique keys from both objects in a flat array.
• Vòng lặp qua mảng và cho mỗi khóa kiểm tra xem dữ liệu dựa trên khóa đó trong cả hai đối tượng

  // es module
  import { isEqual, uniq } from "lodash";
  
  // OR commonJS
  const _ = require("lodash");
  const { isEqual, uniq } = _;
  
  const getUpdatedKey = (oldData, newData) => {
    const data = uniq([...Object.keys(oldData), ...Object.keys(newData)]);
  
    for(const key of data){
      if(!isEqual(oldData[key], newData[key])){
        return key;
      }
    }
  
    return null;
  }
  

  0 với nhau.
• Nếu không bằng nhau, nó có nghĩa là giá trị khóa đã thay đổi. Vì vậy, hãy trả lại phím (dừng vòng lặp theo dõi của nó).
• Nếu không có gì thay đổi, hãy trả lại

  // es module
  import { isEqual, uniq } from "lodash";
  
  // OR commonJS
  const _ = require("lodash");
  const { isEqual, uniq } = _;
  
  const getUpdatedKey = (oldData, newData) => {
    const data = uniq([...Object.keys(oldData), ...Object.keys(newData)]);
  
    for(const key of data){
      if(!isEqual(oldData[key], newData[key])){
        return key;
      }
    }
  
    return null;
  }
  

  5.

Ví dụ Dữ liệu & Kết quả

let oldObj;
let newObj;

oldObj = {
  countries: ["Pakistan", "India", "Japan", "England", "United States"],
  nationalities: ["American", "British", "Pakistani", "Indian", "Chinese"]
};

newObj = {
  countries: ["Pakistan", "India", "Japan", "England"],
  nationalities: ["American", "British", "Pakistani", "Indian", "Chinese"]
}

console.log(getUpdatedKey(oldObj, newObj)); // countries

oldObj = {
  countries: ["Pakistan", "India", "Japan", "England", "United States"],
  nationalities: ["American", "British", "Pakistani", "Indian", "Chinese"]
};

newObj = {
  countries: ["Pakistan", "India", "Japan", "United States", "England"],
  nationalities: ["American", "British", "Pakistani", "Indian", "Chinese"]
}

console.log(getUpdatedKey(oldObj, newObj)); // countries

oldObj = {
  countries: ["Pakistan", "India", "Japan", "England", "United States"],
  nationalities: ["American", "British", "Pakistani", "Indian", "Chinese"]
};

newObj = {
  countries: ["Pakistan", "India", "Japan", "England", "United States"],
  nationalities: ["American", "British", "Pakistani", "Indian"]
}

console.log(getUpdatedKey(oldObj, newObj)); // nationalities

oldObj = {
  id: "ioj86bndom",
  name: {
    first: "John",
    middle: "Montgomery",
    last: "Smith"
  },
  address: {
    street: "660 K St",
    city: "San Diego",
    state: "California",
    country: "United States"
  }
};

newObj = {
  id: "ioj86bndom",
  name: {
    first: "John",
    middle: "Montgomery",
    last: "Smith"
  },
  address: {
    street: "4914 U.S. 220 Business",
    city: "Randleman",
    state: "Nebraska",
    country: "United States"
  }
};

console.log(getUpdatedKey(oldObj, newObj)); // address


oldObj = {
  id: "ioj86bndom",
  name: {
    first: "John",
    middle: "Montgomery",
    last: "Smith"
  },
  address: {
    street: "660 K St",
    city: "San Diego",
    state: "California",
    country: "United States"
  }
};

newObj = {
  id: "ioj86bndom",
  name: {
    first: "John",
    last: "Smith"
  },
  address: {
    street: "4914 U.S. 220 Business",
    city: "Randleman",
    state: "Nebraska",
    country: "United States"
  }
};

console.log(getUpdatedKey(oldObj, newObj)); // name

Mã để nhận được nhiều khóa cập nhật

Mã trên sẽ chỉ xác định khóa đầu tiên phù hợp với các tiêu chí. Chúng tôi có thể sửa đổi một chút để trả về nhiều hơn một khóa bằng cách giữ một mảng, đẩy vào nó và trả lại nó ở cuối:

const getUpdatedKeys = (oldData, newData) => {
  const data = uniq([...Object.keys(oldData), ...Object.keys(newData)]);
  const keys = [];
  for(const key of data){
    if(!isEqual(oldData[key], newData[key])){
      keys.push(key);
    }
  }

  return keys;
}

Ví dụ cho nhiều khóa cập nhật

oldObj = {
  id: "ioj86bndom",
  name: {
    first: "John",
    middle: "Montgomery",
    last: "Smith"
  },
  address: {
    street: "660 K St",
    city: "San Diego",
    state: "California",
    country: "United States"
  }
};

newObj = {
  id: "ioj86bndom",
  name: {
    first: "John",
    last: "Smith"
  },
  address: {
    street: "4914 U.S. 220 Business",
    city: "Randleman",
    state: "Nebraska",
    country: "United States"
  }
};

console.log(getUpdatedKeys(oldObj, newObj)); // [ 'name', 'address' ]




oldObj = {
  id: "ioj86bndom",
  name: {
    first: "John",
    middle: "Montgomery",
    last: "Smith"
  },
  address: {
    street: "660 K St",
    city: "San Diego",
    state: "California",
    country: "United States",
    somethingNested: {
      a: {
        b: true
      }
    }
  }
};

newObj = {
  id: "ioj86bndom",
  name: {
    first: "John",
    middle: "Montgomery",
    last: "Smith"
  },
  address: {
    street: "660 K St",
    city: "San Diego",
    state: "California",
    country: "United States",
    somethingNested: {
      a: {
        b: false
      }
    }
  }
};


console.log(getUpdatedKeys(oldObj, newObj)); // [ 'address' ]

Xem thêm

• JavaScript: Tìm nếu chuỗi có một trường hợp cụ thể
• Thay thế tất cả các phím của các đối tượng lồng nhau hoặc mảng các đối tượng trong JavaScript
• Tính tổng giá trị đầu tư với cổ tức được thêm vào
• Hạn chế nội dung cho người dùng của các quốc gia cụ thể chỉ có JavaScript
• Theo dõi số lượng người dùng truy cập với bộ nhớ cục bộ JavaScript
• React JS Render Form với các trường có điều kiện động
• React JS Render Form với dữ liệu động từ API phụ trợ