地铁上看掘金，记录一些不那么熟悉的知识点

Map 对比 object 最大的好处就是，key 不受类型限制

for of 只能遍历数组

for in 即能遍历数组又能遍历对象

求幂运算符

const num = Math.pow(3, 2);

ES7 提供了求幂运算符：**

const num = 3 ** 2;

for async await

我们来看以下场景哈

function fn (time) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`${time}毫秒后我成功啦！！！`)
    }, time)
  })
}

fn(3000).then(res => console.log(res))
fn(1000).then(res => console.log(res))
fn(2000).then(res => console.log(res))

结果是

1000毫秒后我成功啦！！！
2000毫秒后我成功啦！！！
3000毫秒后我成功啦！！！

但是我想要这个结果

3000 毫秒后我成功啦！！！ 1000 毫秒后我成功啦！！！ 2000 毫秒后我成功啦！！！

第一时间我们肯定想到的是async/await

function fn(time) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`${time}毫秒后我成功啦！！！`);
    }, time);
  });
}

async function asyncFn() {
  // 排队
  const data1 = await fn(3000);
  console.log(data1); // 3秒后 3000毫秒后我成功啦！！！
  const data2 = await fn(1000);
  console.log(data2); // 再过1秒 1000毫秒后我成功啦！！！
  const data3 = await fn(2000);
  console.log(data3); // 再过2秒 2000毫秒后我成功啦！！！
}

但是上面代码也是有缺点的，如果有几十个，那不是得写几十个 await，有没有一种方法可以通过循环来输出呢？

function fn (time) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`${time}毫秒后我成功啦！！！`)
    }, time)
  })
}

async function asyncFn () {
  const arr = [fn(3000), fn(1000), fn(1000), fn(2000), fn(500)]
  for await (let x of arr) {
    console.log(x)
  }
}

asyncFn()
3000毫秒后我成功啦！！！
1000毫秒后我成功啦！！！
1000毫秒后我成功啦！！！
2000毫秒后我成功啦！！！
500毫秒后我成功啦！！！

Array.flatMap

现在给你一个需求

let arr = ["科比 詹姆斯 安东尼", "利拉德 罗斯 麦科勒姆"];

将上面数组转为

["科比", "詹姆斯", "安东尼", "利拉德", "罗斯", "麦科勒姆"];

第一时间想到map + flat

console.log(arr.map((x) => x.split(" ")).flat());
// [ '科比', '詹姆斯', '安东尼', '利拉德', '罗斯', '麦科勒姆' ]

flatMap就是flat + map，一个方法顶两个

console.log(arr.flatMap((x) => x.split(" ")));
// [ '科比', '詹姆斯', '安东尼', '利拉德', '罗斯', '麦科勒姆' ]

Object.fromEntries

前面 ES8 的Object.entries是把对象转成键值对数组，而Object.fromEntries则相反，是把键值对数组转为对象

const arr = [
  ["name", "林三心"],
  ["age", 22],
  ["gender", "男"],
];

console.log(Object.fromEntries(arr)); // { name: '林三心', age: 22, gender: '男' }

他还有一个用处，就是把Map转为对象

const map = new Map();
map.set("name", "林三心");
map.set("age", 22);
map.set("gender", "男");

console.log(map); // Map(3) { 'name' => '林三心', 'age' => 22, 'gender' => '男' }

const obj = Object.fromEntries(map);
console.log(obj); // { name: '林三心', age: 22, gender: '男' }

34、?. 和 ??

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

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

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

const a = 0 ?? "林三心"; // 0
const b = "" ?? "林三心"; // ''
const c = false ?? "林三心"; // false
const d = undefined ?? "林三心"; // 林三心
const e = null ?? "林三心"; // 林三心

参考链接

• https://juejin.cn/post/6995334897065787422 (opens new window)