首页 > 编程语言 >掌握这 10 个 JavaScript 新的特性,让编写的代码既干净又有趣

掌握这 10 个 JavaScript 新的特性,让编写的代码既干净又有趣

时间:2022-11-28 22:55:14浏览次数:98  
标签:10 Object console log age JavaScript let 编写 const

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 // true
console.log(v);
let v2 = Math.pow(2, 55);  
console.log(v2); //36028797018963970

let 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) // true
console.log('name' in p) // true

 

Object.hasOwn

let object = { age: 24 }
Object.hasOwn(object, 'age') // true
let 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 个练习案例!)可以通过下方链接进行了解!

30 天挑战学习计划 Web 前端从入门到实战

标签:10,Object,console,log,age,JavaScript,let,编写,const
From: https://www.cnblogs.com/icodingedu/p/16933951.html

相关文章