HomeLập trìnhJavaScriptCách đổi tên...

Cách đổi tên nhiều khóa đối tượng trong JavaScript


30 Seconds of Code là một bộ sưu tập các đoạn mã JavaScript tuyệt vời, có thể đọc được trong ≤ 30 giây. Bất cứ ai muốn thành thạo JavaScript đều phải học qua toàn bộ.

Tuy nhiên, danh sách này không chứa chức năng đổi tên nhiều khóa đối tượng, vì vậy tôi đã tạo một yêu cầu kéo rất may đã được hợp nhất!

Đây là mục chính thức: https://30secondsofcode.org/object#renamekeys

Trước đây tôi đã viết về cách đổi tên các khóa đối tượng, nhưng chúng tôi chỉ thay đổi một khóa tại một thời điểm.

Sau đó, Adam Rowe vui lòng nhận xét, hỏi làm thế nào chúng ta có thể đổi tên nhiều khóa đối tượng. Tôi đã trả lời bằng mẫu mã này sau khi suy nghĩ và nghiên cứu.

renameKeys = (keysMap, obj) =>
  Object.keys(obj).reduce(
    (acc, key) => ({
      ...acc,
      ...{ [keysMap[key] || key]: obj[key] }
    }),
    {}
  );

Điều này được lấy cảm hứng từ Ramda Adjunct’s renameKeys chức năng.

  • keysMap chứa các cặp khóa/giá trị của các khóa đối tượng cũ/mới của bạn.
  • obj là đối tượng cần thay đổi.

Bạn có thể sử dụng nó như thế này:

keysMap = {
  name: 'firstName',
  job: 'passion'
};

obj = {
  name: 'Bobo',
  job: 'Front-End Master'
};

renameKeys(keysMap, obj);
// { firstName: 'Bobo', passion: 'Front-End Master' }

Hãy bước qua nó! Chúng ta có thể viết một mở rộng, debugger-phiên bản thân thiện của chức năng này:

renameKeys = (keysMap, obj) => {
  debugger;

  return Object.keys(obj).reduce((acc, key) => {
    debugger;

    const renamedObject = {
      [keysMap[key] || key]: obj[key]
    };

    debugger;

    return {
      ...acc,
      ...renamedObject
    };
  }, {});
};

Và chúng ta sẽ sử dụng nó như thế này:

renameKeys(
  {
    name: 'firstName',
    job: 'passion'
  },
  {
    name: 'Bobo',
    job: 'Front-End Master'
  }
);

1*C9BI6jfACst-UcchX6wyyA

Tạm dừng ở dòng 2, chúng ta thấy rằng keysMapobj đã được phân công hợp lý.

Đọc thêm  ¿Có moipular arreglos en JavaScript không?

Đây là nơi niềm vui bắt đầu. Di chuyển đến tiếp theo debugger.

1*3HKJjlIj8tChHNlre9WV9Q

Kiểm tra các biến cục bộ của chúng tôi trên dòng 7:

  • acc: {} bởi vì đó là Array.reduce()giá trị ban đầu của (dòng 19).
  • key: “name” bởi vì đó là chìa khóa đầu tiên từ Object.keys(obj).
  • renamedObject: undefined

Cũng lưu ý rằng chúng ta có thể truy cập keysMapobj khỏi phạm vi của hàm cha.

Đoán xem renamedObject sẽ là. Giống như trong bài viết đã nói ở trên của tôi, chúng tôi đang sử dụng tên thuộc tính được tính toán gán động renamedObjectchìa khóa của.

Nếu keysMap[key] tồn tại, sử dụng nó. Nếu không, hãy sử dụng khóa đối tượng ban đầu. Trong trường hợp này, keysMap[key]“firstName”.

1*aYI7ss4IOWIipNsC40r9rg

đó là renamedObjectkhóa của nó, còn giá trị tương ứng của nó thì sao?

1*GEBIVtNMWIuosMVq4FLMQw

Của nó obj[key]: "Bobo". Lượt tiếp theo debugger và kiểm tra xem nó ra.

1*XMGM2FxuNscmq_imZf8Nmw

renamedObject Hiện tại là { firstName: “Bobo” }.

1*z8HEVhgr8-e5HFrtAK5lzg

Bây giờ sử dụng Lan tràn nhà điều hành, chúng tôi sẽ hợp nhất accrenamedObject. Nhớ lấy acc hiện tại .reducegiá trị ban đầu của: một đối tượng trống.

Vì vậy, sáp nhập accrenamedObject chỉ dẫn đến một bản sao của renamedObject.

1*Fw0QyV7VsU2UH-GtD-74WQ

Tuy nhiên, vì chúng tôi đang trả lại đối tượng này, nên nó trở thành acc Trong .reducelần lặp lại tiếp theo. Di chuyển đến tiếp theo debugger để thấy điều này.

1*h0Lxhtw1trErPruUBKamfA

chúng tôi đang ở trong .reducemột lần nữa, bởi vì có thêm một key để xử lý. Chúng ta thấy rằng acc Hiện tại là { firstName: "Bobo" }.

Quá trình tương tự chạy lại, và renamedObject được tạo đúng cách.

Đọc thêm  Tại sao nên sử dụng các loại tĩnh trong JavaScript? (Hướng dẫn 4 phần về gõ tĩnh với Flow)

1*OfKamMrGJLBIvY2WgQrlaA

Lần này, sáp nhập accrenamedObject thực sự tạo nên sự khác biệt.

1*uMdN7mSsIhgvzJCceftUOw

Chạy qua đây debugger để trả lại đối tượng đó, và bạn đã hoàn tất!

Đây là đầu ra cuối cùng:

1 *TpcJHEG6MUxazCkNnCg6AQ

Đổi tên vui vẻ tất cả các phímcho đến lần sau!



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status