前端祖传三件套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 模式。

目录
相关文章
|
25天前
|
机器学习/深度学习 JavaScript Cloud Native
Node.js作为一种快速、可扩展的服务器端运行时环境
Node.js作为一种快速、可扩展的服务器端运行时环境
35 8
|
1月前
|
JavaScript 前端开发 Java
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
本文介绍了JavaScript中常用的函数和方法,包括通用函数、Global对象函数以及数组相关函数。详细列出了每个函数的参数、返回值及使用说明,并提供了示例代码。文章强调了函数的学习应结合源码和实践,适合JavaScript初学者和进阶开发者参考。
43 2
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
|
6天前
|
前端开发 JavaScript 应用服务中间件
Nginx 支持 JavaScript:前所未有的扩展
Nginx 是全球领先的高性能 Web 服务器,以其高效的反向代理和负载均衡功能著称。近期,Nginx 正式支持 JavaScript(通过 NJS 模块),基于 V8 引擎,允许在配置中嵌入 JS 代码,极大提升了灵活性和扩展性。开发者可以使用 JavaScript 实现动态请求处理、自定义认证、复杂响应处理、中间件编写及流量控制等功能,显著降低开发和维护难度,同时保持高性能。NJS 模块的引入为 Nginx 带来了前所未有的扩展能力,适应快速变化的业务需求。
17 0
|
1月前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
39 2
|
1月前
|
前端开发 JavaScript 开发者
除了 Generator 函数,还有哪些 JavaScript 异步编程解决方案?
【10月更文挑战第30天】开发者可以根据具体的项目情况选择合适的方式来处理异步操作,以实现高效、可读和易于维护的代码。
|
2月前
|
JavaScript 前端开发
JavaScript 函数语法
JavaScript 函数是使用 `function` 关键词定义的代码块,可在调用时执行特定任务。函数可以无参或带参,参数用于传递值并在函数内部使用。函数调用可在事件触发时进行,如用户点击按钮。JavaScript 对大小写敏感,函数名和关键词必须严格匹配。示例中展示了如何通过不同参数调用函数以生成不同的输出。
|
2月前
|
存储 JavaScript 前端开发
JS函数提升 变量提升
【10月更文挑战第6天】函数提升和变量提升是 JavaScript 语言的重要特性,但它们也可能带来一些困惑和潜在的问题。通过深入理解和掌握它们的原理和表现,开发者可以更好地编写和维护 JavaScript 代码,避免因不了解这些机制而导致的错误和不一致。同时,不断提高对执行上下文等相关概念的认识,将有助于提升对 JavaScript 语言的整体理解和运用能力。
|
2月前
|
存储 JavaScript 前端开发
JavaScript数据类型全解:编写通用函数,精准判断各种数据类型
JavaScript数据类型全解:编写通用函数,精准判断各种数据类型
52 0
|
JavaScript
js截取,拼接,字符串方法
js截取,拼接,字符串方法
|
3月前
|
存储 JavaScript
js切割截取字符串方法
js切割截取字符串方法
63 2