根据多个字段,动态拼接显示 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))
}
优化代码
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));
}
上述代码片段中,使用 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));
}
首先使用 map 方法将每个字符串的值提取到一个新数组中,然后使用 filter 方法过滤掉未定义的值,最后使用 join 方法将这些非空的值。这种方法避免 reduce 方法中显式初始值和 push 操作,使代码更简洁。