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.mfbz.cn/a/621167.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

信号和槽基本概念

🐌博主主页:🐌​倔强的大蜗牛🐌​ 📚专栏分类:QT❤️感谢大家点赞👍收藏⭐评论✍️ 目录 一、概述 二、信号的本质 三、槽的本质 一、概述 在 Qt 中,用户和控件的每次交互过程称…

【会议征稿】2024年软件自动化与程序分析国际学术会议(SAPA 2024)

目录 1. 会议官方2. 支持单位3. 大会简介4. 大会组委5. 征稿主题6. 会议出版7. 会议议程8. 参会方式9. 更多会议 1. 会议官方 重要信息: 大会官网:www.icsapa.org大会时间:2024.6.14-16日大会地点:中国-大理接受/拒稿通知&#…

品牌舆情都包含什么内容?建议收藏

一个品牌的声誉、形象、产品质量、服务质量等,无时无刻不在接受着大众的检验。互联网传播迅速,一个不好的舆论直接导致整个品牌的声誉受到严重影响。品牌舆情都包含什么内容?接下来伯乐网络传媒就来给大家讲一讲。 一、品牌舆情的基本构成 1…

数据可视化(十):Pandas数据分析师职位信息表分析——箱线图、水平柱状图、学历城市双维分析等高级操作

Tips:"分享是快乐的源泉💧,在我的博客里,不仅有知识的海洋🌊,还有满满的正能量加持💪,快来和我一起分享这份快乐吧😊! 喜欢我的博客的话,记得…

STM32+CubeMX移植HAL库实现SYN6288语音合成模块模块

这里写目录标题 SYN6288语音模块简介引脚定义注意要点CubeMX配置HAL库移植运行结果 SYN6288语音模块简介 SYN6288中文语音合成芯片是北京宇音天下科技有限公司于2010年初推出的一款性/价比更高,效果 更自然的一款中高端语音合成芯片。SYN6288通过异步串口(UART)通讯…

picoCTF-Web Exploitation-Java Code Analysis!?!

Description BookShelf Pico, my premium online book-reading service.I believe that my website is super secure. I challenge you to prove me wrong by reading the ‘Flag’ book!Here are the credentials to get you started: Username: “user”Password: “user” S…

计算机发展史故事【11】

爆发超新星 IBM 号称巨人,竟在巨型机领域败在小小的控制数据公司CDC 手下。在小型机领域,“霸主”DEC 公司的“后院”也曾“起火”,绝非一直风平浪静。 本世纪60 年代末,DEC 公司因开发小型电脑迅速崛起,赢得“小型机…

五子棋对战(网页版)

目录 一、项目背景 用户模块 匹配模块 对战模块 二、核心技术 三、相关知识 WebSocket 原理 报文格式 代码 服务器代码 客户端代码 四、项目创建 4.1、实现用户模块 编写数据库代码 数据库设计 配置MyBatis 创建实体类 创建UserMapper 创建UserMapper接口 实现UserMapper.xml 前…

Android Studio Please select Android SDK

解决方案: 1、打开 SDK Manager 2、选择编辑(Edit) 3、 一直Next,直到完成,解决!

科技查新中的工法查新点如何确立与提炼?案例讲解!

按《工程建设工法管理办法》( 建 质[2014]103 号) ,工法,是指以工程为对象,以工艺为核心,运用系 统工程原理,把先进技术和科学管理结合起来,经过一定工程实践形成的综合配套的施工方…

redis安装与群集

项目需求: 1.安装redis 2.测试redis性能,100个并发连接,100000个请求测试 3.在当前数据库下创建键值对 a11,a22,a33,a44,a55 4.查看键值对 5.将a1改名为a11,将a2删除 5.将a3移动到1号数据库 6搭建redis集群(可选) 测试环境…

如何使用Docker安装并运行Nexus容器结合内网穿透实现远程管理本地仓库

前言 作者简介: 懒大王敲代码,计算机专业应届生 今天给大家聊聊如何使用Docker安装并运行Nexus容器结合内网穿透实现远程管理本地仓库,希望大家能觉得实用! 欢迎大家点赞 👍 收藏 ⭐ 加关注哦!&#x1f496…

vue3组件插槽

Index.vue: <script setup> import { ref, onMounted } from vue import Child from ./Child.vue import ./index.cssonMounted(() > {}) </script><template><div class"m-home-wrap"><Child>插槽</Child><div class&qu…

linux不小心将/etc/passwd用户文件清空或删除解决方法

大概思路&#xff1a;进入单用户模式将passwd-引子程序复制为删除的passwd用户文件&#xff0c;关闭selinux 此系统为&#xff1a;centos 7 1.在GRUB引导的时候按e进入编辑模式&#xff0c;linux16那一行的ro 修改为rw rd.break ‘ ’ 2.ctrlx执行 3.进入单用户模式后修改根…

Cocos 2048从创建到发布上线

一、制作2048小游戏过程 扫描体验2048小游戏 场景搭建&#xff0c;4X4棋盘和基础设置绘制背景板&#xff0c;包含预制体等信息考虑在棋盘中随机出现两个数字方块&#xff0c;数字为2&#xff0c;初始化操作滑动事件部分&#xff0c;让方块移动起来&#xff0c;每滑动一次就生成…

【机器学习与实现】K近邻算法

目录 一、KNN算法简介&#xff08;一&#xff09;KNN算法包括三个步骤&#xff08;二&#xff09;超参数K的影响 二、距离度量三、邻近点的搜索算法四、KNN算法的特点五、KNN常用的参数及其说明六、分类算法的性能度量&#xff08;一&#xff09;混淆矩阵及相关概念&#xff08…

从零创建一个vue2项目

标题从零创建一个vue2项目&#xff0c;项目中使用TensorFlow.js识别手写文字 npm切换到淘宝镜像 npm config set registry https://registry.npm.taobao.org安装vue/cli -g npm install -g vue/cli检查是否安装成功 vue -V创建项目 vue create 项目名安装TensorFlow npm …

韶音、南卡、倍思开放式耳机值得买吗?王牌机型对比测评

今年&#xff0c;开放式耳机市场迎来了众多新品&#xff0c;为消费者提供了丰富的选择。在这样的背景下&#xff0c;正确挑选一款既符合音质需求又兼具佩戴舒适的开放式耳机显得格外关键。作为长期使用开放式耳机的用户&#xff0c;我发现很多人在韶音、南卡、漫步者这三个品牌…

k8s v1.20二进制部署

目录 一、环境准备 二、操作系统初始化配置 2.1.关闭防火墙 ​编辑 2.2.关闭selinux 2.3.关闭swap 2.4.根据规划设置主机名 2.5在master添加hosts 2.6.调整内核参数 2.7.时间同步 三、部署 docker引擎 3.1.所有 node 节点部署docker引擎 四、部署 etcd 集群 4.1.…

【数据库】docker搭建mysql8一主两从节点,配置proxysql读写分离

docker搭建mysql8一主两从节点&#xff0c;配置proxysql读写分离 一、docker 搭建 mysql8 一主两从节点1.1 相关配置文件与docker启动1.2 半同步复制1.3 主从同步异常处理 二、mysql 中间件 ProxySql 配置读写分离2.1 在mysql服务里创建给proxySQL访问的用户2.2 安装ProxySql及…