实际开发中遇到的问题整理（持续更新）

在实际开发过程中，遇到许多有意思的技术点，此次当作记录，并会持续更新，便于日后回顾~

forEach在使用时，会遍历所有元素，并无法在遍历结束前中止，因为forEach中的回调函数，会为每个元素执行，除了抛出异常外，无法终止或者跳出循环

如果需要对每个元素都进行操作，可以使用forEach，除此之外，建议使用Array.prototype.filter、for...of、for...in、while代替

如果需要在调试时，看到数据的结构，并且定位到目标数据，在谷歌浏览器中，F12打开控制台，选择network下的preview，右击返回体，点击store as global variable,然后在console面板执行copy(temp1)命令，粘贴至本地即可。

在vue2中可以使用filter注册或者获取全局过滤器，在回调函数中处理数据的回显，在双括号内可以使用|的方式显示回显结果， 当数据来源于后端返回的数据并且数据结构不符合前端所需要回显的格式，可以写一个dictFormat方法进行处理：

/**
 * 字典项处理
 * @param target
 * @returns {*}
 */
export const dictFormat = (target) => {
  if (Array.isArray(target) && target.length > 0) {
    return target.map((item) => {
      return {
        label: item.name,
        value: item.id,
      };
    });
  }
};

在html中就可以进行Obj[value]的方式获取对应的label值； 在vue3中移除了filter选项，因此建议使用上述方法的方式进行处理。

项目对接口的请求，使用了axios的方式，其提供了两个api对文件传输进行处理 ①onUploadProgress--允许为上传处理进度事件
②onDownloadProgress--允许为下载处理进度事件

async..await是Promise异步操作的语法糖，使异步操作看起来像同步代码，但是单一的使用async..await，如果不对错误进行处理的话，会阻塞后面代码的执行，因此可以与try...catch一起使用，捕获错误，对错误进行处理。
以下贴上MDN上的示例代码：

async function myFetch() {
  try {
    let response = await fetch('coffee.jpg');
    let myBlob = await response.blob();

    let objectURL = URL.createObjectURL(myBlob);
    let image = document.createElement('img');
    image.src = objectURL;
    document.body.appendChild(image);
  } catch(e) {
    console.log(e);
  }
}

myFetch();

截断语：欢迎在实际项目中遇到困难的同学或者已经解决的问题都可以在底下留言，大家一起探讨，碰撞出最优的解决方案哈