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

Chúng tôi có hai đối tượng JavaScript tương tự và chúng tôi quan tâm đến việc tìm kiếm [các] khóa nào, nếu có, đã thay đổi ở cấp độ đầu tiên. Một khóa trong đối tượng có thể giữ bất kỳ loại dữ liệu nào trong giá trị của nó, bao gồm mảng và đối tượng, và nó cũng có thể được lồng sâu. Sự thay đổi có thể có nghĩa là bất cứ điều gì, chẳng hạn như thêm, thêm vào, loại bỏ, loại bỏ khỏi, sửa đổi hoặc xáo trộn, v.v.

Loại nhận dạng chính này có thể được yêu cầu trong trường hợp bạn cần so sánh trạng thái cũ và mới, chẳng hạn như các bộ lọc trước và mới và tìm ra chính xác những gì đã thay đổi.

Dưới đây là mã để tìm một khóa đã thay đổi giá trị của nó giữa các đối tượng. Xa hơn nữa, có một mã sửa đổi để có được nhiều hơn một khóa được thay đổi.

Mật mã

Bạn có thể viết mã so sánh hoặc mã công cụ độc đáo của riêng bạn cho mảng và đối tượng. Nhưng vì nó khá phức tạp với các cấp độ lồng sâu hơn, và do đó, để phát minh lại bánh xe, tôi đã thích các phương pháp Lodash isEqual và

// 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;
}

// 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.
• 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 isEqual 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ợ