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

JavaScript数组之展开运算符详解

 更新时间：2023年12月18日 11:34:28   作者：远近高低各不同  
这篇文章主要给大家介绍了关于JavaScript数组之展开运算符的相关资料,你可以通过展开操作符(Spread operator)扩展一个数组对象和字符串,文中通过代码介绍的非常详细,需要的朋友可以参考下

展开运算符是什么？有什么作用？

展开运算符可以将一个数组展开

    const arr = [1,2,3,4,5]
    // 我们使用...展开数组
    console.log(...arr) //1 2 3 4 5

它不会修改原数组

典型运用场景：求数组最大值、最小值、合并数组等会让我们代码更加简洁

最大值

    const arr = [1,2,3,4,5]
    //...arr 等价于 1,2,3,4,5
    console.log(Math.max(...arr)) // 5

最小值

    const arr = [1,2,3,4,5]
    //...arr 等价于 1,2,3,4,5
    console.log(Math.min(...arr)) // 1

合并

    const arr1 = [1,2,3]
    const arr2 = [4,5,6]
    const arr = [...arr1,...arr2]
    console.log(arr) //[1, 2, 3, 4, 5, 6]

附：js 数组展开对象去重

在JavaScript中，可以使用数组展开运算符（Spread Operator）和Set数据结构来实现数组展开对象去重。下面是实现的步骤：

  • 定义一个包含重复对象的数组。
  • 使用数组展开运算符将数组展开为一个新的数组。
  • 使用Set数据结构去除数组中的重复项。
  • 将Set转换回数组。

以下是代码示例：

let arr = [
  {id: 1, name: '张三'},
  {id: 2, name: '李四'},
  {id: 1, name: '张三'},
  {id: 3, name: '王五'}
];

let uniqueArr = [...new Set([...arr])];

console.log(uniqueArr);
// 输出: [{id: 1, name: '张三'}, {id: 2, name: '李四'}, {id: 3, name: '王五'}]

在上面的代码中，我们使用了数组展开运算符将原始数组展开为一个新的数组。然后，我们使用Set数据结构去除了数组中的重复项。最后，我们将Set转换回数组，并将结果赋值给uniqueArr变量。最终，uniqueArr将包含去重后的对象数组。

总结 

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

您可能感兴趣的文章:

相关文章

  • 轻松掌握JavaScript装饰者模式

    轻松掌握JavaScript装饰者模式

    这篇文章主要帮助大家轻松掌握JavaScript装饰者模式，告诉大家什么是js装饰者模式，感兴趣的小伙伴们可以参考一下
    2016-08-08
  • 微信小程序实现消息框弹出动画

    微信小程序实现消息框弹出动画

    这篇文章主要为大家详细介绍了微信小程序实现消息框弹出动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-06-06
  • 不用ajax实现点击文字即可编辑的方法

    不用ajax实现点击文字即可编辑的方法

    本文给大家分享一段代码不使用ajax实现点击文字即可编辑的方法，代码简单易懂，需要的朋友参考下吧
    2007-12-12
  • js对象数组按属性快速排序

    js对象数组按属性快速排序

    前一篇《关于selector性能比赛》中提到，目测觉得在$("div,p,a")这样有逗号时，sizzle耗时异常（600多个元素，花了200ms），说是它可能没有优化ie下的排序。
    2011-01-01
  • 微信JSSDK上传图片

    微信JSSDK上传图片

    做过微信开发的都知道，在部分android机型里微信不支持网页上传图片的，这是由于这些机型的文件上传存在内存泄漏，会导致微信闪退，所以微信内置浏览器将文件上传屏蔽，本篇文章给大家介绍使用微信jssdk如何上传图片，需要的朋友可以关注下
    2015-08-08
  • 页面版文本框智能提示JS代码

    页面版文本框智能提示JS代码

    首先说下背景，该code用于一个多条件查询界面，原本该查询条件由一个下拉列表提供，但是由于下拉列表数据量过大，用户使用不方便，便希望在页面给出一个智能提示的功能，但搜索的数据来自下拉列表
    2009-11-11
  • 判断数组的最佳方法(推荐)

    判断数组的最佳方法(推荐)

    下面小编就为大家带来一篇js判断数组的最佳方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • 原生js实现类似fullpage的单页/全屏滚动

    原生js实现类似fullpage的单页/全屏滚动

    这篇文章主要介绍了利用原生js实现类似fullpage的全屏滚动的实现方法，文中给出了完整的实例代码，相信对大家的理解和学习具有一定的参考价值，需要的朋友们可以参考借鉴，下面来一起看看吧。
    2017-01-01
  • 多个表单中如何获得这个文件上传的网址实现js代码

    多个表单中如何获得这个文件上传的网址实现js代码

    假设一个网页里有多个表单，其中一个表单里有文件上传，问题是如何获得这个文件上传的网址呢，接下来为大家介绍下实现的js代码，感兴趣的朋友可以参考下哈，希望可以帮助到你
    2013-03-03
  • threejs使用canvas更新纹理代码实例

    threejs使用canvas更新纹理代码实例

    在使用three.js开发的过程中,我们常常使用canvas来作为纹理贴图,下面这篇文章主要介绍了如何基于Three.js在三维场景中使用Canvas更新纹理,通过实现思路和代码样例,帮助读者掌握这一技能,需要的朋友可以参考下
    2024-12-12

最新评论