携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第26天，点击查看活动详情
在实际开发中或公司项目里碰到的一些实际小优化，记录下来，会持续更新，在方便自己的同时，也希望能辅助读者的一些成长，这也是我写文的初衷。
解构请求数据和提前结束判断条件
之前是用对象接收，什么都要 Obj. 点出来，且没做请求失败后，后台没给失败的错误信息处理
//之前写法，获取数据后根据code响应不同信息
//let result = request await GetFormData(xxx);
//result.code === 0 ? success : error
//不使用三元，一般情况会写if else判断
//但其实可以少些个else(除去这种可能，剩下的一定是那种，所以可以少写层判断)
let { code, message, data } = request await GetFormData(xxx);
if( code !== 0 ){
error("message") ?? "请求失败";
return false;
}
A = data.A;
这个相信大家都用到了，即使没用到，看组员写法或review的时候，导师也给提了。
还有个小技巧，也是在根据请求结果对需要响应的Flag进行布尔类型赋值。
isShowFlag.value = code === 0;
之前写法： code === 0 ? isShowFlag.value = true : isShowFlag.value = false
嵌套解构
只是在原先基础上，做了下懒得点出来的优化，虽然看起来还是传统的更舒服，但知道多一种方式也不是啥坏事。
//传统写法：console.log(obj.study.js)
const obj = {
study: {
js: 'promise',
Vue: 'vite'
}
}
//可以参考的另一种写法
const obj = {
study: {
js:2,
Vue:{
vite:{
node:111
}
}
}
};
const { study: {Vue: { vite } } } = obj ;
console.log(vite ) // node:111
这种一般用于父组件传递接口的response数据，子组件那边解构data对象里的msg，code值，等等，还是比较常用的。
条件多的时候合理使用map对象或includes
假如有这么一个情景，头部的Tip文案样式会根据提交结果响应不同样式，如：success，warning，error，info等样式 ，可以用map优化
//冗余写法
const getResult = (data) => {
if(data === "0"){
return "success"
}else if(data === "-1"){
return "error"
}else if(data === "-2"){
return "fail"
}
}
console.log(getResult("-2"));
//改良
const map = {
'0': 'success',
'-1': 'error',
'-2': 'fail',
// ...
}
console.log(map["0"]);
像这样条件比较多，存在一对一的关系，列举太多if else很不雅，可以用 map 来进行映射，像这种变量和状态存在一一对应的关系在工作中还是比较常用的，所以也较为重要。
如果需要从众多条件中寻求是否符合的变量，可能第一想法会是for遍历，if条件判断在返回有无这个结果，那就忽略了 includes 这重要的API了。
let isTrueFlag = false;
const arr = ["red","white","yellow","black","blue"];
for(let a=0; a < arr.length; a++){
if(arr[a] === "pink" ){
isTrueFlag = true;
}
}
//改良
trueFlag = arr.includes("pink")
有些还得动态监听，可以在前 includes 前加 computed 存储下来在选择。
用ES6的解构进行浅拷贝
之前都是用 Object.assign(target, ...sources)， Array.concat() , 来浅拷贝，现在有了ES6的解构来{ ...obj } 来进行浅拷贝，简直不要太方便
//浅拷贝传统写法
const copy1 = [];
Object.assign(copy,obj);//或者 var copy = Object.assign({},obj);
let copy2 = [].concat(obj);
//ES6写法，大家应该都知道了
let copy3 = {...obj};
输入项的非空判断
这算比较常用的了，在回显或传参的时候，经常会考虑空的情况。目前总结了几种判断方法，
//非空判断原始写法
if(typeof value !== null && typeof value !== undefined && value !== ''){}
//优化后：
//至于为什么不写(!value),是因为能通过undefined，null和 “ ”。
if((value ?? '') !== ''){}
console.log([null,undefined,'',0].includes(0)); //true
//!null 相当于Boolean(!null)，这种写法不能对
console.log(!null&&!undefined&&!''); //true
个人比较常用 !null 写法。
在Vue2一些死数据不需要放在return 返回，做响应式
之前放在data里返回，浪费性能，完全不需要，直接返回空就好
data() {
this.selects = [
{label: '选项一', value: 1},
{label: '选项二', value: 2},
{label: '选项三', value: 3}
]
return { };
}
可选属性和必有属性
在Typescript里差不多，？可选，! 必有此属性，这个想必大家都知道了，那 ?? 呢，这个其实就和 || 差不多，有值就取当前值，没有就去兜底的。
但不同的是，？？只能判断 null,undefined 这些假值， ||则可以判断 null, undefined, 0, '' 这些更多的假值。
//之前写法
const name = data && data.name;
const name = data?.name;
const name = data!.name;
console.log(null ?? 1); //1
console.log(null || 1); //1
class属性绑定
这也算是比较常用小技巧吧，同一组件在不同情况下渲染不同样式，一般是根据响应式或函数式进行渲染，Vue的写法如下
<div class="a b" :class{c:true , d:refFlag}> </div>
<div class="a b" :class=“changeClass()”> </div>
数组扁平化
有时候后台会返回这么一个对象数组，你恰好有需要将他属性值统一取出，之前我是这么写
const resultData= {
'a':[1],
'b':[1,2],
'c':[3]
}
let newArray= [];
for (let item in resultData){
const value = resultData[item];
if(Array.isArray(value)){
member = [...newArray, ...value]
}
}
newArray= [...new Set(newArray)]
这情形， for in 完全可以用 Object.values 代替，后面扁平化 直接 flat (默认递归深度为1层，使用 Infinity，可展开任意深度的嵌套数组) 一气呵成：
let newArray= Object.values(resultData).flat(Infinity);
善用filter，map，find/findIndex
假如有这么个对象数组，你要寻找其中特定id的所有名字对象。
虽然for if是最容易想到也是最常用的方法，但看起来不够精简和优雅。
const map = [{name: "笔记本",id: 1},{name: "电子书",id: 2},{name: "手机",id: 1},{name: "鼠标",id: 0}];
let data = [];
for(let a=0; a < map.length; a++){
if(map[a].id === 1){
data1.push(map[a].name)
}
}
console.log(data);
如果使用filte过滤一遍在map遍历，是不是更直观，更优雅一点呢
const data2 = map
.filter(i => i.id === 1)
.map(i => i.name)
可能怎么写直观的看不出太大的变化，觉得这优化可有可无
那我们换个需求，就找特定id的子项
这时你最先想到的是不是用find，而不是 for if 判断来找
const data = () => {
for(let a=0; a < map.length; a++){
if(map[a].name === "手机" && map[a].id === 1){
return map[a]
}
}
}
const data = map.find(i => i.name === "手机" && i.id === 1)
找到对应子项下标同理，我们都会第一时间想到findIndex而不是for if 判断
所以，这也算是良好的编码习惯，再有现成API的情况，少用 for if 。
持续更新中...
