你可能还不知道的js使用小技巧

前言

源于懒人之手，只为了写更少的代码~~~
下面有些js用法有些是需要项目的webpack配置支持的喔~
如果用vite或者是新版vue-cli搭建的项目，那一般都会支持的啦，不用担心~

之前记录的js使用小技巧回顾：?? 和 ?.和 ??= 和 ||=

1、使用Array.prototype.at()简化arr.length

const arr = [1, 2, 3, 4, 55]
// 以前获取最后一位
console.log(arr[arr.length - 1]) // 55
// 简化后
console.log(arr.at(-1)) // 55

2、异步迭代器(for-await-of)

循环等待每个Promise对象变为resolved状态才进入下一步。

const timeOutPromise = (time) => {
  return new Promise(function (resolve, reject) {
    setTimeout(() => {
      resolve(time)
    }, time)
  })
}

const forFn = async () => {
  const arr = [timeOutPromise(2000), timeOutPromise(1000), timeOutPromise(3000)]
  for (let item of arr) {
    console.log('forFn定时器时间：', item.then(console.log))
  }
}
forFn()
/**
 * forFn - for...of 是同步运行，输出：
 * forFn定时器时间： Promise{<pending>}
 * forFn定时器时间： Promise{<pending>}
 * forFn定时器时间： Promise{<pending>}
 * 1000
 * 2000
 * 3000
 */

const forAwaitFn = async () => {
  const arr = [timeOutPromise(2000), timeOutPromise(1000), timeOutPromise(3000)]
  for await (let item of arr) {
    console.log('forAwaitFn定时器时间：', item)
  }
}
forAwaitFn()
/**
 * forAwaitFn - for await of 环等待每个Promise对象变为resolved状态才进入下一步，输出：
 * forAwaitFn定时器时间： 2000
 * forAwaitFn定时器时间： 1000
 * forAwaitFn定时器时间： 3000
 */

3、String 扩展【标签模板】

如果对下面语法感到陌生，请参考 标签模板

const foo = (stringArr, val1, val2, val3) => {
  console.log(stringArr) // ['这是', ',她的年龄是', '岁', raw: ['这是', ',她的年龄是', '岁']]
  console.log(val1) // winne
  console.log(val2) // 99
  console.log(val3) // undefined
}
const name = 'winne'
const age = 99
foo`这是${name},她的年龄是${age}岁`

4、url的search参数获取

// const url = "https://www.baidu.com?name=winne&age=99&height=1.2#hash"
// queryString 为 window.location.search
console.log(window.location.search)
const queryString = '?name=winne&age=99&height=1.2'
const queryParams = new URLSearchParams(queryString)
const paramObj = Object.fromEntries(queryParams)
console.log(paramObj) // {name: 'winne', age: '99', height: '1.2'}

5、Promise.allSettled()

我们知道 Promise.all() 具有并发执行异步任务的能力。但它的最大问题就是如果其中某个任务出现异常(reject)，所有任务都会挂掉，Promise直接进入reject 状态。

有这样的场景：现在页面上有三个请求，分别请求不同的数据，如果一个接口服务异常，整个都是失败的，都无法渲染出数据
我们需要一种机制，如果并发任务中，无论一个任务正常或者异常，都会返回对应的的状态，这就是Promise.allSettled的作用。

const promise1 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('promise1')
    }, 3000)
  })
}
const promise2 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('promise2')
    }, 1000)
  })
}
const promise3 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject('error promise3 ')
    }, 2000)
  })
}

//  Promise.all 会走到catch里面
Promise.all([promise1(), promise2(), promise3()])
  .then((res) => {
    console.log(res)
  })
  .catch((error) => {
    console.log('error: ', error) // error: error promise3
  })

// Promise.allSettled 不管有没有错误，三个的状态都会返回
Promise.allSettled([promise1(), promise2(), promise3()])
  .then((res) => {
    console.log(res)
    // 打印结果
    // [
    //    {status: 'fulfilled', value: 'promise1'},
    //    {status: 'fulfilled',value: 'promise2'},
    //    {status: 'rejected', reason: 'error promise3 '}
    // ]
  })
  .catch((error) => {
    console.log('error', error)
  })

6、String.prototype.replaceAll()

replaceAll() 方法返回一个新字符串，新字符串中所有满足 pattern 的部分都会被replacement 替换。pattern可以是一个字符串或一个RegExp，replacement可以是一个字符串或一个在每次匹配被调用的函数。

const str = 'aabbcc'
const newStr = str.replace('b', '8') // 'aa8bcc'        // 以前的replace只能替换匹配的第一个
const newStr2 = str.replaceAll('b', '8') // 'aa88cc'    // replaceAll所有匹配的都会被替换

const newStr3 = str.replace(/b/, '8') // aa8bcc         // replace非全局
const newStr4 = str.replace(/b/g, '8') // aa88cc        // replace全局
const newStr5 = str.replaceAll(/b/g, '8') // aa88cc     // replaceAll使用正则表达式匹配替换值时，它必须是全局！不然会报错

摘取文章：
https://juejin.cn/post/7046217976176967711#heading-27