JS的数据优化处理

大家其实对es6语法，类似于let,cont肯定不陌生。所以就不介绍这些啦。
我列几个我个人觉得挺实用的几个对于数据处理的语法：
正文

---

前置：先给大家简单的说几句，对象和数组的区别（可以略过，知道的朋友）
数组：长这样[1,2,3,4 ] 。 有length/可以用forEach便利/没有key
对象：长这样{name:'mika',age:18}。没有length，便利需要用for...in.. /其中name，age就是key。

---

一个最基础的：请大家，简单语句，善用三元表达式！
条件表达式?表达式1:表达式2

      let isTrue = true
      let number
      //普通写法：多条if
      if (isTrue) {
        number = 333
      } else number = 222
      //  三元表达式：条件表达式?表达式1（为true）:表达式2(为false)
      number = isTrue ? 333 : 222

【...】 运算符
合并数组、对象

      let array = [1, 2, 3]
      let Num = [4, 5, 6]
      let newArray = [...array, ...Num]
      console.log(newArray)
      //输出：[1,2,3,4,5,6]
   （对象用法相同）

简单用法了解后，进阶一下，利用new set特性，进行数组去重

      let array = [1, 2, 3]
      let Num = [1, 2, 3, 4, 5, 6]
      // let newArray = [...array, ...Num]
      const setArray = [...new Set([...array, ...Num])]//[1,2,3,5,6]
      console.log(setArray)
      //输出：[1,2,3,4,5,6]

有了去重，肯定也要有求差集的方法。
filter
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
includes
用法：判断一个数组中是否包含某一个元素，并返回true 或者false。最基本的用法：
[1, 2, 3, 4, 5, 6].includes(2) //输出true

      let array = [1, 2, 3]
      let Num = [1, 2, 3, 4, 5, 6]
      const setArray = array.filter(x => Num.includes(x))
      console.log(setArray)
      //输出：[1,2,3]
      数组求差集

对比includes来说，是每个条件都会便利一遍，不管true或者false。可以用 &&运算符理解一下
如果说在一些判断语句中，想要一个为false就均为false，则推荐用find 。类似于 || 运算符
find()方法用于查找数组中符合条件的第一个元素

---

【{ } 】对象解构
很多场景是get到数据后，需要得到里面的值。

    let obj = { a: 1, b: 2, c: 3 }
      const a = obj.a
      const b = obj.b
      const c = obj.c
      //优化
      const {a,b,c}=obj
      如果，名字是较为复杂的，则可以这样
      let obj = { a1: 1, b2: 2, c: 3 }
      const { a1: a, b2: b, c } = obj
      console.log(a,b,c)
      //1,2,3
    ----
     对象解构
     // bad
    setForm (person) {
    this.name = person.name
    this.age = person.age    }

    // good
   setForm ({name, age}) {
    this.name = name
    this.age = age  }

---

【?. 】可选链运算符
渲染数据时有时候数据不稳定，会很担心数据是否存在的问题，所以渲染数据的时候会进行一些判断。比如tableData&&tableData.age 有时候就会觉得很麻烦，如果遇到单词长就更烦恼了。
使用?.运算符可以简化一成tableData?.age。意思是：tableData是否存在，如果存在则取tableData.age，如果不存在就返回undefined
拓展一下。?.可选链运算符可以和??空值运算符设置默认值

let customer = {
  name: "Carl",
  details: { age: 82 }
};
let customerCity = customer?.city ?? "暗之城";
console.log(customerCity); // “暗之城”

??空值运算符和|| 逻辑或运算符区别：、
?? ：返回值为null或者undefined时候 返回左侧操作数。
|| ：返回值不只是null、undefined的时候，任何假值（null、undefined、0、false、''、NaN）都会为左侧数。如果你设置默认值的时候，参数刚好是是以上的假值，则很容易出错！

---