JavaScript常用方法整理

news2024/9/20 8:00:44

文章目录

  • 前言
    • 1.栈方法:push()、pop()
    • 2.队列方法:unshift()、shift()
    • 3.indexof()、lastIndexOf()、includes()
    • 4.操作方法:concat()、slice()、splice()
    • 5.Array.isArray()
    • 6.排序方法:sort()、reverse()
    • 7.转换方法:toString()、join()
    • 8.keys()、values()、entries()
    • 9.迭代方法:every()、some()、filter()、forEach()、map()
    • 10.创建数组的静态方法:from()、of()
    • 11.reduce()
  • 总结


前言

最近整理了一下JavaScript的常用方法,也方便以后查看。


1.栈方法:push()、pop()

在这里插入图片描述
push() 末尾添加(接收任意数量的参数) 返回数组的最新长度
在这里插入图片描述
pop() 末尾删除 返回被删除的项
在这里插入图片描述

2.队列方法:unshift()、shift()

unshift() 开头添加 返回新的数组长度
在这里插入图片描述
shift() 开头删除(删除数组的第一项) 返回删除的第一个元素
在这里插入图片描述

3.indexof()、lastIndexOf()、includes()

indexof() 从前往后搜索,如果存在就返回索引号,不存在就返回-1
在这里插入图片描述
lastIndexof() 从后往前搜索,如果存在就返回索引号,不存在就返回-1
在这里插入图片描述
includes() 返回布尔值,表示是否找到一个与指定元素匹配的项。
在这里插入图片描述

4.操作方法:concat()、slice()、splice()

concat() 在现有数组全部元素基础上创建一个新数组。 可以传多个参数,并把参数添加到数组末尾。
在这里插入图片描述
slice() 创建一个包含原有数组中一个或多个元素的新数组(截取操作)
这个操作不影响原数组!
接收一个或2个参数,返回元素的开始索引和结束索引。

  • 1个参数:返回从开始索引到数组末尾的所有元素。
  • 2个参数:返回从开始索引到结束索引的所有元素,不包括结束索引。
    在这里插入图片描述

注意:slice()参数有负值,数组长度+负值 = 确定位置

Eg:5个元素的数组,Slice(-2,-1)相当于slice(3,4)
在这里插入图片描述
如果结束位置小于开始位置,就返回空数组!
在这里插入图片描述
splice() 始终返回一个数组,包含数组中被删除的元素;如果没有删除元素,就返回空数组。

  • 删除 传2个参数 (要删除的第一个元素的位置,删除的数量) 返回删除的元素
    在这里插入图片描述

  • 插入 传3个参数 (开始位置,0,要插入的元素) 插入的元素可多个
    在这里插入图片描述

  • 替换 传3个参数 (开始位置,要删除元素的数量,要插入的任意多个元素)
    在这里插入图片描述

5.Array.isArray()

判断是不是数组,是就返回true,不是返回false
在这里插入图片描述

6.排序方法:sort()、reverse()

sort() 默认升序排列数组
reverse() 将数组元素反向排序
在这里插入图片描述

7.转换方法:toString()、join()

toString() 把数组转换成字符串,逗号分割每一项
在这里插入图片描述
join(‘字符串分割符’) 把数组转换成字符串,分隔符分割每一项;返回包含所有项的字符串。

注意:如果不给join()传入任何参数,或者传入undefined,那么仍然使用逗号作为分隔符。
在这里插入图片描述

8.keys()、values()、entries()

keys() 返回数组索引的迭代器
values() 返回数组元素的迭代器
entries() 返回数组索引/值对的迭代器
这几个方法都返回迭代器,所以可以将它们的内容通过Array.from()直接转换为数组实例。
在这里插入图片描述

9.迭代方法:every()、some()、filter()、forEach()、map()

every() 对数组每一项都运行传入的函数,如果对每一项函数都返回true,则这个方法返回true。
在这里插入图片描述
some()对数组每一项都运行传入的函数,如果有一项函数返回true,那么这个方法返回true。
在这里插入图片描述
filter()对数组每一项都运行传入的函数,函数返回true的项会组成数组之后返回。
在这里插入图片描述
forEach()对数组每一项都运行传入的函数。注意:forEach()是没有返回值的。
forEach方法中的回调函数有3个参数:数组元素,数组索引,数组本身。
在这里插入图片描述

10.创建数组的静态方法:from()、of()

from() 用于将类数组结构转换为数组实例
第一个参数(必填):一个类数组对象,即任何可迭代的结构
第二个参数(可选):映射函数参数(这个函数可以直接增强新数组的值)
第三个参数(可选):用于指定映射函数中this的值。
在这里插入图片描述
伪数组具有length属性:
在这里插入图片描述
在这里插入图片描述
of() 用于将一组参数转换为数组实例
在这里插入图片描述

11.reduce()

从数组的第一项遍历到数组的最后一项
接收两个参数(对每一项都会运行的归并函数,以之为归并起点的初始值)
回调函数接收4个参数:
1、prev 累计器累计回调的返回值; 表示上一次调用回调时的返回值,或者初始值 init;
2、cur 数组中当前被处理的元素
3、index 当前元素的索引 (可选)
4、array 当前元素所在的数组(可选)
在这里插入图片描述
在这里插入图片描述


总结

以上就是今天要分享的数组方法内容,欢迎大家前来与分享更好用的方法~

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

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

相关文章

input 元素 change 事件失效,失去焦点的时候才执行?什么原因导致?如何正确使用?

具体问题如标题所示&#xff0c;不再过多水字数&#xff0c;请看下面的代码&#xff1a; <input :class"[custom-form-item-input, (isFocusUserName && !userName) ? custom-form-item-input-err-active : ]"autoCompletenew-password type"text&…

带着疑问学C语言-C语言常用变量

目录 目录 一、声明变量和定义变量的区别是什么&#xff1f; 二、什么常量&#xff0c;如何区分常量和变量&#xff1f; 三、各数据类型所占的内存是多少&#xff1f; 四、字符与字符串的差别有哪些&#xff1f; 五、为什么会发生数据溢出&#xff0c;如何避免数据溢出&am…

springboot整合juit和springboot整合mybatis和springboot整合ssm

springboot整合juit 先看一眼包路径&#xff0c;发现main程序的路径和测试类的路径是一样的 启用新注解&#xff1a;SpringBootTest代替了之前sm整合juit时的 RunWith(SpringJUnit4ClassRunner.class) //spring配置类 ContextConfiguration(classes config.class)新的如此…

数字北京城,航行在联通2000M的“大运河”

前故宫博物院院长单霁翔&#xff0c;在《大运河漂来紫禁城》一书中提到过&#xff0c;紫禁城里的石材、木材&#xff0c;甚至每一块砖&#xff0c;都是通过大运河&#xff0c;跋山涉水来到北京的。某种程度上说&#xff0c;北京城的繁荣与这条纵跨南北的“中华大动脉”密不可分…

OpenGL入门教程之 变换

引言 这是一个闪耀的时刻&#xff0c;因为我们即将能生产出令人惊叹的3D效果&#xff01; 变换 向量和矩阵变换包括太多内容&#xff0c;但由于学过线性代数和GAMES101&#xff0c;因此不在此做过多阐述。仅阐述包括代码的GLM内容。 GLM的使用 &#xff08;1&#xff09;GLM…

拓扑排序例题 P4017 最大食物链计数

拓扑排序例题 P4017 最大食物链计数 题目链接&#xff1a;P4017 最大食物链计数 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 最大食物链计数 题目背景 你知道食物链吗&#xff1f;Delia 生物考试的时候&#xff0c;数食物链条数的题目全都错了&#xff0c;因为她总是重…

陆奇博士4月23日深圳奇绩创坛分享会PPT及核心观点:新范式、新时代、新机遇(附PPT下载链接)...

省时查报告-专业、及时、全面的行研报告库 省时查方案-专业、及时、全面的营销策划方案库 【免费下载】2023年3月份热门报告合集 【限时免费】ChatGPT4体验&#xff0c;无需翻墙直接用 ChatGPT调研报告&#xff08;仅供内部参考&#xff09; ChatGPT的发展历程、原理、技术架构…

记录-使用双token实现无感刷新,前后端详细代码

这里给大家分享我在网上总结出来的一些知识&#xff0c;希望对大家有所帮助 前言 近期写的一个项目使用双token实现无感刷新。最后做了一些总结&#xff0c;本文详细介绍了实现流程&#xff0c;前后端详细代码。前端使用了Vue3Vite&#xff0c;主要是axios封装&#xff0c;服务…

Unity之OpenXR+XR Interaction Toolkit接入Pico VR一体机

一.前言 Pico VR 一体机是目前国内比较流行的VR设备之一&#xff0c;PICO成立于2015年3月&#xff0c;于2021年9月并入字节跳动。最新推出的Pico4一体机售价只有2400左右&#xff0c;这让很多家庭都入手了Pico设备&#xff0c;VR一体机的功能包括&#xff1a;VR全景视频&#…

学成在线笔记+踩坑(8)——课程预览、提交审核,Freemarker模板引擎

导航&#xff1a; 【黑马Java笔记踩坑汇总】JavaSEJavaWebSSMSpringBoot瑞吉外卖SpringCloud黑马旅游谷粒商城学成在线牛客面试题_java黑马笔记 目录 1 模块需求分析 1.1 模块介绍 1.2 业务流程 1.2.1 课程预览 1.2.2 课程审核 1.2.3 课程发布 2 课程预览 2.1 需求分析…

深度学习 - 43.SeNET、Bilinear Interaction 实现特征交叉 By Keras

目录 一.引言 二.SENET Layer 1.简介 2.Keras 实现 2.1 Init Function 2.2 Build Function 2.3 Call Function 2.4 Test Main Function 2.5 完整代码 三.BiLinear Intercation Layer 1.简介 2.Keras 实现 2.1 Init Function 2.2 Build Function 2.3 Call Functi…

〖ChatGPT实践指南 - 零基础扫盲篇③〗- 开始使用 ChatGPT 并访问 OpenAI 获取 API Keys

文章目录 ⭐ 访问 ChatGPT 并登录⭐ OpenAI API keys 简介⭐ 获取 OpenAI 的 API keys 文件 请注意&#xff0c;该章节介绍的是如何使用 ChatGPT &#xff0c;并通过登录ChatGPT后访问 OpenAI 获取 API Keys&#xff0c;并不涉及如何科学的注册 ChatGPT。 ⭐ 访问 ChatGPT 并登…

D. Mysterious Present(Codeforces Beta Round 4 (Div. 2 Only))

https://codeforces.com/contest/4/problem/D 题目大意 给定 n n n 个信封的长和宽&#xff0c;以及一张卡片的长和宽&#xff0c;要求选出最多的信封&#xff0c;并且这些信封的长和宽都比前面的信封要大&#xff0c;并且最小的信封能够装下这张卡片。输出这些信封的数量和…

VS项目常规属性

常规属性页&#xff08;项目&#xff09; 常规 目标平台 指定运行项目的平台。例如&#xff0c;Windows&#xff0c;Android或iOS。 在此处&#xff0c;值 Windows 10 表示项目面向通用 Windows 平台。此属性是在创建项目时设置的只读字段。 目标平台版本 指定用于生成项目…

基于html+css的图展示41

准备项目 项目开发工具 Visual Studio Code 1.44.2 版本: 1.44.2 提交: ff915844119ce9485abfe8aa9076ec76b5300ddd 日期: 2020-04-16T16:36:23.138Z Electron: 7.1.11 Chrome: 78.0.3904.130 Node.js: 12.8.1 V8: 7.8.279.23-electron.0 OS: Windows_NT x64 10.0.19044 项目…

智慧园区数字化转型下的移动App发展

随着智慧城市的建设和智慧园区的崛起&#xff0c;智慧园区数字一体化建设成为园区发展的重心&#xff0c;当然数字转型离不开移动应用的整合服务。 在过去的几年中&#xff0c;智慧园区移动应用已经发展成为园区管理和服务的重要手段之一&#xff0c;为企业和员工提供了更加便…

OkHttp3源码解析 - 连接机制和缓存机制

系列文章目录 第一章 OkHttp3源码解析 - 请求流程 第二章 OkHttp3源码解析 - 拦截器 第三章 OkHttp3源码解析 - 连接机制和缓存机制 文章目录 系列文章目录前言一、连接机制1.1 创建连接1.2 连接池 二、缓存机制2.1 缓存策略2.2 缓存管理 彩蛋致谢 前言 本文基于okhttp3.12.1…

我的一些实战的漏洞挖掘过程(一)

最近挖到的漏洞&#xff0c;在这里分享一下&#xff0c;有些信息比较敏感就打码处理&#xff0c;目标网站都换为target.com 反射xss漏洞挖掘 跨站脚本攻击&#xff08;Cross-site Scripting&#xff0c;XSS&#xff09;是一种常见的Web安全漏洞&#xff0c;攻击者通过在Web应…

Windows上使用gcc

安装 下载x86_64-7.3.0-release-win32-seh-rt_v5-rev0 安装包&#xff0c;解压&#xff0c;将对应解压路径下的bin加入环境变量path&#xff0c;将mingw32-make.exe 改名make.exe&#xff0c;使用gcc同样可以在Windows上生成.o文件和.a文件&#xff0c;也可以生成.lib文件 te…

AI思维导图来了,让活动策划更加简单!

每当有活动的时候&#xff0c;都会让策划的小伙伴绞尽脑汁&#xff01; ProcessOn一直致力于提升大家的办公效率。新增的AI功能&#xff0c;可以帮助我们一键生成思维导图、流程图。让一切变得更加简单。 没有灵感&#xff1f;没有关系。不知道怎么做&#xff0c;没有关系&a…