前端祖传三件套JavaScript的ES6+之各种扩展:字符串、数值、函数、数组、对象、正则.

简介: 在前端开发中,ES6+ 为 JavaScript 带来了各种扩展功能,包括字符串、数值、函数、数组、对象、正则等方面的增强。本文将介绍 JavaScript 中各种扩展的基本概念和使用方法。


一、字符串扩展

在 ES6+ 中,字符串可以使用模板字符串语法来表示,同时也支持多行字符串和字符串插值等功能。例如:

const name = 'John';
const age = 30;
const message = `My name is ${name}, and I'm ${age} years old.`;
console.log(message);

以上代码中,使用模板字符串语法来表示字符串,并使用 ${} 来插入变量值。

二、数值扩展

在 ES6+ 中,数值支持二进制和八进制表示法,同时也提供了一些新的数学函数和常量定义。例如:

const binary = 0b1010; // 二进制数
const octal = 0o755; // 八进制数
console.log(Math.trunc(4.3)); // 输出 4

以上代码中,使用 0b 和 0o 分别表示二进制和八进制数,并使用 Math.trunc() 函数获取整数部分。

三、函数扩展

在 ES6+ 中,函数支持默认参数、剩余参数、箭头函数和解构赋值等功能。例如:

function foo(x, y = 1, ...rest) {
    console.log(x, y, rest);
}
const bar = (x, y) => x + y;
const { name, age } = { name: 'John', age: 30 };
console.log(name, age);

以上代码中,定义了一个带默认参数和剩余参数的函数 foo,使用箭头函数定义了一个简单的加法函数 bar,以及使用对象解构赋值获取对象的属性。

四、数组扩展

在 ES6+ 中,数组支持新的方法和操作符,包括 spread 操作符、Array.from() 方法和 Array.prototype.includes() 方法等。例如:

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2];
const arr4 = Array.from('hello');
const arr5 = [1, 2, 3].includes(2);
console.log(arr3, arr4, arr5);

以上代码中,使用 spread 操作符将两个数组合并成一个新数组,使用 Array.from() 方法将字符串转换为数组,以及使用 includes() 方法判断一个元素是否包含在数组中。

五、对象扩展

在 ES6+ 中,对象支持新的方法和语法,包括对象字面量语法、Object.assign() 方法和 Object.keys() 方法等。例如:

const name = 'John';
const age = 30;
const obj1 = { name, age };
const obj2 = Object.assign({}, obj1, { gender: 'male' });
const keys = Object.keys(obj1);
console.log(obj1, obj2, keys);

以上代码中,使用对象字面量语法创建了一个对象,使用 Object.assign() 方法合并了两个对象,并使用 Object.keys() 方法获取对象的键名数组。

六、正则扩展

在 ES6+ 中,正则表达式也得到了增强,包括新的修饰符、Unicode 支持和 y、u 修饰符等。例如:

const regex1 = /foo/bar;
const regex2 = /hello/uy;
console.log(regex1.flags, regex2.unicode);

以上代码中,使用 /bar 修饰符表示粘性匹配,使用 y 和 u 修饰符支持全局匹配和 Unicode 模式。

目录
相关文章
|
3月前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
3月前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
用array.filter()来实现数据筛选、数据清洗和链式调用,相对于for循环更加清晰,语义化强,能显著提升代码的可读性和可维护性。博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
7月前
|
存储 前端开发 JavaScript
前端中对象的深度应用与最佳实践
前端对象应用涉及在网页开发中使用JavaScript等技术创建和操作对象,以实现动态交互效果。通过定义属性和方法,对象可以封装数据和功能,提升代码的组织性和复用性,是现代Web开发的核心技术之一。
|
7月前
|
监控 前端开发 JavaScript
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
|
8月前
|
JavaScript 前端开发 算法
前端优化之超大数组更新:深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点,探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化,React 利用虚拟 DOM 和 `diffing` 算法优化更新,Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略,如使用 `key`、分片渲染、虚拟滚动等,帮助开发者在处理大型数组时提升性能。总结指出,选择合适的框架应根据项目复杂度和性能需求来决定。
234 2
|
8月前
|
JSON 前端开发 数据格式
前端的全栈之路Meteor篇(五):自定义对象序列化的EJSON介绍 - 跨设备的对象传输
EJSON是Meteor框架中扩展了标准JSON的库,支持更多数据类型如`Date`、`Binary`等。它提供了序列化和反序列化功能,使客户端和服务器之间的复杂数据传输更加便捷高效。EJSON还支持自定义对象的定义和传输,通过`EJSON.addType`注册自定义类型,确保数据在两端无缝传递。
102 1
|
8月前
|
人工智能 前端开发 JavaScript
拿下奇怪的前端报错(一):报错信息是一个看不懂的数字数组Buffer(475) [Uint8Array],让AI大模型帮忙解析
本文介绍了前端开发中遇到的奇怪报错问题,特别是当错误信息不明确时的处理方法。作者分享了自己通过还原代码、试错等方式解决问题的经验,并以一个Vue3+TypeScript项目的构建失败为例,详细解析了如何从错误信息中定位问题,最终通过解读错误信息中的ASCII码找到了具体的错误文件。文章强调了基础知识的重要性,并鼓励读者遇到类似问题时不要慌张,耐心分析。
169 5
|
8月前
|
自然语言处理 前端开发 JavaScript
🛠️ JavaScript数组操作指南:20个精通必备技巧🚀
本文详细介绍了 JavaScript 中的 20 个高效数组操作技巧,涵盖了从基本的添加、移除元素,到数组转换和去重等高级操作。强调了不可变性的重要性,提供了清晰的代码示例,帮助开发者编写更整洁和高效的代码。无论是新手还是经验丰富的开发者,这些技巧都将显著提升您的编码能力,使您在项目中更具竞争力。
92 2
|
8月前
|
JavaScript 前端开发 测试技术
JS都有哪些操作数组的方法
JS都有哪些操作数组的方法
114 3
|
8月前
|
JavaScript 前端开发 API
JS中数组的方法flat()怎么用
JS中数组的方法flat()怎么用
93 0