JS如何从对象数组提取所有name属性值生成新数组，现有代码异常如何修复？

原代码存在的问题 #

• 循环边界错误：for循环判断条件写为i <= obj.length，数组索引从0开始，合法最大索引为obj.length - 1，超出后会读取到undefined元素，触发报错。
• 属性读取错误：循环内直接写obj.name，obj是整个对象数组，本身没有name属性，需要通过索引读取当前遍历的对象，即obj[i].name。
• 空数组判断逻辑完全错误：if (obj => obj.length = 0)存在三个问题：1. 箭头函数误用在这里不会返回预期的布尔值；2. 单等号=是赋值操作不是相等判断，应该用===；3. 空数组的边界判断不需要放在循环内部，放在循环前执行即可，避免不必要的重复判断。
• 全局作用域不能直接使用return：如果这段代码没有包裹在函数内，return语句会直接抛出语法错误。

修复方案 #

方案1：保留for循环写法 #

const obj = [
  { name: "Mitch", age: 27, language: "Javascript" },
  { name: "Ant", age: 28, language: "Java" },
  { name: "Natalia", age: 29, language: "C" },
  { name: "Foluso", age: 26, language: "Ruby" }
];

let newArray = [];
// 先处理空数组边界
if (obj.length !== 0) {
  for (let i = 0; i < obj.length; i++) {
    newArray.push(obj[i].name);
  }
}

// 非函数作用域下用console.log输出，包裹在函数内时可以直接return newArray
console.log(newArray);

方案2：更简洁的map方法实现 #

数组内置的map方法天然支持空数组场景（空数组调用map会直接返回空数组），不需要额外写边界判断，代码更精简：

const obj = [
  { name: "Mitch", age: 27, language: "Javascript" },
  { name: "Ant", age: 28, language: "Java" },
  { name: "Natalia", age: 29, language: "C" },
  { name: "Foluso", age: 26, language: "Ruby" }
];

const newArray = obj.map(item => item.name);
console.log(newArray);

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