JavaScript数组(Array)方法 - toReversed、toSorted、toSpliced

news2024/10/7 6:47:55

在这里插入图片描述

最近发现几个数组方法,是一些常规方法的升级版,比较有意思,分享给大家

文章目录

  • 一、温故
  • 二、知新
      • `toReversed`
      • `toSorted`
      • `toSpliced`

一、温故

  • 我们先来回顾几个比较常用的方法:reversesortsplice
  • 众所周知,reverse:翻转数组,sort:数组排序,splice:删除指定位置的元素并可选的替换成新元素。
  • 他们都有一个共同的特点就是都会改变原数组。
const reverseArr = ["a", "b", "c"];
console.log( reverseArr.reverse() );// 返回值:['c', 'b', 'a']
console.log( reverseArr );          // 原数组:['c', 'b', 'a']

const sortArr = [5, 3, 6, 2, 7];
console.log( sortArr.sort() );      // 返回值:[2, 3, 5, 6, 7]
console.log( sortArr );             // 原数组:[2, 3, 5, 6, 7]

const spliceArr = [1, 2, 3, 4, 5];
console.log( spliceArr.splice( 2, 2, "a", "b" ) );  // 返回值:[3, 4]
console.log( spliceArr );           // 原数组:[1, 2, 'a', 'b', 5]
  • 如果你在对数组进行翻转、排序、删除并替换新元素时,不准备修改原数组。那么只能提前将数组拷贝一份,还需要注意深浅拷贝带来的影响。
const reverseArr = ["a", "b", "c"];
console.log( [...reverseArr].reverse() );// 返回值:['c', 'b', 'a']
console.log( reverseArr );               // 原数组:['a', 'b', 'c']
  • 此处借助了展开运算符拷贝数组。

二、知新

  • 今天要介绍的这几个新方法,就完美的解决了上面的问题。

toReversed

  • reverse方法的升级版,返回值为翻转后的新数组,不改变原数组
const reverseArr = ["a", "b", "c"];
console.log( reverseArr.toReversed() ); // 返回值:['c', 'b', 'a']
console.log( reverseArr );              // 原数组:['a', 'b', 'c']

toSorted

  • sort方法的升级版,返回值为排序之后的新数组,不改变原数组
const sortArr = [5, 3, 6, 2, 7];
console.log( sortArr.toSorted() );  // 返回值:[2, 3, 5, 6, 7]
console.log( sortArr );             // 原数组:[5, 3, 6, 2, 7]

toSpliced

  • splice的升级版,返回值为删除并替换后的新数组,不改变原数组
    • 因为返回了操作后的新数组,所以无法获取被删除的元素
const spliceArr = [1, 2, 3, 4, 5];
console.log( spliceArr.toSpliced( 2, 2, "a", "b" ) );  // 返回值:[1, 2, 'a', 'b', 5]
console.log( spliceArr );           // 原数组:[1, 2, 3, 4, 5]
  • 这三个方法,除了 返回值 和 对原数组的影响 外,其 参数 和 功能 并无差异。
  • 这对于我们需要修改数组并保留原数组的需求来说非常方便:既能减少代码量,还可以节省变量的创建,使我们的代码更加简洁,逻辑更加直观。
    在这里插入图片描述

如果你对数组的其他常规方法了解的不多,也可以先阅读这篇文章【数组方法大全】

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1660343.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

.NET WebService \ WCF \ WebAPI 部署总结 以及 window 服务 调试

一、webservice 部署只能部署IIS上, 比较简单,就不做说明了 二、 WCF 部署 1 部署到IIS 跟部署 webservice 部署方法一样的 wcf 部署2 部署到控制台 要以管理员运行vs,或者 管理员运行 控制台的exe 在控制器项目中 创建IUserInfoService 接口…

Sqli-labs第五,六关

目录 首先找到他们的闭合方式 操作 总结: 第五关根据页面结果得知是字符型但是和前面四关还是不一样是因为页面虽然有东西。但是只有对于请求对错出现不一样页面其余的就没有了。这个时候我们用联合注入就没有用,因为联合注入是需要页面有回显位。如果…

漫威争锋Marvel Rivals怎么搜索 锁区怎么搜 游戏搜不到怎么办

即将问世的《漫威争锋》(Marvel Rivals)作为一款万众期待的PvP射击游戏新星,荣耀携手漫威官方网站共同推出。定档5月11日清晨9时,封闭Alpha测试阶段将正式揭开序幕,持续时间长达十天之久。在此首轮测试窗口&#xff0c…

神经网路与深度学习

1 深度学习简述 机器学习:相当于把公式实现出来了而已。 深度学习: (1)中的特征工程使机器学习更智能。 (2)真正能学什么样的特征才是最合适的。 (3)主要应用于计算机视觉和自然语…

QA测试开发工程师面试题满分问答22: (干货)为什么要加锁Lock,举个例子说说

加锁原因 下面代码会有什么问题? import threading import requests from queue import Queuedef make_request(url, params, results_queue):response requests.get(url, paramsparams)result {url: url,params: params,response: response.text}results_queue…

官方文档k8s1.30安装部署高可用集群,kubeadm安装Kubernetes1.30最新版本

文章目录 节点架构一、准备开始(每一台机器都执行)1️⃣ 检查所需端口(可以直接关闭防火墙放开所有端口)端口和协议控制面工作节点 关闭防火墙关闭 SELinux 2️⃣ 安装containerd容器containerd部署containerd切换为国内源 3️⃣ 设置/etc/hosts 二、安装 kubeadm、kubelet 和 …

4大遥感软件!遥感影像解译!ArcGIS+ENVI+Erdas+eCognition

包含ArcGISENVIErdaseCognition 4大软件4个课程的遥感影像大综合,一个课程套餐让你学遍常用的遥感影像处分析等。 课后答疑 学习群答疑 实战驱动 课件、课程操作数据 福利数据包 课程概述 总共146(18454538)课时 点下如下课程卡学习&…

5.07 Pneumonia Detection in Chest X-Rays using Neural Networks

肺炎诊断是一个耗时的过程,需要高技能的专业人员分析胸部X光片chest X-ray (CXR),并通过临床病史、生命体征和实验室检查确认诊断。 它可以帮助医生确定肺部感染的程度和位置。呼吸道疾病在 X 光片上表现为一处膨胀的不透明区域。然而,由于不…

浅谈操作系统中的重要概念——线程(3)——设计模式

文章目录 一、什么是设计模式?二、单例模式2.1、饿汉模式2.2、懒汉模式2.3、多线程情况下调用 饿汉模式与懒汉模式 谁是安全的??(重点) 三、工厂模式3.1、什么是工厂模式?3.1.1、构造方法存在的缺陷3.1.1.1…

初步了解Kubernetes

目录 1. K8S概述 1.1 K8S是什么 1.2 作用 1.3 由来 1.4 含义 1.5 相关网站 2. 为什么要用K8S 3. K8S解决的问题 4. K8S的特性 5. Kubernetes集群架构与组件 6. 核心组件 6.1 Master组件 6.1.1 Kube-apiserver 6.1.2 Kube-controller-manager 6.1.3 kube-schedul…

基于springboot实现智慧图书管理系统项目【项目源码+论文说明】

基于springboot实现智慧图书管理系统演示 摘要 如今社会上各行各业,都在用属于自己专用的软件来进行工作,互联网发展到这个时候,人们已经发现离不开了互联网。互联网的发展,离不开一些新的技术,而新技术的产生往往是为…

企业数据有什么价值?

在当下的数字经济时代,数据已上升为国家重要的基础性战略资源,加快建设数字中国、网络强国这一蓝图的实现,离不开数据要素的支撑。数据作为新型生产要素,具有非消耗性、非竞争性等特征,为突破传统生产要素的增长约束提…

SolidWorks2024 正版软件报价

随着科技的飞速发展,三维设计软件在制造业、工程领域的应用越来越广泛。SolidWorks作为一款三维CAD设计软件,其每一代的更新都受到广大用户的热烈关注。今日,我们将深入探讨SolidWorks 2024正版软件的报价及其所蕴含的功能价值。 首先&#…

光检测器——光纤通信学习笔记七

光检测器 光检测器的基本介绍 作用:把接受到的光信号转换成电信号 光接收器的灵敏度、光源的发光功率和光纤的损耗三者决定了光纤通信的传输距离; 光电二极管 光电转换的基本原理 之前提到,PN结由于内部载流子的扩散运动形成了内部电场&…

uni-app(五):原生插件打包并使用(Android)

原生插件打包并使用 解决Gradle不显示命令问题解决方法 运行打包查看打包好的包引入到uni-app项目中编写配置文件TestModuleTestComponent 制作基座并运行 解决Gradle不显示命令问题 解决方法 运行打包 查看打包好的包 引入到uni-app项目中 编写配置文件 TestModule {"n…

postgresql主从复制

用vmware 搭建的两台虚拟机 操作系统:Ubuntu 24.04 Server版 数据库:postgresql 16.2 主库:192.168.2.11 从库:192.168.2.12 如果遇到网络无法上网,可参考一下 Vmware 搭建的Ubuntu 24.04 网络配置-CSDN博客 1.两…

错误处理机制——vba(vb.net)

程序出现错误时可采用如下错误处理机制:出错时跳到标签处,判断错误类型修正错误,重新返回正确标签处,继续运行程序。 代码如下: Private Sub Button2_Click(sender As Object, e As EventArgs) Handles Button2.Click…

CLI举例:配置HTTP服务器的负载均衡

CLI举例:配置HTTP服务器的负载均衡 本举例介绍了如何配置HTTP服务器的负载均衡。 组网需求 如图1所示,企业有三台Web服务器Server1、Server2和Server3,且这三台服务器的硬件性能顺次降低,Server1性能是Server2的两倍、Server2性能…

苹果新品发布会速览:iPad革新遇市场挑战 | 百能云芯

北京时间5月7日晚,苹果以“放飞吧”为主题,举办了一场不到40分钟的线上新品发布会。在这场发布会上,iPad产品线成为了焦点,M4芯片和OLED技术的融入更是引起了广泛关注。 iPad新篇章:技术革新与市场竞争 时隔18个月&…

Linux环境下部署vsftp+mysql用户认证

安装mysql(不要使用红帽的RPM版的mysql) 使用编译或静态库安装mysql 1、编译安装pam_mysql 下载软件: http://downloads.sourceforge.net/project/pam-mysql/pam-mysql/0.7RC1/pam_mysql-0.7RC1.tar.gz?rhttp%3A%2F%2Fsourceforge.net%2Fprojects%2Fpam-mysql%2F…