前端开发踩过的坑（一）

刚翻过了几座山，又擒住了几只妖，魑魅魍魉怎么他就那么多？

随手记一下踩过的坑。。。。如果想起来的话

有啥写啥吧，主要怕忘

反正就是各种坑 :）

1.HBBFXT项目iviewUI升级3.0以上的版本：

之前项目用的2.0，后来iview升级3.0，并且2.0版本不再维护，同时2.0不再满足项目部分功能，决定升级。

较多的问题是，升级后大量图标的名称更改，button的ghost类型被弃用，导致项目报错，图标消失，同时default样式发生了变化。

为了维护项目，我们只好把挨个页面中用到的地方进行修改。没什么难度，就是比较繁琐。

2.几乎必踩的坑——深拷贝：

出现过很多次的问题，提交时数据整理后出错、修改后原数据被改动等等。

没什么别的办法，写代码前需要多思考，试想一下是否想要改变原来的数据，如果不，深克隆深克隆深克隆。

3.TYZLPT项目（第一次遇到）中，机构管理树组件——递归：

最一开始的树组件没有用到插件，从接口拿到了children中套children的数据后，当时只有三层，所以没做多想，傻乎乎套了三个for循环（脑子坏掉了一样）。

问题来了：N久之后，测到一个bug，处于最里层再添加下层时，页面样式对不齐，机构的结构混乱。浪费了大把时间理清当时的N多循环，发现是因为循环只手写到第三层。

后来想了个办法——递归。然后50多行的代码缩成不到十行 :)

用例：


    //  将获取到的数据 处理成树形图需要的数据
    handleData(obj, val) {
      for (let i = 0, cLen = val.children.length; i < cLen; i++) {
        const ob = { label: val.children[i].name, children: [], id: val.children[i].id, parentid: val.children[i].parentId };
        obj.children.push(ob);
        this.handleData(ob, val.children[i]);
      }
    },

4.iview Table组件的表头数据放到函数中渲染：

这个坑发现于HBBFXT项目工单导入VPDN导入。他的文件导入后接口会返回读取到的数据，这些数据要列出三个表格，根据不同的权限列数不同，列名不同。

问题：最一开始由于iview的Table组件不支持，所以改了源码（没过多久iview就维护好了）但是这样太麻烦了，多人开发，甚至还有分公司的小伙伴想要用到这里，就必须要跟着改源码。

后来换了一种思路，把列设一个空数组，拿到数据后，在函数中判断权限，根据不同权限赋值，处理好再给组件。

用例：

    if (this.mainProvinceData.province === 'hubei') {
        this.tableTitle1 = [
          {
            title: '分公司',
            align: 'center',
            key: 'FD_BRANOFF',
            render: (h, params) => h('div', [
              h('div', {
                style: {
                  minHeight: '18px',
                  lineHeight: '14px',
                },
                on: {
                  mouseover: (style) => {
                    style.target.style.color = '#2d8cf0';
                    style.target.style.cursor = 'pointer';
                  },
                  click: () => {
                    this.clickFun(params, 'FD_BRANOFF');
                  },
                  mouseout: (style) => {
                    style.target.style.color = '';
                  },
                },
              }, params.row.FD_BRANOFF),
            ]),
          },
          {
            title: '客户服务号码',
            align: 'center',
            key: 'FD_SERVERNUM',
            render: (h, params) => h('div', [
              h('div', {
                style: {
                  minHeight: '18px',
                  lineHeight: '14px',
                },
                on: {
                  mouseover: (style) => {
                    style.target.style.color = '#2d8cf0';
                    style.target.style.cursor = 'pointer';
                  },
                  click: () => {
                    this.inputType = 'String';
                    this.clickFun(params, 'FD_SERVERNUM');
                  },
                  mouseout: (style) => {
                    style.target.style.color = '';
                  },
                },
              }, params.row.FD_SERVERNUM),
            ]),
          },
        ]
    }

5.数组map后parseInt()返回NaN

和同桌偶然发现的一个有意思的问题：

['1','7','11'].map(parseInt)返回[1,NaN,3]

['1','2','3'].map(parseInt)返回[1,NaN,NaN]

查了一下map文档，发现

var new_array = arr.map(function callback(currentValue[, index[, array]]) {
    // Return element for new_array
}[, thisArg])
callback:产生新数组元素的函数，带有三个参数：currentValue、index和array.
所以例子中的parseInt函数应该是:parseInt(“1”，0，arr)、parseInt(“2”，1，arr)、parseInt(“3”，2，arr)。

而parseInt文档

parseInt (string , radix) 中
string为要解析的字符串，radix表示要解析的数字的基数。
该值介于 2 ~ 36 之间。如果省略该参数或其值为 0，则数字将以 10 为基础来解析。如果它以 “0x” 或 “0X” 开头，将以 16 为基数。
如果该参数小于 2 或者大于 36，则 parseInt() 将返回 NaN

解决：

    ['1','2','3'].map(Number);//或
    ['1','2','3'].map((item) => {
      parseInt(item);
    });

百度了一下更详细的解答：

// https://www.cnblogs.com/cjvae/p/9782387.html