前端常用的工具功能在持续更新中，数据列表中展示对应的字段，经常作为平台项目使用。很容易遇到这样的场景。页面增删改查，添加后，表格应该显示某个类型，但是接口返回的数据是类型ID。你可以通过这个方法来获取相应的字段来显示。使用示例：letlist=[{id:1,name:'深圳'},{id:2,name:'广州'}]getDataName({dataList:arr,value:'id',label:'name',data:1})//深圳getDataName({dataList:arr,value:'id',label:'name',data:2})//广州/***通过值在列表中找到对应的名字*@param{Object}obj*@paramobj.dataList数据列表*@paramobj.value'value'等数据的值对应的字段名*@paramobj.label数据描述对应的字段名比如'label'*@paramobj.data当前传入的数据值*@returnname返回数组中当前传入值对应的名称*/getDataName:(obj)=>{letname=obj.dataif(Array.isArray(obj.dataList)&&obj.dataList.length>0){for(leti=0;i{letstatusCode=(code+'').replace(/[^0-9]+/g,'')-0switch(statusCode){case400:return'BadRequest(错误请求)'case401:return'Unauthorized(requestrequiresauthentication)'case403:return'Forbidden(serverrejected)request)'case404:return'NOTFound(servercouldnotfindtherequestedresource)'case405:return'BadRequest(disablethemethodspecifiedintherequest)'case406:return'NotAcceptable(无法响应case407:return'ProxyAuthenticationRequired(requiresproxyauthorization)'case408:return'RequestTimed-Out(servertimeoutwhilewhilewaitingrequest)'case409:return'冲突（服务器在完成请求时发生冲突）。服务器必须在响应中包含有关冲突的信息）'case410:return'Gone(therequestedresourcehasbeenpermanentlydeleted)'case411:return'LengthRequired(serverdidnotacceptarequestwithoutaValidContent-Length)headerfield)'case412:return'PreconditionFailed（前置条件不满足）'case413:return'RequestEntityTooLarge（请求实体太大）'case414:return'Request,URITooLarge（请求的URI太大）URIistoolong)'case415:return'UnsupportedMediaType（不支持的媒体类型）'case429:return'您的操作过于频繁，请稍后再试'case500:return'InternalServerError（服务器内部错误）'case501:return'NotImplemented（尚未实现）'case502:return'BadGateway（错误的网关）'case503:return'ServerUnavailable（服务不可用）'case504:return'GatewayTimed-Out（网关超时-out)'case505:return'HTTPVersionnotsupported（不支持HTTP版本）'default:returnmessage}},3.传入时间戳并转换指定的时间格式这是我用的比较多的一个函数，还有我经常需要处理时间，你只需要在时间格式中传入一个时间戳或者一个字符串，然后指定要转换的时间格式即可。很方便。使用示例：switchTime(newDate())//传入当前时间，默认返回当前时间，格式为YYYY-MM-DDhh:mm:ssswitchTime('2018-11-10','YYYY.MM.DD')//2018.11.10/***输入时间戳（或时间格式的数据），转换指定的时间格式*@param{Number}val时间戳（或时间格式的数据）*@param{String}dateType要获取的时间格式，如YYYY-MM-DDhh:mm:ss*@returndataStr例如YYYY-MM-DDhh:mm:ss*/switchTime:(val=+newDate(),dateType='YYYY-MM-DDhh:mm:ss')=>{//将字符串转换为数字lettimeStamp,dateStr,strtimeStamp=+newDate(val)//如果转换为数字出错if(!timeStamp){returnval}//get时间字符串dateStr=newDate(timeStamp)str=dateType.replace('YYYY',dateStr.getFullYear())str=str.replace('MM',(dateStr.getMonth()+1<10?'0':'')+(dateStr.getMonth()+1))str=str.replace('DD',(dateStr.getDate()<10?'0':'')+dateStr.getDate())str=str.replace('hh',(dateStr.getHours()<10?'0':'')+dateStr.getHours())str=str.replace('mm',(dateStr.getMinutes()<10?'0':'')+dateStr.getMinutes())str=str.replace('ss',(dateStr.getSeconds()<10?'0':'')+dateStr.getSeconds())返回str}4.浏览器打开新窗口在平时开发中，肯定会有这样的需求。打开一个新窗口但是使用window.open方法经常会遇到被浏览器拦截的问题，所以可以使用a标签通过超链接打开一个新窗口。下载文件时经常使用这种方法。但是，下载文件有几种情况。一种是直接访问一个地址，浏览器会自动解析下载。另一种情况是后端返回一个文件。这时候需要先在response类型中加入blob处理。之后，处理它。这种情况下，访问解析地址往往是新开一个窗口访问，并不会自动下载。如果需要下载，需要在a标签中添加download属性。使用示例：openWindow('https://www.baidu.com')//默认打开方式为新窗口，id为open/***a模拟window.open，不会被浏览器拦截*@param{String}urla标签打开的地址*@param{String}ida标签的ID*@param{String}targetTypea标签被点击打开的方式（打开当前页面或一个新窗口)*/openWindow:(url,targetType='_blank',id='open')=>{//如果存在则移除if(document.getElementById(id)){document.body.removeChild(document.getElementById(id))}leta=document.createElement('a')a.setAttribute('href',url)a.setAttribute('download',url)a.setAttribute('target',targetType)a.setAttribute('id',id)document.body.appendChild(a)a.click()},5.将具有层次关系的列表转换为树状数据。不知道大家有没有遇到过树状结构，但是我在开发的时候，因为开发的平台类项目比较多，经常会遇到树状数据结构。以前都是调用后端直接返回树状数据，但是后端好像不太喜欢处理这样的数据，所以自己写了一个方法。传入具有层次关系的列表数据，然后根据定义的参数处理成树状数据结构。使用示例：letarr=[{id:1,pid:0,name:'Level1'},{id:2,pid:1,name:'Level2'}],arr1=getTreeArr({key:'id',pKey:'pid',rootPValue:0,data:arr})得到的数据为：arr1=[{id:1,pid:0,name:'Level1',children:[{id:2,pid:1,name:'secondary',children:[]}]}]/***将一级数据结构处理成树状数据结构*@param{Object}obj{key,pKey,data}*@paramobj.key字段名如id*@paramobj.pKey父字段名如pid*@paramobj.rootPValue根节点的父字段值*@paramobj.data待处理的数据*@return{Array}arr*/getTreeArr:(obj)=>{if(!Array.isArray(obj.data)){console.log('getTreeArr=>请传入数组')return[]}letarr=obj.data,arr1=[]//将数据处理成类数结构arr.forEach(item=>{letindex=0item.children=[]arr.forEach(item1=>{//获取树结构关系if(item[obj.key]===item1[obj.pKey]){item.children.push(item1)}//确定根节点if(item1.id!==item.pid){index++}//传入根节点，根据传入的根节点形成树结构if(rootPValueinobj&&item[obj.pKey]===obj.rootPValue){arr1.push(item)}})//不传入根节点，根据当前数据结构获取根节点if(!(rootPValueinobj)&&index===arr.length){arr1.push(item)}})返回arr1}6.占位符展示在写Vue组件的时候，我总是习惯使用对象作为参数，因为我觉得以对象的形式来维护参数会很方便。每次添加参数，只需要给对象添加属性，在接受的地方处理属性即可但是对于Vue组件，Object是不能设置默认值的。如果没有默认值，读取对象的属性是错误的语法，所以我写了一个占位符显示方法，如用法示例：showData(obj,'name','name')//display'name'whenobj不传入，传入后显示为obj.name/***用于判断对象是否不存在，显示的字段data*@param{Object}objobject*@param{String}key要显示的属性*@param{String}staticName当属性不存在时要显示的属性值*/showData(obj,key,staticName){if(!obj){obj={}}if(obj&&obj[key]){returnobj[key]}else{returnstaticName}}7.Array(对象数组去重)用法及参数说明用法示例：handleRepeatArr({data:[1,1,1]})//[1]handleRepeatArr({data:[{name:1},{name:1}],key:'name'})//[{name:1}]/**-数组去重-@param{Array}data去重数组-@param{String}key作为要去重的字段（处理对象数组时需要传入）-@returnarr返回处理后的数据*/1。递归去重(数据不能保持之前的顺序)handleRepeatArr({data,key}){if(!Array.isArray(data)){console.log('请传入数组')return}//排序数据优先data=data.sort((item,item1)=>{if(key){returnitem[key]-item1[key]}returnitem-item1})//递归去重函数getData(index){if(index>=1){//判断当前数据和下一个数据是否相等letresult=key?data[index][key]===data[index-1][key]:data[index]===data[index-1]if(result){data.splice(index,1)}getData(index-1)}}getData(data.length-1)返回数据}2.根据对象的不同属性去重（推荐）handleRepeatArr({data,key}){if(!Array.isArray(data)){console.log('请传入数组')return}letarr=[],obj={}data.forEach((item,index)=>{letattr=key?item[key]:itemif(!obj[attr]){obj[attr]=index+1arr.push(item)}})返回}3。使用indexOf和forEach（适合处理数组，不适合处理对象数组）handleRepeatArr({data,key}){if(!Array.isArray(data)){console.log('请传入数组')return}letarr=[]data.forEach((item,index)=>{//如果当前元素之前没有出现过（后面出现的数据会保留）//letresult=data.indexOf(item,index+1)//如果当前元素之前没有出现过（会保留之前的数据）letresult=index===0?-1:data.lastIndexOf(item,index-1)if(result===-1){arr.push(item)}})returnarr}4.双层循环去重（内存占用高）handleRepeatArr({data,key}){if(!Array.isArray(data)){console.log('请传入数组')return}for(leti=0,len=data.length;i
