【JavaScript高级】ES7-ES13常用新特性
文章目录
- ES7
- Array Includes
- 指数
- ES8
- Object.values
- Object.entries
- String Padding
- Trailing-Commas
- Object Descriptors
- ES9
- ES10
- flat/flatMap
- Object fromEntries
- trimStart/trimEnd
- ES11
- BigInt
- Nullish Coalescing 空值合并
- 可选链
- Global This
- for…in标准化
- ES12
- 垃圾回收时回调
- WeakRef
- 逻辑赋值运算符
- 字符串替换replaceAll
- ES13
- at()
- 对象是否有某个自己属性Object.hasOwn(obj, propKey)
- class中成员字段field
- 参考
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); // 9007199254740991const 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=objfinalization.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 || ba &&= b
//等价于
a = a && ba ??= 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 = namethis.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高级之ECMAScript 6 新特性
2.1. let关键字 let关键字用来声明变量,使用 let声明的变量有几个特点: 不允许重复声明 块儿级作用域 不存在变量提升 不影响作用域链 应用场景:以后声明变量使用let就对了 案例:点击切 ...
- es7,es8,es9新特性
es7,es8,es9新特性 1. ES7新特性(ECMAScript 2016) ES7在ES6的基础上主要添加了两项内容: Array.prototype.includes()方法 求幂运算符(* ...
- java自动化测试语言高级之Java 8 新特性
java自动化测试语言高级之Java 8 新特性 文章目录 java自动化测试语言高级之Java 8 新特性 Java 8 新特性 Java 8 新特性 Java 8 (又称为 jdk 1.8) 是 ...
- C#: 8.0 和 9.0 常用新特性
在<带你了解C#每个版本新特性> 一文中介绍了,C# 1.0 到 7.0 的不同特性,本文接着介绍在 8.0 和 9.0 中的一些常用新特性. C# 8.0 在 dotNET Core 3 ...
- java自动化测试语言高级之Java 9 新特性
java自动化测试语言高级之Java 9 新特性 文章目录 java自动化测试语言高级之Java 9 新特性 Java 9 新特性 Java 9 新特性 Java 9 发布于 2017 年 9 月 2 ...
- 【SQL开发实战技巧】系列(四十五):Oracle12C常用新特性☞VARCHAR2/NVARCHAR2类型最大长度由4000字节扩展到32767字节
系列文章目录 文章目录 系列文章目录 前言 Oracle12C常用新特性☞VARCHAR2/NVARCHAR2类型最大长度由4000字节扩展到32767字节 案例一:CDB+PDB环境启用扩展 案例二 ...
- 【SQL开发实战技巧】系列(四十七):Oracle12C常用新特性☞非分区表在线转分区表online clause(不停业务+索引有效)
系列文章目录 [SQL开发实战技巧]系列(一):关于SQL不得不说的那些事 [SQL开发实战技巧]系列(二):简单单表查询 [SQL开发实战技巧]系列(三):SQL排序的那些事 [SQL开发实战技巧] ...
- 一幅长文细学JavaScript(五)——ES6-ES11新特性
5 ES版本 摘要 ES5的先天不足致使ES后续版本的发展,这也是前端人员绕不开的一个点.如果我们想要在工作和面试中轻松解决问题,那么了解ES6-ES11是必不可少的. 在本文中,我将采用一种更加通俗 ...
- ES6和ES7及ES8新特性最新规范知识详细总结
一.ECMASript 相关介绍 ECMA概述 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hWfWai55-1637595380774)(images/微信截图_2 ...
最新文章
- SpringBoot2.0.3之quartz集成,不是你想的那样哦!
- 工业物联网的应用领域与方向
- Log4net 日志使用介绍
- EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器出现no compatible source was found for this media问题的解决...
- SVN 出错信息汇总/错误信息一览表
- 乐在其中设计模式(C#) - 原型模式(Prototype Pattern)
- 2018年山西省环境空气质量综合指数平均下降10.8%
- 前后端分离开发技术的一些思考
- kubernetes Ingress是什么
- X86工控机虚拟显示器设置(nomachine远程桌面)
- 电气工程及其自动化走Java_电气工程及其自动化专业项目经验范文
- Python编码错误的解决办法SyntaxError: Non-ASCII character '\xe5' in file
- 怎么把m4a文件变成mp3格式
- hdu 6578 Blank dp求 给定区间中数字不同的方案数
- 关于工业线阵相机的一些知识
- 使用OSGeo4W安装配置QGIS
- SPM12入门案例3
- 收敛级数加发散级数是什么情况?
- 一阶RC低通滤波器的离散化
- 重启计算机怎么一键还原系统还原,怎么还原电脑系统,教您电脑怎么一键还原系统...