JavaScript ES10新特性

这篇具有很好参考价值的文章主要介绍了JavaScript ES10新特性。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

JavaScript ES10新特性


导文

JavaScript ES10,也被称为ES2019,引入了一些新的特性和语言改进

Array.prototype.flat()和Array.prototype.flatMap()

这两个方法可以简化多维数组的处理。flat()方法可将多维数组展平为一维数组,而flatMap()方法在展平数组的同时还可以对每个元素执行映射操作。

const arr = [1, 2, [3, 4, [5, 6]]];

// 使用 flat() 方法展平数组
const flattened = arr.flat();
console.log(flattened); // [1, 2, 3, 4, [5, 6]]

// 使用 flatMap() 方法展平数组并映射操作
const mappedAndFlattened = arr.flatMap(num => num * 2);
console.log(mappedAndFlattened); // [2, 4, 6, 8, 10, 12]

Object.fromEntries()

这个静态方法允许将键值对列表转换为对象。它接收一个键值对的可迭代对象(如数组)作为参数,并返回一个新的对象。

const entries = [['name', 'John'], ['age', 30], ['city', 'New York']];

// 将键值对列表转换为对象
const obj = Object.fromEntries(entries);
console.log(obj); // { name: 'John', age: 30, city: 'New York' }

String.prototype.trimStart()和String.prototype.trimEnd()

这两个方法用于去除字符串开头或结尾的空白字符。它们分别是trim()方法的单独扩展。
String.prototype.trimStart()是字符串原型对象上的一个方法,用于去除字符串开头的空白字符(空格、制表符、换行符等)。该方法返回一个新的字符串,不改变原始字符串本身。

例如,假设有一个字符串变量:

const str = "   Hello, World!   ";
我们可以使用trimStart()方法去除字符串开头的空白字符:

javascript
const trimmedStr = str.trimStart();
console.log(trimmedStr); 
// 输出: "Hello, World!   "

上述代码中,原始字符串开头的三个空格被删除了,得到新的字符串"Hello, World! "。

类似地,String.prototype.trimEnd()方法用于去除字符串结尾的空白字符。例如:

const str = "   Hello, World!   ";
const trimmedStr = str.trimEnd();
console.log(trimmedStr); 
// 输出: "   Hello, World!"

在这个例子中,最后面的三个空格被移除,返回新的字符串" Hello, World!"。

需要注意的是,这两个方法只会删除开头或结尾的空白字符,字符串中间的空白字符不会受到影响。如果需要同时删除开头和结尾的空白字符,可以直接使用原生的trim()方法:

const str = "   Hello, World!   ";
const trimmedStr = str.trim();
console.log(trimmedStr); 
// 输出: "Hello, World!"

String.prototype.trimStart()和String.prototype.trimEnd()是用于去除字符串开头和结尾的空白字符的方法。它们分别返回新的字符串,并保持原始字符串不变。如果需要同时删除开头和结尾的空白字符,可以使用trim()方法。

格式化数字

引入了新的Number.prototype.toFixed()方法,它允许指定小数点后的位数并将数字四舍五入为指定精度;而Intl.NumberFormat对象提供了更灵活和本地化的数字格式化。

动态导入

通过import()函数,可以在运行时动态地导入模块。这使得按需加载模块变得更加容易。

// 动态导入模块
import('./module.js')
  .then(module => {
    // 使用导入的模块
    module.doSomething();
  })
  .catch(error => {
    console.error('模块加载失败:', error);
  });

可选的catch绑定

现在可以在try-catch语句中省略catch块中的绑定,只使用catch {},而不会将错误绑定到变量。

try {
  // 执行可能抛出异常的代码
  throw new Error('发生了错误');
} catch {
  // 省略 catch 块中的绑定
  console.log('捕获到错误');
}

BigInt

引入了一种新的基本数据类型 BigInt,它可以表示任意精度的整数。使用后缀n来声明一个BigInt。

const bigNumber = BigInt("123456789012345678901234567890");

console.log(bigNumber); // 123456789012345678901234567890n
console.log(typeof bigNumber); // "bigint"

const added = bigNumber + 1n;
console.log(added); // 123456789012345678901234567891n

globalThis

引入了一个名为globalThis的全局属性,它始终指向全局对象,无论在什么环境下。

// 在浏览器控制台和 Node.js 中使用 globalThis
console.log(globalThis);

// 在浏览器全局作用域中声明变量
globalThis.myVariable = "Hello World";
console.log(myVariable); // "Hello World"

这些是ES10中的一些主要特性。它们提供了更方便、更强大的语言功能,使JavaScript开发人员能够更高效地编写代码。文章来源地址https://www.toymoban.com/news/detail-496514.html

到了这里,关于JavaScript ES10新特性的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • ES6、ES7、ES8、ES9、ES10、ES11、ES12都增加了哪些新特性?

    前端开发的都知道,JavaScript经历了不同标本的迭代,从1到12的不断完善中会添加不同的新特性来解决前一个阶段的瑕疵,让我们开发更加便捷与写法更加简洁! 我记得我第一次接触js的时候是从大学的《21天精通JavaScript》,名字很好听,但是现在还在学,还没有精通!哈哈哈

    2024年02月16日
    浏览(40)
  • ES新特性系列(一)—— ES的简介与ES6

          前几天在BOSS上了解现在的前端工作的情况和各个公司要求的技术栈情况,看到一条非常有意思的要求:“能够理解并使用ES6、ES7、ES8、ES9、ES10新特性,都2024年了你总不能只知道ES6吧?”       各位彦祖现在现在就回忆一下,自己是否能把上述的ES系列的常用新特性都

    2024年04月29日
    浏览(33)
  • JavaScript高级技巧:深入探索JavaScript语言的高级特性和用法

    当我们谈论JavaScript高级技巧时,以下是一些示例来说明这些概念: 闭包(Closures): 在上面的例子中, innerFunction 是一个闭包,它可以访问外部函数 outerFunction 中的 outerVariable 变量,即使在外部函数执行结束后也可以。 高阶函数(Higher-Order Functions): 在上面的例子中,

    2024年02月08日
    浏览(51)
  • ES6 特性

    1.1.1 什么是 ES ES 全称 EcmaScript 是脚本语言的规范 JavaScript 是 EcmaScript 的一种实现 ES 新特性就是指 JavaScript 的新特性 1.1.2 为什么要使用 ES 语法简单,功能丰富 框架开发应用 前端开发职位要求 1.1.3 为什么要学习 ES6 ES6 的版本变动最多,具有里程碑的意义 ES6 加入许多新的语法

    2024年02月07日
    浏览(44)
  • ES6新特性

    1、初识ES6 ECMAScript 6.0(简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了。它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言;   ECMAScript是JavaScript的规范,而JavaScript是ECMAScript的实现;   ES6是一个历史名词,泛指 5.1 版本后

    2024年02月07日
    浏览(44)
  • ES6 新特性

    🎄欢迎来到@边境矢梦°的csdn博文🎄  🎄本文主要梳理前端技术的JavaScript的知识点ES6 新特性文件上传下载🎄 🌈我是边境矢梦°,一个正在为秋招和算法竞赛做准备的学生🌈 🎆喜欢的朋友可以关注一下 🫰🫰🫰 ,下次更新不迷路🎆  Ps: 月亮越亮说明知识点越重要 (重要

    2024年02月10日
    浏览(44)
  • 【ES6 新特性】

    ES6 为字符串扩展了几个新的 API: includes() :返回布尔值,表示是否找到了参数字符串。 startsWith() :返回布尔值,表示参数字符串是否在原字符串的头部。 endsWith() :返回布尔值,表示参数字符串是否在原字符串的尾部。 模板字符串相当于加强版的字符串,用反引号 `,除了

    2024年02月11日
    浏览(44)
  • 一文搞懂JavaScript数组的特性

    数组是几乎所有编程语言的基础语法,JavaScript因为语法特性,之前缺少一些集合类对象,对数组的使用就会更多一些,因此我们更需要理解数组知识。 然而大部分人对数组都已经非常熟悉了,所以本文将不会介绍数组的基础语法和用法,而是从JavaScript中数组的一些特殊之处

    2023年04月23日
    浏览(34)
  • ES 2023新特性速解

    新增的这三个数组方法分别对标以下原有的以下三个方法,它们与原先方法的区别就是: 执行它们并不会影响原先的数组 toSorted compareFn:指定一个定义排序顺序的函数。如果省略,则将数组元素转换为字符串,然后根据每个字符的 Unicode 码位值进行排序。 compareFn(a, b) 返回值

    2024年02月08日
    浏览(31)
  • ES6常用新特性

    ES6改动很大,可以简单分为四类 1、解决原有语法的缺陷和不足 例如:let,const 2、对原有语法进行增强 解构、扩展、模板字符串 3、新增对象、全新的方法,全新的功能 Object.assign()、Proxy对象代理、Reflect 等等 4、全新的数据类型和数据结构 set、map、class、迭代器、生成器 等

    2024年02月09日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包