Question

为了阐明我的问题，我想将数组中的两个值分成各自的变量，然后分别使用它们输出。因此它可能适用于：

对于每个-> 名称+'-'值

结果：

Apple - 1
Banana - 2
Orange - 3

我正在尝试使用下面的代码完成上面的输出

var groceries =[
{"Apple": 1},
{"Banana": 2},
{"Orange": 3}
];

var name = groceries.map(c => object.values(c)[0]);
var value = groceries.map(d => Object.values(d)[0]);

name.forEach(function(g_name) {
  document.body.appendChild(document.createElement('div')).textContent = g_name;
});

value.forEach(function(g_value) {
  document.body.appendChild(document.createElement('div')).textContent = g_value;
});

我有int的输出，显示了1、2、3，但它是我一直在困扰的字符串部分。

由于数组类似于[object Object]，因此我认为在object.values中使用小写字母会有所帮助，但出现错误Uncaught ReferenceError: object is not defined on line

我还想知道我可以对两种变量中的每一个进行哪种“文档”回显组合。

Answer 1

考虑创建对象的条目仅创建一个数组，而不是创建两个单独的数组，然后插入由-分隔的键和值：

var groceries =[
  {"Apple": 1},
  {"Banana": 2},
  {"Orange": 3}
];

for (const [[key, value]] of groceries.map(Object.entries)) {
  document.body.appendChild(document.createElement('div')).textContent = `${key} - ${value}`;
}

您当前的代码存在问题

请勿将name用作顶级变量，因为它将始终被强制转换为字符串（而且，最好使用精确的变量名-有助于防止错误！）
object.values无法正常工作-您需要Object.values
使用Object.keys获取密钥-两次使用Object.values只会为您提供两次值
如果您使用两数组路由，则在遍历一个数组时，请在另一数组中查找要遍历的相同索引，以便一次访问键及其对应的键，因此您可以将其插入HTML

修正原始代码：

const groceries = [{
    "Apple": 1
  },
  {
    "Banana": 2
  },
  {
    "Orange": 3
  }
];

const groceryNames = groceries.map(c => Object.keys(c)[0]);
const groceryValues = groceries.map(d => Object.values(d)[0]);

groceryNames.forEach(function(g_name, i) {
  const value = groceryValues[i];
  document.body.appendChild(document.createElement('div')).textContent = `${g_name} - ${value}`;
});

Answer 2

因为答案

var name = groceries.map(c => object.values(c)[0]);中有一个错字，应该是Object.values

name是全局保留的变量，请不要使用它。改用names

解决方案：

遍历groceries，

获取对象项的第一个键，例如key = Object.keys(obj)[0]

使用如下键和值创建具有所需输出的div：key + ' - ' + obj[key]

工作示例

var groceries =[
{"Apple": 1},
{"Banana": 2},
{"Orange": 3}
];

// may be it would be better to use one loop in this case
groceries.forEach((obj) => {
  const key = Object.keys(obj)[0] // getting a single first key of object
  document.body.appendChild(document.createElement('div')).textContent = 
   key + ' - ' + obj[key];
})

Javascript输出具有两个值的数组，其中两个值都用各自的变量分开

2 个答案: