在ES6中解构大对象时自动分配变量[重复]答案

【问题标题】：Automatically assign variables when destructuring large objects in ES6 [duplicate]在ES6中解构大对象时自动分配变量[重复]
【发布时间】：2020-12-20 00:41:15
【问题描述】：

我认为我对 ES6 中的解构非常了解。示例：

const obj = {
  foo: 'String1',
  bar: 'String2'
}

let { foo, bar } = obj

console.log(foo) //Prints "String1"

足够简单。

但是，我有一个大型对象，其中包含动态数量的动态名称属性。我希望能够自动分配它们。

示例对象：

const obj = {
    a: 'String1',
    b: 'String2',
    c: 'String3',
    // ....
    y: 'String25',
    z: 'String26',
}

我没有单独声明每个变量，而是尝试了：

// Instead of 
// { a, b, c, d, so_on, y, z } = obj 
// I try: 

let { ...obj } = obj

但是得到这个错误： Identifier 'obj' has already been declared

有什么更好的方法来解决这个问题？

【问题讨论】：

就个人而言，如果它不是一组硬编码的变量，那么做你想做的事情似乎是个坏主意。
> let { ...obj } = obj 这行没有意义。如果我要决定，我会保持原样。更具可读性。
想要这样做的真正原因是什么？一堆动态变量实际上有什么帮助？您想要通过这样做来解决的真正问题是什么？

标签： javascript reactjs ecmascript-6 destructuring

【解决方案1】：

只要标识符与您尝试解构的对象的标识符不同，它就应该完全按照您的预期工作。

const obj = {
    a: 'String1',
    b: 'String2',
    c: 'String3',
    // ...
    y: 'String25',
    z: 'String26',
} 

const { a, b, ...rest } = obj
// const a: 'String1'
// const b: 'String2'
// const rest: {
//     c: string;
//     ...
//     y: string;
//     z: string;
// }

请参阅playground 中的此示例。

【讨论】：