JavaScript解构赋值未声明变量

Question

json = '{"squadName":"Super hero squad","homeTown":"Metro City","formed":2016,"secretBase":"Super tower","active":true,"members":[{"name":"Molecule Man","age":29,"secretIdentity":"Dan Jukes","powers":["Radiation resistance","Turning tiny","Radiation blast"]}]}';

data = JSON.parse(json);

console.log(data);

const {squadName, homeTown, formed, secretBase, active} = data;

console.log(squadName, homeTown, formed, secretBase, active)

在上述场景中，我该如何将`squadName`、`homeTown`、`formed`、`secretBase`和`active`这些变量名与相同名称的变量一起使用，而无需硬编码`const {squadName, homeTown, formed, secretBase, active} = data;`的部分？

是否可以通过使用json数据的键动态创建`const {squadName, homeTown, formed, secretBase, active}`部分，并像`const {squadName, homeTown, formed, secretBase, active} = data`一样使用它呢？

- Norman

---

将它们存储到数组中是否可行？ - Karl L

@user9879287 当然可以... - Norman

Answer 1

你可以用一个不太正规的方式来实现，比如：

json = '{"squadName":"Super hero squad","homeTown":"Metro City","formed":2016,"secretBase":"Super tower","active":true,"members":[{"name":"Molecule Man","age":29,"secretIdentity":"Dan Jukes","powers":["Radiation resistance","Turning tiny","Radiation blast"]}]}';

data = JSON.parse(json);

for (let [key, value] of Object.entries(data)) {
  eval(key+"=value")
}

console.log(squadName,homeTown,formed,secretBase,active)

它只是以字符串形式评估表达式。

或者这样做：

json = '{"squadName":"Super hero squad","homeTown":"Metro City","formed":2016,"secretBase":"Super tower","active":true,"members":[{"name":"Molecule Man","age":29,"secretIdentity":"Dan Jukes","powers":["Radiation resistance","Turning tiny","Radiation blast"]}]}';

data = JSON.parse(json);


for (let [key, value] of Object.entries(data)) {
   window[key] = value
}

console.log(squadName,homeTown,formed,secretBase,active)

- Karl L

---

这解决了问题，但不建议使用 eval：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/eval#Never_use_eval! - Bruno Monteiro

Answer 2

您可以使用全局 globalThis 属性动态分配 JSON 数据属性键值，而无需在解构中硬编码 const {squadName, homeTown, formed, secretBase, active} = data;

json = '{"squadName":"Super hero squad","homeTown":"Metro City","formed":2016,"secretBase":"Super tower","active":true,"members":[{"name":"Molecule Man","age":29,"secretIdentity":"Dan Jukes","powers":["Radiation resistance","Turning tiny","Radiation blast"]}]}';

data = JSON.parse(json);

console.log(data);

Object.entries(data).forEach(([key, val]) => globalThis[key] = val);

console.log(squadName, homeTown, formed, secretBase, active);

- Shuvojit Saha

Answer 3

在解析后，您可以立即访问这些变量。

let json = '{"squadName":"Super hero squad","homeTown":"Metro City","formed":2016,"secretBase":"Super tower","active":true,"members":[{"name":"Molecule Man","age":29,"secretIdentity":"Dan Jukes","powers":["Radiation resistance","Turning tiny","Radiation blast"]}]}';

let data = JSON.parse(json);

console.log(data.squadName);
console.log(data.homeTown);
console.log(data.formed);
console.log(data.secretBase);
console.log(data.active);

- jaylordibe

Answer 4

我不确定你的用例是什么，但如果你只需要这些变量全局可用，你可以从 window 对象中设置它们（参见此帖子：https://dev59.com/nW435IYBdhLWcg3w9FBY#5117153）

你可以遍历你的数据并创建变量：

json = '{"squadName":"Super hero squad","homeTown":"Metro City","formed":2016,"secretBase":"Super tower","active":true,"members":[{"name":"Molecule Man","age":29,"secretIdentity":"Dan Jukes","powers":["Radiation resistance","Turning tiny","Radiation blast"]}]}';

data = JSON.parse(json);

Object.entries(data).forEach((item) => {
  window[item[0]] = item[1]
})

这将为您的JSON中的每个条目创建变量。

- Bruno Monteiro

Answer 5

简短的回答是不需要。当你事先知道你要查找什么时，可以使用const。但实际上，你可以实现你想做的事情。

当你有一堆你想要以编程方式处理的项目时，像数组和JavaScript对象这样的数据结构更有意义，但这最适合于你事先不知道会遇到什么情况的情况。

如果你事先知道你要使用这些字段，那么你已经拥有了所需的内容：

const {squadName, homeTown, formed, secretBase, active} = data;

如果您事先不知道，那么选择以编程方式选择元素并将它们放入新对象或数组中是有意义的。例如，如果您想要创建一个仅包含字符串值的新对象，则可以这样做：

const justStrings = Object.keys(data)
  .filter((k) => typeof data[k] === 'string')
  .reduce((newObj, k) => {
    newObj[k] = data[k];
    return newObj;
  }, {});

这将返回该对象：

{
  squadName: 'Super hero squad',
  homeTown: 'Metro City',
  secretBase: 'Super tower'
}

- Byron Alley