【JavaScript高级】ES7-ES13常用新特性

最新推荐文章于 2024-04-19 14:48:04 发布

karshey

最新推荐文章于 2024-04-19 14:48:04 发布

阅读量1.3k

点赞数 4

分类专栏： JavaScript 文章标签： javascript es13 前端

本文链接：https://blog.csdn.net/karshey/article/details/127105237

版权

JavaScript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

ES7

Array Includes

判断数组中是否存在某元素。第二个参数：从索引值开始判断。
可以判断NaN（indexOf不行）

const names=['a','b','c',NaN]

console.log(names.includes('a'));//true
console.log(names.includes('a',1));//false
console.log(names.indexOf(NaN));//-1
console.log(names.includes(NaN));//true

指数

console.log(3**3===Math.pow(3,3));//true

ES8

Object.values

获取所有的 value 值。

const obj={
   name:"kaisa",
   age:18
}

console.log(Object.keys(obj));//['name', 'age']
console.log(Object.values(obj));//['kaisa', 18]

注意：Object.values 的返回值是一个数组，当传入的是一个数组时，会返回数组本身，当传入的是一个字符串时，返回的是一个包含字符串所有的字符的数组。

console.log(Object.keys(["abc","cba","nba"]))//[ '0', '1', '2' ]
console.log(Object.values(["abc","cba","nba"]))
//[ 'abc', 'cba', 'nba' ]

console.log(Object.keys("hello"))//[ '0', '1', '2', '3', '4' ]
console.log(Object.values("hello"))//[ 'h', 'e', 'l', 'l', 'o' ]

Object.entries

可以获取到一个数组，数组中会存放可枚举属性的键值对数组：

const obj={
    name:"kaisa",
    age:18
}

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

也可以传入数组、字符串：

console.log(Object.entries(["abc","cba","nba"]))
//[ [ '0', 'abc' ], [ '1', 'cba' ], [ '2', 'nba' ] ]

String Padding

某些字符串我们需要对其进行前后的填充，来实现某种格式化效果，ES8中增加了 padStart和 padEnd 方法，分别是对字符串的首尾进行填充的。

const message = "Hello world"

const newMessage1=message.padStart(15,'a');
const newMessage2=message.padEnd(15,'a');
console.log(newMessage1);//aaaaHello world
console.log(newMessage1.length);//15
console.log(newMessage2);//Hello worldaaaa
console.log(newMessage2.length);//15

Trailing-Commas

ES8允许在函数定义和调用时多加一个逗号：

function foo(m,n,){
   console.log(m + n)
}

foo(10,20,)

Object Descriptors

在这里插入图片描述

ES9

Object Spread syntax 展开语法之前讲过。

Async iterators、Promise finally之后讲。

ES10

flat/flatMap

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

const arr=[1,2,3,[4,5],[[6,7,8]],[[[[9]]]]]

const arr1=arr.flat();
console.log(arr1);//[1, 2, 3, 4, 5,[6,7,8],[[9]]

const arr2=arr.flat(3);
console.log(arr2);//[1, 2, 3, 4, 5, 6, 7, 8,[9]]

像是剥洋葱，参数是几就剥几层（剥一层相当于拆掉一层[]）。

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

先进行map操作，再做flat的操作
flat相当于深度为1

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

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

Object fromEntries

把Entries转换成Object。

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}

trimStart/trimEnd

trim()：去除首尾空格
trimStart()：去除开头空格
trimEnd()：去除结尾空格

ES11

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

Nullish Coalescing 空值合并

是一个逻辑运算符，当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。

与||的区别：会在左侧操作数为假值时返回右侧操作数。

console.log(0||"默认");//默认
console.log(0??"默认");//0
console.log(null??"默认");//默认

可选链

不用可选链：

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

用了可选链?.:

翻译：存在吗？存在就使用。

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

Global This

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

for…in标准化

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

ES12

垃圾回收时回调

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

FinalizationRegistry提供了这样的一种方法：当一个在注册表中注册的对象被回收时，请求在某个时间点上调用一个清理回调。（清理回调有时被称为finalizer）；

你可以通过调用register方法，注册任何你想要清理回调的对象，传入该对象和所含的值；

const finalization = new FinalizationRegistry((value) => {
    console.log(value + "被销毁了")
})

let obj = { name: "kaisa" }

finalization.register(obj, "obj")

obj = null
//在控制台里等一下
//obj被销毁了

WeakRef

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

const finalization = new FinalizationRegistry((value) => {
    console.log(value + "被销毁了")
})

let obj={name:"kaisa"}
let info=obj

finalization.register(obj, "obj")

obj = null
//在控制台里等一下
//无事发生，obj不会被销毁，因为是强引用

如果我们希望是一个弱引用的话，可以使用WeakRef。

const finalization = new FinalizationRegistry((value) => {
   console.log(value + "被销毁了")
})

let obj={name:"kaisa"}
let info=new WeakRef(obj)

finalization.register(obj, "obj")

obj = null
//在控制台里等一下
//obj被销毁了

逻辑赋值运算符

||、??、&&的缩写：

a ||= b
//等价于
a = a || b

a &&= b
//等价于
a = a && b

a ??= b
//等价于
a = a ?? b

字符串替换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

ES13

at()

可以通过at方法获取字符串、数组的元素。支持负数。

// 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

对象是否有某个自己属性Object.hasOwn(obj, propKey)

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无法进行判断

class中成员字段field

公共属性

以前我们设置对象的属性都是在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 {name: 'kaisa', age: 18, #height: 1.88}
// class外部无法访问, 访问则会报错
console.log(p.#height);

私有类属性：

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

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

静态代码块

在加载解析类的时候就会执行, 而且只会执行一次，一般用于对类进行一些初始化操作。

class Person {
  // 静态代码块
  static {
    console.log("hello");
    console.log("world");
  }
}

参考

coderwhy的课
ES10~ES13常见新特性
 ES7-ES12
【JavaScript高级】对象相关：对象属性、属性描述符（数据属性，存取属性）
空值合并运算符（??）-MDN