JavaScript学习笔记(贰拾捌)

79 阅读2分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第20天点击查看活动详情

Promise.allSettled()

Promise.allSettled() 方法返回一个在所有给定的promise都已经fulfilledrejected后的promise,并带有一个对象数组,每个对象表示对应的promise结果。

// 声明两个 Promise 对象
const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('商品数据 - 1')
  }, 1000);
})

const p2 = new Promise((reslove, reject) => {
  setTimeout(() => {
    // reslove('商品数据 - 2')
    reject('失败了')
  }, 1000);
})

// 调用 allsettle 方法
const reseult = Promise.allSettled([p1, p2])

console.log(reseult)

适用于多个彼此不依赖的异步任务成功完成时,获取每个 promise 的结果

Promise.race

返回一个Promise,它与第一个完成的Promise的结果状态相同,如果传的迭代是空的,则返回的promise将永远等待。看传递的promise数组中哪个结果获得的快,就返回哪个结果。

const promise1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 500, 'one');
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'two');
});

Promise.race([promise1, promise2]).then((value) => {
  console.log(value);
  // Both resolve, but promise2 is faster
});
// expected output: "two"

可选链操作符

可选链操作符( ?. )允许读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效。

在引用为空 (NULL 或者 UNDIFINED) 的情况下不会引起错误,该表达式短路返回值是 undefined。与函数调用一起使用时,如果给定的函数不存在,则返回 undefined

  // ?.
  function main(config) {
    // const dbHost = config && config.db && config.db.host;
    const dbHost = config?.db?.host;

    console.log(dbHost);
  }

  main({
    db: {
      host: '127.0.0.1',
      username: 'root'
    },
    cache: {
      host: '127.0.0.1:8080',
      username: 'admin'
    }
  })

可选链 操作可以使用方括号 [] + 属性名的形式 访问属性,也可以访问数组元素。不能用于赋值

动态 import

在需要的时候加载模块 (懒加载)

// import * as m1 from './hello'        // 直接引入模块
// // 获取元素

// const btn = document.getElementById('btn');
// btn.addEventListener('click', () => {
//     m1.hello()
// })

const btn = document.getElementById('btn');
btn.addEventListener('click', () => {
    import('./hello.js').then(module => {        
        module.hello()        // 动态引入模块
    })
})

BigInt

新的数据类型 BigInt 提供了一种方法来表示大于 2^53 - 1 的整数。这原本是 Javascript中可以用 Number表示的最大数字。。使用 typeof 测试时, BigInt 对象返回 "bigint" BigInt 可以表示任意大的整数。

可以用在一个整数字面量后面加 n 的方式定义一个 BigInt

// 大整形
  let n = 4321n;  //4321n 'bigint'
  console.log(n, typeof (n)); //4321n 'bigint'

  // 
  let n1 = 123;
  console.log(BigInt(n1));
  // console.log(BigInt(1.34));  //The number 1.34 cannot be converted to a BigInt because it is not an integer

  // 主要用于大数值运算、
  let max = Number.MAX_SAFE_INTEGER;  // JS 中的最大安全整数
  console.log(max);   // 9007199254740991
  console.log(BigInt(max) + BigInt(1)) //9007199254740992n
  // BigInt 类型不能直接和普通类型做转换

globalThis

全局属性 globalThis 包含全局的 this 值,类似于全局对象(global object)。

始终指向全局对象,不论在什么执行环境下

 console.log(globalThis) // 浏览器中返回 Window 对象
console.log(globalThis);    // NodeJS也支持,返回 Object