javascript - ForEach 函数返回 undefined 以及预期的输出

Question

我正在做一个 javascript 练习，我们应该在其中使用 ES6 的元素，例如类、箭头函数等。此特定代码应该输出公园名称以及每个公园的树木密度数据。

我可以将每个对象单独硬编码到控制台中，但我想让我的解决方案尽可能可扩展并接近真实世界的应用程序。但是，我无法使 treeDensityReport 函数正常工作。

class Element {
  constructor(name, yearBuilt) {
    this.name = name;
    this.yearBuilt = yearBuilt;
  }
}

class Park extends Element {
  constructor(name, yearBuilt, trees, area) {
    super(name, yearBuilt);
    this.trees = trees;
    this.area = area;

    this.treeDensity = (() => this.trees / this.area)();

    this.parkAge = () => new Date().getFullYear() - this.yearBuilt;
  }
}

const parks = [];
let parkAges = [];

parks.push(park1 = new Park('Washington park', 1999, 1440, 300));
parks.push(park2 = new Park('Lincoln  park', 1984, 2550, 1000));
parks.push(park3 = new Park('Jefferson park', 2000, 2000, 455));

parkAges = parks.map(park => park.parkAge());

let averageParkAge = (parkAges.reduce((total, age) => total + age)) / parkAges.length;

function treeDensityReport(arr) {
  let string1;
  arr.forEach(function(element) {
    let string = `${element.name} has a tree density of ${element.treeDensity} \n`;
    string1 += string;
  });
  
  return string1;
}

console.log(`------PARKS REPORT------\n
Our ${parks.length} parks have an average age of ${averageParkAge} years.\n${treeDensityReport(parks)}
`)

我在控制台中看到了预期的名称和密度，但由于某种原因该函数也返回未定义。这是控制台输出:

undefinedWashington park has a tree density of 4.8

Lincoln park has a tree density of 2.55

Jefferson park has a tree density of 4.395604395604396

这个 undefined 是从哪里来的？我错过了什么？

Answer 1

let string1 将 string1 定义为未定义。 Javascript 在连接字符串时会做一些有趣的事情，并最终在字符串中添加字面上的“未定义”。

试试这个

让 string1 = ''