【JavaScript】Js中一些数组常用API总结

news2024/9/23 13:30:31

目录

前言

会改变原数组

push()

pop()和shift()

unshift()

splice()

sort()

reverse()

不会改变原数组

slice()

concat()

filter()

forEach()

toString

join(分隔符)

小结


前言

Js中数组是一个重要的数据结构,它相比于字符串有更多的方法,在一些算法题中我们经常需要将字符串转化为数组,使用数组里面的API进行操作。本篇文章总结了一些数组中常用的API,我们把它们分成两类,一类是会改变原始数组,一类是不会改变原始数组;一起来看一下吧。

会改变原数组

Js中数组有一些方法可以直接改变原始数组。

push()

push()方法是在数组的末尾添加一个或多个元素,并且返回改变后数组的长度。

用法:

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

pop()和shift()

这两个方法都是删除数组中的元素,pop()方法是将数组中最后一个元素删除,shift()方法是将数组中第一个元素从数组中删除,都返回删除的那一项。

用法:

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

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

unshift()

unshift()方法向数组的开头添加一个或多个元素,并且返回改变后数组的长度。

用法:

let arr = [1, 2, 3, 4, 5]
let res = arr.unshift(0, 11)
console.log(res);//7
console.log(arr);//[ 0, 11, 1, 2, 3,  4, 5]

splice()

splice()方法添加或删除数组中的元素,有返回值,以数组形式返回删除的元素,没有删除则返回空数组。

用法:splice可以接收三个参数, splice(index, n, x)

index: 要删除或插入元素的位置, 该参数是必需的。

n: 要删除的元素个数, 如果不想删除任何元素, 可以将该参数设置为0。

x:要插入到数组中的新元素,可以是多个x1,x2,x3...如果不想插入任何元素,则可以省略这些参数。

let arr = [1, 2, 3, 4, 5]
let res = arr.splice(1, 2, 6, 7, 8)
console.log(res);//[ 2, 3 ]
console.log(arr);//[ 1, 6, 7, 8, 4, 5 ]


let res2 = arr.splice(1, 0, 8)
console.log(res2);//[]
console.log(arr);//[1, 8, 6, 7, 8, 4, 5]

sort()

sort()方法可以对数组的元素进行排序,并且返回出排序后的数组。

用法:sort()默认为升序排列。 直接写sort()只能处理10以内的数字排序,处理10以上的我们需要传递一个参数,这个参数必须是函数,函数通过返回一个值来决定这两个值需不需要交换位置。 如果a-b > 0,则ab交换位置。

 let arr = [10, 12, 11, 19, 13, 15, 6];

let res1 = arr.sort(function (a, b) { return a - b; });   //实现由小到大
console.log(res1);//[6, 10, 11, 12,13, 15, 19]
let res2 = arr.sort(function (a, b) { return b - a; })   //实现由大到小
console.log(res2);//[19, 15, 13, 12,11, 10,  6]

reverse()

reverse()方法可以颠倒数组中元素的顺序,并且返回颠倒后的数组。

用法:

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

不会改变原数组

Js中数组有一些方法不会直接改变原始数组,会返回出一个新的数组。

slice()

slice() 方法可提取数组的某些元素,并以新的数组返回被提取的元素。

用法:slice(n,m) 从索引n(包含n)开始找到索引m(不包含m)处。把找到的内容作为一个新的数组返回,原有数组是不改变的。

let arr = [1, 2, 3, 4, 5]
let res = arr.slice(2, 4)
console.log(res);//[ 3, 4 ]
console.log(arr);//[ 1, 2, 3, 4, 5 ]
slice(n)// 从索引n(包含n)开始找到末尾
slice(0)  // slice()  将原来数组原封不动的复制一份

concat()

concat ()方法用于连接两个或多个数组,该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。

用法:

let arr1 = [1, 2, 3, 4, 5]
let arr2 = [7, 8]
let res = arr1.concat(arr2)
console.log(res);//[ 1, 2, 3, 4, 5, 7, 8]
console.log(arr1);//[ 1, 2, 3, 4, 5 ]
console.log(arr2);//[ 7, 8 ]

filter()

filter()用于对数组进行过滤。

用法:它创建一个新数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。其中函数function 为必须,数组中的每个元素都会执行这个函数。且如果返回值为true,则该元素被保留;函数可以接受三个参数(item, index, arr),第一个参数item也为必须,代表当前元素的值,第二个参数为当前元素的索引值,第三个参数为数组本身。

const arr = [
    { name: 'song', age: 18 },
    { name: 'Y', age: 19 },
    { name: 'son', age: 20 },
    { name: 'so', age: 21 }
]
const newArr = arr.filter((item, index, arr) => {
    return item.age > 19
})

console.log(newArr);//[ { name: 'son', age: 20 }, { name: 'so', age: 21 } ]
console.log(arr);//[ { name: 'song', age: 18 },{ name: 'Y', age: 19 },
                 //{ name: 'son', age: 20 }, { name: 'so', age: 21 }]
                 

forEach()

forEach()方法用于调用数组的每个元素,并将元素传递给回调函数。

用法:回调函数中可以接受三个参数(item,index,arr),第一个参数item也为必须,代表当前元素的值,第二个参数为当前元素的索引值,第三个参数为数组本身。

const arr = [
    { name: 'song', age: 18 },
    { name: 'Y', age: 19 },
    { name: 'son', age: 20 },
    { name: 'so', age: 21 }
]
arr.my_forEach((item, index, arr) => {
    console.log(item.age);//18 19 20 21
})

console.log(arr);//[ { name: 'song', age: 18 }, { name: 'Y', age: 19 },
    //{ name: 'son', age: 20 },{ name: 'so', age: 21 } ]

toString

toString 把数组中的每一项拿出来,用逗号隔开,组成字符串,原有数组不变。

用法:

let arr = ['song', 'Y', 'son', 'so']
let res = arr.toString()
console.log(res);//'song,Y,son,so'
console.log(arr);//[ 'song', 'Y', 'son', 'so' ]

join(分隔符)

join(分隔符) 把数组中的每一项拿出来,用指定的分隔符隔开,原有数组不变。

用法:

let arr = ['song', 'Y', 'son', 'so']
let res = arr.join(',')
console.log(res);//'song,Y,son,so'
console.log(res.length);//13
console.log(arr);//[ 'song', 'Y', 'son', 'so' ]
console.log(arr.length);//4

小结

Js中数组的方法不只这么一些,比如还有一些遍历的方法:map,reduce,find,every等等,我们需要知道。好了,本篇文章到这就结束了,希望对你有帮助。

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

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

相关文章

【RT-DETR有效改进】利用SENetV1重构化网络结构 (ILSVRC冠军得主)

👑欢迎大家订阅本专栏,一起学习RT-DETR👑 一、本文介绍 本文给大家带来的改进机制是SENet(Squeeze-and-Excitation Networks)其是一种通过调整卷积网络中的通道关系来提升性能的网络结构。SENet并不是一个独立的网络模型,而是一个可以和现有的任何一个模型相结合…

Unity SRP 管线【第十讲:SRP/URP 图形API】

Unity 封装的图形API 文章目录 Unity 封装的图形API一、 CommandBuffer 要执行的图形命令列表1. CommandBuffer 属性2. CommandBuffer 常用图形API(方法)(1)设置(2)获取临时纹理 GetTemporaryRT以及释放(3)设置纹理为渲染目标 SetRenderTarget(4)Command…

一键放置柱子护角,你get了吗?

今天写个番外篇,给柱子添加护角。 记得几年前刚开始做BIM的时候,有次做车库导视方案模型,记得好像是鼎伦设计的车库一体化方案,当时柱子护角就给了两种方案,而且基本上每颗柱子上都要放护角,然后甲方竟然要…

MySQL8.0 最新版下载安装,手把手式的教程,小白都能安装成功!!

1、打开MySQL数据库官网的下载地址,根据自己的操作系统下载对应的安装包。我这里是Windows的,操作步骤如下: https://dev.mysql.com/downloads/installer/2、选择不登录下载 3、等待下载完成 4、然后点击下载下来的安装包 5、选择安装类型,Custom自定义安装 6、接…

【从Python基础到深度学习】1. Python PyCharm安装及激活

前言: 为了帮助大家快速入门机器学习-深度学习,从今天起我将用100天的时间将大学本科期间的所学所想分享给大家,和大家共同进步。【从Python基础到深度学习】系列博客中我将从python基础开始通过知识和代码实践结合的方式进行知识的分享和记…

Redis中的缓存穿透、雪崩、击穿的原因以及解决方案(详解)

一、概述 ① 缓存穿透:大量请求根本不存在的key(下文详解) ② 缓存雪崩:redis中大量key集体过期(下文详解) ③ 缓存击穿:redis中一个热点key过期(大量用户访问该热点key,…

【Git】08 多人单分支协作场景

文章目录 一、场景1:不同人修改不同文件1.1 场景描述1.2 场景复现1.2.1 克隆到本地1.2.2 新建分支1.2.3 B修改、提交与推送1.2.4 A修改与提交1.2.5 B再次修改并推送1.2.6 A推送报错 1.3 解决 二、场景2:不同人修改同文件的不同区域2.1 场景描述2.2 场景复…

canvas实现涂鸦画板功能

查看专栏目录 canvas实例应用100专栏,提供canvas的基础知识,高级动画,相关应用扩展等信息。canvas作为html的一部分,是图像图标地图可视化的一个重要的基础,学好了canvas,在其他的一些应用上将会起到非常重…

HarmonyOS SDK 助力新浪新闻打造精致易用的新闻应用

原生智能是HarmonyOS NEXT的核心亮点之一,依托HarmonyOS SDK丰富全面的开放能力,开发者只需通过几行代码,即可快速实现AI功能。新浪新闻作为鸿蒙原生应用开发的先行者之一,从有声资讯入手,基于Speech Kit朗读控件上线听…

大模型为什么会有 tokens 限制?

人是以字数来计算文本长度,大语言模型 (LLM)是以 token 数来计算长度的。LLM 使用 token 把一个句子分解成若干部分。 token 可以是一个单词、一个单词中的一个部分、甚至是一个字符,具体取决于它使用的标记化方法 (tokenization…

基于麻雀优化算法优化XGBoost参数的优化控制策略

目录 一、背景 二、算法流程图 三、附录 一、背景 为提高极端梯度提升(Extreme Gradient Boosting, XGBoost)集成算法在时间预测、信贷风险预测、工件参数预测、故障诊断预测等方面中的准确性,研究者提出了一种改进的麻雀算法(…

相机图像质量研究(7)常见问题总结:光学结构对成像的影响--镜片固化

系列文章目录 相机图像质量研究(1)Camera成像流程介绍 相机图像质量研究(2)ISP专用平台调优介绍 相机图像质量研究(3)图像质量测试介绍 相机图像质量研究(4)常见问题总结:光学结构对成像的影响--焦距 相机图像质量研究(5)常见问题总结:光学结构对成…

07-OpenFeign-HTTP压缩优化

gzip是一种数据格式,采用用deflate算法压缩数据;gzip是一种流行的数据压缩算法,应用十分广泛,尤其是在Linux平台。 当GZIP压缩到一个纯文本数据时,效果是非常明显的,大约可以减少70%以上的数据…

QTabWidget和QTabBar控件样式设置(qss)

QTabWidget和QTabBar控件样式设置 1、QTabWidget样式可自定义的有哪些示例:效果图 2、QTabBar样式可自定义的有哪些示例效果图 1、QTabWidget样式可自定义的有哪些 QTabWidget::pane{} 定义tabWidgetFrameQTabWidget::tab-bar{} 定义TabBar的位置QTabWidget::tab{}定…

【最详解】如何进行点云的凹凸缺陷检测(opene3D)(完成度80%)

文章目录 前言实现思路想法1想法2想法3 补充实现想法1想法2代码 想法3代码 总结 前言 读前须知: 首先我们得确保你已经完全知晓相关的基本的数学知识,其中包括用最小二乘法拟合曲二次曲面,以及曲面的曲率详细求解。若还是没弄清楚&#xff0…

《幻兽帕鲁》攻略:0基础入门及游戏基础操作 幻兽帕鲁基础设施 幻兽帕鲁基础攻击力 Mac苹果电脑玩幻兽帕鲁 幻兽帕鲁加班加点

今天就跟大家聊聊《幻兽帕鲁》攻略:0基础入门及游戏基础操作。 如果想在苹果电脑玩《幻兽帕鲁》记得安装CrossOver哦。 以下纯干货: CrossOver正版安装包(免费试用):https://souurl.cn/Y1gDao 一、基础操作 二、界面…

稳压二极管应用电路

稳压二极管比较特殊,基本结构与普通二极管一样,也有一个PN结。由于制造工艺的不同,当这种PN结处于反向击穿状态时,PN结不会损坏(普通二极管的PN结是会损坏),在稳压二极管用来稳定电压时就是利用它的这一击穿特性。 由…

【学网攻】 第(23)节 -- PPP协议

系列文章目录 目录 系列文章目录 文章目录 前言 一、PPP协议是什么? 二、实验 1.引入 实验目的 实验背景你是某公司的网络管理员,现在需要与另一个公司进行通信,需要你配置PPP协议保证双方发送的人是真正的而非黑客 技术原理 实验步骤新建Pack…

MySQL学习记录——유 表的约束

文章目录 1、了解2、空属性3、默认值default4、列描述comment就是注释,desc看不到,show能看到。5、zerofill6、主键7、自增长auto_increment8、唯一键9、外键 1、了解 只有数据类型的约束肯定不够,mysql还有表的约束来进而保证数据合法性。约…

安全名词解析-威胁情报、蜜罐技术

为方便您的阅读,可点击下方蓝色字体,进行跳转↓↓↓ 01 威胁情报02 蜜罐技术 01 威胁情报 威胁情报(Threat Intelligence),也被称作安全情报(Security Intelligence)、安全威胁情报(Security Threat Intelligence)。 关于威胁情报的定义有很多…