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 keysMap và obj đã được phân công hợp lý.

Đọc thêm Các phương pháp JavaScript này sẽ nâng cao kỹ năng của bạn chỉ sau vài phút

Đâ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 keysMap và obj 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] Là “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 acc và renamedObject. 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 acc và renamedObject 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