Js中一些数组常用API总结

2023-09-14 18:17:35

前端面试题库 (面试必备)            推荐:★★★★★

地址:前端面试题库

【国庆头像】- 国庆爱国 程序员头像!总有一款适合你!

前言

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等等,我们需要知道。好了,本篇文章到这就结束了,希望对你有帮助。

前端面试题库 (面试必备)            推荐:★★★★★

地址:前端面试题库

【国庆头像】- 国庆爱国 程序员头像!总有一款适合你!

更多推荐

职业了解|03师范生的编制教师之路

“初闻不解曲中意,再闻已是曲中人”。每个行业有一个共性在于,外面的人想进去,里面的人想出来。时代变化,不同的行业的细则也在变化。十五年前,有谁会预计计算机会这么火爆呢?估计大概率只会被认为计算机属于不务正业。而现在,宇宙的尽头是编制。但编制是否真的十全十美呢?本文讲述一个小学在编教师的心声。1、为什么想到读师范生我高考

数据信息会有哪些风险,云数据库如何保护?

数据信息安风险是多种多样的,那么,云数据库如何规避并保护数据信息安全?今天安策带大家具体来了解数据信息会有哪些风险,云数据库将如何保护:数据泄露:不管是内部人员疏忽,还是恶意攻击、系统漏洞等等原因,数据泄露会导致敏感信息的暴露,损害其品牌的声誉和利益。数据损坏:损坏原因主要由自然灾害、人为或恶意攻击构成,从而导致无法预

容器核心技术之Namespace与Cgroup

容器是一种流行的虚拟化技术,它允许我们在同一台计算机上与其他进程在独立环境中运行进程。那么容器是如何做到这一点的呢?为此,容器是从Linux内核的一些新功能构建的,其中两个主要功能是“namespace”和“cgroup”。1.Namespace1.1Namespace简介Namespace(命名空间)技术是一种内核级

Nvme Spec 第一章节学习

@NvmeExpressBaseSpecification第一章简介1.1概述NVMExpressTM(NVMeTM)接口允许主机软件与非易失性存储器子系统通信。此接口针对企业和客户端固态驱动器进行了优化,通常作为寄存器级接口连接到PCIExpress接口。注:在开发过程中,本规范被称为企业NVMHCI。然而,在完成之

YOLOv8『小目标』检测指南

前言目前博主课题组在进行物体部件的异常检测项目,项目中需要先使用YOLOv8进行目标检测,然后进行图像切割,最后采用WinCLIP模型进行部件异常检测但是在实际操作过程中出现问题,YOLOv8模型目标检测在大目标精确度不错,但是在小目标检测中效果极差我们之前的解决方案是扩大异常部件的目标检测范围,易于检测。但是缺点是会

stable diffusion在建筑行业应用

AI建筑研究室-帆哥投稿视频-AI建筑研究室-帆哥视频分享-哔哩哔哩视频点击观看AI建筑研究室-帆哥的全部投稿视频,在这里可以查看AI建筑研究室-帆哥最新发布、最多播放和最多收藏的视频。https://space.bilibili.com/2161614/videoHD▎ChatGPT接入自研AI工具集,为设计生产赋能

wkeOnDownload2与mbOnDownloadInBlinkThread

背景:最近开始实习(打工)生涯。需求:使用miniblink,显示网页,点击下载链接,可以实现下载。寻求大佬帮助,得到了wke.h版本的下载相关的代码。这里进行一些简单的分析:实际语句:wkeOnDownload2(webView,onDownloadCallback,nullptr);通过调用该函数实现:点击链接,实

SpringMVC之自定义注解

目录前言一、自定义注解1.Java注解简介2.注解的用处3.为什么要用注解4.自定义注解的应用场景5.注解的分类6.如何定义并使用自定义注解7.自定义注解三种使用案例案例一:案例二:案例三:二、Aop自定义注解的应用1.自定义注解类2.切面类3.Controller层前言随着Web开发的发展,越来越多的企业开始使用Sp

基于springboot+vue的便利店信息管理系统

博主主页:猫头鹰源码博主简介:Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万+、专注Java技术领域和毕业设计项目实战主要内容:毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询文末联系获取项目介绍:本系统适合选题:便利店、便利店管理、商店管理等。系统采用springb

C++之operator()和构造函数区别与总结(二百三十)

简介:CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长!优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀人生格言:人生从来没有捷径,只有行动才是治疗恐惧和懒惰的唯一良药.更多原创,欢迎关注:Android系统攻城狮1.前言本篇目的:理解C+

MYSQL--事务

目录一、事物的概念:二、事务的ACID特点:1.原子性:2.一致性:3.隔离性:4.持久性:三、隔离性:1.事务之间的相互影响:(1)脏读:(2)不可重复读:(3)幻读:(4)丢失更新:2.Mysql的隔离级别:3.隔离级别作用范围:四、事务控制语句:1.commit提交事务:2.ROLLBACK回滚:3.使用回滚点:

热文推荐