ES11常用新语法

Posted 2021-11-02 还是不会呀

ES11常用新语法

• • BigInt
  • Nullish Coalescing Operator
  • Optional Chaining
  • GlobalThis
  • for...in标准化

BigInt

在JS中最大的安全整数位 Number.MAX_SAFE_INTEGER,也就是说超过这个数的整数是不安全的

const maxNum = Number.MAX_SAFE_INTEGER;

console.log(maxNum); // 9007199254740991
console.log(maxNum + 1); // 9007199254740992
console.log(maxNum + 2); // 9007199254740992

但是，在某些场合确实需要比这个安全整数大的数据，这时就存在了BigInt

BigInt数在整数之后加上n

const bigInt = 900719925474099100n; // 这时这个数就转化成立大整数BigInt
console.log(bigInt); // 900719925474099100n

// 大整数相加
const result1 = bigInt + 10n;
console.log(result1); // 900719925474099110n

const num = 100;
const result2 = bigInt + BigInt(num); 
// 大整数和整数相加不存在类型的隐式转换，需要手动转化成大整数
console.log(result2); // 900719925474099200n

Nullish Coalescing Operator

Nullish Coalescing Operator(空值合并运算符)

当对应值为undefined和null时返回对应的值

// 空值合并运算符，在效果上类似于：
const message = "aaa";
const result = message || "default value";
console.log(result); // "aaa"
// 但是当message=""或message=0时,是会判断为false的,就会返回"default value""

// Nullish Coalescing Operator
const info = "fzb";
const name1 = info ?? "default name";
console.log(name1); // fzb
// 但此时当info=""或info=0时，是不会判断为false的,就返回info本身的值

Optional Chaining

Optional Chaining(可选链)

const info = {
  name: "fzb",
  friend: {
    name: "zkl",
    girlFriend: {
      name: "abc",
    },
  },
};
// 获取girlFriend的名字
console.log(info.friend.girlFriend.name); // abc

// 若当info内的friend字段不存在时，同意要获取girlFriend的名字
// delete info.friend;
// console.log(info.friend.girlFriend.name);
// TypeError: Cannot read properties of undefined (reading 'girlFriend')
// 从undefined内取值是错误的

// 那么可以这样
if (info.friend && info.friend.girlFriend) {
  console.log(info.friend.girlFriend.name); // abc
}

// 如果层级嵌套太深，那么做太多的判断，逻辑与操作，是非常麻烦的。
// ES11提供了可选链，简化了要进行的判断操作
console.log(info.friend?.girlFriend?.name); // abc
delete info.friend;
console.log(info.friend?.girlFriend?.name); // undefined

GlobalThis

在不同的JS代码允许环境下，全局对象是不一样的。浏览器全局对象window,Node全局对象global,那么一份代码如何在两个环境运行不报错

console.log(this);
// node环境: global
// 浏览器环境: window

for…in标准化

在ES11之前，for…in ECMAScript是没有进行标准化的，也就是说不同的浏览器操作是不一样的，有些浏览器for…in遍历到的是对象的value值，在ES11之后，遍历到的是对象的key