把数组里面的值为 null 的转换为字符串 - - ，你们的方法都是什么呢？

Question

 let myData = [
                    {id:1,name:"小明",age:10,Career:null},
                    {id:2,name:"小抢",age:10,Career:"码农"},
                    {id:3,name:"小网",age:10,Career:null},
                ];

要把Career为空的装换为字符串 - -
我的方式是

    Nullzhuan(data){
       if(data == null){
          return "- -";
        }else{
        return data;
        }
    }
   let _this = this;
   myData.map(item=>{
         item.name = _this.Nullzhuan(item.name);
         item.age= _this.Nullzhuan(item.age);
         item.Career = _this.Nullzhuan(item.Career);
      })

我感觉我这个太麻烦了，有什么什么更简单的方式呢？

Answer 1

• 版本1：

  myData.map(d=>{
      Object.keys(d).forEach((k)=>d[k]=d[k]||'- -')
      return d
  })

• 版本2（恶魔版本）：

  myData.map(d=>Object.keys(d).reduce((k1,k2)=>typeof k1=== 'string'?{[k1]:(d[k1]||'- -'),[k2]:(d[k2]||'- -')}:{...k1,[k2]:(d[k2]||'- -')})) 

• 版本3（版本2改良）：

  myData.map(d=>Object.keys(d).map(k=>({[k]:(d[k]||'- -')})).reduce((d1,d2)=>({...d1,...d2})))

• 效果：

  

• 涉及

  • map、Object.keys()、reduce、...展开、动态key、||门取值、箭头函数...

• 说明（基于版本3）：

  1. Object.keys可以获取一个对象的key:

     Object.keys({id:1,name:"小明",age:10,Career:null})
     // (4) ["id", "name", "age", "Career"]

  2. js中的||不是返回bool，而是返回一个值，0||12返回12，并且有短路性质，true||false返回true，关于js中的&&和||有很多文章，可以看其他文章，这里d[k1]||'- -'，就是在d[k1]为假的时候，使用- -做为值

     0||12 //12 
     true || false // false

  3. 动态key，对象的key可以使用变量代替

     let key='name'
     {[key]:'hello'}
     // {name: "hello"}

  4. ...展开符，可以将属性展开，并且用在对象中还会合并相同key的值，比如这里的age，放在后面的替代了前面的

     {...{name:'hello',age:'22'},age:44}
     {name: "hello", age: 44}

  5. reduce的用处也有非常多，这里用到的是上面的展开+合并对象

     [1,2,3,4,5].reduce((d1,d2)=>d1+d2) // 15 累加
     [{name:"1"},{age:2}].reduce((d1,d2)=>{...d1,...d2}) //{name: "1", age: 2}

  6. map映射

     [1,2,3].map(d=>({num:d})) // [{num: 1},{num: 2},{num: 3}]

  7. 先从一个数据开始

     let data={id:1,name:"小明",age:10,Career:null}
     Object.keys(data) 
     // ["id", "name", "age", "Career"]
     
     Object.keys(data).map(k=>({[k]:(data[k]||'- - ')})) 
     // [{"id":1},{"name":"小明"},{"age":10},{"Career":"- - "}]
     
     Object.keys(data).map(k=>({[k]:(data[k]||'- - ')})).reduce((d1,d2)=>({...d1,...d2})) 
     // {"id":1,"name":"小明","age":10,"Career":"- - "}        

  8. 然后改造成数组映射就好了

     myData.map(d=>Object.keys(d).map(k=>({[k]:(d[k]||'- -')})).reduce((d1,d2)=>({...d1,...d2})))

• 总结
  以上都是es6的基础，但是不推荐写这么复杂的代码，对维护不大友好，除非封装和文档都非常美丽。至于思想，就得用到数据流的思想了，一个数据就像一个水流一样，经过每一道工序，变成另一种形式的数据，一直到最后一道工序，变成你想要的数据，就叫做数据清洗吧！

Answer 2

可以这么写：

 myData.map(item=>{
         item.name = !item.name && '- -';
         item.age= !item.age && '- -';
         item.Career = !item.Career && '- -';
      })

Answer 3

最简单不应该是转为json，正则匹配换掉吗？

let s = JSON.stringify(myData);
JSON.parse(s.replace(/"Career":null/g, '"Career":"--"'))

Answer 4

你应该从数据库层面解决问题，将字段default null 改成 default empty string 。
希望采纳答案，我个人是全端开发，所以明白你做前端的痛楚。

Answer 5

其他回答都是啥呀... 而且楼主这个也有一个严重的问题，用map不return 不就全是undefined的了吗，贴一下我写的代码吧。仅供参考。

let myData = [
  {id:1,name:"小明",age:10,Career:null},
  {id:2,name:"小抢",age:10,Career:"码农"},
  {id:3,name:"小网",age:10,Career:null},
];

let filterData = myData.map(item=>{
  let obj = {};  // 用于切断引用关系
  for( const key in item ){
    obj[key] = item[key] || '- -'
  }
  return obj
})

console.log(filterData)

Answer 6

跟后台商量一下能不能把null返回成空字符串