JavaScript 开发秘籍：日常总结与实战技巧-3

动态列表闪烁问题

在写动态列表时，需要给动态列表上添加 :row-key='xxx' ，否则列表会因为数据修改而重复渲染，导致列表闪烁，即使修改的值与列表的data无关，有时候也会出现未知的闪烁。

<el-table :data="dataList">
  <el-table-column label="物业分类" :row-key="Math.random()"></el-table-column>
  // .......
</el-table>

多条件判断

// bad
a && b || a && c

// good
a && (b || c)

map返回值

map可以不影响原数组，并且返回一个新数组，也就是说我们想要更改数组中的值并且在不影响原数组的情况下拿到一个新数组，我们可以这么做：

let arr = [1,2,3,4]
let newArr = arr.map(el => el * 2);
// newArr = [2,4,6,8]  &&  arr = [1,2,3,4]

我们在做一些删除、编辑的时候通常会传一个id数组，我们通过map可以直接提取id

let obj = [{id:1,name:'手机'},{id:2,name:'单车'},{id:3,name:'水杯'}];
let idList = obj.map(el => el.id)
// idList = [1,2,3]

需要注意：map会返回数组的所有项，如果某项没有return，则会默认返回undefined

let obj = [{id:1,name:'手机'},{id:2,name:'单车'},{id:3,name:'水杯'}];
let idList = obj.map(el => {
    if(el.id == 2){  return el.id }
})
// idList = [undefined, 2, undefined]

运行的顺序

在js逻辑执行时，总是会碰到异步执行问题，由于事件循环机制，同步比异步的执行速度快，所以我们需要通过async-await来让逻辑顺序执行，例如：

// 利用async-await让进程变成同步执行
async getSelectPull(key) {
      await this.getAreaAll(); // 这里不加用async-await，那么下面的setData会先执行
      this.setData({columns: this.data.provinces})
  },

  // 获取省市区
  async getAreaAll() {
    let { fvEstateType } = this.data.dataForm;
    let { provinces, city } = await getAreaInfo(fvEstateType);
    this.setData({
      provinces, city
    })
  },

终止循环

序号	方法	break	return	continue
1	for	终止循环	不合法	终止本次循环
2	for...in	终止循环	不合法	终止本次循环
3	for...of	终止循环	不合法	终止本次循环
4	Array.forEach()	不合法	终止本次循环	不合法
5	Array.map()	不合法	终止本次循环	不合法
6	Array.filter()	不合法	终止本次循环	不合法
7	Array.find()	不合法	终止本次循环	不合法
8	Array.findIndex()	不合法	终止本次循环	不合法
9	Array.some()	不合法	终止本次循环	不合法
10	Array.every()	不合法	终止本次循环	不合法

多个异步同时请求：async-await

举个例子：你要循环获取下面三张图片的图片信息，获取方法是异步的，你要基于图片信息做后续操作。
必须将图片信息获取完，才能进行下一步。
先用map将请求集成一个数组，然后等待Promise.all()全部请求完成

let file = [
    {    name: '图片一', tempFilePath: 'httpxxxxxx'},
    {    name: '图片二', tempFilePath: 'httpxxxxxx'},
    {    name: '图片三', tempFilePath: 'httpxxxxxx'},
]
let requestList = file.map(async (el) => await getImgInfo(el.tempFilePath))
let imgList = await Promise.all(requestList)
// 其它异步操作...
// let fileList = await setImg(imgList);

时间大小比对

js可以直接比对时间大小

let start = '2023-09-01 20:00:00'
let end = '2023-10-01 20:00:00'

console.log(start < end) // true

但是需要注意，比对的时间格式必须完全一致，如果2023-03与2023-9比对，两边格式不一致会导致结果错误。
最好的办法是将两个值转换成时间戳，通过时间戳比对。

后台、web端、小程序逻辑一致

如果后台管理、web端、小程序的相同模块都是你负责，尽量保证逻辑、数据结构一致，例如小程序提交的表单和后台管理提交的表单，数据结构尽量保持一致

// 小程序
let a = [
    { name: '罗门', info: "{age: 100, addredd: '古荡'}" },
]

// 后台管理
let a = [
    { name: '罗门', info: "[{age: 100, addredd: '古荡'}]" },
]

虽然可以加一些逻辑使最终的结果相同，但尽量不要这样做，否则时间久了，由于不同逻辑的兼容会发生不可预期的错误。