js数组常用方法(19种)|你会的到底有多少呢?

news2025/1/17 17:59:18

一、改变原数组的方法

1.push() 末尾添加数据

语法: 数组名.push(数据)

作用: 就是往数组末尾添加数据

返回值: 就是这个数组的长度

//push
var arr = [10, 20, 30, 40]
res = arr.push(20)
console.log(arr);//[10,20,30,40,20]
console.log(res);//5

2. pop() 末尾出删除数据

语法:数组名.pop()

作用: 就是从数组的末尾删除一个数据

返回值: 就是你删除的那个数据

//pop
var arr = [10, 20, 30, 40] 
res =arr.pop()
console.log(arr);//[10,20,30]
console.log(res);//40

3.unshift() 头部添加数据

语法: 数组名.unshift(数据)

作用: 就是在数组的头部添加数据

返回值: 就是数组的长度

 //pop
 var arr = [10, 20, 30, 40]
 res=arr.unshift(99)
 console.log(arr);//[99,10,20,30,40]
 console.log(res);//5

 4.shift() 头部删除数据

语法: 数组名.shift()

作用: 头部删除一个数据

返回值: 就是删除掉的那个数据

//shift
 var arr = [10, 20, 30, 40]
 res=arr.shift()
 console.log(arr);[20,30,40]
 console.log(res);10

5.reverse() 翻转数组

语法: 数组名.reverse()

作用: 就是用来翻转数组的

返回值: 就是翻转好的数组

//reverse
var arr = [10, 20, 30, 40]
res=arr.reverse()
console.log(arr);//[40,30,20,10]
console.log(res);//[40,30,20,10]

6.sort() 排序

语法一: 数组名.sort()                       会排序 会按照位排序

语法二: 数组名.sort(function (a,b) {return a-b})  会正序排列

语法三: 数组名.sort(function (a,b) {return b-a})  会倒序排列

//sort()
var arr = [2, 63, 48, 5, 4, 75, 69, 11, 23]
arr.sort()
console.log(arr);
arr.sort(function(a,b){return(a-b)})
console.log(arr);
arr.sort(function(a,b){return(b-a)})
console.log(arr);

 

7.splice()  截取数组

语法一: 数组名.splice(开始索引,多少个)

作用: 就是用来截取数组的

返回值: 是一个新数组 里面就是你截取出来的数据

语法二: 数组名.splice(开始索引,多少个,你要插入的数据)

作用: 删除并插入数据

注意: 从你的开始索引起

返回值: 是一个新数组 里面就是你截取出来的数据

//splice() 语法一
var arr = [2, 63, 48, 5, 4, 75]
res = arr.splice(1,2)
console.log(arr);
console.log(res);
//******************************
//splice() 语法二
var arr = [2, 63, 48, 5, 4, 75]
res = arr.splice(1,1,99999,88888)
console.log(arr);
console.log(res);

二、不改变原数组的方法

1.concat()  合并数组

语法: 数组名.concat(数据)

作用: 合并数组的

返回值: 一个新的数组

//concat
var arr = [10, 20, 10, 30, 40, 50, 60]
res = arr.concat(20,"小敏",50)
console.log(arr) 
console.log(res);

2.join() 数组转字符串

语法:数组名.join('连接符')

作用: 就是把一个数组转成字符串

返回值: 就是转好的一个字符串

//join
var arr = [10, 20, 10, 30, 40, 50, 60]
res = arr.join("+")
console.log(arr)
console.log(res);

3.slice()截取数组的一部分数据

语法: 数组名.slice(开始索引,结束索引)

作用: 就是截取数组中的一部分数据

返回值: 就是截取出来的数据 放到一个新的数组中

注意: 包前不好后 包含开始索引不包含结束索引

//slice
var arr = [10, 20, 10, 30, 40, 50, 60]
res = arr.slice(1,4)
console.log(arr)
console.log(res);

4.indexOf 从左检查数组中有没有这个数值

语法一:数组名.indexOf(要查询的数据)

作用: 就是检查这个数组中有没有该数据

如果有就返回该数据第一次出现的索引

如果没有返回 -1

语法二:数组名.indexOf(要查询的数据,开始索引)

//indexOf 语法一
var arr = [10, 20, 10, 30, 40, 50, 60]
res = arr.indexOf(10)
console.log(arr)
console.log(res);
//*************************************
//indexOf  语法二
var arr = [10, 20, 10, 30, 40, 50, 60]
res = arr.indexOf(10,1)
console.log(arr)
console.log(res);

5.lastIndexOf 从右检查数组中有没有这个数值

语法一:数组名.indexOf(要查询的数据)

作用: 就是检查这个数组中有没有该数据

如果有就返回该数据第一次出现的索引

如果没有返回 -1

语法二:数组名.lastIndexOf(要查询的数据,开始索引)

//lastIndexOf 语法一
var arr = [10, 20, 10, 30, 40, 50, 60]
res = arr.lastIndexOf(50)
console.log(arr) 
console.log(res);
//*************************************
//lastIndexOf 语法二
var arr = [10, 20, 10, 30, 40, 50, 60]
res = arr.lastIndexOf(50,4)
console.log(arr)
console.log(res);

三、ES6新增的数组方法

1. forEach()   用来循环遍历的 for

语法: 数组名.forEach(function (item,index,arr) {})

 + item : 这个表示的是数组中的每一项

 + index : 这个表示的是每一项对应的索引

 + arr : 这个表示的是原数组

作用: 就是用来循环遍历数组的 代替了我们的for

返回值: 没有返回值 如果真的说要有返回值就是undefined

//forEach
var arr = [1, 2, 3, 4, 5]
console.log('原始数组 : ', arr);
var res = arr.forEach(function (item, index, arr) {
    console.log(item, "------", index, "-------", arr);
})

2.map  映射数组的

语法: 数组名.map(function (item,index,arr) {})

+ item : 这个表示的是数组中的每一项

+ index : 这个表示的是每一项对应的索引

+ arr : 这个表示的是原数组

作用: 就是用来映射

返回值: 必然是一个数组 一个映射完毕的数组;这个数组合原数组长度一样

注意: 要以return的形式执行返回条件

//map
var arr = [1, 2, 3, 4, 5]
console.log('原始数组 : ', arr);
var res = arr.map(function (item) {
    return item*1000
})
console.log(res);

3.filter  过滤数组

语法: 数组名.filter(function (item,index,arr) {})

 + item : 这个表示的是数组中的每一项

 + index : 这个表示的是每一项对应的索引

 + arr : 这个表示的是原数组

作用: 用来过滤数组的

返回值: 如果有就是过滤(筛选)出来的数据 保存在一个数组中如果没有返回一个空数组

注意: 要以return的形式执行返回条件

//filter
var arr = [1, 2, 3, 4, 5]
console.log('原始数组 : ', arr);
var res = arr.filter(function (item) {
    return item > 2
})
console.log(res);

4.every  判断数组是不是满足所有条件

语法: 数组名.every(function (item,index,arr) {})

+ item : 这个表示的是数组中的每一项

+ index : 这个表示的是每一项对应的索引

+ arr : 这个表示的是原数组

作用: 主要是用来判断数组中是不是 每一个 都满足条件

     只有所有的都满足条件返回的是true

     只要有一个不满足返回的就是false

返回值: 是一个布尔值

注意: 要以return的形式执行返回条件

//every
var arr = [1, 2, 3, 4, 5]
console.log('原始数组 : ', arr);
var res = arr.every(function (item) {
    return item > 0
})
console.log(res);//打印结果  true

5.some() 数组中有没有满足条件的

语法: 数组名.some(function (item,index,arr) {})

+ item : 这个表示的是数组中的每一项

+ index : 这个表示的是每一项对应的索引

+ arr : 这个表示的是原数组

作用: 主要是用来判断数组中是不是 每一个 都满足条件

     只有有一个满足条件返回的是true

     只要都不满足返回的就是false

返回值: 是一个布尔值

注意: 要以return的形式执行返回条件

//some
var arr = [1, 2, 3, 4, 5]
console.log('原始数组 : ', arr);
var res = arr.some(function (item) {
    return item > 3
})
console.log(res);//true

6.find()用来获取数组中满足条件的第一个数据

语法: 数组名.find(function (item,index,arr) {})

+ item : 这个表示的是数组中的每一项

+ index : 这个表示的是每一项对应的索引

+ arr : 这个表示的是原数组

作用: 用来获取数组中满足条件的数据

返回值: 如果有 就是满足条件的第一个数据;如果没有就是undefined

注意: 要以return的形式执行返回条件

//find
var arr = [1, 2, 3, 4, 5]
console.log('原始数组 : ', arr);
var res = arr.find(function (item) {
    return item > 3
})
console.log(res)//4

7.reduce()叠加后的效果       

语法: 数组名.reduce(function (prev,item,index,arr) {},初始值)

+ prev :一开始就是初始值 当第一次有了结果以后;这个值就是第一次的结果

+ item : 这个表示的是数组中的每一项

+ index : 这个表示的是每一项对应的索引

+ arr : 这个表示的是原数组

作用: 就是用来叠加的

返回值: 就是叠加后的结果

注意: 以return的形式书写返回条件

//reduce
var arr = [1, 2, 3, 4, 5]
var res = arr.reduce(function (prev, item) {
    return prev *= item
}, 1)
console.log(res);//120

如有错误,欢迎反馈!!!

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

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

相关文章

【Cesium】使用TLE轨道两行数计算轨道信息,并生成CZML格式文件

TLE为轨道两行数,简单的说是用两行数字表示轨道的相关信息,本文即用轨道两行数来计算任一时刻卫星的位置信息和速度信息,并生成CZML文件能够读取的格式 1、satellite.js库简介 简而言之,satellite.js库可以根据TLE轨道两行数&…

vue 项目适配笔记本1920*1080 125%缩放

前言 在台式机上开发pc端项目时,由于是1920*1080的分辨路和100缩放,看起来是没有问题。在笔记本上有问题 因为现在很多14寸的笔记本,出厂默认就是125%或150%的显示。导致很多时候我们的项目,自己开发的时候都是按照100%比例来开发…

Vue使用Serial连接串口

本来只是随手记录一下,发现看的人多了,想着还是修复一下bug吧,供各位看官指正 2022-10-24本次更新: 1、修复在不支持Serial的情况下,控制台报错 2022-09-19本次更新: 1、修复了传输数据接收分隔的情况(增加数据缓存) 2、修复串口连…

【中兴】web训练营~一文带你走进前端 | 百图制作

📢作者简介:物联网领域创作者,🏅阿里云专家博主🏅 🏅华为云享专家🏅 ✒️个人主页:Choice~ 🌐格言:可正因为难,才有价值!&#x1f536…

Linux 使用Nginx部署web(vue、react)项目

前言 本文基于:操作系统 CentOS 7.6 使用的工具:Xshell7、Xftp7 1.安装所需依赖 安装gcc yum -y install gcc安装pcre、pcre-devel yum -y install pcre pcre-devel安装zlib、zlib-devel yum install -y zlib zlib-devel安装openssl、openssl-dev…

【uni-app】点击左上角返回按钮,弹出弹窗或者是携带参数返回上一页

目录 1、弹出弹窗 2、把这一页的数据带回到上一页(获取下一页的数据 ) 3、跳转页面并携带参数,接受页获取参数 1、弹出弹窗 当我返回上一页的时候需要做一个判断是否需要保存 onBackPress 只支持APP和H5 但不支持小程序 ,可以…

Java web—访问http://localhost:8080/xx/xx.jsp报404错误问题

由于我们在eclipse ee中把项目部署在web端经常会出现报404错误。 原因为: 404状态码是一种http状态码,其意思是: 所请求的页面不存在或已被删除。通俗的讲就是当用户输入了错误的链接时,返回的页面。 以下描述几种情况&#xff1a…

IDEA从零到精通(24)之lombok插件的安装与使用

文章目录作者简介引言导航概述安装插件使用小结导航热门专栏推荐作者简介 作者名:编程界明世隐 简介:CSDN博客专家,从事软件开发多年,精通Java、JavaScript,博主也是从零开始一步步把学习成长、深知学习和积累的重要性…

【Vue】 组件封装

目录1 组件封装1.1 全局注册1.2 局部注册1.2.1 命名1.2.2 引用组件1.2.2.1 传统写法1.2.2.2 setup1.2.2.3 easycom1.3 父子组件间的数据传递1.3.1 子组件 data() 中设置数据1.3.2 父组件通过 prop 将数据传递给子组件1.3.3 子组件不能直接修改 prop 中的值1.3.4 子组件通过 emi…

Pinia中action使用详解

actions的使用 动作相当于组件中的方法。它们可以使用actionsin 属性进行定义。 并且在pinia中的action既可以有同步函数也可以有异步函数。 在actions中可以通过this访问该仓库所有实例 export const useUsers defineStore(users,{state:()>{userData:null},actions:{a…

【SpringMVC】集成Web、MVC执行流程、数据响应、数据交互

文章目录前言一.Spring集成Web二.对于SpringMVC的理解三.MVC执行流程(🏳️‍🌈)1.组件解析2.RequestMapping四.SpringMVC数据响应页面跳转回写数据五.SpringMVC获得请求数据前言 SpringMVC确实很麻烦,零碎的点太多 一…

小程序自定义tabbar导航栏、动态控制tabbar功能实现(uniapp)

uniapp开发小程序,不同角色/已登录未登录,都有不一样的底部导航栏,这些情况下就需要自行定义tabbar,从而实现动态tabbar的实现。 1.首先我们需要在pages.json配置tabbar 我这里并没有开启custom(自定义),不开启的话&a…

vue实现思维导图

介绍 前景: 仿幕布实现思维导图效果 技术实现:jsmind 完整代码:vue-jsmind 参考文章: 在vue中使用jsmind组织架构或思维导图 实现效果: 功能描述: 编辑、删除、插入、拖拽、展开/收起节点分布结构切换…

数字IC前端面试问题总结

本篇主要参考了 1、新芯设计(3条消息) 新芯设计的博客_CSDN博客-如何成为一名高级数字 IC 设计工程师,数字 IC 技能拓展,基于 SoC 的卷积神经网络车牌识别系统设计领域博主 2、小汪的IC自习室 (3条消息) 小汪的IC自习室的博客_CSDN博客-数字IC设计,SystemVerilog & I…

前端使用xlsx插件读取excel文件数据(保姆级教程)

本人属于一个实习菜鸟,大神请谨慎阅读............ 在开发过程中,难免会碰到用前端来处理excel文件的需求,我们需要解析出excel文件的内容然后在以对象的形式展示或者与后端对接 功能的实现思路: 文件选择 > FileReader对象…

微信小程序中使用vant框架,方法步骤清晰,简单适用

1.说到vant框架相信大家应该并不陌生了吧,做过移动端开发的小伙伴们应该都知道它吧。 2.Vant 是有赞前端团队开源的移动端组件库,于 2017 年开源,已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务,对外服务十多万开发者&am…

Vue 权限菜单(动态路由)详解

今天记录一下Vue的权限菜单(动态路由),在我们写后台的时候用的比较多,Vue的权限菜单分两种,一种是通过本地进行,根据账号的权限进行筛选出可用的权限,组合菜单并在页面上渲染显示,另…

Vue3 从入门到放弃 (第一篇.环境准备)

什么是 Vue?# Vue (发音为 /vjuː/,类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。无论是简单还是复杂的…

uniapp-路由uni-simple-router

背景 专为uniapp打造的路由器,和uniapp深度集成通配小程序、App和H5端H5能完全使用vue-router开发模块化、查询、通配符、路由参数使 uni-app实现嵌套路由(仅H5端完全使用vue-router)uniapp用到了很多vue的api,但在路由管理的功能…

vue 上传文件和下载文件

vue 上传文件和下载文件1. 上传文件2. 下载文件1. 上传文件 上传文件我所使用的组件是element ui 的 el-upload&#xff0c;我一共进行了如下两步&#xff0c;第一步&#xff1a;修改样式&#xff0c;因为el-upload的样式不是我所要的&#xff0c;我想要这种的 代码如下 <…