工作总结：对数据的一些处理和判断

一、对数据的一些处理

在工作中，后台返回的数据不会是前端所期待的那么符合需求，有一些对数据小的修改会使我们的操作和数据的回显更加方便。

1.树的每一层增加一个字段

给树进行操作的思路优先会想到递归，递归就要考虑结束递归的终止条件

let index = 0;
const mapTree = (org) => {
  const haveChildren = Array.isArray(org.children) && org.children.length > 0;
  index++;
  return {
    ...org,
    //disabled 是给每一层新添加的数据
    disabled: org.type !== '0',
    children: haveChildren ? org.children.map(child => mapTree(child)) : null,
  };
};
//data为源数据
//menuList为新数据
let menuList = data.map(org => mapTree(org))

2.删除树中特定条件的数据

let deleteMenu = (data) =>{
   //过滤每一层type不为0的数据
   // 这里可以增加删除的逻辑
  var newData = data.filter(x => x.type != 0)
  newData.forEach(x => x.children && (x.children = deleteMenu(x.children)))
  return newData
}
let menuList =  deleteMenu(children_menu)

  持续更新中

二、数据判断

1.使用Array.includes来判断数组中是否包含某个值

const names = ['apple','huawei','xiaomi']
console.log(names.includes('sanxing'))  //false

2.使用Array.every 和 Array.some 来处理全部和部分满足条件

const ageScores = [{
  name:"张三",
  age:18
},{
  name:"李四",
  age:21
},{
  name:"王五",
  age:17
}]
console.log(ageScores.every(item => item.age > 18))
//false
console.log(ageScores.some(item => item.age > 18))
//true

3.处理数据非空

空值合并运算符??,当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。

let foo = data ?? {}

与||的区别是，||无法过滤''和0

let bar = 0 || 2             // 2
let baz = 0 ?? 2             // 0

判断一个数据是否为空，可以这样写

if((value ?? '') !== ''){
  ///
}
等同于
if(value !== null && value !== undefined && value !== ''){
  ///
}

4.处理对象的数据

//当业务开发，从接口拿到数据进行绑定时
  let name = obj.name
  let sex = obj.sex
// 使用解构赋值
 let {name，sex} =  obj
 //如果想要创建的变量名和对象的属性名不一致
  let { name:newname , sex:mysex} = obj
  //如果返回的数据为 null 或者 undefined
  let { name:newname , sex:mysex} = obj ?? {}

如果使用array，获取其length，但如果data为null或者undefined的时候，直接取length属性会报错。
用obj模拟接口返回的JSON结构，list是我们需要的数组数据。

//这是正常的结构
let obj = {
  list:[]
}
console.log(obj.list.length)
// 0
//但是后台的逻辑总是不会按照你想要的返回。
//==================================================================================
1.由于list没有值，整个obj都返回为null
console.log(obj.list.length)
报错： TypeError: Cannot read property 'list' of null
=> 使用可选链式运算符
console.log(obj?.list.length)
返回 undefined
//==================================================================================
2.obj中的结构还在，但是list返回 null
let obj = {
  list:null
}
console.log(obj.list.length)
报错 TypeError: Cannot read property 'length' of null
=>
console.log(obj.list?.length)
返回 undefined
//=================================================================================

5.扁平化处理数组

Array.flat()
将多维数组转化为一维,业务中涉及到这种数据处理，常常存在于多个类型的枚举值放在一个对象内返回，且不能重复。

let data = {
  bar : [0,1,2,3,4,5],
  baz : [3,4,5,6,7],
  foo : [0,1,7,8,9]
}
console.log([...new Set(Object.values(data).flat(Infinity))])
结果 [
  0, 1, 2, 3, 4,
  5, 6, 7, 8, 9
]

当然有些枚举数据不会使用数组返回，而是"",那就属于一维数组数据类型转化的问题了，可以先转化为数组扁平，也可以拼成全部字符串一次性转化

let data = {
  bar : "0,1,2,3,4,5",
  baz : "3,4,5,6,7",
  foo : "0,1,7,8,9"
}

console.log([...new Set(Object.values(data).reduce((c,l) =>  `${c},${l}` ).split(',').map(i => parseInt(i)))])
结果 [
  0, 1, 2, 3, 4,
  5, 6, 7, 8, 9
]
console.log([... new Set(Object.values(data).map(d => d.split(',').map(s => parseInt(s))).flat(Infinity))])
结果 [
  0, 1, 2, 3, 4,
  5, 6, 7, 8, 9
]