Để cập nhật động các thuộc tính đối tượng lồng nhau trong JavaScript bằng cách xác định đường dẫn bằng một chuỗi, bạn có thể sử dụng hàm trợ giúp sau
const setProperty = [obj, path, value] => {
const [head, ...rest] = path.split['.']
return {
...obj,
[head]: rest.length
? setProperty[obj[head], rest.join['.'], value]
: value
}
}Đã sao chép vào khay nhớ tạm. Sao chép
Sau đó, chỉ cần chuyển đối tượng của bạn làm tham số đầu tiên cho hàm, đường dẫn của bạn dưới dạng chuỗi làm tham số thứ hai và giá trị bạn muốn gán cho thuộc tính làm tham số thứ ba. Ví dụ
const obj = {
property: {
updated: false
}
}
const updatedObj = setProperty[obj, 'property.updated', true]
// The above will return:
{
property: {
updated: false
}
}Đã sao chép vào khay nhớ tạm. Sao chép
Chức năng này là thuần túy, có nghĩa là đối tượng ban đầu của bạn sẽ không bị thay đổi. Thay vào đó, hàm trả về với một đối tượng được sửa đổi hoàn toàn mới
Tìm cách để cải thiện kỹ năng của bạn?
Cách chức năng hoạt động
Hàm này sử dụng đệ quy để tìm và cập nhật thuộc tính chính xác. Trước tiên, chúng tôi chia đường dẫn đã đi qua bằng các dấu chấm, sau đó sử dụng hàm hủy để lấy giá trị đầu tiên từ mảng và tất cả phần còn lại sử dụng trải rộng
const [head, ...rest] = 'updating.nested.property'.split['.']
// The above will be:
head = 'updating'
rest = ['nested', 'property']Đã sao chép vào khay nhớ tạm. Sao chép
Bước tiếp theo là trả về một đối tượng mới, nơi đầu tiên chúng ta chuyển vào đối tượng hiện có với spread và cũng cập nhật động thuộc tính cho biến head. Trong trường hợp trên, obj.updating sẽ được cập nhật
Câu hỏi là, giá trị của nó nên là gì? . Chúng ta có thể kiểm tra xem biến rest có còn bất kỳ độ dài nào không [không phải là một mảng trống] và nếu vậy, chúng ta có thể gọi lại hàm với các tham số mới
// Starting with:
const [head, ...rest] = 'updating.nested.property'.split['.']
// The above will be:
head = 'updating'
rest = ['nested', 'property']
setProperty[obj[head], rest.join['.'], value]
// The above translates to:
setProperty[obj.updating, 'nested.property', value]
// In the next iteration:
const [head, ...rest] = 'nested.property'.split['.']
// The above will be:
head = 'nested'
rest = ['property']
setProperty[obj.nested, 'property', value]Đã sao chép vào khay nhớ tạm. Sao chép
Và cứ như vậy, cho đến khi chúng tôi đạt được thuộc tính cuối cùng, trong trường hợp đó, chúng tôi dừng đệ quy và chỉ cần đặt giá trị
Cũng đáng lưu ý rằng nếu thuộc tính gốc tồn tại, nhưng thuộc tính lồng nhau thì không, nó sẽ tạo đối tượng cho bạn và vẫn đặt đường dẫn. Tuy nhiên, điều này sẽ không hoạt động nếu thuộc tính gốc không tồn tại trên đối tượng