脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → ES  扩展运算符介绍

JS ES新特性 扩展运算符介绍

 更新时间：2021年12月02日 11:09:52   作者：一碗周  
这篇文章主要介绍了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'] : []),
  'b',
];
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' ]

值得注意的是，这两种方式都是浅复制

3、与解耦赋值结合使用

扩展运算符可以与解构赋值结合起来，用于生成数组(用于取剩余数据)。

注意 ：只能将扩展运算符放置最后。

示例代码如下所示：

// 场景分析：取数组中的第一个值和最后一个值
let arr = [1, 2, 3, 4, 5]
let first, rest;
// ES5 的写法：借用 Array.slice() 函数
first = arr[0]
rest = arr.slice(1)
console.log(first, rest); // 1 [ 2, 3, 4, 5 ]
// ES6 的写法
[first, ...rest] = arr
console.log(first, rest); // 1 [ 2, 3, 4, 5 ]

4、将字符串拆分为数组

扩展运算符还可以将字符串转为真正的数组。示例代码如下所示：

let str = '狐妖小红娘'
console.log([...str]); // [ '狐', '妖', '小', '红', '娘' ]

到此这篇关于JS ES新特性 扩展运算符介绍的文章就介绍到这了,更多相关ES  扩展运算符介绍内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 快速使用Bootstrap搭建传送带

    快速使用Bootstrap搭建传送带

    这篇文章主要介绍了快速使用Bootstrap搭建传送带的相关资料,非常具有参考借鉴价值，需要的朋友可以参考下
    2016-05-05
  • JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面

    JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面

    这篇文章主要介绍了JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面的代码，代码比较简单，好理解，需要的朋友可以参考下
    2016-08-08
  • 详解webpack的配置文件entry与output

    详解webpack的配置文件entry与output

    本篇文章主要介绍了webpack的配置文件entry与output，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • 浅谈js函数的多种定义方法与区别

    浅谈js函数的多种定义方法与区别

    下面小编就为大家带来一篇浅谈js函数的多种定义方法与区别。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • 一个JS翻页效果

    一个JS翻页效果

    一个JS翻页效果...
    2007-07-07
  • js实现鼠标点击左上角滑动菜单效果代码

    js实现鼠标点击左上角滑动菜单效果代码

    这篇文章主要介绍了js实现鼠标点击左上角滑动菜单效果代码,涉及JavaScript基于鼠标事件动态变换页面元素样式的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • 详解JS如何使用Promise缓存网络请求

    详解JS如何使用Promise缓存网络请求

    网络请求是现代Web应用中的常见操作,很多时候需要获取服务器上的数据,在进行网络请求时,为了减轻服务器的压力,缓存策略常被用来避免对同一数据的重复请求,本文将探讨如何使用Promise结合缓存来高效处理网络请求,需要的朋友可以参考下
    2023-12-12
  • JS实现在线ps功能详解

    JS实现在线ps功能详解

    这篇文章主要介绍了JS实现在线ps功能详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07
  • JS实现动态添加外部js、css到head标签的方法

    JS实现动态添加外部js、css到head标签的方法

    这篇文章主要介绍了JS实现动态添加外部js、css到head标签的方法,涉及javascript针对页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
    2019-06-06
  • Bootstrap3 多个模态对话框无法显示的解决方案

    Bootstrap3 多个模态对话框无法显示的解决方案

    这篇文章主要介绍了Bootstrap3 多个模态对话框无法显示的解决方案,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2017-02-02

最新评论