JS代码质量—健壮性 和 优雅写法

代码的健壮性：

参考：https://juejin.cn/post/7077486463155175437

代码的不健壮，大部分是因为  对变量属性/方法的操作时，变量的值可能是undefined。所以一般要给这种变量，设置默认值。

一、函数

1、函数默认参数妙用

function initConfig(config = []) { //  引用类型，我们一般会操作他的属性，如果不设置默认值，很容易出现 类型错误。"Cannot read properties of undefined"
    config.map((item) => {
        item.content = Number(item.content)
    })
}

总结：

这里我们可以默认设置其他的类型，如字符串、数字、对象等，提高代码的健壮性

二、解构赋值 

1、数组

function handleArr(arr) {
    let [a = 1, b = 2, c = 3] = [1, 2, 3]  // 解构时，给变量设置默认值
    return a + b + c
}

const arr = [1, 2]

handleArr(arr)    // 6

总结：

开发时常用到这种方法一次取出多个值，但是要考虑到解构的值不存在的情况，设置好默认值提高代码的健壮性

2、对象

function handleObj(obj) {
  const { name, list = [] } = obj
  if(name) {
    list.map((item) => {
      console.log(item)
    })
  }
}

const obj = {
  name: 'add1',
  list: [1, 2, 3]
}

总结：

对象解构的内容可能是字符串、数字、数组或是对象等，对于不同的变量类型，我们需要指定不同的默认值，确保代码的健壮性

三、接口请求

前面两点讨论的是不要轻易相信前端自己的数据，那么从后端接口传来的数据就更不要轻易相信。

1、后端响应的数据   【主要考虑，返回的数据不存在 或 类型不对】

     为了防止接口不反回 data 字段，我们可以给解构指定默认值

async function handleData() {
  const { code, msg, data = [] }  = await fetchList()
  data.map((item) => {
    console.log(item)
  })
}

    为了防止接口返回的是数组，我们可以对类型进行检查

async function handleData() {
  const { code, msg, data = [] }  = await fetchList()
  Array.isArray(data) && data.map((item) => {
    console.log(item)
  })
}

总结：

我们约定好的接口传过来的数据可能出现数据不存在，类型对不上等异常错误，在相应地方加上异常的处理提高代码的健壮性。

2、异常捕获 

 除了接口数据的处理，我们还要做好异常的处理，这里参考一篇博客：JavaScript 中的异常处理

 代码的优雅写法：

参考：https://juejin.cn/post/7079935342966472711 或 https://juejin.cn/post/6950153652627570702

1、如果有多个条件 我们可以在数组中存储多个值，并且可以使用数组 include 方法。

//Longhand
if (
  x === "abc" ||
  x === "def" ||
  x === "ghi" ||
  x === "jkl"
) {
  //logic
}
 
//Shorthand
if (["abc", "def", "ghi", "jkl"].includes(x)) {
  //logic
}

2、减少if...else if 面条代码

3、数组遍历，尽可能使用自带的遍历操作，而不是for循环实现。

• arr.forEach
• arr.map
• arr.find
• arr.includes
• arr.findIndex
• arr.filter
• arr.some
• arr.every
• arr.reduce