字符串连接始终以undefined开头

Question

-每当我在数组中添加或删除元素时，都需要通过为每个项目放置一个元素来将数组中的元素转换为字符串。这是我的实现方式：

onSelect(event: MatOptionSelectionChange, service: string) {
    let serviceList: string;
    if(event.source.selected) {
      this.servicesToToggle.push(service);
    } else {
      this.servicesToToggle = this.servicesToToggle.filter(item => item !== service);
    }

    this.servicesToToggle.forEach(element => {
      if(element === undefined) {
        return;
      }
      serviceList += '-' + element;
    });
    console.log(serviceList);
  }

问题是在undefined每个字符串的开头都包含了gets。像这样：

undefined-Hardware Service 
undefined-Hardware Service-RFID Service
undefined-Hardware Service 
undefined-Hardware Service-RFID Service
undefined-Hardware Service-RFID Service-QR Service 
undefined-Hardware Service-RFID Service 
undefined-RFID Service undefined

你能帮我吗？

Answer 1

发生这种情况是因为您没有初始化serviceList变量。

已声明且未初始化的变量具有undefined值。

var x;

console.log(x); // undefined

如果+在undefined和字符串之间使用运算符，undefined则将强制为字符串"undefined"：

var x;

console.log(x + 'foo'); // undefinedfoo

要解决此问题，请初始化serviceList为空字符串：

let serviceList: string = '';

我也回答您评论的问题。

连接字符串列表的方法有很多，我最喜欢的是使用.join：

let serviceList: string = '';

在您的情况下，它将是：

serviceList = this.servicesToToggle.join('-');

如果您愿意的话，另一种解决方案可以是检查索引，- 如果满足index === 0以下条件，我们不放：

this.servicesToToggle
.filter(Boolean) // removes null, undefined and empty strings
.forEach((element, index) => {
  const separator = index === 0 ? '' : '-';
  serviceList += separator + element;
});