Làm cách nào để hủy cấu trúc thành các biến được đặt tên động trong ES6?

Question

Giả sử tôi có các đối tượng sau đây:

const user = { 
    id: 42, 
    displayName: "jdoe", 
    fullName: { 
     firstName: "John", 
     lastName: "Doe" 
    } 
}; 

Và rằng tôi muốn chỉ id và fullName.

tôi sẽ làm như sau:

const { id, fullName } = user 

Dễ dàng peasy, phải không?

Bây giờ, giả sử rằng tôi muốn thực hiện phá hủy dựa trên giá trị của biến số khác được gọi là fields.

const fields = [ 'id', 'fullName' ] 

Bây giờ câu hỏi của tôi là: Làm cách nào để tôi có thể hủy dựa trên một loạt khóa?

Tôi không biết xấu hổ thử như sau nhưng không thành công:

let {[{...fields}]} = user và let {[...fields]} = user. Có cách nào mà điều này có thể được thực hiện?

Cảm ơn bạn

Answer 1

Câu trả lời ngắn gọn: điều đó là không thể và sẽ không thể thực hiện được.

Lý do đằng sau điều này: nó sẽ giới thiệu các biến được đặt tên động mới vào phạm vi khối, có hiệu quả là động eval, do đó vô hiệu hóa bất kỳ tối ưu hóa hiệu suất nào. Dynamic eval có thể thay đổi phạm vi bay luôn được coi là cực kỳ nguy hiểm và đã bị loại bỏ khỏi chế độ nghiêm ngặt của ES5.

Hơn nữa, nó sẽ là một mùi mã - tham chiếu biến không xác định ném ReferenceError, vì vậy bạn sẽ cần thêm mã bản mẫu để xử lý một cách an toàn phạm vi động như vậy.

Answer 2

Không thể hủy cấu trúc bằng khóa động. Để ngăn chặn vấn đề tạo các biến động (như Ginden đã đề cập), bạn cần cung cấp bí danh.

const user = { 
    id: 42, 
    displayName: "jdoe", 
    fullName: { 
     firstName: "John", 
     lastName: "Doe" 
    } 
}; 

const fields = [ 'id', 'fullName' ]; 
const object = {}; 

const {[fields[0]]: id, [fields[1]]: fullName} = user; 

console.log(id); // 42 
console.log(fullName); // { firstName: "John", lastName: "Doe" } 

Để giải quyết vấn đề phải xác định bí danh tĩnh cho giá trị động, bạn có thể gán cho thuộc tính động của đối tượng. Trong ví dụ đơn giản này, đây là giống như quay trở lại toàn bộ destructuring, mặc dù :)

const user = { 
    id: 42, 
    displayName: "jdoe", 
    fullName: { 
     firstName: "John", 
     lastName: "Doe" 
    } 
}; 

const fields = [ 'id', 'fullName' ]; 
const object = {}; 

({[fields[0]]: object[fields[0]], [fields[1]]: object[fields[1]]} = user); 

console.log(object.id); // 42 
console.log(object.fullName); // { firstName: "John", lastName: "Doe" } 

nguồn:

• https://twitter.com/ydkjs/status/699845396084846592

• https://github.com/getify/You-Dont-Know-JS/blob/master/es6%20%26%20beyond/ch2.md#not-just-declarations

Answer 3

Như đã thảo luận trước đây, bạn không thể phá hủy vào vari được đặt tên động ables trong JavaScript mà không cần sử dụng eval.

Nhưng bạn có thể có được một tập hợp con của các đối tượng tự động, sử dụng giảm chức năng như sau:

const destruct = (keys, obj) => 
 
    keys.reduce((a, c) => ({ ...a, [c]: obj[c] }), {}); 
 

 
const object = { 
 
    color: 'red', 
 
    size: 'big', 
 
    amount: 10, 
 
}; 
 

 
const subset = destruct(['color', 'amount'], object); 
 
console.log(subset);