ES9新特性、ES10新特性

ES9新特性

一、rest参数与spread扩展运算符

rest参数与spread扩展运算符在es6中已经引入，不过es6中只针对于数组，在es9中为对象提供了像数组一样的rest参数和扩展运算符

1.rest参数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ES9新特性</title>
</head>
<body><script>//rest参数function TNT({name,age,...sex}) {console.log(name);console.log(age);console.log(sex);}TNT({name:"宋亚轩",age:18,sex:"男",score:100,func:"唱歌"});</script>
</body>
</html>

2.对象合并

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ES9新特性</title>
</head>
<body><script>//对象合并const first = {a:'马嘉祺'}const second = {b:'丁程鑫'}const third = {c:'宋亚轩'}const fourth = {d:'刘耀文'}const fifth = {e:'张真源'}const sixth = {f:'严浩翔'}const seventh = {g:'贺峻霖'}const sdsnt = {...first,...second,...third,...fourth,...fifth,...sixth,...seventh}console.log(sdsnt);</script>
</body>
</html>

二、正则扩展

1.命名捕获分组

es9允许命名捕获组使用符号 ? 这样获取捕获结果的可读性更强；

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ES9新特性</title>
</head>
<body><script>//正则扩展：命名捕获分组//声明一个字符串let str = '<a href="http://www.baidu.com">百度</a>';//提取url和标签文本//之前写法const resu = /<a href"(.*)">(.*)<\/a>/;console.log(resu.exec(str));//命名捕获const result = /<a href"(?<url>.*)">(?<text>.*)<\/a>/;const s = result.exec(str);console.log(s);console.log(s.groups.url);console.log(s.groups.text);</script>
</body>
</html>

2.反向断言

//反向断言let str = "JavaScript20220420哟今天星期三哦哦哦2152啦";//获得“今天星期三”//正向const resu1 = /\d+(?=哦)/;console.log(resu1.exec(str));//反向const resu2 = /(?<=哟)\d+/;console.log(resu2.exec(str));

ES10新特性

一、Object.fromEntries

将二维数组或者map转换成对象；

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ES10新特性</title>
</head>
<body><script>//对象 => 数组const TNT = {name: 'sdsnt',age:18}console.log(Object.entries(TNT));//数组orMap => 对象const resu = Object.fromEntries([['name', 'sdsnt'],['age', '18'],]);console.log(resu);const TNT2 = new Map();TNT2.set('name','sdsnt');TNT2.set('age','18');const resu2 = Object.fromEntries(TNT2);console.log(resu2);</script>
</body>
</html>

二、trimStart和trimEnd

去除字符串前后的空白字符；

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ES10新特性</title>
</head>
<body><script>//trimStart和trimEndlet str = "    sdsnt  ..  ";console.log(str.trimStart());console.log(str.trimEnd());console.log(str.trimLeft());console.log(str.trimRight());</script>
</body>
</html>

trimStart();效果等于trimLeft(); 同理，trimEnd();与trimRight();效果也一样

只能去除字符串首尾空白，中间的空白不行

三、Array.prototype.flat与flatMap

将多维数组降维；

1.flat

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ES10新特性</title>
</head>
<body><script>//Array.prototype.flat//二维数组=>一维数组const arr1 = [1,2,3,[4,5,6]];console.log(arr1.flat());//三维数组=>一维数组const arr2 = [7,8,9,[4,5,6,[1,0,3]]];console.log(arr2.flat(2));</script>
</body>
</html>

2.flatMap

//flatMapconst arr3 = [1,2,3,4,5];console.log(arr3.map(item => item * 10));console.log(arr3.map(item => [item * 10]));console.log(arr3.flatMap(item => [item * 10]));

四、Symbol.prototype.description

获取Symbol的字符串描述；

 //获取Symbol的描述字符串let s = Symbol("宋亚轩");console.log(s.description);

ES9新特性、ES10新特性相关推荐

[转]ES7、ES8、ES9、ES10新特性大盘点
ES7.ES8.ES9.ES10新特性大盘点本文转自:https://mp.weixin.qq.com/s/8bov6788ivV0sHzmwrn5lw 以下文章来源于前端工匠 ,作者浪里行舟君前 ...
[转]ES6、ES7、ES8、ES9、ES10新特性一览 (个人整理，学习笔记)
目录 1.ES6新特性(2015) 1.1模块化(Module) 1.1.1导出(export) 1.1.2导入(import) 1.2箭头(Arrow)函数 1.2.1箭头函数的结构 1.3默认参数 ...
ES6、ES7、ES8、ES9、ES10 新特性ECMAScript版本简介
ES全称ECMAScript,ECMAScript是ECMA制定的标准化脚本语言 ES6新特性(2015) ES6的特性比较多,在 ES5 发布近 6 年(2009-11 至 2015-6)之后才将其 ...
ES6、ES7、ES8、ES9、ES10新特性一览
ES全称ECMAScript,ECMAScript是ECMA制定的标准化脚本语言.目前JavaScript使用的ECMAScript版本为ECMA-417.关于ECMA的最新资讯可以浏览 ECMA n ...
ES7、ES8、ES9、ES10新特性大盘点
前言从 ECMAScript 2016(ES7)开始,版本发布变得更加频繁,每年发布一个新版本,好在每次版本的更新内容并不多,本文会细说这些新特性,尽可能和旧知识相关联,帮你迅速上手这些特性. ES ...
ES6、 ES7、 ES8、 ES9、 ES10 新特性概览
传送门:ES11.ES12.ES13 新特性概览 ES全称ECMAScript,ECMAScript是ECMA制定的标准化脚本语言.目前JavaScript使用的ECMAScript版本为ECMA-4 ...
JavaScript的ES6、ES7、ES8、ES9、ES10新特性
ES6.ES7.ES8.ES9.ES10新特性 ES全称ECMAScript,ECMAScript是ECMA制定的标准化脚本语言.目前JavaScript使用的ECMAScript版本为ECMA-41 ...
ES6/ES7/ES8/ES9/ES10常用特性和新特性最全总结
ES6 ES6在ES5的基础上新增了一系列特性,这里仅列出常用特性变量的改变,添加了块级作用域的概念 let声明变量(块级作用域),let是更完美的var,它声明的全局变量不是全局属性widow的变 ...
ES10新特性你了解多少
ES10的新特性主要有: 对象方法扩展字符串扩展方法数组的扩展方法 Symbol 扩展 try...catch 改变 toString() 改变一.对象方法扩展 const result = O ...