526互联

自行回顾所用（如：setTimeout、nextTick、await等）

发布时间 2023-12-06 14:12:14作者: 朱呀朱~

自行回顾所用

setTimeout()

  • setTimeout() 是一个 JavaScript 函数，它用于在特定的时间后执行一段代码。这个函数需要两个参数：一个是要执行的函数，另一个是延迟的毫秒数
  • setTimeout(() => { ... }, delay) 中的 delay 是延迟的毫秒数，表示在多少毫秒后执行传入的函数。例如，如果你设置 delay 为 1000，那么在 1 秒后，会执行你传入的函数
  • 而你提到的 setTimeout(() => { ... })，这种形式没有设置延迟时间，意味着立即执行传入的函数。如果函数内有任何改变网页状态的操作（如改变DOM），那么这些操作将在调用 setTimeout() 后立即执行
  • 总的来说，主要的区别在于何时执行传入的函数：如果你希望在一段时间后执行，那么你需要设置一个延迟时间；如果你希望立即执行，那么你可以不设置延迟时间（那可能就会和不写没区别了）

nextTick()

  • nextTick() 是 Vue.js 中的一个函数，它用于将回调函数推迟到下一次事件循环迭代。这意味着你可以在下一轮事件循环开始时执行回调函数
    • 在 nextTick() 中，当你在事件处理函数或者生命周期钩子中执行异步操作（例如网络请求或者 setTimeout），并且你希望在 DOM 更新完成后再执行某些操作时就会派上用场
  • 当使用 nextTick() 时，你的回调函数会等待 DOM 更新完成后再执行。这可以确保你在 DOM 更新后访问到的数据是最新的
  • 如果不使用 nextTick()，你的回调函数可能会在你期望的 DOM 更新之前就执行，这样可能会获取到旧的、不准确的数据
  • 所以，nextTick() 可以确保你的代码在正确的时机执行，避免因为 DOM 还未更新完成而导致的错误

asyc + await

const saveGoods = async () => {
  const valid = await demoGoodsFormRef.value.validate();
  if (valid) {
    const data = {
      goodsName: addGoodsForm.goodsName,
      goodsBrand: addGoodsForm.goodsBrand,
      goodsStock: addGoodsForm.goodsStock,
      // ......
    }
    if (xxx) {
      // ......
    } else {
      demoXxxApi.updateXxx({
          goodsId: addGoodsForm.goodsId,
          ...data
      }, function (res) {
          ElMessage.success('保存成功');
          dialogFormVisible.value = false;
      });
    }
  }
};
  • 在这个函数中，await demoXxxFormRef.value.validate() 表示等待 demoXxxFormRef.value.validate() 这个异步操作完，而 demoXxxFormRef.value.validate() 是一个返回 Promise 的异步验证操作，用于验证表单的有效
  • 使用 await 的主要作用是等待异步操作的结果。如果表单验证通过（valid 为 true），则执行后续的逻辑，否则直接返回
  • 在这里，await 的作用是确保在获取到表单验证结果之后再执行后续的逻辑，而不会因为异步操作而导致逻辑的交叉执行或不确定性
  • 如果没有使用 async 和 await，而是直接调用 demoGoodsFormRef.value.validate()，那么验证操作可能会是异步的，此时就无法准确地得知验证的结果。因此，使用 async 和 await 可以更清晰地编写异步流程，并在异步操作完成后进行后续的处理

三个点 ...

  • 还是上述的代码，...data 是使用扩展操作符将 data 对象中的所有属性扩展到 demoXxxApi.updateXxx 的参数中，即将对象中的属性展开，以便将它们合并到新的对象中

    • 这样做的作用是可以将 data 对象中的所有属性传递给 updateGoods 函数，而无需手动指定每个属性

  • 与不使用扩展操作符相比，使用扩展操作符可以使代码更简洁，并避免遗漏或错误地传递某些参数。通过使用扩展操作符，您可以确保将所有相关的数据传递给 updateXxx 函数，以便正确地更新信息

两个感叹号

  • 代码：if (!!row) { ...... }
  • !!row 是一个将 row 进行双括号转换的表达式，它会把 row 转换为布尔值。
  • 具体来说，如果 row 为空（null、undefined、空字符串""、0、NaN），那么 !!row 的结果是 false ；如果 row 是非空（即任何非空值），那么 !!row 的结果是 true
  • 这个操作通常用于检查一个变量是否被定义或赋值，或者用于进行类型转换。在某些编程场景下，使用 !!row 可以确保 row 是非空对象或非空值
    • 这样的操作在代码中经常被用来确保变量有意义，而不是被赋予了一个假值

const

  • const {goodsCategory} = addGoodsForm
  • 它是 JavaScript 中的对象解构语法。在这个上下文中，它被用来从 addGoodsForm 对象中提取 goodsCategory 属性。这个语法是一个简写，将 goodsCategory 属性的值赋给同名变量
  • const { goodsCategory } = addGoodsForm; 这行代码等同于： const goodsCategory = addGoodsForm.goodsCategory;

findIndex(item => {})

  • 在 const index = categoryTreeList.value.findIndex(item => { return item.dictValue === goodsCategory }) 中：findIndex 方法是数组的一个方法，用于找到数组中第一个满足提供的测试函数条件的元素的索引
    • item：表示数组在迭代期间的每个元素
    • 上述代码的 findIndex 方法返回满足条件的第一个元素的索引，如果没有找到元素，则返回 -1

map((item) => {}）

  • 在 res.data.map((item) => { return { label: item.xxxName, value: item.xxxCode }; }) 中
  • map 方法也是 JavaScript 中数组的一个方法，用于通过将提供的函数应用于数组的每个元素来创建一个新数组，在这里，就是用来将 res.data 数组中的每个元素转换为一个具有 label 和 value 属性的新对象
    • 因为有的 element 标签是需要
  • map 方法返回的是包含转换后对象的新数组
  • 这里 item 加不加括号一样用，因为就这一个