ES10~ES13常见新特性

文章目录

1.ES10新特性

1.1 flat/flatMap

flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

例如一个数组有很多层, 第一层数组中还有第二层, 第三层, …数组

const arr = [10, 20, [30, 40], [50, [60]], [70, [80, [90]]]];

// 将数组里面第一层数组平坦化
const newArr1 = arr.flat(1);
console.log(newArr1); // [10, 20, 30, 40, 50, [60], 70, [80, [90]]]

// 将数组里面第三层数组平坦化
const newArr2 = arr.flat(3);
console.log(newArr2); // [10, 20, 30, 40, 50, 60, 70, 80, 90]

flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。

注意一：flatMap是先进行map操作，再做flat的操作；

注意二：flatMap中的flat相当于深度为1；

const message = ["Hello World", "Hello coder", "你好 中国"];

const newMessage = message.flatMap(item => item.split(" "));
console.log(newMessage); // ['Hello', 'World', 'Hello', 'coder', '你好', '中国']

1.2 Object fromEntries

在前面，我们可以通过 Object.entries 将一个对象转换成 entries (key, value键值对数组)

那么如果我们有一个entries了，如何将其转换成对象呢？

ES10提供了 Object.formEntries来完成转换：

var obj = {
  name: "kaisa",
  age: 18,
  height: 1.88,
};

const entries = Object.entries(obj);
console.log(entries); // [['name', 'kaisa'], ['age', 18], ['height', 1.88]]

const info = Object.fromEntries(entries);
console.log(info); // {name: 'kaisa', age: 18, height: 1.88}

1.3 trimStart/trimEnd

去除一个字符串首尾的空格，我们可以通过trim方法，如果单独去除前面或者后面呢？

ES10中给我们提供了trimStart和trimEnd；

const message = "        Hello      ";

// 去除首尾空格
console.log(message.trim());
// 去除开头空格
console.log(message.trimStart());
// 去除结尾空格
console.log(message.trimEnd());

ES10其他知识点

Symbol description：创建Symbol时可以传入一个描述, 上一篇已经讲过了

Optional catch binding：后面讲解try cach的时候讲解

2.ES11新特性

2.1 BigInt

在早期的JavaScript中，我们不能正确的表示过大的数字：

大于MAX_SAFE_INTEGER的数值，表示的可能是不正确的。

// 最大安全整数
console.log(Number.MAX_SAFE_INTEGER); // 9007199254740991

// 大于MAX_SAFE_INTEGER的一些数值, 可能正确表示, 可能不正确表示
const num1 = 9007199254740991 + 1;
console.log(num1); // 9007199254740992
const num2 = 9007199254740991 + 2;
console.log(num2); // 9007199254740992

那么ES11中，引入了新的数据类型BigInt，用于表示大的整数：

BigInt的表示方法是在数值的后面加上n, 这样表示的数字一定是正确的

console.log(Number.MAX_SAFE_INTEGER); // 9007199254740991

const num1 = 9007199254740991n + 1n;
console.log(num1); // 9007199254740992n
const num2 = 9007199254740991n + 2n;
console.log(num2); // 9007199254740993n

2.2 空值合并操作符

ES11，Nullish Coalescing Operator增加了空值合并操作符:

相对于 || 更加严谨

const foo = 0;
const result1 = foo || "默认值";
const result2 = foo ?? "默认值";

console.log(result1); // 默认值
console.log(result2); // 0

2.2 可选链

可选链也是ES11中新增一个特性，主要作用是让我们的代码在进行null和undefined判断时更加清晰和简洁：

例如: 在真实开发中, 我们拿到的对象可能是外部传入的, 因此在调用方法时我们需要严谨的判断一下避免报错

普通写法

const obj = {
  name: "kaisa",
  friend: {
    name: "coder",
    running() {
      console.log("running~");
    },
  },
};

// 确定方法存在的时候再调用 避免报错
if (obj.friend && obj.friend.running) {
  obj.friend.running();
}

可选链的写法: 使用 ?. 进行判断

const obj = {
  name: "kaisa",
  friend: {
    name: "coder",
    running() {
      console.log("running~");
    },
  },
};

obj?.friend?.running?.();

2.3 Global This

在之前我们希望获取JavaScript环境的全局对象，不同的环境获取的方式是不一样的

比如在浏览器中可以通过this、window来获取；
比如在Node中我们需要通过global来获取；

在ES11中对获取全局对象进行了统一的规范：globalThis

统一使用globalThis获取全局对象

2.4 for…in标准化

在ES11之前，虽然很多浏览器支持for…in来遍历对象类型，但是并没有被ECMA标准化。

在ES11中，对其进行了标准化，for…in是用于遍历对象的key的：

ES11其他知识点

Dynamic Import：后续ES Module模块化中讲解。
Promise.allSettled：后续讲Promise的时候讲解。
import meta：后续ES Module模块化中讲解。

3.ES12新特性

3.1 垃圾回收时回调

FinalizationRegistry 对象可以让你在对象被垃圾回收时请求一个回调。

FinalizationRegistry 提供了这样的一种方法：当一个在注册表中注册的对象被回收时，请求在某个时间点上调用一个清理回调。（清理回调有时被称为 finalizer ）;
你可以通过调用register方法，注册任何你想要清理回调的对象，传入该对象;

let obj = { name: "kaisa", age: 18 };

// 被回收执行的操作
const final = new FinalizationRegistry(() => {
  console.log("对象被回收了"); // 对象被回收了
});
// 监听obj对象
final.register(obj);

obj = null;

register还可以传第二个参数作为值

let obj = { name: "kaisa", age: 18 };

// 被回收执行的操作
const final = new FinalizationRegistry( value => {
  console.log("对象被回收了", value); // 对象被回收了 abc
});
// 监听obj对象
final.register(obj, "abc");

obj = null;

3.2 WeakRefs

如果我们默认将一个对象赋值给另外一个引用，那么这个引用是一个强引用：

let obj = { name: "kaisa", age: 18 };
let info = obj;
// 此时我们将obj设置为null, 但是由于info还有一个强引用指向obj, 所以obj并不会被回收
obj = null;

上面例子中, 若是一个弱引用的话, 就不会出现不被回收的情况; 如果我们希望是一个弱引用的话，可以使用WeakRef；

let obj = { name: "kaisa", age: 18 };
// 设置成弱引用
let info = new WeekRef(obj);
// 将obj设置为null后会被回收
obj = null;

3.3 逻辑赋值运算符

||逻辑赋值运算符

function foo(message) {
  // message = message || "默认值";
  message ||= "默认值";
}

??逻辑赋值运算符

function foo(message) {
  // message = message ?? "默认值";
  message ??= "默认值";
}

&&逻辑赋值运算符

const obj = {
  name: "kaisa"
}

// obj = obj && obj.name;
obj &&= obj.name

3.4 字符串替换

String.replaceAll：字符串替换；

const message = "aaa bbb ccc aaa ccc aaa";
// 将所有aaa替换为zzz
const newMseeage = message.replaceAll("aaa", "zzz");
console.log(newMseeage); // zzz bbb ccc zzz ccc zzz

ES12其他知识点

数字分隔符: 前面讲过了

4.ES13新特性

4.1 at()方法

可以通过at方法获取字符串、数组的元素，它们是作为ES13中的新特性加入的：

// 1.数组
const arr = [10, 20, 30, 40];
console.log(arr.at(0)); // 10
// at方法也支持负值
console.log(arr.at(-1)); // 40

// 2.字符串
const message = "Hello";
console.log(message.at(0)); // H
console.log(message.at(-1)); // o

4.2 对象是否有某个自己属性

Object中新增了一个静态方法（类方法）： Object.hasOwn(obj, propKey)

该方法用于判断一个对象中是否有某个自己的属性；

const obj = {
  name: "kaisa",
};
obj.__proto__ = { address: "成都市" }; 

console.log(Object.hasOwn(obj, "name")); // true
console.log(Object.hasOwn(obj, "address")); // false

那么和之前学习的Object.prototype.hasOwnProperty有什么区别呢？

Object.hasOwn是用来替代Object.prototype.hasOwnProperty的
区别一：防止对象内部有重写hasOwnProperty
区别二：对于隐式原型指向null的对象， hasOwnProperty无法进行判断

4.3 新增定义class中成员字段

在ES13中，新增了定义class类中成员字段（field）的其他方式：

公共的实例字段(Instance public fields):

以前我们设置对象的属性都是在constructor中设置的

class Person {
  constructor(name, age) {
    this.name = name
    this.age = age
  }
}

ES13中可以在外部设置对象属性, 这种方式设置属性可以在对象外部访问, 也可以在对象内部访问, 因此称为公共的属性

class Person {
  // 公共的属性
  height = 1.88;
  
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

const p = new Person("kaisa", 18);

console.log(p); // Person {height: 1.88, name: 'kaisa', age: 18}

私有属性

以前的私有属性是程序员之间约定的私有属性, 属性名前加一个下划线就是私有属性, 外部可以访问到, 但是我们最好不要这样做

class Person {
  // 约定	私有的属性
  _height = 1.88;
  
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

const p = new Person("kaisa", 18);
console.log(p); // Person {_height: 1.88, name: 'kaisa', age: 18}
// 外界可以访问, 但是不要这样做
console.log(p._height) // 1.88

ES13中添加了一个真正的私有属性: 以井号开头

class Person {
  // 真正的私有属性
  #height = 1.88;
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

const p = new Person("kaisa", 18);
console.log(p); // Person {name: 'kaisa', age: 18, #height: 1.88}
// class外部无法访问, 访问则会报错
console.log(p.#height);

私有类属性

ES13中同样可以设置私有的类属性

class Person {
  static #message = "hello";
}

// 外部访问不到结果
console.log(Person.message); // undefined

静态代码块(static block):

在加载解析类的时候就会执行, 而且只会执行一次

一般用于对类进行一些初始化操作
```
class Person {
  // 静态代码块
  static {
    console.log("hello");
    console.log("world");
  }
}
```