前端开发频率较高功能点

一.控制台输出方法console

参考地址：http://127.0.0.1:5500/test.html

1.console.count统计代码被执行的次数

2.console.dir直接将该DOM结点以DOM树的结构进行输出，可以详细查对象的方法。但是只能打印一个参数

3.console.time和console.timeEnd 计时结束

4.console.table 打印出表格形式

5.console.clear方法用于清除当前控制台的所有输出，将光标回置到第一行

二、const>let>var 使用优先级

在新的语法大环境下，大家尽可能使用let 去定义变量，在这基础上，如果是不需要改变的变量，可以使用const去定义，一方面可以避免别人修改，一方面也可以提升编译器效率。

3、数组拷贝

blog.csdn.net/weixin_4607…

浅拷贝

1. 扩展运算符(...)
2. Object.assign()
3. concat()
4. slice()

深拷贝

1. 利用lodash的深拷贝函数
2. 递归
3. JSON.parse(JSON.stringify(arr))(有缺陷)

4、lodash中一些比较常用的方法

juejin.cn/post/695162…

、数据交互容错处理

单一数据交互

  const res = {
    code: 0,
    data: {
      list: [1, 2, 3],
      total: 20
    },
    // data: null,
    msg: 'success'
  }

  // data直接是个数组,一步到位
  // this.userList = res.data || []

  // 空数组是true，空字符串是false , 只用一次数据传给变量, data为null，list为undefined或者null都不会赋值

  // if (res.data && res.data.list) {

  // if (res?.data?.list) {
  //   this.userList = res.data.list
  // }

  // list后面有用到多次可用这个,推荐使用

  const { list } = res.data || {} //当res.data为null时直接报错，所以要做容错处理
  // this.userList = list || [] //后面不使用list变量
  this.userList = list = list || [] //后面频繁使用list变量
  // list.map(x => x)
  // list.filter(x => x)
  console.log(this.userList)

多个参数交互

  // 一次性赋值
  // this.companyInfo = res.data && res.data.companyList || []
  // this.userInfo = res.data?.userInfo || {}

  // 中间变量赋值
  let { companyList, userInfo } = res.data || {}
  this.list = companyList = companyList || []
  this.info = userInfo = userInfo || {}

  console.log(companyList)
  console.log(userInfo)
  // console.log(baseList)

、控制台输出方法

、控制台输出方法

、控制台输出方法

、控制台输出方法

、控制台输出方法