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

目录
相关文章
|
7天前
|
JavaScript
JS 获取对象数据类型的键值对的键与值
JS 获取对象数据类型的键值对的键与值
|
7天前
|
JavaScript 前端开发 索引
JavaScript中与字符串相关的方法
JavaScript中与字符串相关的方法
|
2天前
|
JavaScript
【Js】检查Date对象是否为Invalid Date
【Js】检查Date对象是否为Invalid Date
5 0
|
2天前
|
存储 JavaScript 前端开发
JavaScript的引用数据类型主要包括对象
【4月更文挑战第16天】JavaScript的引用数据类型主要包括对象
9 4
|
7天前
|
JavaScript
js 字符串String转对象Object
该代码示例展示了如何将一个以逗号分隔的字符串(`'1.2,2,3,4,5'`)转换为对象数组。通过使用`split(',')`分割字符串并`map(parseFloat)`处理每个元素,将字符串转换成浮点数数组,最终得到一个对象数组,其类型为`object`。
|
2月前
|
JavaScript
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
27 0
|
2月前
|
消息中间件 Web App开发 JavaScript
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
70 0
|
3天前
|
JavaScript 前端开发 应用服务中间件
node.js之第一天学习
node.js之第一天学习
|
30天前
|
运维 JavaScript 前端开发
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
|
1月前
|
前端开发 搜索推荐 JavaScript
编程笔记 html5&css&js 001 学习编程从网页开始
编程笔记 html5&css&js 001 学习编程从网页开始