如何使用数字键名解构对象？

Posted 2023-02-22

【中文标题】如何使用数字键名解构对象？

【英文标题】：How to destructure objects with keys names that are numbers?

【发布时间】：2018-11-20 23:31:03

【问题描述】：

我有需要在组件中解构的道具。由于它来自 API，它实际上是一个对象，我想从中获取 0 到 39 的对象。但是，当我尝试以这种方式解构它们时：

 const  0, ...39: weatherData  = this.props;

由于逗号，VSCode 给了我一个意外令牌的错误。如何在不必枚举每个对象的情况下解构道具？

【问题讨论】：

对象键总是字符串。即使这些字符串包含数字字符，它们仍然是字符串。

@ScottMarcus，好的，如果我收到关于逗号的错误，如何解构它们？

您是否要获取一系列键的所有值？我不知道你希望... 在这里做什么。

这个对象实际上是一个数组吗？确实应该如此。

即使这不是数字属性，解构也不会那样工作。如果你想创建一个只有属性子集的新对象，你可以做类似***.com/q/25553910/218196 的事情。

【参考方案1】：

您可以将数组作为对象的目标，该对象仅采用数字索引并将其切成所需的长度。

const array = Object
    .assign([],  abc: 1, 0: 100, 1: 101, 39: 139, 40: 140 )
    .slice(0, 40);

console.log(Array.isArray(array));
console.log(array);

.as-console-wrapper  max-height: 100% !important; top: 0; 

【讨论】：

但是输出的不是数组，而是对象。

slice 仅适用于数组。请查看数组检查。

@llievredemars 它应该无论如何都是一个数组

【参考方案2】：

在 javascript 中，即使您使用 number 作为键创建对象，键始终是字符串，例如：

const obj = 
  [1]: 1,
  anotherThing: 2
;

console.log(Object.keys(obj))

但是，由于'1' 或1 是文字，因此无法在解构赋值中使用它们，为了使用数字键，您必须将对象转换为iterable 或手动映射属性，

将对象转换为可迭代对象的最简单方法是将Object.assign 与数组一起使用，因为数组也是对象，您可以执行以下操作：

const arr = Object.assign([], obj);

为了实现您的目的，例如：

const obj = 
  [0]: 0,
  [1]: 1,
  wheaterData: 'wheaterData',
  anotherNonNumericProp: '1'
;

const arrOfNumericProps = Object.assign([], obj);

const [prop0, prop1] = arrOfNumericProps;

const wheaterData,
  ...rest
 = arrOfNumericProps;

console.log(prop0);
console.log(prop1);

console.log(wheaterData);
console.log(rest);

【讨论】：

整数命名的属性不需要计算键。

@Bergi 不，但这样更容易识别它们。