时间戳

首页 > 解决方案 > 对象数组的解构变得未定义

javascript - 对象数组的解构变得未定义

问题描述

我试图解构 Array 对象，但未定义。

 var menus = [{
   food: "pizza",
   drink: "coke"
 }, {
   food: "burger",
   drink: "pepsi"
 }, {
   food: "sandwitch",
   drink: "coke"
 }, {
   food: "popcorn",
   drink: "coke"
 }];

 var {
   food: team,
   drink: sports
 } = menus;

 console.log({
   team
 });

输出：团队未定义。

这似乎是一个语法问题。

标签： javascriptecmascript-6

解决方案

您需要解构数组内的对象。

您可以将数组解构与对象解构（本例中的第一项）一起使用：

const menus = [{"food":"pizza","drink":"coke"},{"food":"burger","drink":"pepsi"},{"food":"sandwitch","drink":"coke"},{"food":"popcorn","drink":"coke"}];
 
const [{ food:team,drink:sports }] = menus;
 
console.log({team});

或者解构数组中的特定对象：

const menus = [{"food":"pizza","drink":"coke"},{"food":"burger","drink":"pepsi"},{"food":"sandwitch","drink":"coke"},{"food":"popcorn","drink":"coke"}];
 
const { food:team,drink:sports } = menus[2];
 
console.log({team});

要将所有值获取到新数组，请使用Array.map()：

const menus = [{"food":"pizza","drink":"coke"},{"food":"burger","drink":"pepsi"},{"food":"sandwitch","drink":"coke"},{"food":"popcorn","drink":"coke"}];
 
const teams = menus.map(({ food: team }) => ({ team }));
 
console.log(teams);

推荐阅读