【JS】数组常用方法总结-功能、参数、返回值

news2024/12/28 22:30:38

数组常用方法总结-功能、参数、返回值

用简单的js示例
运行在线工具：链接: 菜鸟工具
菜鸟工具示意图：
![在这里插入图片描述](https://img-blog.csdnimg.cn/de8589eb1acf42abb0347d8a3a3bbdfa.png
在这里插入图片描述

1.会改变原有数组方法

（1）push、pop-最后元素增删

push

-功能：在数组的最后面,添加一个或者多个元素
-参数：array.push(item1, item2, …, itemX),参数可以是字符串、数组、对象等
-返回值:添加元素后数组的长度.

let arr = [1,2,3,4,5];
let arrnew=arr.push(3)
console.log(arr);//[1, 2, 3, 4, 5, 3]
console.log(arrnew);//6

pop
-功能：在数组的最后面,删除一个元素
-参数：array.pop()无参数
-返回值:返回的是刚才删除的元素.

let arr = [1,2,3,4,5];
let arrnew=arr.pop()
console.log(arr);//[1, 1, 2, 3, 4]
console.log(arrnew);5

（2）unshif、shif-最前元素增删

unshift
-功能：在数组的最前面,添加一个或者几个元素
-参数：array.unshift(item1,item2, …, itemX),参数可以是字符串、数组、对象等
-返回值:添加元素后数组的长度.

let arr = [1,2,3,4,5];
let arrnew=arr.unshift(1)
console.log(arr);//[1, 1, 2, 3, 4, 5]
console.log(arrnew);6

shift
-功能：在数组的最前面,删除一个元素
-参数：arr.shift()无参数
-返回值:返回的是刚才删除的元素.

let arr = [2,3,4,5];
let arrnew=arr.shift()
console.log(arr);//[3, 4, 5]
console.log(arrnew);//2

（3）splice-元素删除与添加

-功能：添加或删除数组中的元素
-参数：array.splice(index,howmany,item1,…,itemX)
从index下标开始,删除howmany个,并在该位置添加item
（其中index参数必须）
-返回值：含有被删除的元素的数组

//arr.splice(start,deletedCount,item)
let arr = [1,2,4,17,3];
let arrnew=arr.splice(1,3,7)
console.log(arr);//[1,7, 3]
console.log(arrnew);// [2, 4, 17]

//arr.splice(start,deletedCount)
let arr = [1,2,4,17,3];
let arrnew=arr.splice(1,3)
console.log(arr);//[1, 3]
console.log(arrnew);// [2, 4, 17]

//arr.splice(start,0,item)
let arr = [1,2,4,17,3];
let arrnew=arr.splice(1,0,7)
console.log(arr);// [1, 7, 2, 4, 17, 3]
console.log(arrnew);// []

（4）copyWithin-复制元素

-功能：从数组的指定位置拷贝元素到数组的另一个指定位置中
-参数：array.copyWithin(target, start, end)
其中target为必须参数，其余可选
-返回值:返回改变后的新数组

const arr1 = [1,2,3,4,5];
const arrnew = arr1.copyWithin(2, 0, 2);
console.log(arr1);//[1, 2, 1, 2, 5]
console.log(arrnew);//[1, 2, 1, 2, 5]

（5）sort-数组排序

-功能：对数组的元素进行排序。
-参数1：无参数
-返回值:将按照ASCII字符顺序进行排序
(如果数组元素是数字，sort方法会调用每一个数组项的toString()方法，获得字符串，而后再对获得的字符串进行排序);
(如下实例数组元素是数字，无参数，所以17会排在2的前面）

//无参数，17在2的前面
let arr = [1,2,4,17,3];
let arrnew=arr.sort();
console.log(arr);//[1, 2, 3, 4, 17]
console.log(arrnew);//[1, 2, 3, 4, 17]

-参数2：arr.sort(function(a,b){}）回调函数，其中b值在a值前面
-返回值:
如果返回值大于 0，则位置互换。
如果返回值小于 0，则位置不变。
a-b输出从小到大排序
b-a输出从大到小排序。

//有参数
let arr = [1,2,4,17,3];
let arrnew=arr.sort(function(a,b){
    return a-b;
});
console.log(arr);//[1, 2, 3, 4, 17]
console.log(arrnew);// [1, 2, 3, 4, 17]

（6）reverse-数组排序

-功能：对数组的元素进行翻转。
-参数：array.reverse()无参数
-返回值:颠倒顺序的数组

let arr = [1,2,4,7,3];
let arrnew=arr.reverse();
console.log(arr);//[3, 7, 4, 2, 1]
console.log(arrnew);//[3, 7, 4, 2, 1]

2.不会改变原有数组方法

2.1 判断方法

（1）isArray() -判断是否是数组

-功能：判断是否是数组。
-参数：Array.isArray(arr)，参数为要判断的对象
-返回值:如果对象是数组返回 true，否则返回 false。

let arr = [1,2,4,7,3];
let arrnew=Array.isArray(arr);
console.log(arr);//[3, 7, 4, 2, 1]
console.log(arrnew);//true

2.2 操作方法

（1）concat-拼接数组

-功能：连接两个或更多的数组
-参数：array1.concat(array2, array3,…, arrayX)
-返回值:返回拼接后的新数组
-concat和push的区别：push是将参数作为整体直接加到数组最后一个，并且返回值是新数组长度，如下例子push后的结果应为[1,2,3,4,5,[a,b]]所以返回的长度为6）

const arr1 = [1,2,3,4,5];
const arr2 = ['a','b'];
const arrnew = arr1.concat(arr2);
const arr3 = arr1.push(arr2);
console.log(arr1);//[1, 2, 3, 4, 5]
console.log(arr2);
console.log(arrnew);//[1, 2, 3, 4, 5, 'a', 'b']
console.log(arr3);//6

（2）slice-截取数组

-功能：从数组中截取指定的字段
-参数1：arr.slice(start,end)从start下标开始截取,一直到end结束,不包括end
-返回值:返回截取的新数组

let arr = [1,2,3,4,5];
let arrnew=arr.slice(2,3)
console.log(arr);//[1, 2, 3, 4, 5]
console.log(arrnew);//[3]

-参数2：arr.slice(start) ;从start下标开始截取,一直到最后

let arr = [1,2,3,4,5];
let arrnew=arr.slice(3)
console.log(arr);//[1, 2, 3, 4, 5]
console.log(arrnew);//[4, 5]

-参数3：arr.slice( ) ;全部截取

let arr = [1,2,3,4,5];
let arrnew=arr.slice()
console.log(arr);//[1, 2, 3, 4, 5]
console.log(arrnew);//[1, 2, 3, 4, 5]

2.4 查询方法

（1.1）indexOf-查找元素第一次出现

-功能：查找元素在数组中第一次出现的位置，可以用来判断数组是否含有该元素
-参数1：arr.indexOf (element,fromIndex),从fromIndex这个下标开始，（从左往右）元素第一次出现的位置
-返回值：查找到的元素的下标（若无此元素，返回-1）

let arr = [1,2,4,6,3];
let arrnew=arr.indexOf(4)
if (arr.indexOf(4) === -1){
	console.log('元素不存在')
} else {
	console.log(' 元素存在!')
}
console.log(arr);// [1,2,4,6,3];
console.log(arrnew);// 2

（1.2）lastIndexOf-查找元素最后一次出现

-功能：查找元素在数组中最后出现的位置
-参数1：arr.lastIndexOf (element,fromIndex),从fromIndex这个下标开始,（从右往左）元素最后一次出现的位置
（这里最后一项是按照数组从左往右的最后一项）
（虽然是从右往左搜索，但返回的位置是从左往右数的）
-返回值：查找到的元素的下标（若无此元素，返回-1）

let arr = [1,2,4,6,4,3];
let arrnew=arr.lastIndexOf(4)
let arrnew2=arr.lastIndexOf(4,1)
console.log(arr);// [1, 2, 4, 6, 4, 3]
console.log(arrnew);// 4
console.log(arrnew2);// -1

（2）includes-查找元素

-功能：判断一个数组是否包含一个指定的值
-参数1：arr.includes (searchElement,fromIndex)
searchElement:必须；fromIndex可选
-返回值：如果是返回 true，否则false

let arr = [1,2,3,4,5];
let arrnew=arr.includes(1)
console.log(arr);// [1, 2, 3, 4, 5]
console.log(arrnew);//true

（3.1）find-匹配元素

-功能：find找到符合条件的项，
-参数：array.find(function(currentValue, index, arr),thisValue)
-返回值：返回符合测试条件的第一个数组元素值，如果没有符合条件的则返回 undefined。

let arr = [1,2,3,4,5];
let arrnew=arr.find(function(item){
  return item < 4
})

console.log(arr);// [1, 2, 3, 4, 5]
console.log(arrnew);//1

（3.2）findfindIndex-匹配元素

-功能：findIndex找到符合条件的项的下标
-参数：array.findIndex(function(currentValue, index, arr), thisValue)
-返回值：返回第一项下标，如果没有符合条件的则返回 -1

let arr = [1,2,3,4,5];
let arrnew=arr.findIndex(function(item){
  return item < 4
})

console.log(arr);// [1, 2, 3, 4, 5]
console.log(arrnew);//0

2.3 转换方法

（1）split-字符串拆分成数组

-功能：用指定的分隔符,将字符串分割成数组。
-参数：参数为要分隔的值
-返回值:一个新的数组

const str = 'test-arry';
const arr = str.split('-');
console.log(str);//test-arry
console.log(arr);//['test', 'arry']

（2）join-数组转为字符串整体

-功能：将数组里的元素,通过指定的分隔符,以字符串的形式连接起来
-参数：array.join(separator)
separator指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。
-返回值:一个新的字符串

const arr1 = [1,2,3,4,5];
const arrnew = arr1.join('-');
console.log(arr1);//[1, 2, 3, 4, 5]
console.log(arrnew);//1-2-3-4-5

（3）toString()-数组转为字符串

-功能：把数组转换为字符串，数组中的元素之间用逗号分隔。
-参数：array.toString()
-返回值:一个新的字符串

const arr1 = [1,2,3,4,5];
const arrnew = arr1.toString()
console.log(arr1);//[1, 2, 3, 4, 5]
console.log(arrnew);//1,2,3,4,5

2.4 迭代方法

（1）forEach

-功能：调用数组的每个元素，并将元素传递给回调函数
-参数：array.forEach(callbackFn(currentValue, index, arr), thisValue)
-返回值：没有返回值

const arr = [1,2,3,4,5];
const arrnew = arr.forEach(function(item,index,arr){
    item=item+1
});
console.log(arr);//[1, 2, 3, 4, 5]
console.log(arrnew)//undefined

（2.1）some()-检测数组

-功能：some（）检测是否有元素符合指定条件，一旦找到，则不会继续迭代下去。
-参数：array.some(function(currentValue,index,arr),thisValue)
-返回值:符合true；不符合false

let arr = [1,2,3,4,5];
let arrnew=arr.some(function(item){
  return item < 2
})
let arrnew2=arr.every(function(item){
  return item < 2
})
console.log(arr);// [1, 2, 3, 4, 5]
console.log(arrnew);//true
console.log(arrnew2);//false

（2.2） every()-检测数组

-功能：every（）检测每个元素是否都符合条件；一旦有一个不符合条件，则不会继续迭代下去。
-参数：array.every(function(currentValue,index,arr), thisValue)
-返回值:符合true；不符合false

（3）filter()-过滤数组

-功能：通过检查指定数组中符合条件的所有元素
-参数arr.filter(function(currentValue,index,arr), thisValue)
-返回值:返回一个新数组

let arr = [1,2,3,4,5];
let arrnew=arr.filter(function(item,index,arr){
  return item>2
})
console.log(arr);// [1, 2, 3, 4, 5]
console.log(arrnew);//  [3, 4, 5]

（4）map()-映射

-功能：对数组每一项都运行传入的函数
-参数：array.map(function(currentValue,index,arr), thisValue)
currentValue必须值，表示数组每一项元素
index: 对应的下标索引值
arr: 就是调用该方法的数组本身
thisValue：如果没有默认null或者undefined
-返回值：由每次函数调用的结果构成的数组

let arr = [1,2,3,4,5];
let arrnew=arr.map(function(item,index,arr){
  return item*2
})
console.log(arr);// [1, 2, 3, 4, 5]
console.log(arrnew);//  [2, 4, 6, 8, 10]

（5）reduce-累加元素

-功能：接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值；可以作为一个高阶函数，用于函数的 compose
-参数：array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
total：必需。初始值, 或者计算结束后的返回值。
-返回值：由每次函数调用的结果构成的数组
-可计算数组总和、扁平化数组、数组去重、计算元素出现次数等

//计算数组总和
let arr = [1,2,3,4,5];
let arrnew=arr.reduce(function(total,item){
  return total+item
})

console.log(arr);// [1, 2, 3, 4, 5]
console.log(arrnew);//15
//二维数组转为一维数组
let arr = [[1, 2], [2, 3], [4, 5], [6, 7]]
 let arrnew = arr.reduce((a, b) => {
       return a.concat(b)
 }, [])
 console.log(arrnew)//[1,2,2,3,4,5,6,7]
 //数组去重
 let arr = [1,2,3,4,4,1]
let newArr = arr.reduce((pre,cur)=>{
    if(!pre.includes(cur)){
      return pre.concat(cur)
    }else{
      return pre
    }
},[])
console.log(newArr);// [1, 2, 3, 4]
//计算每个元素出现的次数
let arr = [1,2,1,3,4,3]
let arrnew = arr.reduce((pre,cur) =>{
if( cur in pre){
pre[cur]++
}
else{
pre[cur] = 1
}
return pre
}, {})
console.log(arrnew) // {1: 2, 2: 1, 3: 2, 4: 1}

参考：
1.数组的常用方法大全
2.菜鸟教程: JavaScript Array 对象

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

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

相关文章

（考研湖科大教书匠计算机网络）第五章传输层-第三节：TCP和UDP对比

（考研湖科大教书匠计算机网络）第五章传输层-第三节：TCP和UDP对比

获取pdf&#xff1a;密码7281专栏目录首页&#xff1a;【专栏必读】考研湖科大教书匠计算机网络笔记导航 文章目录一&#xff1a;TCP和UDP概述二&#xff1a;TCP和UDP对比本节对应视频如下 【计算机网络微课堂&#xff08;有字幕无背景音乐版&#xff09;】&#xff1a;TCP和UD…
阅读更多...
ShowCase 专治开发的「我自测好了」

ShowCase 专治开发的「我自测好了」

背景 开发提测时信心十足的说我自测过了肯定没问题&#xff0c;结果分分钟打脸&#xff0c;测试在测试环境一测就发现xx「功能」不可用、xx「流程」阻塞 产品验收在测试之后&#xff0c;导致验收的时候可能出现与设计不一致&#xff0c;造成返工成本和风险加大 1.开发自测质量…
阅读更多...
常用聚类算法分析

常用聚类算法分析

1. 什么是聚类 1.1. 聚类的定义 聚类(Clustering)是按照某个特定标准(如距离)把一个数据集分割成不同的类或簇&#xff0c;使得同一个簇内的数据对象的相似性尽可能大&#xff0c;同时不在同一个簇中的数据对象的差异性也尽可能地大。也即聚类后同一类的数据尽可能聚集到一起…
阅读更多...
Kubernetes 1.18学习笔记

Kubernetes 1.18学习笔记

文章目录一、Kubernetes 概述和架构1、kubernetes 基本介绍2、Kubernetes 功能3、Kubernetes 架构组件4、Kubernetes 核心概念5、Kubernetes 工作原理二、Kubernetes 集群搭建1、系统环境准备1.1 安装要求1.2 系统初始化2、客户端工具kubeadm搭建2.1 安装步骤2.2 安装组件2.3 集…
阅读更多...
MongoDB数据存储格式

MongoDB数据存储格式

前言 之前分享了MongoDB的基本命名和视图等信息&#xff0c;本文分享一下MongoDB的数据存储类型&#xff0c;使用方式。基础的MongoDB信息就学习完啦&#xff0c;之后会继续分享MongoDB进阶的一些东西。 MongoDB数据存储格式前言1 文件结构1.2 字段名称2 点符号2.2 嵌入式文件…
阅读更多...
Stream流式处理

Stream流式处理

Stream流的三类方法 获取Stream&#xff1a;流创建一条流水线,并把数据放到流水线上准备。 中间方法&#xff1a;流水线上的操作一次操作完毕之后,还可以继续进行其他操作。 终结方法&#xff1a;一个Stream流只能有一个终结方法是流水线上的最后一个操作。 生成Stream流的…
阅读更多...
基于SSM框架的RBAC权限系统设计与 实现

基于SSM框架的RBAC权限系统设计与 实现

基于SSM框架的RBAC权限系统设计与 实现 ✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取项目下载方式&#x1f345; 一、项目背景…
阅读更多...
网络设备驱动框架

网络设备驱动框架

1.框架 1&#xff09;网络协议接口层 向网络层协议提供统一的数据包收发接口&#xff0c;不论上层协议是ARP&#xff0c;还是IP&#xff0c;都通过dev_queue_xmit()函数发送数据&#xff0c;并通过netif_rx()函数接收数据。这一层的存在&#xff0c;使得上层协议独立于具体的设…
阅读更多...
【总结】vim教程与详细命令总结，该来的躲不掉啊晕

【总结】vim教程与详细命令总结，该来的躲不掉啊晕

B站|公众号&#xff1a;啥都会一点的研究生 目录写在前面vim的工作模式普通模式编辑模式命令模式命令大全&#xff0c;最详细&#xff08;建议收藏&#xff09;光标的移动插入模式 - 插入/追加文本编辑文本选择文本&#xff08;可视化模式&#xff09;可视化模式命令剪切, 复制…
阅读更多...
【Selenium学习】Selenium 中特殊元素操作

【Selenium学习】Selenium 中特殊元素操作

1.鼠标定位操作鼠标悬停&#xff0c;即当光标与其名称表示的元素重叠时触发的事件&#xff0c;在 Selenium 中将键盘鼠标操作封装在 Action Chains 类中。Action Chains 类的主要应用场景为单击鼠标、双击鼠标、鼠标拖曳等。部分常用的方法使用分类如下&#xff1a;• click(on…
阅读更多...
过滤器与拦截器

过滤器与拦截器

文章目录一、前言1、概述2、过滤器与拦截器异同2.1 简介2.2 异同2.3 总结3、Filters vs HandlerInterceptors二、过滤器1、概述2、生命周期2.1 生命周期概述2.2 基于函数回调实现原理3、自定义过滤器两种实现方式3.1 WebFilter注解注册3.2 过滤器&#xff08;配置类注册过滤器&…
阅读更多...
vue2vue3常用语法(持续更新)

vue2vue3常用语法(持续更新)

一、基础1. 指令指令描述v-if判断v-else-if判断后剩下的v-else判断后剩下的v-html渲染html文本格式v-text渲染文本v-for循环v-showdisplay&#xff1a;none/block切换v-model双向绑定v-bind(缩写&#xff1a;:)动态绑定v-on(缩写&#xff1a;)绑定dom事件(如点击事件)v-cloak解…
阅读更多...
WMS AMS【Android Framework进阶】

WMS AMS【Android Framework进阶】

1.简介 可以毫不夸张的说&#xff0c;android的framework层主要是由WMS、AMS还有View所构成&#xff0c;这三个模块穿插交互在整个framework中&#xff0c;掌握了它们之间的关系和每一个逻辑步骤&#xff0c;你对framework的了解至少有百分之五十 AMS是Android中最核心的服务…
阅读更多...
设计模式：行为型设计模式

设计模式：行为型设计模式

参考文章&#xff1a; 《设计模式》 《设计模式知识体系详解》 《DesignPatterns》 写在开头&#xff1a;本文为学习后的总结&#xff0c;可能有不到位的地方&#xff0c;错误的地方&#xff0c;欢迎各位指正。 前言 行为型模式是将不同的行为代码解耦&#xff0c;从而解决…
阅读更多...
疯狂弹出请插入多卷集的最后一张磁盘窗口

疯狂弹出请插入多卷集的最后一张磁盘窗口

整个人嘛了&#xff0c;今天插上U盘&#xff0c;跟tmd中了病毒一样&#xff0c; 屏幕疯狂弹出窗口&#xff0c; 提示请插入多卷集的最后一张磁盘&#xff01; 点确定之后他继续弹出&#xff0c;点取消它也继续弹出&#xff0c; 关掉一个又弹出来一个&#xff0c;妈的&#x…
阅读更多...
系统编程中的进程的概念No.3【进程状态】

系统编程中的进程的概念No.3【进程状态】

引言&#xff1a; 北京时间&#xff1a;2023/2/17/8:17&#xff0c;目前听着超能陆战队主题曲《Immortals》&#xff0c;感觉又要螺旋式升天&#xff0c;并且为我今天上午没课感到happy&#xff0c;所以继我们很久以前的关于进程的博客&#xff0c;今天我们就再来学习一下有关…
阅读更多...
buuctf Web 下

buuctf Web 下

9.[ACTF2020 新生赛]Exec 访问url&#xff1a; http://cc3c6c27-e2df-4665-baba-1d9a32dc963e.node3.buuoj.cn/ 首页如下&#xff1a; 直接ping ip可以得到结果 常见管道符 1、|&#xff08;就是按位或&#xff09;&#xff0c;直接执行|后面的语句 127.0.0.1 | cat /flag…
阅读更多...
html 的相对路径和绝对路径

html 的相对路径和绝对路径

整篇文章是以 src 标签进行演示。 文章目录 一、相对路径 1、同级目录查找 2、上一级目录查找 3、下一级目录查找 二、绝对路径 一、相对路径 &#x1f475;相对路径&#xff1a;从当前目录开始查找。 1、同级目录查找 写法&#xff1a; 1.1.直接写文件名字&#xff1b;…
阅读更多...
Linux之进程控制

Linux之进程控制

一.进程创建 1.1 fork函数 我们创建进程的方式有./xxx和fork()两种 在linux中fork函数时非常重要的函数&#xff0c;它从已存在进程中创建一个新进程。新进程为子进程&#xff0c;而原进程为父进程。 #include <unistd.h> pid_t fork(void); 返回值&#xff1a;自进程…
阅读更多...
3｜射频识别技术｜期末考试知识点｜第3讲_RFID射频前端｜重点题目

3｜射频识别技术｜期末考试知识点｜第3讲_RFID射频前端｜重点题目

阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023