es11

1. Promise.allSettled

ES11 新增的 Promise 的方法

接收一个 Promise 数组，数组中如有非 Promise 项，则此项当做成功
把每一个 Promise 的结果，集合成数组，返回

function fn(time, isResolve) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      isResolve
        ? resolve(`${time}毫秒后成功！！！`)
        : reject(`${time}毫秒后失败！！！`);
    }, time);
  });
}

Promise.allSettled([fn(2000, true), fn(3000), fn(1000)]).then((res) => {
  console.log(res)[
    // 3秒后输出
    ({ status: "fulfilled", value: "2000毫秒后成功！！！" },
    { status: "rejected", reason: "3000毫秒后失败！！！" },
    { status: "rejected", reason: "1000毫秒后失败！！！" })
  ];
});

2. ?. 和 ??

先说说?.，中文名为可选链

比如需要一个变量，是数组且有长度，才做某些操作

const list = null;
// do something
if (list && list.length) {
  // do something
}

// 使用可选链
const list = null;
// do something
if (list?.length) {
  // do something
}

比如有一个对象，要取一个可能不存在的值，甚至都不确定 obj 是否存在

const obj = {
  cat: {
    name: "哈哈",
  },
};
const dog = obj && obj.dog && obj.dog.name; // undefined

// 可选链
const obj = {
  cat: {
    name: "哈哈",
  },
};
const dog = obj?.dog?.name; // undefined

比如有一个数组，不确定它存不存在，存在的话就取索引为 1 的值

const arr = null;
// do something
const item = arr && arr[1];

// 可选链
const arr = null;
// do something
const item = arr?.[1];

比如有一个函数，不确定它存不存在，存在的话就执行它

const fn = null;
// do something
const res = fn && fn();

// 可选链
const fn = null;
// do something
const res = fn?.();

再说说??，中文名为空位合并运算符

请看以下代码，使用||运算符，只要左边是假值，就会返回右边的数据

const a = 0 || "柯基"; // 柯基
const b = "" || "柯基"; // 柯基
const c = false || "柯基"; // 柯基
const d = undefined || "柯基"; // 柯基
const e = null || "柯基"; // 柯基

而??和||最大的区别是，在??这，只有 undefined 和 null 才算假值

const a = 0 ?? "柯基"; // 0
const b = "" ?? "柯基"; // ''
const c = false ?? "柯基"; // false
const d = undefined ?? "柯基"; // 柯基
const e = null ?? "柯基"; // 柯基