如何在JavaScript中从数组获取信息？及代码错误排查

一、如何在JavaScript中从数组获取信息 #

获取数组信息的方法有很多，可根据需求灵活选择：

• 通过索引直接访问：数组是有序集合，用数组名[索引]获取对应元素（索引从0开始）。比如const firstProduct = products[0];就能拿到数组第一个对象。
• 循环遍历：
  • 传统for循环：适合需要手动控制遍历过程的场景，比如你代码里用到的类型，但要注意语法正确性。
  • forEach方法：更简洁的遍历方式，自动处理索引，示例：

    products.forEach(product => {
      console.log(product.name);
    });
    

  • for...of循环：直接遍历数组元素，可读性拉满：

    for (const product of products) {
      console.log(product.age);
    }
    

• 数组方法提取特定内容：
  • map：提取指定字段并返回新数组，比如批量提取name、age、salary：

    const extractedFields = products.map(product => ({
      name: product.name,
      age: product.age,
      salary: product.salary
    }));
    

  • filter：筛选符合条件的元素，比如找出薪资高于400的对象：

    const highSalaryWorkers = products.filter(p => p.salary > 400);
    

  • find：定位第一个符合条件的元素，比如找名为'Вася'的对象：

    const vasya = products.find(p => p.name === 'Вася');
    

二、你的代码问题分析与修正 #

先拆解你提供的代码，存在几个关键问题：

问题1：HTML实体导致语法错误 #

循环条件里的<是HTML的小于号实体，在JavaScript代码中必须直接写<，否则会抛出语法错误，循环根本无法执行。

问题2：document.write的滥用 #

页面加载完成后调用document.write会直接覆盖整个页面内容，这绝对不是你想要的展示效果，应该用DOM操作（比如创建元素、修改innerHTML）来追加内容。

问题3：直接打印对象会显示[object Object] #

products[i]是一个对象，直接拼接字符串会输出[object Object]，必须访问具体的属性（name、age、salary）才能显示对应的值。

问题4：DOM元素获取时机错误 #

如果你的JavaScript代码写在<button>标签之前，页面还没渲染出myBtn按钮，document.getElementById("myBtn")会返回null，调用addEventListener会直接报错。应该把代码放在页面底部，或者用DOMContentLoaded事件包裹。

问题5：不必要的函数提前执行 #

console.log(funct())会在页面加载时直接执行funct函数，而不是等待按钮点击，而且函数没有返回值，所以会打印undefined。

修正后的代码 #

<button id="myBtn">Start</button>
<div id="output"></div> <!-- 用来展示结果的容器 -->

<script>
var products = [ 
  {name: 'Коля', age: 30, salary: 400}, 
  {name: 'Вася', age: 31, salary: 500}, 
  {name: 'Петя', age: 32, salary: 600}
];

// 等待DOM加载完成后再操作元素
document.addEventListener('DOMContentLoaded', function() {
  var btn = document.getElementById("myBtn");
  var output = document.getElementById("output");
  btn.addEventListener("click", funct);

  function funct(){
    // 清空之前的结果
    output.innerHTML = '';
    for( var i = 0; i < products.length; i++ ){
      // 访问对象具体属性，拼接成可读字符串
      var productInfo = `姓名：${products[i].name}，年龄：${products[i].age}，薪资：${products[i].salary}`;
      // 创建新元素添加到页面
      var p = document.createElement('p');
      p.textContent = productInfo;
      output.appendChild(p);
    }
  }
});
</script>

快速提取name、age、salary字段 #

如果只是需要把这些字段提取出来组成新数组，用map方法最方便：

const extractedData = products.map(item => ({
  name: item.name,
  age: item.age,
  salary: item.salary
}));
console.log(extractedData);
// 输出：[{name: 'Коля', age: 30, salary: 400}, ...]

内容的提问来源于stack exchange，提问作者Marie