将数组解构为对象属性键

Posted 2023-02-22

【中文标题】将数组解构为对象属性键

【英文标题】：Destructure array to object property keys

【发布时间】：2016-11-09 14:40:02

【问题描述】：

我有一个值数组，例如：

const arr = [1,2,3];

有什么方法可以使用解构来创建以下输出？如果没有，我可以在 ES6（或更高版本）中执行此操作的最简单方法是什么？

const obj = 
    one: 1,
    two: 2,
    three: 3
;

我试过了，但我猜它不起作用，因为这是计算键的语法：

const arr = [1,2,3];
const obj = 
  [one, two, three] = arr
;

【问题讨论】：

解构的最初目的是从存储在（嵌套）对象/数组中的数据中提取值。在您的示例中，您创建了一个对象。对象字面量更适合这种情况。

使用计算属性实际上会导致与通常问题相反的问题。通常，当人们想将变量用作对象文字键时，它被视为道具。在这里你想定义一个道具，但它会被视为一个变量（如果允许该语法）。或者至少当括号中只有一个时会模棱两可。

@squint 确实，这就是为什么我有点希望使用解构 而不是 计算属性的语法，但这看起来不太可能。我想这是有道理的，因为长格式真的不会太长，只是重复。

它看起来确实是一个引人注目的语法，除了 [foo]: ["bar"] 的歧义，它必须作为一个不幸的特殊情况来处理。

【参考方案1】：

您不仅可以将解构值分配给变量，还可以分配给现有对象：

const arr = [1,2,3], o = ;    
(0:o.one, 1:o.two, 2:o.three = arr);

这无需任何额外变量即可工作，并且重复性较低。但是，如果您对它非常挑剔，它也需要两个步骤。

【讨论】：

这既可怕又神奇。

在 TypeScript 中，我在这里遇到错误。它说：不能重新声明块范围的变量

@Marecky - 不应该，doesn't for me。你必须给o 一个类型（否则，它没有one、two 或three 属性）。

【参考方案2】：

我不相信有任何结构化/解构解决方案可以一步完成，不。我想要类似的东西in this question。旧的:= strawman proposal 似乎在新的proposal list 中没有腿，所以我认为现在没有太多的活动。

恕我直言，this answer 是这里最好的一个（比这个好得多）。两步，但简洁明了。

但如果是两步，你也可以使用简单的对象初始化器：

const arr = [1,2,3];
const obj = 
  one: arr[0],
  two: arr[1],
  three: arr[2]
;
console.log(obj);

另一种选择是使用几个临时数组，但技术上只有一个声明（我不提倡这一点，只是注意到它）：

const arr = [1,2,3];
const obj = Object.fromEntries(
    ["one", "two", "three"].map((name, index) =>
        [name, arr[index]]
    )
);
console.log(obj);

【讨论】：

有一个几乎one-step solution 没有创建不必要的变量。

@LUH3417：“几乎一步”=“两步”。 :-) 但是，是的，这是另一种完全有效的方法。

看来您实际上可以解构到对象属性，请参阅下面的***.com/a/49413688/4273291 或***.com/a/57908036/4273291

@lohfu - 是的，你可以（事实上，我链接到a solution 答案中确实如此）。你可以解构为任何可分配的东西。但这仍然是两个步骤。

【参考方案3】：

let distructingNames = ['alu', 'bob', 'alice', 'truce', 'truce', 'truce', 'truce', 'bob'];
let obj=;
distructingNames.forEach((ele,i)=>
    obj[i]=ele;
)
console.log('obj', obj)

【参考方案4】：

您可以使用 lodash 的 _.zipObject 轻松实现它

const obj = _.zipObject(['one','two','three'], [1, 2, 3]);
console.log(obj); //  one: 1, two: 2, three: 3 

【参考方案5】：

使用解构赋值可以从数组中赋值给一个对象

请试试这个例子：

const numbers = ;

[numbers.one, numbers.two, numbers.three] = [1, 2, 3]

console.log(numbers)

感谢http://javascript.info/ 的男孩们，我在那里找到了一个类似的例子。此示例位于左侧部分的“分配给任何内容”中的 http://javascript.info/destructuring-assignment

【参考方案6】：

通过解构，您可以创建新变量或分配给现有变量/属性。但是，您不能在同一个语句中声明和重新分配。

const arr = [1, 2, 3],
    obj = ;

[obj.one, obj.two, obj.three] = arr;
console.log(obj);
//  one: 1, two: 2, three: 3 

【讨论】：

这是最好的答案恕我直言。

【参考方案7】：

这回答了一个略有不同的要求，但我来这里是为了寻找该需求的答案，也许这会帮助处于类似情况的其他人。

给定一个字符串数组：a = ['one', 'two', 'three'] 获取此结果字典的一种很好的非嵌套非循​​环方式是什么： b = one : 'one', two: 'two', three: 'three' ？

const b = a.map(a=>( [a]: a )).reduce((p, n)=>( ...p, ...n ),)

【讨论】：

您可以使用带有扩展语法的Object.assign() 而不是.reduce()：const o = Object.assign(...a.map(val => ( [val]: val )));