JS 多字段拼接为字符串，并处理掉 null 的情况

根据多个字段，动态拼接显示 label 字符串，由于字段的值存在 null 的情况，我们又将如何将 null 从字符串中去除呢？

function getLabel(data) {
    const filed = ['taxCode', 'taxKindCode', 'itemName', 'itemSpec']
    function fn(item) {
        return filed.reduce((pre, cur, index) => {
            if (item[cur]) {
                return pre + ' - ' + item[cur]
            }
            return pre
        }, '')
    }
    return (data || []).map(item => fn(item))
}
1
2
3
4
5
6
7
8
9
10
11
12

优化代码

function getLabel(data) {
  const fields = ['taxCode', 'taxKindCode', 'itemName', 'itemSpec'];

  function formatField(item, field) {
    return item[field] ? ` - ${item[field]}` : '';
  }

  function combineFields(item) {
    return fields.map(field => formatField(item, field)).join('');
  }

  return (data || []).map(item => combineFields(item));
}
1
2
3
4
5
6
7
8
9
10
11
12
13

上述代码片段中，使用 formatField 用来格式化字段，combineFields 用来组合所有字段，且使用 map 和 join 方法更简洁地组合字段，减少了多次字符串拼接操作。

由于某些字段可能存在 null 的情况，拼接在字符串中显示不太好看，因此我们需要进一步数据，具体代码如下：

function getLabel(data) {
  const fields = ['taxCode', 'taxKindCode', 'itemName', 'itemSpec'];

  function combineFields(item) {
    return fields.map(field => item[field]).filter(value => value !== null && value !== '').join(' - ');
  }

  return (data || []).map(item => combineFields(item));
}
1
2
3
4
5
6
7
8
9

首先使用 map 方法将每个字符串的值提取到一个新数组中，然后使用 filter 方法过滤掉未定义的值，最后使用 join 方法将这些非空的值。这种方法避免 reduce 方法中显式初始值和 push 操作，使代码更简洁。