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

在这里插入图片描述

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

文章目录

  • 一、温故
  • 二、知新
      • `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.mzph.cn/web/9846.shtml

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

相关文章

luceda ipkiss教程 69:导出器件或者线路的三维模型

ipkiss 3.12版加入write_obj函数,可以直接输出器件的三维模型。 如,输出自定义的mmi的三维模型: 代码如下: from si_fab import all as pdk from ipkiss3 import all as i3class MMI1x2(i3.PCell):"""MMI with …

kaldi学习参考

HMM模型 https://www.cnblogs.com/baixf-xyz/p/16777438.htmlhttps://www.cnblogs.com/baixf-xyz/p/16777438.htmlGMM-HMM 基于GMM-HMM的语音识别系统https://www.cnblogs.com/baixf-xyz/p/16777439.html https://www.cnblogs.com/baixf-xyz/p/16777426.htmlhttps://www.cnbl…

全栈开发之路——前端篇(6)生命周期和自定义hooks

全栈开发一条龙——前端篇 第一篇:框架确定、ide设置与项目创建 第二篇:介绍项目文件意义、组件结构与导入以及setup的引入。 第三篇:setup语法,设置响应式数据。 第四篇:数据绑定、计算属性和watch监视 第五篇 : 组件…

码一点网站

Linux命令查询网站 https://www.lzltool.com/LinuxCommand/Index 小林 x 图解计算机基础 https://xiaolincoding.com/ 代码随想录 https://programmercarl.com/ 可用于爬虫 https://books.toscrape.com/ 数据结构可视化 https://www.cs.usfca.edu/~galles/visualization/ …

fastText-文本分类

fastText介绍 fastText是一个快速文本分类算法,与基于神经网络的分类算法相比有两大优点: 1、fastText在保持高精度的情况下加快了训练速度和测试速度 2、fastText不需要预训练好的词向量,fastText会自己训练词向量 3、fastText两个重要的优化:Hierarchical Softmax、N-gr…

387.字符串中的第一个唯一字符

刷算法题: 第一遍:1.看5分钟,没思路看题解 2.通过题解改进自己的解法,并且要写每行的注释以及自己的思路。 3.思考自己做到了题解的哪一步,下次怎么才能做对(总结方法) 4.整理到自己的自媒体平台。 5.再刷重复的类…

YUV中Y颜色模型的采样

YUV的特点 相对于表示颜色的GUI, YUI将亮度(用Y表示)与色调(用U和V表示)分开来表示。又因为人类视网膜上的视网膜杆细胞要多于视网膜锥细 胞,说得通俗一些,视网膜杆细胞的作用就是识别亮度&…

LabVIEW MEMS电容式压力传感器测试系统

LabVIEW MEMS电容式压力传感器测试系统 随着微电子技术的发展,MEMS(微电机系统)技术在各个领域得到了广泛应用。MEMS电容式压力传感器以其高灵敏度、小尺寸、低功耗等优点,在微传感器领域占据了重要的地位。然而,这些…

Smma-net:一种基于音频线索的目标说话人提取网络,具有谱图匹配和相互关注功能

SMMA-NET: AN AUDIO CLUE-BASED TARGET SPEAKER EXTRACTION NETWORK WITH SPECTROGRAM MATCHING AND MUTUAL ATTENTION 第二章 目标说话人提取之《Smma-net:一种基于音频线索的目标说话人提取网络,具有谱图匹配和相互关注功能》 文章目录 SMMA-NET: AN AUDIO CLUE-…

程序员的多维智慧:技术修炼、人际交往与投资哲学

程序员不应该只会埋头敲代码,要多看看书,多学习... 1.程序员技术 保持严谨的作风,实事求是,记录现象,找准依据,可以做出假设,问题的解释和结论必须能完整、全面符合现象和各种认知逻辑。 绝不…

【算法入门赛】B. 自助店评分(C++、STL、推荐学习)题解与代码

比赛地址:https://www.starrycoding.com/contest/8 题目描述 在上一场的入门教育赛中,牢 e e e找到了所有自助店的位置,但是他想发现一些“高分好店”,于是他利用爬虫技术从“小众点评APP”中爬取了武汉所有自助店的评分。 评分…

Python 机器学习 基础 之 构建第一个机器学习应用

Python 机器学习 基础 之 构建第一个机器学习应用 目录 Python 机器学习 基础 之 构建第一个机器学习应用 一、简单介绍 二、第一个机器学习测试应用介绍:鸢尾花分类 三、第一个机器学习测试应用 :前置环境,知识点介绍 jupyter notebo…

mamba-ssm安装卡着不动

项目中用到Mamba的小伙伴,causal_conv1d和 mamba-ssm两个包,但是会卡在Building wheel for mamba-ssm (setup.py) : 为了探究卡在了building的哪一步,加入–verbose进行显示: pip install mamba-ssm --no-cache-dir -…

Linux 安装JDK和Idea

安装JDK 下载安装包 下载地址: Java Downloads | Oracle (1) 使用xshell 上传JDK到虚拟机 (2) 移动JDK 包到/opt/environment cd ~ cd /opt sudo mkdir environment # 在 /opt下创建一个environment文件夹 ls# 复制JDK包dao /opt/environment下 cd 下载 ls jd…

openGauss学习笔记-279 openGauss性能调优-实际调优案例08-改写SQL消除in-clause

文章目录 openGauss学习笔记-279 openGauss性能调优-实际调优案例08-改写SQL消除in-clause279.1 现象描述279.2 优化说明openGauss学习笔记-279 openGauss性能调优-实际调优案例08-改写SQL消除in-clause 279.1 现象描述 in-clause/any-clause是常见的SQL语句约束条件,有时in…

Jmeter性能测试(三)

token鉴权处理 1、添加json提取器 2、写jsonpath表达式在响应Body中提取鉴权token token:变量名,可以直接引用 $…token:token数据在响应中的字段名称,根据自己情况写就行 3、将提取出来的token添加到请求头中 重点&#xff…

postman常用功能超全使用教程

Postman 使用 一、Postman 简介 Postman是一个接口测试工具,在做接口测试的时候,Postman相当于一个客户端,它可以模拟用户发起的各类HTTP请求(如:get/post/delete/put…等等),将请求数据发送至服务端,获取对应的响应结果。 二、Postman 功能简介 三、Postman 下载安装 Post…

ssrf(第二弹)

四,post请求 1.打开环境,提示说发一个HTTP POST请求,ssrf是用php的curl实现的.并且会跟踪302跳转。 2.用dirsearch扫一下常见的端口,看到有三个可以访问的页面 3.构造伪协议,因为要通过172.0.0.1访问,我们…

基于OpenCV对胸部CT图像的预处理

1 . 传作灵感 胸部CT中所包含的噪声比较多,基于OpenCV简单的做一些处理,降低后续模型训练的难度。 2. 图像的合成 在语义分割任务中有的时候需要将原图(imput)和标注数据(groudtruth)合成一幅图像&#x…

Java——接口的补充

目录 一:接口的注意事项 1. 接口中不能有方法块; 2. 接口没有构造方法: 3.接口是可以多继承的; 4. 多个接口抽象方法重复 5. 类的父类方法与接口方法重复 二:类与接口 1. 继承与实现 2. 多个父接口的抽象…