如何遍历对象数组仅获取指定属性title1并避免undefined？

问题根源很明确：你的Articles数组里，第一个对象有title1属性，但第二个对象只有title2，没有title1，所以遍历到第二个对象时，访问不存在的属性自然会返回undefined。

给你三种可行的解决办法：

1. 遍历前先判断属性是否存在 #

遍历每个元素时，先检查该元素有没有title1属性，有再输出：

用map方法： #

function arc(){
  Articles.map((element) => {
    // 严谨判断属性是否存在
    if (element.hasOwnProperty('title1')) {
      console.log(element.title1);
    }
  })
}

用for循环： #

for(let i = 0; i < Articles.length; i++){
  // 简单判断属性值是否存在（如果title1可能为空字符串的话，用hasOwnProperty更稳妥）
  if (Articles[i].title1) {
    console.log(Articles[i].title1);
  }
}

2. 先过滤出含title1的元素再处理 #

直接筛选出有title1的元素，再提取对应值，这样得到的就是纯有效数据：

// 过滤并提取有效title1
const validTitles = Articles.filter(item => item.title1).map(item => item.title1);
console.log(validTitles); // 输出：["Trust"]

3. 重构数组结构（推荐） #

你的数组每个对象的属性名不统一（一会title1，一会title2），这本身就是不合理的设计。统一属性名后，遍历会更顺畅，也不会出现这类问题：

const Articles = [
    {
        id: 1,
        article: 1,
        title:'Trust',
        name:'Pericles',
        date:'Dec 2, 2022',
        text: 'Lorem ipsum dolor sit consectetur. minima in quae dolores quis fugit officia, quia at quam ipsum iste suscipit, eum, veniam eaque voluptas?',
    },
    {
        id: 2,
        article: 2,
        title:'Love',
        name:'Billey',
        date:'Dec 2, 2022',
        text: 'minima in quae dolores quis fugit officia, quia at quam ipsum iste suscipit, eum, veniam eaque voluptas?',
    }
]

之后不管用map还是for循环，直接访问element.title就能拿到所有标题，不会出现undefined。

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