JavaScript数组中会修改原数组的方法有哪些？

前言：

最近跟小伙伴们一起讨论的时候遇见了一个问题：JavaScript中对原数组有影响的数组原生方法有哪些呢？对原数组没有影响的数组原生方法又有哪些呢？我翻阅了很多篇博客，我发现并没有总结特别全面的，我就利用了半个小时把数组的所有方法都测试了一遍，总结如下：

对原数组有影响的数组原生方法有：

push() pop() unshift() shift() splice() reverse() sort() fill()

扩展：数组中不会影响原数组的方法有哪些？

concat() join() slice() forEach() map() filter() reduce() reduceRight() every() some() find() findIndex() keys() entries() values() from() includes()  isArray() lastIndexOf() toString() valueOf()

代码测试如下：

1.会修改原数组的方法：
1.1push()向数组的末尾添加一个或更多元素，并返回新的长度。
let arr = [0, 1, 4, 2, 5, 3];
console.log(arr);//[ 0, 1, 4, 2, 5, 3 ]
let push = arr.push(4);
console.log(push);//7
console.log(arr);//[ 0, 1, 4, 2, 5, 3, 4]
1.2pop()删除数组的最后一个元素并返回删除的元素。
let arr = [0, 1, 4, 2, 5, 3];
console.log(arr);//[ 0, 1, 4, 2, 5, 3 ]
let pop = arr.pop();
// console.log(pop);//3
console.log(arr);//[ 0, 1, 4, 2, 5 ]
1.3unshift()向数组的开头添加一个或更多元素，并返回新的长度。
let arr = [0, 1, 4, 2, 5, 3];
console.log(arr);//[ 0, 1, 4, 2, 5, 3 ]
let unshift = arr.unshift(0);
console.log(unshift);//7
console.log(arr);//[ 0, 0, 1, 4, 2, 5, 3 ]
1.4shift()删除并返回数组的第一个元素。
let arr = [0, 1, 4, 2, 5, 3];
console.log(arr);//[ 0, 1, 4, 2, 5, 3 ]
let shift = arr.shift();
console.log(shift);//0
console.log(arr);//[ 1, 4, 2, 5, 3 ]
1.5splice()从数组中添加或删除元素。
array.splice(index, howmany, item1, ....., itemX)
index必需。整数，指定在什么位置添加/删除项目，使用负值指定从数组末尾开始的位置。
howmany可选。要删除的项目数。如果设置为 0，则不会删除任何项目。
item1, ..., itemX可选。要添加到数组中的新项目。
let arr = [0, 1, 4, 2, 5, 3];
console.log(arr);//[ 0, 1, 4, 2, 5, 3 ]
let splice = arr.splice(2, 0, 7, 9);
console.log(splice);//[]
console.log(arr);//[1, 4, 7, 9, 2, 5, 3 ]
1.6reserve()反转数组的元素顺序。
let arr = [0, 1, 4, 2, 5, 3];
console.log(arr);//[ 1, 4, 2, 5, 3 ]
let reverse = arr.reverse();
console.log(reverse);//[ 3, 5, 2, 4, 1 ]
console.log(arr);//[ 3, 5, 2, 4, 1 ]
1.7sort()对数组的元素进行排序
let arr = [0, 1, 4, 2, 5, 3];
console.log(arr);//[ 1, 4, 2, 5, 3 ]
let sort = arr.sort((a, b) => {return a - b;
})
console.log(sort);//[ 1, 2, 3, 4, 5 ]
console.log(arr);//[ 1, 2, 3, 4, 5 ]
1.8fill()使用一个固定值来填充数组
let arr = [0, 1, 4, 2, 5, 3];
console.log(arr);//[ 1, 4, 2, 5, 3 ]
let newArr = arr.fill(0);
console.log(newArr);//[ 0, 0, 0, 0, 0, 0 ]
console.log(arr);//[ 0, 0, 0, 0, 0, 0 ]
2.不会修改原数组的方法：
2.1concat()连接两个或更多的数组，并返回结果
let arr = [0, 1, 4, 2, 5, 3];
let ay = [6, 7, 8, 9, 10];
console.log(arr);//[ 0, 1, 4, 2, 5, 3 ]
console.log(ay);//[ 6, 7, 8, 9, 10 ]
console.log(arr.concat(ay));//[ 0, 1, 4, 2, 5, 3, 6, 7, 8, 9, 10]
console.log(arr);//[ 0, 1, 4, 2, 5, 3 ]
console.log(ay);//[ 6, 7, 8, 9, 10 ]
2.2join()连接两个或更多的数组，并返回结果
let arr = [0, 1, 4, 2, 5, 3];
console.log(arr);//[0, 1, 4, 2, 5, 3]
let join = arr.join("");
console.log(typeof join);// string
console.log(typeof arr, arr);//object [ 0, 1, 4, 2, 5, 3 ]
2.3slice()选取数组的一部分，并返回一个新数组
let arr = [0, 1, 4, 2, 5, 3];
console.log(arr);//[0, 1, 4, 2, 5, 3]
let slice = arr.slice(1, 3);
console.log(slice);//[1, 4]
console.log(arr);//[0, 1, 4, 2, 5, 3]
2.4forEach()数组每个元素都执行一次回调函数
let arr = [0, 1, 4, 2, 5, 3];
console.log(arr);//[ 1, 4, 2, 5, 3 ]
arr.forEach(element => {console.log(element);  
});
//1
//4
//2
//5
//3
console.log(arr);//[ 1, 4, 2, 5, 3 ]
2.5map()通过指定函数处理数组的每个元素，并返回处理后的数组
let arr = [0, 1, 4, 2, 5, 3];
console.log(arr);//[ 1, 4, 2, 5, 3 ]
let map = arr.map(item => {return Math.sqrt(item);
})
console.log(map); //[ 0, 1, 2, 1.4142135623730951, 2.23606797749979, 1.7320508075688772 ]
console.log(arr);//[ 1, 4, 2, 5, 3 ]
2.6filter()检测数值元素，并返回符合条件所有元素的数组
let arr = [0, 1, 4, 2, 5, 3];
console.log(arr);//[ 1, 4, 2, 5, 3 ]
let filterArr = arr.filter(item => {return item > 3;
})
console.log(filterArr);//[ 4, 5 ]
console.log(arr);//[ 1, 4, 2, 5, 3 ]
2.7reduce()将数组元素计算为一个值（从左到右）
let arr = [0, 1, 4, 2, 5, 3];
console.log(arr);//[ 1, 4, 2, 5, 3 ]
let reduce = arr.reduce((total, item) => {return total - item;
})
console.log(reduce);//-15
console.log(arr);//[ 1, 4, 2, 5, 3 ]
2.8reduceRight()将数组元素计算为一个值（从右到左）
let arr = [0, 1, 4, 2, 5, 3];
console.log(arr);//[ 1, 4, 2, 5, 3 ]
let reduceRight = arr.reduceRight((total, item) => {return total - item;
})
console.log(reduceRight);//-9
console.log(arr);//[ 1, 4, 2, 5, 3 ]
2.9every()检测数值元素的每个元素是否都符合条件
let arr = [0, 1, 4, 2, 5, 3];
console.log(arr);//[ 1, 4, 2, 5, 3 ]
let everyFlag = arr.every(item => {return item > 3;
})
console.log(everyFlag);//false
console.log(arr);//[ 1, 4, 2, 5, 3 ]
2.10some()检测数组元素中是否有元素符合指定条件
let arr = [0, 1, 4, 2, 5, 3];
console.log(arr);//[ 1, 4, 2, 5, 3 ]
let someFlag = arr.some(item => {return item > 7;
})
console.log(someFlag);//true
console.log(arr);//[ 1, 4, 2, 5, 3 ]
2.11find()返回符合传入测试（函数）条件的数组元素
let arr = [0, 1, 4, 2, 5, 3];
console.log(arr);//[ 1, 4, 2, 5, 3 ]
let findElement = arr.find((item) => {return item > 3
})
console.log(findElement);//4
console.log(arr);//[ 1, 4, 2, 5, 3 ]
2.12findIndex()返回符合传入测试（函数）条件的数组元素索引
let arr = [0, 1, 4, 2, 5, 3];
console.log(arr);//[ 1, 4, 2, 5, 3 ]
let findIndex = arr.findIndex(item => {return item > 3;
})
console.log(findIndex);//2
console.log(arr);//[ 1, 4, 2, 5, 3 ]
2.13keys()返回数组的可迭代对象，包含原始数组的键(key)
let arr = [0, 1, 4, 2, 5, 3];
console.log(arr);//[ 1, 4, 2, 5, 3 ]
for (let item of ay.keys()) {console.log(item);
}
//0
//1
//2
//3
//4
//5
console.log(arr);//[ 1, 4, 2, 5, 3 ]
2.14entries()返回数组的可迭代对象
let arr = [0, 1, 4, 2, 5, 3];
console.log(arr);//[ 1, 4, 2, 5, 3 ]
for (let item of arr.entries()) {console.log(item);
}
//[ 0, 0 ]
//[ 1, 1 ]
//[ 2, 4 ]
//[ 3, 2 ]
//[ 4, 5 ]
//[ 5, 3 ]
console.log(arr);//[ 1, 4, 2, 5, 3 ]
2.15values()返回数组对象的原始值
let arr = [0, 1, 4, 2, 5, 3];
console.log(arr);//[ 1, 4, 2, 5, 3 ]
for (let item of ay.values()) {console.log(item);
}
//0
//1
//4
//2
//5
//3
console.log(arr);//[ 1, 4, 2, 5, 3 ]
2.16from()通过给定的对象中创建一个数组
let str = "ABCDEFG"
var myArr = Array.from(str);
console.log(myArr);['A', 'B', 'C','D', 'E', 'F','G']
console.log(str);//ABCDEFG
2.17includes()判断一个数组是否包含一个指定的值
let arr = [0, 1, 4, 2, 5, 3];
console.log(arr);//[ 1, 4, 2, 5, 3 ]
let isIncludes = arr.includes(3);
console.log(isIncludes);//true
console.log(arr);//[ 1, 4, 2, 5, 3 ]
2.18isArray()判断对象是否为数组
let arr = [0, 1, 4, 2, 5, 3];
console.log(arr);//[ 1, 4, 2, 5, 3 ]
let isArray = Array.isArray(arr);
console.log(isArray);//true
console.log(arr);//[ 1, 4, 2, 5, 3 ]
2.19lastIndexOf()搜索数组中的元素，并返回它最后出现的位置
let arr = [0, 1, 4, 2, 5, 3];
console.log(arr);//[ 1, 4, 2, 5, 3 ]
let indexOf = arr.indexOf(4);
console.log(indexOf);//2
console.log(arr);//[ 1, 4, 2, 5, 3 ]
2.20toString()把数组转换为字符串，并返回结果
let arr = [0, 1, 4, 2, 5, 3];
console.log(arr);//[ 1, 4, 2, 5, 3 ]
let toString = arr.toString();
console.log(toString);//1,4,2,5,3
console.log(arr);//[ 1, 4, 2, 5, 3 ]
2.21valueOf()返回数组对象的原始值
let arr = [0, 1, 4, 2, 5, 3];
console.log(arr);//[ 1, 4, 2, 5, 3 ]
let valueOf = arr.valueOf();
console.log(valueOf);//[ 1, 4, 2, 5, 3 ]
console.log(arr);//[ 1, 4, 2, 5, 3 ]

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

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

相关文章

lin_extract_5utr_cds_3utr.py

lin_extract_5utr_cds_3utr.py

1.输入文件为基因组文件和gff3文件，输出为5utr和3utr，并且utr已经考虑了正负链和可变剪接情况，意思是如果utr存在可变剪接，输出的文件已经给拼接好了，并且考虑了正负链和拼接方向 #!/usr/bin/env python # -*- coding: utf-8 -*- # python lin_extract_5utr_cds_3utr2.py…
阅读更多...
Python数学建模-2.9Matplotlib库

Python数学建模-2.9Matplotlib库

Matplotlib库是Python中一个非常流行的绘图库，它提供了大量的绘图工具，可以生成各种类型的静态、动态、交互式的图表。Matplotlib的设计初衷是为了与NumPy配合使用，从而提供一个强大的数学绘图工具。 1.Matplotlib的主要特点 丰富的图表类型…
阅读更多...
Ubuntu18.04显示--有线连接未托管

Ubuntu18.04显示--有线连接未托管

引用: Ubuntu18.04连不网 报"有线连接未托管"_ubuntu20.04以太网未托管-CSDN博客 正文 虚拟机环境配置： VirtaualBox Ubuntu18.04桌面版 问题现象： Ubuntu18.04虚拟机的桌面上提示“有线连接未托管”，虚拟机不能上网&#xf…
阅读更多...
香港银行卡

香港银行卡

文章目录 香港银行香港汇丰（HSBC）中银香港其他 在内地办理香港银行卡流程赴港办理香港银行卡流程赴港办理香港银行卡注意事项提前做好旅游规划过关小白条务必保留好预约办理地点地址证明提前下载银行App 虚拟银行ZA Bank（众安银行&#xff09…
阅读更多...
已解决redis.clients.jedis.exceptions.JedisBusyException：无法处理命令异常的正确解决方法，亲测有效！！！

已解决redis.clients.jedis.exceptions.JedisBusyException：无法处理命令异常的正确解决方法，亲测有效！！！

已解决redis.clients.jedis.exceptions.JedisBusyException：无法处理命令异常的正确解决方法，亲测有效！！！ 目录 问题分析 报错原因 解决思路 解决方法 总结 博主v：XiaoMing_Java 在使用Redis和Jedis客…
阅读更多...
抖音视频批量下载软件可导出视频分享链接|手机网页视频提取|视频爬虫采集工具

抖音视频批量下载软件可导出视频分享链接|手机网页视频提取|视频爬虫采集工具

解锁抖音视频无水印批量下载新姿势！ 在快节奏的生活中，抖音作为时下最热门的短视频平台之一，吸引着广大用户的目光。而如何高效地获取喜欢的视频内容成为了许多人关注的焦点。Q:290615413现在，我们推出的抖音视频批量下载软件&…
阅读更多...
初始Java篇（JavaSE基础语法）（3）

初始Java篇（JavaSE基础语法）（3）

个人主页（找往期文章包括但不限于本期文章中不懂的知识点）：我要学编程(ಥ_ಥ)-CSDN博客 目录 方法的使用 方法定义 实参和形参的关系 方法重载 方法签名 递归 方法的使用 方法就是一个代码片段. 类似于 C 语言中的 "函数"…
阅读更多...
Android 车联网——CarWatchdogService介绍（二十）

Android 车联网——CarWatchdogService介绍（二十）

一、简介 CarWatchdogService 是一个安卓汽车平台中的服务，用于监控和管理车载系统的健康状态，它定期监视系统中的各个组件，以确保它们始终处于活动状态，并在出现故障时进行修复或重启。该服务可以帮助确保平台的稳定性和可靠性，防止应用程序挂起或系统崩溃。 主要功能 系…
阅读更多...
WordPress Plugin NotificationX插件 SQL注入漏洞复现（CVE-2024-1698）

WordPress Plugin NotificationX插件 SQL注入漏洞复现（CVE-2024-1698）

0x01 产品简介 WordPress和WordPress plugin都是WordPress基金会的产品。WordPress是一套使用PHP语言开发的博客平台。该平台支持在PHP和MySQL的服务器上架设个人博客网站。 0x02 漏洞概述 WordPress plugin NotificationX是一个应用插件。2.8.2版本及之前 存在安全漏洞，该…
阅读更多...
音频转换器哪个好？5个角度详细测评~

音频转换器哪个好？5个角度详细测评~

我们常常会用到音频转换器，比如因为平台和设备对某些格式的不兼容，需要进行格式转换；比如有些音频文件可能过大，需要转换为更高效；压缩格式以节省存储空间或加快传输速度；比如调整音频文件的比特率、采样率…
阅读更多...
Dijkstra算法

Dijkstra算法

Dijkstra算法用于求无向图或者有向图中起点到各个顶点的最短路径，且边的权值需要为非负数下面这个题就可以用该算法求解 743. 网络延迟时间 有 n 个网络节点，标记为 1 到 n。 给你一个列表 times，表示信号经过 有向 边的传递时间。 times[i]…
阅读更多...
【实例】React 组件传值方法: Props、回调函数、Context、路由传参

【实例】React 组件传值方法: Props、回调函数、Context、路由传参

React原始传值方法 借用状态管理库的传值见下篇文：MobX 和 Redux 【实例】React 状态管理库 MobX Redux 入门及对比 文章目录 React原始传值方法父组件->子组件 props子组件->父组件 回调函数Context路由传值 父组件->子组件 props 父组件可以通过属性&a…
阅读更多...
matlab实现对全球不规则投影数据的投影转换

matlab实现对全球不规则投影数据的投影转换

前几个专栏我们讨论了几个不规则的投影转换问题，有需要的可以阅读以下文章： matlab实现对极地投影数据的投影转换_matlab极地投影-CSDN博客 联合matlab和Arcgis进行netcdf格式的雪覆盖数据的重新投影栅格-CSDN博客 这次遇到的问题是一个墨卡托投影的数据…
阅读更多...
【机器学习】基于粒子群算法优化的BP神经网络分类预测（PSO-BP）

【机器学习】基于粒子群算法优化的BP神经网络分类预测（PSO-BP）

目录 1.原理与思路2.设计与实现3.结果预测4.代码获取 1.原理与思路 【智能算法应用】智能算法优化BP神经网络思路【智能算法】粒子群算法（PSO）原理及实现 2.设计与实现 数据集： 多输入多输出：样本特征24，标签类别4…
阅读更多...
邮箱验证码登录

邮箱验证码登录

最近支持一个matlab的开发项目，app端采用的是app designer开发，考虑到安全性，需要做登录认证，研讨了下，实现方案如下： app启动后运行一个独立的登录窗口，认证通过后登录窗口关闭，显示…
阅读更多...
【web算法】列车车厢重排问题

【web算法】列车车厢重排问题

💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学习,不断总结,共同进步,活到老学到老导航 檀越剑指大厂系列:全面总结 jav…
阅读更多...
Flutter开发中问题及解决方案

Flutter开发中问题及解决方案

1，数据类型转换时使用tryParse可以减少类型转换异常，在转换异常时，返回默认值 例如 double.tryParse(item.totalfee ?? 0) ?? 0 2，使用setState时，增加mounted判断，减少因为执行耗时任务刷新界面时&…
阅读更多...
中国民用航空局关于民用无人驾驶航空器监管服务有关事宜的公告

中国民用航空局关于民用无人驾驶航空器监管服务有关事宜的公告

《无人驾驶航空器飞行管理暂行条例》（以下简称《条例》）将于2024年1月1日实施。民航局依据《条例》所赋予的职责，为便于大家遵守，现将具体监管和服务有关事宜公告如下： 一、交通运输部即将颁布《民用无人驾驶航空器运行…
阅读更多...
大数据开发--02.环境准备

大数据开发--02.环境准备

一.准备三台linux虚拟机 1.分别取名node1,node2,node3 2.配置静态ip 这里以node1为例，配置静态ip地址，其他node2.node3一样 配置完成之后别忘记 systemctl restart network 3.在各自的/etc/hosts文件中编辑三个Ip地址 三台都要配置， 4.然…
阅读更多...
功率电感的工艺结构原理及选型参数总结

功率电感的工艺结构原理及选型参数总结

🏡《总目录》 目录 1，概述2，工作原理3，结构特点3.1，主要构成材料3.2，绕组形式3.3，封装与骨架4，工艺流程4.1，选择磁芯4.2，绕制线圈4.3，焊接线头4.4，测试5，选型参数5.1࿰
阅读更多...
最新文章

Copyright @ 2022~2023