时间戳

首页 > 解决方案 > Javascript 输出一个包含两个值的数组，其中两个值用它们自己的变量分隔

javascript - Javascript 输出一个包含两个值的数组，其中两个值用它们自己的变量分隔

问题描述

为了详细说明我的问题，我想将数组中的两个值分成它们自己的变量，然后使用 for each 输出它们。所以它可以是这样的：

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

结果：

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

另外我想知道我可以做什么样的“文档”回声来组合这两个变量中的每一个。

标签： javascriptarrays

解决方案

与其创建两个单独的数组，不如考虑只创建一个包含对象条目的数组，然后插入键和值，用 a 分隔-：

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}`;
});

推荐阅读