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中增加了 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
见:【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()
方法首先使用映射函数映射每个元素,然后将结果压缩成一个新数组。
- 先进行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
以上是关于JavaScript高级ES7-ES13常用新特性的主要内容,如果未能解决你的问题,请参考以下文章
JavaScript高级之ECMASript 78 9 10 新特性
阶段1 语言基础+高级_1-3-Java语言高级_08-JDK8新特性_第1节 常用函数接口_8_常用的函数式接口_Supplier接口