TypeScript中把List转Map的方法选择、选错了的后果以及注意事项

 假定deptList的值:

deptList:[
    {deptName: 'aaa', releaseType: '1'},
    {deptName: 'bbb', releaseType: '2'},
    {deptName: 'ccc', releaseType: '3'},
]

 1. 以下可以把deptList的值转换成map 

this.deptMap = deptList.map(item => ({ label: item.deptName, value: item.releaseType }));

2.  遍历deptList中的实体属性releaseType包含 '1'的添加到map中,并赋值给deptMap 


this.deptMap = deptList.map(dept => { 
    let  aa = 1;
    let includeOne = dept.releaseType.includes(aa.toString());   
    if (includeOne) {   
        return { label: dept.deptName, value: dept.deptId };  
    } 
});

重点: 有个问题很严重,当includeOne=false时会返回一个undefined给map中,就会造成你引用deptMap的地方一旦取值就会抛异常,页面无法正常显示,debugger能看到除了满足releaseType包含 '1'的map外,还包含有不满足的undefined ,因此一定要慎重选择

3. 使用filter过滤元素,匹配才返回给map ,这样就不会出现不符合时返回undefined的情况

this.deptMap = deptList.filter(dept => {  
     return dept.releaseType.includes(this.form.releaseType.toString());  
}).map(dept => {  
     return { label: dept.deptName, value: dept.deptId };  
});

总结: 如果需要直接把List转map那就使用 第一种方法,如果需要筛选再转map那就使用第3种filter过滤后再返回 ,第2种只是举例进行区分选择不对的严重性

你可能感兴趣的:(vue,javascript,ecmascript,typescript)