JavaScript 不断升级迭代，越来越多的新特性让我们的代码写起来干净有趣，在这篇文章中我们介绍了 10 个新特性。

1.字符串.原型.replaceAll

replaceAll()返回一个新字符串，其中模式的所有匹配项都被替换项替换。模式可以是字符串或正则表达式，替换项可以是字符串或为每次匹配执行的函数。

let str = '我喜欢苹果，我有时会吃苹果';let newStr = str.replaceAll('苹果', '橘子');console.log(newStr);/**** 输出 ****///我喜欢橘子，我有时吃橘子

2.使用“BigInt”支持大数计算

JS中的MAX_SAFE_INTEGER” 计算超过“Number.

let v = Math.pow(2, 55) === Math.pow(2, 55) + 1 // trueconsole.log(v);let v2 = Math.pow(2, 55);  console.log(v2); //36028797018963970let v3 = Math.pow(2, 55) + 1;  console.log(v3);   //36028797018963970

使用“BigInt”可以完全避免这个问题：

BigInt ( Math . pow ( 2 , 55 )) === BigInt ( Math . pow ( 2 , 55 )) + BigInt ( 1 ) // 假

3.使用“Object.hasOwn”而不是“in”运算符

有时我们想知道一个属性是否存在于一个对象上，我们通常使用“in”运算符，但这是有缺陷的。

in如果指定的属性位于对象或其原型链中，则运算符返回 true：

const Person = function (age) { this.age = age}Person.prototype.name = 'Lily'const p = new Person(24)console.log('age' in p) // trueconsole.log('name' in p) // true

Object.hasOwn

let object = { age: 24 }Object.hasOwn(object, 'age') // truelet object2 = Object.create({ age: 24 })Object.hasOwn(object2, 'age') // false  let object3 = Object.create(null)Object.hasOwn(object3, 'age') // false

4.数字分隔符

新引入的值分隔符使用 _（下划线）字符来分隔值组，使它们更易于阅读！

let count = 1_000;let number = 1_000_000;let account = 1_000.0_001;

5. String.prototype.trimStart() / String.prototype.trimEnd()

String.prototype.trim()用于去除头部和尾部的空格、换行等，现在头部和尾部分别由 控制trimStart()，trimEnd(). trimLeft(), trimRight()是它们的别名。

let str = ' Hello JavaScript ';str.trimLeft();//'Hello JavaScript 'str.trimRight();//' Hello JavaScript'

6. Array.prototype.flat() / Array.prototype.flatMap() 方法

展平数组是 Array 原型的一项新功能，它允许您通过传入级别深度参数（默认值为 1）来提高较低数组的级别。如果你想提高所有级别，你可以写一个更大的数字，但不建议这样做。该flatMap()方法首先使用 map 函数映射每个元素，然后将结果展平到一个新数组中。

const a1 = [1, 2, [3, 4]].flat();console.log(a1);  // [1, 2, 3, 4]   const a2 = [1, 2, [3, 4, [5, 6]]].flat(2);console.log(a2); // [1, 2, 3, 4, 5, 6]const a3 = [1, 2, 3, 4].flatMap(v => [v, v * 2]);console.log(a3);  // [1, 2, 2, 4, 3, 6, 4, 8]

7.将catch参数改为optional

在 try...catch 错误处理期间，如果没有向 catch 传递参数，代码将报告错误。在新规范中，可以省略 catch 绑定参数和括号。

try{return true;}catch{return false;}

8.空合并运算符（？？？）

当左操作数为 null 或未定义时，它返回右操作数。否则，它返回左边的操作数。

const str = null ?? 'default string';console.log(str);// expected output: "default string"const num = 0 ?? 42;console.log(num);// expected output: 0/** Note* Unlike the logical or (||) operator, the logical or returns the right-hand operand if the left operand is false, e.g. '' or 0*/

9. 可选链运算符 (?.)

如果您访问对象上不存在的属性的属性，请使用 . 运算符将使用 ? 直接报告错误。返回未定义

let obj = {};console.log(obj.person.name)// Cannot read properties of undefined (reading 'name')console.log(obj.?person?.name)// expected output:undefine

10. 对象.fromEntries()

Object.entries将对象转换为[key, value]键值对。object.fromEntries()用于将键值对缩减为对象结构。

   const entries = [['name', 'maxwell']];   console.log(entries);````const object = Object.fromEntries(entries);   console.log(object);

对你有用吗？如果有用，记得点赞支持哦！

如果你才开始学前端，可以看看，我们这里有html+css阶段完整教程，我们在钉钉群里有全套的课程包含（入门到精通课程、4个综合项目（称之为15天训练营，在群里是从第二十三节课开始的）、30个练习案例！）如果需要，给我发个消息，添加我，邀请你进入钉钉群学习！