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

目录
相关文章
|
8天前
|
前端开发 NoSQL 数据库
部署常用的流程,可以用后端,连接宝塔,将IP地址修改好,本地只要连接好了,在本地上前后端跑起来,前端能够跑起来,改好了config.js资料,后端修改好数据库和连接redis,本地上跑成功了,再改
部署常用的流程,可以用后端,连接宝塔,将IP地址修改好,本地只要连接好了,在本地上前后端跑起来,前端能够跑起来,改好了config.js资料,后端修改好数据库和连接redis,本地上跑成功了,再改
|
10天前
|
存储 JavaScript 前端开发
|
8天前
|
前端开发 NoSQL JavaScript
若依修改---重新部署项目注意事项,新文件初始化需要修改的地方,打包后的文件很难进行修改,如果想要不断修改项目,注意保存原项目,才可以不断修改,前端:在Vue.config.js文件中修改target
若依修改---重新部署项目注意事项,新文件初始化需要修改的地方,打包后的文件很难进行修改,如果想要不断修改项目,注意保存原项目,才可以不断修改,前端:在Vue.config.js文件中修改target
|
8天前
|
前端开发 JavaScript Linux
若依修改之后,无法访问前端项目如何解决,只能访问后端的接口,我的接口8083,端不显示咋解决?在vue.config.js文件中的映射路径要跟后端匹配,到软件商店里找到Ngnix配置代理,设80不用加
若依修改之后,无法访问前端项目如何解决,只能访问后端的接口,我的接口8083,端不显示咋解决?在vue.config.js文件中的映射路径要跟后端匹配,到软件商店里找到Ngnix配置代理,设80不用加
|
9天前
|
前端开发 JavaScript
前端数组遍历循环的资料,let arr = [‘pink‘,‘red‘,‘blue‘] for (let k in arr){console.log(k),console.log(arr[k])}
前端数组遍历循环的资料,let arr = [‘pink‘,‘red‘,‘blue‘] for (let k in arr){console.log(k),console.log(arr[k])}
|
9天前
|
JavaScript
js 简易对象转字符串后恢复为简易对象(如 ^a=$1^b=2转对象)
js 简易对象转字符串后恢复为简易对象(如 ^a=$1^b=2转对象)
8 0
|
9天前
|
前端开发 JavaScript
js 打开资源管理器(经典范例:纯前端选择并预览图片)
js 打开资源管理器(经典范例:纯前端选择并预览图片)
20 0
|
10天前
|
JavaScript
js 数组移除指定元素【函数封装】(含对象数组移除指定元素)
js 数组移除指定元素【函数封装】(含对象数组移除指定元素)
8 0
|
10天前
|
JavaScript
JS 数组去重(含简单数组去重【5种方法】、对象数组去重【2种方法】)
JS 数组去重(含简单数组去重【5种方法】、对象数组去重【2种方法】)
13 0
|
10天前
|
JavaScript 前端开发 测试技术
js 控制台调试——console 对象【详解】
js 控制台调试——console 对象【详解】
14 0