项目中普通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 = [];
       // 下面省略赋值过程
    }
}
  1. 修改数组里对象的值后,页面没有重新渲染
// 先把数组克隆一份
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在检查就有了
  • 最后重新部署上线发现问题好啦
  1. 合并多个commit流程
  • git rebase -i HEAD~2 合并commit个数
  • pick 保留 squash 合并
  • 出现下面信息
  • image.png
  • 修改保存就可以完成合并


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

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

 (this.$refs.calendar as any).selectShow = '';
  1. 关闭eslint 校验:
// eslint-disable-next-line

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

  1. 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 倒序

  1. 数字添加千位符


    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,');
},

你可能感兴趣的:(项目中普通js的FAQ)