JavaScript高级ES7-ES13常用新特性

Posted karshey

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript高级ES7-ES13常用新特性相关的知识,希望对你有一定的参考价值。

文章目录

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中增加了 padStartpadEnd 方法,分别是对字符串的首尾进行填充的。

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

见:【JavaScript高级】对象相关:对象属性、属性描述符(数据属性,存取属性)

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() 方法首先使用映射函数映射每个元素,然后将结果压缩成一个新数组。

  1. 先进行map操作,再做flat的操作
  2. 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

以上是关于JavaScript高级ES7-ES13常用新特性的主要内容,如果未能解决你的问题,请参考以下文章

ES7-ES10的新特性

ES7-Es8 js代码片段

2022年了,这些ES7-ES12的知识点你都掌握了嘛?

JavaScript高级之ECMASript 78 9 10 新特性

JavaScript高级之ECMAScript 6 新特性

阶段1 语言基础+高级_1-3-Java语言高级_08-JDK8新特性_第1节 常用函数接口_8_常用的函数式接口_Supplier接口