该文章中我吧自己在做项目中的问题、如何解决方式以及一些经验分享给大家。

问题一：没有随手写上注释的习惯

一个项目中的代码是非常之多的，当你需要找到某些代码的时候没有注释的帮助会很麻烦，从而会影响心情导致思路不流畅。所以给自己的每一段代码写上注释就会显得很方便，

问题二：没有边写边看的习惯。

前端工程师比较忌讳先写完整体html代码再写CSS及JS，因为那样会导致你在编程的时候CSS会与HTML造成混乱，对个人来说会比较麻烦。

问题三：书写不够格式化
    .link_warpper a {
        display: inline-block;
        font-size: 16px;
        color: #fff;
        padding-right: 50px;
        padding-left: 30px;
        float: left;
    }





开始没有看懂这个提示是什么意思，后来经过自己查阅后发现由于浮动而忽略 inline-block。如果 float的值不是none ，则该框是浮动的，而“display被视为block由于浮动后会变成块盒，自己在浮动前加上了变成行块盒，导致出现这个提示错误。

问题四：margin-top和margin-bottom不能正常显示

父盒子中的子盒子使用margin-top不管用，需要在子盒子上加
{
height:0;
overflow:hidden
} 

问题五：类名定义问题

类名不能以数字开头或者以纯数字开头定义类名; 不推荐(不允许)使用汉字定义类名；

不能以特殊符号或者以特殊符号开头定义类名(_除外)； 不要使用标签名定义类名 。

问题六：修改select默认的样式
select{
	background:none;
	width:400px;
	border:1pxsolid #d8d8d8;
}
option{
	vertical-align: middle;
}

还有一些其他的小问题，比如标签的合理使用、一些样式书写规则混淆等等就不一一列举了。挑了几个个人常犯的（狗头保命）分享给大家，祝大家的代码一帆风顺，BUG为0！！！！

个人网站 https://iiter.cn 程序员导航站 开业啦，欢迎各位观众姥爷赏脸参观，如有意见或建议希望能够不吝赐教！


写一些最近工作中Vue项目中遇到的问题。

巴啦啦小魔仙，污卡拉，全身变，小本本，出来吧！

会不定期更新，所以建议收藏。

1.获取一个对象的键（key）


在某种特定需求下(未知的Object类型数据)，我们想拿到这个未知对象中第一个元素的键(也就是newData)。代码如下


var obj = {
        newData: {
            name: "二狗",
            value: 250
        }
    }


Object.keys()方法，接受一个object类型的参数，返回的是一个数组，数组内容是当前对象所有的键（key）


因此这个时候我们使用Object.keys(obj)[0]即可获取到上面代码中未知对象中的第一个元素的键(也就是newData)，我们console打印一下，安排！

打印结果：



2.判断一个元素是否属于当前对象（是否在此对象中）


我们曾接触过如何判断一个元素是否属于当前数组，其中for循环、forEach、some、map等各种优秀的数组的方法都可轻松解决我们的需求。可当目标换成对象之后，我们该怎么判断这个元素是否属于当前对象呢？依旧用之前的代码，如下


这个时候，我们想判断已知newData是否属于obj

/*后台接收到的值   假装看不见*/
var obj = {
  newData: {
    name: "二狗",
    value: 250
  }
};
/*后台接收到的值   假装看不见*/



/*已知的元素*/
var newData = {
  name: "二狗",
  value: 250
};



key in Object用来判断一个元素是否属于当前对象。key为键值对的键，字符串类型，Object为对象类型。返回一个布尔值。例如"newData" in obj，返回true。


 打印结果：



3.对一个数组对象中的某个属性进行排序，返回一个新的数组对象

如下图，我们想对当前obj数组对象中的age属性进行从小到大的排序，返回一个新的数组对象。

var obj = [
  {
    name: "四狗",
    age: 10
  },
  {
    name: "大狗",
    age: 30
  },
  {
    name: "三狗",
    age: 15
  },
  {
    name: "二狗",
    age: 18
  }
];



 sort() 方法用于对数组的元素进行排序。


我们都知道，利用sort方法可以用来对数组中的元素进行排序，引用的是当前数组，返回的是一个新数组。在这里，我们就可以使用一个sort排序函数来实现我们想要的功能。代码如下：

obj.sort(function(a,b){
  return a.age - b.age
})

打印结果：

 

扩展：数据如下，提出这样一个需求，obj数组对象按height属性从小到大排序，如果height相同，则按age从小到大排序。

var obj = [{
      name: "四狗",
      age: 10,
      height: 80
    },
    {
      name: "大狗",
      age: 30,
      height: 160
    },
    {
      name: "三狗",
      age: 15,
      height: 80
    },
    {
      name: "二狗",
      age: 18,
      height: 100
    }
  ]

依旧使用我们的sort函数扩展 ，代码如下：

obj.sort(function (a, b) {
    if (a.height !== b.height) {
      return a.height - b.height;
    } else {
      return a.age - b.age;
    }
  })

打印结果：



4.深拷贝和浅拷贝


浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。

深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。


 浅拷贝：代码如下，我们定义了一个obj对象，和一个newObj对象，并让newObj的person等于指向obj对象(实则是将newObj的person属性指向obj对象的指针)，所以改变newObj.person.name的值，实则是改变obj.name的值。

var obj = {      
    id: 123,
    name: "二狗",
    address: "china"   
  }   
  var newObj = {}   
  newObj.person = obj;   //浅拷贝
  newObj.person.name = "三狗"   
  console.log(obj.name);  //打印三狗

深拷贝 ：代码如下，定义obj对象和newObj对象，在给newObje对象的person属性赋值的时候，我们用JSON.parse(JSON.stringify(obj))方法将obj深拷贝了一份，也就是说重新申请了一个空间，与原对象不共享内存，属于完全独立的存在，所以在改变newObj.person.name属性之后，obj.name是不会跟着发生改变的。

var obj = {
        id:123,
        name:"二狗",
        address:"china"
    }
    var newObj = {}
    newObj.person = JSON.parse(JSON.stringify(obj));  //深拷贝 
    newObj.person.name="三狗"
    console.log(obj.name);// 打印二狗

 具体在业务中使用哪个，还得根据自己的业务需求。当然，深拷贝的方法也有很多个，这里只列出常用的一种方法，JSON.parse(JSON.stringify())


推荐一首不久前在网易云音乐里Get√的一首纯音乐《寂静之声》，超赞，很适合撸代码的时候静静地听。

人要是不给自己一点目标，真的是会越来越懒的啊。今天就这么多，下次再更吧23333。08.23


这里有324.57GB的修仙资料。嘿嘿嘿你懂得。/手动狗头


那么问题来了，如果你也想入坑前端或者学习更多技术，广交天下朋友(基友)，认识更多有趣的灵魂的话，欢迎加入前端交流群鸭~

扫二维码加为好友就完事了！安排~

问题一.使用ra的field，一列只能展示一个字段，那如果在一列展示后端传来的两个字段呢？
解决：使用单独的组件，在该组件中通过antd的<col>来解决
<Col>
           <p></p>
          <Button></Button>
</Col>

问题二：后端传来的字段是1，转化成对应的汉字
const Choice = {
    0: '作业',
    1: '完成' ,
    2: '未完成'
}

// 取值  value = 1  就是对象取值的问题。。。。。
<p>>Choice[value]</p>

问题三：点击一个按钮去调接口访问，使用ant design的抽屉，显示列表，怎么做到 1 2 3 都在表里，如果结果只有3，只显示3，其他为空。然后实现，有记录为编辑，没记录是保存。编辑表使用antd的编辑行的实现。
解决：

1.建立一个空数组res=[],先遍历[top1,top2,top3],

2.如果reslut的length为0，那就创建一个对象，把它push进去res。

3.如果result的length不为0，建立一个空对象item，遍历result，item=reslut[i], 将有的记录保存起来。

3.1.如果item=null，那就push进去剩下的没有的

3.2.否则push进去现有的。

4.返回该数组，将table中的dataresource替换掉
      const tableData = (result) => {
            let resultData = [];
            let markName = ['1', '2', '3'];
            for ( let i = 0; i < markName.length; i++ ) {
               let name = markName[i];
               if (result.length === 0) {
                    resultData.push({
                        'age': undefined
                        'name': [name],
                        'id': undefined,
                    });
                } else {
                    let item = null;
                    for( let j = 0; j < result.length; j++ ) {
                        if (name === result[j].name) {
                            item = result[j];
                            break;
                        }
                    } 
                    if (item === null) {
                        resultData.push({
                         'age': undefined
                        'name': [name],
                        'id': undefined,
                            
                        });
                    } else {
                        resultData.push(item);
                        item = null;
                    }
                }   
            }           
            return resultData;         
        }

问题四：怎么实现没有记录的时候点击保存调新增接口，有的时候点击保存调编辑接口
    const save = ( record ) => {
            // 无id表示为保存
            if ( record.id === undefined ) {
                 add(record);  //新增
            } else {
                // 调编辑接口
            }
        };

问题五：table的编辑行，没有+折叠input框的demo，那么怎么结合折叠的状态发生变化，点编辑出现input，取消出现文本的形式？
解决：设置一个可编辑的状态，（编辑行demo中有），setEditing，判断editable是不是true，为true就是可编辑的，否则不可编辑。
 const [editingKey, setEditingKey] = useState('');
          // 判断是否编辑状态
         const isEditing = record => {
             return record.name === editingKey;
        };
        // 点击编辑时
         const edit = record => {
             setEditingKey(record.name);   // record.name === editingKey（setEditing设置的） 为true
         };
        // 展开事件
          const expand = ( record ) => {
            const editable = isEditing(record);
           return  editable ? (
            <Input/>
            )
            : <p></p>
        }


问题六 select的onchange事件既传id又传value（后端需要的字段）的情况，id怎么一层一层的传，在select1中点了某个option，结果要在select2中渲染。
//select 第二级  dataid先在reducer中存一一下，每次通过onchange传最新的reducer
//finderrorbyid 传来的id为第一层中level1的 item.id
  const findErrorById = ( id ) => {
            let res = [];
            for(let i = 0; i< data.level2.length; i++) {
                if ( data.level2[i].id === id ) {
                    res = data.level2[i].values;
                } 
            }
            return res;   // 第二层中要显示的数据
        }

// select第二层 对finderrorbyid的结果进行展示
   <Select    
   value={error_types.name}
   onChange={e => onChange("name")(e)}
   >
    {mapDataToOptions(findErrorById(Number(dataId)).map(item => (
      { value: item.value, text: item.name, id: item.id }
      ))       
    )}
  </Select> 

// 展示方法
function mapDataToOptions(data) {
    return data.map(item => (
      <Select.Option title={item.text} value={item.value+'?'+Number(item.id)}> 
        {item.text}
      </Select.Option>
    ));
  };
// onchange怎么传id和value   id进行保存 value对应传给key所对应的字段

```javascript
//e = id?value
 const onChange = (key) => e => {   // onchange(key)(e)
            let value = e.split('?')[0];
            let id = e.split('?')[1];
            dispatch({
                type: SAVE_ID,
                payload: id,
            })
            dispatch({
              type: CHANGE_LIST,
              payload: [key]: value, // "name":value
            }); 
        };
     //但是这样有问题，传过去的字段可能是英文，但是你要展示中文，其中的原因就是<select value={error_types.name}> 中传的字段和select  option中value字段不一致导致的，即使你传了[name]='zhangsan',也显示不了张三。
     // 解决，value传item.text+id， 传text中文给后端
     // 其他：未想到

问题七：table的分页
简单思路：在useeffect中发送dispatch调用getlist的接口，传需要的参数例如：id和num 每页的数量，和page当前页。

之后在table中的pagination中的onchange事件中也调用getlist接口传num、page、id等。
问题八：
checkbox可选，每次选时调接口，然后如果选了就展示出来，问题是，可以根据后端传的0/1进行展示，但是此时的checkbox选不了。页面刷新后，显示已选。

解决：
// 1.首先用创建一个state 其中table中的datasource指的就是datasource
 const [dataSource, setDataSource] = useState([]);  // 建一个初始值
    useEffect(() => { 
        setDataSource(list);   // 设为后端传来的data并监听它的变化
    }, [list]);
//2.点击checkbox时  checked是否选中后根据后端传来的is_check来判断
 <Checkbox checked={record.is_check} onChange={e => handleChange(e)(record, index)}/>
 
 //3.change事件
 const handleChange = (e) => (record, changeIndex) => {
       const tmpList = dataSource.map(({ is_check, ...item }, index) => { //遍历后端给的list
        return {
                check_flag: changeIndex === index ? e.target.checked : is_check, //如果点击的index不等于list的index，就是没点击的其他行，让其他行按照传来的is_check进行展示，其他的变成e.target.checked 可以为true，也可以为false
                ...item
            }
        });
        setDataSource(tmpList);  //变成修改后的datasource
        // 接口
        checkApi({
            id: record.id,
            is_check: e.target.checked === true ? 1 : 0  //给后端传0或者1
        }).then(()=>{})
     }


问题九(x)
： 点击一个一个button 弹出一个框，如果点了OK，实现页面跳转，自己是使用一个状态设为false，如果点了ok就让它变为true，如果取消就是false，不让它调，但是我会根据true和false来对a标签的href设置，如果为false，那就是空，如果为true就是url，这样的问题是你还得重新再点一下a标签。

解决：
// 路由携带参数
history.push({
              pathname: '/cs/transfer/evaluating',
              query: {
                       'id': 1,
                        'name': 2
                   }
                });

问题十
：后端给了一个导出xsl的接口，前端调了之后，需要做什么特殊的操作吗，还是只是调接口？

解决
//问题1:导出不调接口：解决：因为一直从缓存中获取了。传参时加个时间戳
//问题2: 导出的字节流，如果能转换成json对象，那么它里面会包含msg或者status一些错误信息的提示
  //                  如果不能转换成json对象，那就是可以成功的转化成文件的形式
  // 解决：
  if (status === 200) {
                // 导出 
                let blob = new Blob([response.data], {type: "application/vnd.ms-excel"});        
                //做一个副本
                let blob1 = new Blob([response.data], {type: "application/vnd.ms-excel"});
                //转成text
                var reader = new FileReader();
                reader.readAsText(blob, 'utf-8');
                reader.onload = function (e) {
                    try {
                        const data = JSON.parse(reader.result);  // try捕获一下是否能转换成json对象，如果可以取出msg，弹出信息。
                        message.error(data.msg); 
                    } catch (e) {
                    // 如果不可以，说明可以转换成文件直接导出文件就行
                        let objectUrl = URL.createObjectURL(blob1); 
                        // 文件名字
                        let fileName = response.headers['content-disposition'].split(';')[1].split('=')[1];
                        // 文件地址
                        const link = document.createElement('a');
                        link.download = fileName;
                        link.href = objectUrl;
                        link.click()
                        message.success('导出成功');
                    } 
                } 
            }else {
                message.error('导出失败');
            }




// 导出
exportExcel() {
    return axios({
        method: method,
        url: url,
        data: data,
        responseType: 'blob'
    }).then(response => {
            const { status, msg } = response;
            if (status === 200) {
               
                // 导出 
                let blob = new Blob([response.data], {type: "application/vnd.ms-excel"}); 
                let objectUrl = URL.createObjectURL(blob); 
                // 有名字的导出
                //let fileName = response.headers['content-disposition'].split(';')[1].split('=')[1];
                let fileName = "测试.xls"
                // 文件地址
                const link = document.createElement('a')
                link.download = fileName
                link.href = objectUrl
                link.click()
                message.success('导出成功');
            } else {
                message.error('导出失败');
            }
        });.catch(data => {
        console.log('导出失败');
    })
}

问题十一： antd的日期传值的问题，moment
// 在submit传参数时
 // 参数：
    start_date: start_date.format("YYYY-MM-DD"),
  start_time:sampleParams.start_time.format("HH:mm:ss"),
//给默认值 在reducer中通过 moment('00:00:00', 'HH:mm:ss')


问题十二：axios的get的params和post的data的区别

知识点：

produce
axios
moment
treeselect
cors

收获：

尽量不要用href，用路由跳转或者link
提交git时的规范： update：modify   信息 in  文件
编辑回填，点编辑把现在的record中的该字段通过，draft[字段]=record.字段 传过去，保存起来

1. 当小程序（天翼云盘>家庭健康小程序）资源打包之后操过了2M怎么办？
首先小程序总的资源包大小是不可以超过8M的，这就要求单个打包资源不得太大，所以小的包要求不可以超过2M,可以采用webpack打包，图片压缩，分包处理，删除不必要的代码等等；但是当这些方法都用了之后，发现打包后还是超过了2M，最后是跟后端配合，把图片静态资源放到服务器，前端只要用url或者src来访问http地址，中间遇到的require的问题，他被用来动态访问图片资源，可以全局配置require.config()，但是还是有点麻烦，只改了除了require的图片地址，之后本地图片资源不用删除，webpack打包直接把有线上资源的图片忽略掉了，包缩小到1.6m，解决
2. ios端手机和蓝牙手表因为距离过远自动断开连接，接近后没有重新连接
其实不用太麻烦绕一大圈，ios有一个api：setautoConnectLpwDevice（），直接执行这个函数就行了
3. 小程序端的token传递问题
请求到token之后：
if (!window.ok) localStorage.setItem('accessToken', this.accessToken);
//window.ok代表小程序端

这样子就存进localstorage里面了，然后再该用的地方调用就行了：
const accessToken = localStorage.getItem("accessToken")

成功调用