项目中普通js的FAQ

1.通过对象数组中的某一个唯一值找到该元素所在数组的下标

let index = (listData || []).findIndex((item) => item.key === key);

2.select下拉选框多选的时候点击太快，数据请求太频繁导致想要生成的数组在没有清空的情况下就push进去了新的数据而导致数据重复的问题参考文章

// 接口请求的js文件
import cancelAxios from 'axios';
const CancelToken = cancelAxios.CancelToken;
let cancelGetStatusData;

export function getScrapeGroupbyServerProduct(filter, cancelRequest) {
    if (cancelGetStatusData) {
        cancelGetStatusData();
    }
    return service.get(API_CMDB_SCRAPE_GROUPBY_SERVER_PRODUCT, {params: {"filter": JSON.stringify(filter)}},{
        cancelToken: new CancelToken(c => {
            cancelGetStatusData = c;
        })}).then(response=>{
            return response
        });
}
// 页面接口调用
async handleServerProductChartDataBar(filters) {
    let response = await getScrapeGroupbyServerProduct(filters)
    if(response.data.code===200){
        // 情况要赋值的数组
       this.serverProductDataAllBar.axisData = [];
       // 下面省略赋值过程
    }
}

3. 修改数组里对象的值后，页面没有重新渲染

// 先把数组克隆一份
const yearList = cloneDeep(this.yearList)
// 然后给对象添加新的属性
yearList.map(item=>{
  item.isShowAddCard = false
})
// 在修改，页面就会改变
this.yearList[0].isShowAddCard = true

4.线上环境组件出现问题，测试和本地环境都是好的
当前问题是如图：线上下拉框无法正确点击，并报错

问题.png

• 第一步先看一下本地和测试环境组件的版本是否是一致的，通过排查发现线上版本比较低，这时我进行了版本的升级，但是部署到线上之后还是显示为低版本；
• 第二步寻找为啥线上无法显示最新版本，查看package.json,显示是最新版本，但是当前显示的位置为：devDependencies对象下，在dependencies却没有，通过资料查询及询问后端之前有没有这种情况，后端说需要在dependencies有这个包，于是就npm install 包名称 --save 发现还是没发加在dependencies里，去看了package-lock.json这个文件下对应的包，里面有一个dev:true,把这行删除，然后重新运行npm install 包名称 --save在检查就有了
• 最后重新部署上线发现问题好啦

5. 合并多个commit流程

• git rebase -i HEAD~2 合并commit个数
• pick 保留 squash 合并
• 出现下面信息
• image.png

• 修改保存就可以完成合并

  
  
  image.png

6. 多个小数相加，发现准确度不对
   可以在两个数相加后加一下精度，(num1+num2).tofixed(2)
7. 当点击一个按钮，显示一个下拉列表，想要点击页面空白的地方使下拉框隐藏，首先在该页面最外层添加点击事件，来隐藏该元素，但是这样会导致显示该下拉列表的按钮也失效，所以，需要给点击显示下拉列表显示的按钮加一个stop,防止点击事件冒泡

@click.stop="handleShowSelectFunc"

8.ts 语法中E-slint中使用$refs的写法

 (this.$refs.calendar as any).selectShow = '';

9. 关闭eslint 校验：

// eslint-disable-next-line

10.深拷贝
npm i --save lodash
//全局引入
import { cloneDeep } from 'lodash'; //使用引入

11. form表单中有上传组件，如何更好去做校验，可参考以下方法

    
    
    image.png
    
    

    12.相应式数组的方法
    1、push() 可以push多个元素 push('aaa','bbb','ccc')
    2、pop() 删除数组中的最后一个元素
    3、shift() 删除数组中的第一个元素
    4、unshift() 在数组最前面添加元素
    5、splice() 删除元素/插入元素/替换元素

删除元素：第二个元素传入你要删除几个元素（不传删除后面所有的元素）
替换元素：第二个参数 表示我们要替换几个元素 .splice(1,3,'m','n','l','x')
插入元素：第二个参数传0 并且后面跟上要插入的元素 .splice(1,0,'m','n','l','x')

6、sort 排序
7、reverse 倒序

13. 数字添加千位符

    
    
    image.png

thousands(num) {
  const str = num.toString();
  const reg = str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
    return str.replace(reg, '$1,');
},