前端日常总结与实战技巧-5

多个条件的连续判断

我们需要建立在第一个条件符合的情况下执行第二个条件

let a = true
function b () {
     console.log(222)
    return false
}
function c () {
    console.log(333)
}
// a 符合 -> 执行 b ->  b 不符合 -> 终止
a && b() && c()  // 222

所以你经常会看到这种写法，dom存在则执行dom初始化

dom && dom.init();

这种写法可以多层链式调用

a && b() && c() && d()

另外，该可以基于此写法，做更保险的操作

// a 符合调用 b() , 如果 a 不符合则调用 c()
a && b() || c()

这种写法有返回值

let a = true
let b = false
let c = "c"

let data = a && b || c
console.log(data); // "c"

es6有个一链判断运算符，与这种概念类似，不过链判断运算符是基于Object类型的链式判断

let obj = {
  a: {
    b: {
      c: {
        name: "兔子先森"
      }
    }
  }
}

let data = obj?.a?.b?.c?.name || "数据不存在"

链判断运算符有隐式转换，若判断的值为数字类型 0 也会返回false

链判断也可以用来判断函数是否存在，例如：

let a = {
  list: null // 有时候是list: []空数组
}
if(a?.list?.length > 0){
  console.log('数组有值')
} else {
  console.log('不存在')
}

根据url打开新窗口

// 在新窗口打开链接
window.open("目标url", "_blank");

// 或者在当前窗口打开链接
// window.location.href = "目标url";

解决element固定列导致的表格错位

原因：
因为element的表格对齐实现是以普通和普通对齐，固定与固定对齐而来
所以，当某一个固定列设置了最小宽度限制就会导致表格错位，把固定列宽高限制成固定值即可

 <el-table-column
    label="操作"
    align="center"
    width="250"
    height="100"
    fixed="right"
  >

快速对判断是否有默认值并赋值

利用 || 判断符，如果左侧为真，则直接返回左侧，左侧为假则返回右侧。
注意：||判断符会进行隐式转换
0、""、null、NaN、undefined为false

let s = true; 
let b = 5;  
let c = s || b; 
console.log(c); // true

返回右侧的情况

返回左侧的情况

作用：
如果一个字段本来是一个数组，但是该数组为空值时，后端返回了null，此时就可以该方法兜底以避免在null上调用数组方法报错

let typeList = res.data.typeList || [];

数组弹出-递归调用

我们通常会对数组指定值进行删除操作，部分函数实际上会返回被删除的值，这种概念可以称作为 “弹出”。

let arr = [4, 5, 6, 7];
let curr = arr.shift();
console.log(curr,arr); 

你可以利用 "弹出" 的概念递归调用
例如：有一个接口，每次只能根据一个id查询，然后返回该id的详情，我们以商品列表举例，现在有5个商品，每次只能查一个，上一个接口查完了后才能查下一个，最后5个商品要拼接成一个商品详情列表。

// 使用示例
let idList = [4, 5, 6, 7, 8];

// 递归调用
const onCycle = async (list) => {
    if (list.length == 0) return; // 空数组，终止
    let currId = list.shift(); // 弹出第一个id
    let status = await getDetail(currId);
    // 判断详情是否查询完毕
    if (status) {
        // 尾递归，节省性能
        return onCycle(list); // 传入剩余id，递归调用
    }
}
onCycle(idList)

const goodsList = []; // 商品列表
// 根据id查详情
const async getDetail(id) => {
    try {
        let res = await detailAPI(id);
        goodsList.push(res);
        return true
    } catch (err) {
        console.log(err)
        return false
    }
}

setInterval定时器清除

定时器虽然使用clearInterval清除了，但是保存的值还存在，在某些情况下，需要对定时器本身是否启用做判断，在清除定时器后必须手动置空，否则判断会失效。

let t = null

let n = 3
t = setInterval(() => {
    if (n != 0) {
        n--;
    } else {
        console.log('倒计时', n)
        clearInterval(t);
        console.log('清除后', t)
        t = null;
        console.log('清除且置空后', t)
    }
}, 1000)

修改v-html渲染的图片大小和点击预览

$event可以获取到当前点击的元素信息
通过嵌套来指向某一区域的元素，通过deep修改图片大小，另外你也可以拿到src后做图片预览

<div class="img_box">
     <p v-html="activity.trendsContent"  @click="showImg($event)"/>
</div>

 showImg(e) {
    if (e.target.tagName == "IMG") {
        this.imgPreview.img = e.target.src;
        this.imgPreview.show = true;
      }
},

.img_box {
  ::v-deep img {
    width: 100px;
    height: 100px;
  }
}

---

阅读其它：
前端日常总结与实战技巧-4
前端日常总结与实战技巧-3
前端日常总结与实战技巧-2
前端日常总结与实战技巧-1