Js中一些数组常用API总结

前言

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.mzph.cn/news/74999.shtml

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

相关文章

DHCP工作过程详解

只有是一个网段的,它才会发送 ARP 请求,获取 MAC 地址。如果发现不是呢?Linux 默认的逻辑是,如果这是一个跨网段的调用,它便不会直接将包发送到网络上,而是企图将包发送到网关。 因为网关要和当前的网络至…

2023 年前端编程 NodeJs 包管理工具 npm 安装和使用详细介绍

npm 基本概述 npm is the world’s largest software registry. Open source developers from every continent use npm to share and borrow packages, and many organizations use npm to manage private development as well. npm 官方网站:https://www.npmjs.…

关于DNS的一些认识

目录 什么是DNS? 一台具有单个DNS的机器可以拥有多个地址吗? 一台计算机可以有多个属于不同顶级域的DNS名字吗? 什么是DNS? DNS是域名系统(Domain Name System)的缩写,它是互联网中用于将域名…

[EROOR] SpringMVC之500 回调函数报错

首先,检查一下idea里面的报错的原因,我的是jdk的版本的问题。所以更换一下就可以了。

React+Typescript+react-router 6 创建路由操作

本文我们来看看路由的安装 其实路由的操作没有什么变化 但是还是给大家讲一下 那么我们打开项目 在项目终端输入 npm install --save react-router react-router-dom安装 一下 react-router 和 react-router-dom 这都是react开发很基本的插件了 不过大家安装前先注意好我的版…

在 uni-app 中选中奇偶子元素

问题描述: 在 uni-app 中,使用 :nth-child() 选择器选择奇偶子元素不像预期那样生效。 原代码: - :nth-child(2n) 选择偶数个子元素 - :nth-child(2n1) 选择奇数个子元素 /* 奇数子元素 */ .issueData_item:nth-child(2n1) {transfo…

【MySQL学习笔记】(八)复合查询

在前面的笔记中做的查询基本都是对一张表进行查询,在实际开发中远远不够,本篇文章内容是复合查询相关的笔记。需要用到oracle9i的经典测试表,在笔记(六)中已经教大家如何导入了。 复合查询 基本查询回顾多表查询子连接…

第11节-PhotoShop基础课程-索套工具

文章目录 前言1.索套工具 选中后按Ctrl 可以移动2.加,减,交叉 shift alt 2.多边形索套工具 手动首尾相连 或者双击空地1.单击绘制直线选区2.双击结束绘制3.加,减,交叉4. delete可以删除节点 3.磁性索套工具1.沿着边缘自动吸附2.可…

如何实现24/7客户服务自动化?

传统的客服制胜与否的法宝在于人,互联网时代,对于产品线广的大型企业来说:单靠人力,成本大且效率低,相对于产品相对单一的中小型企业来说:建设传统客服系统的成本难以承受,企业客户服务的转型已…

解决Oracle SQL语句性能问题——SQL语句改写(in、not in、exists及not exists)

8. in改为join in为Oracle数据库支持的条件语法,该语法会使得代码看起来思路清晰,逻辑分明。该语法有时也会导致SQL语句产生次优的执行计划,而导致SQL语句的性能问题。因此,为了解决相关SQL语句的性能问题,有时我们需要通过join来改写和消除in,具体改写方法如下所示。 …

MSTP + Eth-Trunk配置实验 华为实验手册

1.1 实验介绍 1.1.1 关于本实验 以太网是当今现有局域网LAN(Local Area Network)采用的最通用的通信协议标准,以太网作为一种原理简单、便于实现同时又价格低廉的局域网技术已经成为业界的主流。 本实验主要介绍了LAN网络中的Eth-Trunk技术…

NameError: name ‘add start docstrings to callable‘ is not defined解决方案

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…

Day57 647. 回文子 516.最长回文子序列 动态规划总结篇

文章目录 647. 回文子串516.最长回文子序列动态规划总结篇 647. 回文子串 https://leetcode.cn/problems/palindromic-substrings 布尔类型的dp[i][j]:表示区间范围[i,j] (注意是左闭右闭)的子串是否是回文子串,如果是dp[i][j]为…

最长公共子序列(上海交通大学考研机试题)

题目描述 给出两个长度为 n 的整数序列,求它们的最长公共子序列(LCS)的长度,保证第一个序列中所有元素都不重复。 注意: 第一个序列中的所有元素均不重复。 第二个序列中可能有重复元素。 一个序列中的某些元素可能不…

MYSQL的慢查询

通过查询SQL的执行频次,我们就能够知道当前数据库到底是增删改为主,还是查询为主。 那假如说是以查询为主,次数我们可以借助于慢查询日志。接下来,我们就来介绍一下MySQL中的慢查询日志。 慢查询日志 慢查询日志记录了所有执行时间…

51单片机的简易计算器数码管显示仿真设计( proteus仿真+程序+原理图+报告+讲解视频)

51单片机的简易计算器数码管显示仿真设计 1.主要功能:2.仿真3. 程序代码4. 原理图5. 设计报告6. 设计资料内容清单&&下载链接 51单片机的简易计算器数码管显示仿真设计( proteus仿真程序原理图报告讲解视频) 仿真图proteus7.8及以上 程序编译器…

微信小程序AI类目-深度合成-AI问答/AI绘画 互联网信息服务算法备案审核通过教程

近期小程序审核规则变化后,很多使用人类小徐提供的chatGPT系统的会员上传小程序无法通过审核,一直提示需要增加深度合成-AI问答、深度合成-AI绘画类目,该类目需要提供互联网信息服务算法备案并上传资质,一般对企业来说这种务很难实…

[超硬核] 5000字带走读DuckDB优化器之常量折叠与比较简化

DuckDB优化器之常量折叠与比较简化 本篇文章适合学习C的小伙伴,适合阅读开源项目的小伙伴,更适合学习数据库的小伙伴,欢迎与我一起探索优化器知识。 目录 DuckDB优化器之常量折叠与比较简化1.优化器规则2.表达式重写 2.1 重写/访问算子2.2 应…

国家开放大学 练习题

学前儿童社会教育活动指导 参考试题 一、单项选择题(每小题3分,共30分) 1.《规程》第三十二条规定:“幼儿园应当充分尊重幼儿的个体差异,根据幼儿不同的心理 发展水平,研究有效的活动形式和方法&am…

vue.js+nodejs家庭个人理财收支管理系统5x6nf

本收支管理系统以vue.js作为框架,nodejs语言,B/S模式以及MySql作为后台运行的数据库。本系统主要包括以下功能模块:用户管理、收入分类、支出分类、每日收入、每日支出等模块。 本文的组织结构如下: 1、绪论。综述了本文的研究背景…