JS ES新特性 扩展运算符介绍
作者：一碗周
这篇文章主要介绍了JS ES新特性 扩展运算符，下面文章围绕ES新特性 扩展运算符的相关资料展开详细内容,需要的朋友可以参考一下，希望对大家有所帮助
一、扩展运算符
扩展运算符是三个点... , 允许将一个表达式原地展开，当需要多个参数(比如函数的调用时) 或者多个值(比如数组)它会将其转为用逗号分隔的参数序列。
示例代码如下所示：
// 定义一个数组
let arr = [1, 2, 3, 4, 5, 6]
// 使用 ... 扩展运算符展开
console.log(...arr); // 1 2 3 4 5 6
// 定义一个函数
function fun(...item) {
console.log(...item);
// 调用函数
fun(1, 2, 3, 4, 5, 6) // 1 2 3 4 5 6
// 与表达式配合使用
let x = 10
arr = [
...(x > 0 ? ['a'] : []),
console.log(...arr); //a b
二、替代apply()方法
由于扩展运算符可以展开数组，所以不再需要
apply
方法，将数组转为函数的参数了。
示例代码如下所示：
// 定义一个函数
function fun(a, b, c, d, e) {
console.log(a, b, c, d, e);
// 定义一个数组
let arr = [1, 2, 3, 4, 5]
// ES5 调用方式
fun.apply(null, arr) //1 2 3 4 5
// ES6 调用方式
fun(...arr) // 1 2 3 4 5
假如我们在实际开发中取出数组中的最大值，采用的方式如下所示：
let arr = [1, 20, 30, 50, 3, 88, ]
// ES5的写法
let max = Math.max.apply(null, arr)
console.log(max); // 88
E的写法如下所示：
let arr = [1, 20, 30, 50, 3, 88, ]
// ES6 的写法
let max = Math.max(...arr)
console.log(max); // 88
扩展数组的应用主要表现在以下几个方面
1、复制数组
在
ECMAScript 2015
之前中如果仅仅是简单的将arr1赋值给arr2，修改arr2时，arr1也会进行变化，这就是所谓的浅复制 ，
示例代码如下所示：
先来理解一下深浅复制的概念：
深复制
：复制数组中的元素内容
浅复制
：复制数组元素内容的内存地址
let arr1 = [1, 2, 3, 4, 5]
let arr2 = arr1
console.log(arr2); // [ 1, 2, 3, 4, 5 ]
// 修改 arr2 的数据内容
arr2[2] = 6;
// 两者都会发生改变
console.log(arr1, arr2); // [ 1, 2, 6, 4, 5 ] [ 1, 2, 6, 4, 5 ]
如果想要完成深复制，示例代码如下所示：
let arr1 = [1, 2, 3, 4, 5]
let arr2 = []
// ES5 写法
for (let i = 0; i < arr1.length; i++) {
arr2[i] = arr1[i];
arr2[2] = 6;
// 仅仅 arr2 改变
console.log(arr1, arr2); // [ 1, 2, 3, 4, 5 ] [ 1, 2, 6, 4, 5 ]
// ES6 写法
arr2 = [...arr1]
arr2[2] = 6;
// 仅仅 arr2 改变
console.log(arr1, arr2); // [ 1, 2, 3, 4, 5 ] [ 1, 2, 6, 4, 5 ]
2、合并数组
扩展运算符提供了数组合并的新写法。示例代码如下所示：
const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];
// ES5 的合并数组
console.log(arr1.concat(arr2, arr3)); // [ 'a', 'b', 'c', 'd', 'e' ]
// ES6 的合并数组
console.log([...arr1, ...arr2, ...arr3]); // [ 'a', 'b', 'c', 'd', 'e' ]
使用JavaScript实现响应式计数器动画
2022-08-08
微信小程序的WXSS和全局、页面配置详细讲解
2022-08-08
JavaScript进阶教程之非extends的组合继承详解
2022-08-08
JavaScript求解最长回文子串的方法分享
2022-08-08
JavaScript遍历对象的七种方法汇总
2022-08-08
JavaScript制作简单网页计算器
2022-08-08
js实现简易计数器功能
2022-08-08
小程序开发 page-container 页面容器弹出对话框功能的实现
2022-08-08
美国设下计谋,用娘炮文化重塑日本,已影响至中国
2021-11-19
时空伴随者是什么意思?时空伴随者介绍
2021-11-09
工信部称网盘企业免费用户最低速率应满足基本下载需求，天翼云盘回应：坚决支持，始终
2021-11-05
2022年放假安排出炉：五一连休5天 2022年所有节日一览表
2021-10-26
电脑版
-
返回首页
2006-2023 脚本之家 JB51.Net , All Rights Reserved.
苏ICP备14036222号
