javascript基础一:Javscript数组的常用方法有哪些?

news2024/11/27 18:41:44

在日常开发中,我们对数组可以说操作最多,这里我们来整理下数组的一下最常用的方法
在这里插入图片描述
数组基本操作可以归纳为 增、删、改、查,需要留意的是哪些方法会对原数组产生影响,哪些方法不会
下面对数组常用的操作方法做一个归纳

一、基本方法


下面前三种是对原数组产生影响的增添方法,第四种则不会对原数组产生影响

push()
unshift()
splice()
concat()

push()
push()方法接收任意数量的参数,并将它们添加到数组末尾,返回数组的最新长度

let arr = []
let num = arr.push('1','2')
num  // 2

在这里插入图片描述
unshift()
unshift()在数组开头添加任意多个值,然后返回新的数组长度

let arr = []
let num = arr.unshift('1','2')
num // 2

在这里插入图片描述
splice
传入三个参数,分别是开始位置、0(要删除的元素数量)、插入的元素,返回空数组

let  arr = ['1','2','3']
let _num = arr.splice(1,0,'4','5')
arr // ['1', '4', '5', '2', '3']
_num // []

在这里插入图片描述
concat()
首先会创建一个当前数组的副本,然后再把它的参数添加到副本末尾,最后返回这个新构建的数组,不会影响原始数组

let arr = ['1','2','3']
let arr1 = arr.concat('4',['5','6'])
arr // ['1', '2', '3']
arr1 // ['1', '2', '3', '4', '5', '6']

在这里插入图片描述

下面三种都会影响原数组,最后一项不影响原数组:

pop()
shift()
splice()
slice()

pop()
pop() 方法用于删除数组的最后一项,同时减少数组的length 值,返回被删除的项

let arr = ['1','2']
let _item = arr.pop() // 取得最后一项
arr //['1']
_item //'2'

在这里插入图片描述
shift()
shift()方法用于删除数组的第一项,同时减少数组的length 值,返回被删除的项

let arr = ['1','2','3']
let _item = arr.shift()//取得第一项
arr // ['2', '3']
_item //'1'

在这里插入图片描述
splice()
传入两个参数,分别是开始位置,删除元素的数量,返回包含删除元素的数组

let arr = ['1','2','3']
let _item = arr.splice(0,1)//删除第一项
arr // ['2', '3']
_item //['1']

在这里插入图片描述
slice()
slice() 用于创建一个包含原有数组中一个或多个元素的新数组,不会影响原始数组,包含两个参数,起止,如果是输入一个参数,表示开始位置到完,如果输入两个参数,不包含后面的位置

let arr = ['1','2','3','4','5']
let arr1 = arr.slice(1)
let arr2 = arr.slice(1,3)
arr // ['1', '2', '3', '4', '5']
arr1 //['2', '3', '4', '5']
arr2// ['2', '3']

在这里插入图片描述

即修改原来数组的内容,常用splice

splice()
传入三个参数,分别是开始位置,要删除元素的数量,要插入的任意多个元素,返回删除元素的数组,对原数组产生影响

let arr = ['1','2','3','4','5']
let _item = arr.splice(1,1,'0','-1')
arr //['1', '0', '-1', '3', '4', '5']
_item //['2']

在这里插入图片描述

即查找元素,返回元素坐标或者元素值

indexOf()
includes()
find()

indexOf()
返回要查找的元素在数组中的位置,如果没找到则返回-1

let arr = ['1','2','3','4','5']
arr.indexOf('1') //0

在这里插入图片描述
includes()
返回要查找的元素在数组中的位置,找到返回true,否则false

let arr = ['1','2','3','4','5']
arr.includes('2') //true

在这里插入图片描述
find()
返回第一个匹配的元素

let arr = [ 
    {
        key:'1',
        name: '123'
    },{
        key:'2',
        name:'456'
    }]
arr.find(item=>item.key==='1') //{key: '1', name: '123'}

在这里插入图片描述
二、排序方法
数组有两个方法可以用来对元素重新排序:

reverse()
sort()

reverse()
顾名思义,将数组元素方向排列

let arr = [1,2,3,4,5,6]
arr.reverse() // [6, 5, 4, 3, 2, 1]

在这里插入图片描述
sort()
sort()方法接受一个比较函数,用于判断哪个值应该排在前面

function compare(value1, value2) {
    if (value1 < value2) {
        return -1;
    } else if (value1 > value2) {
        return 1;
    } else {
        return 0;
    }
}
let arr = [10,1,8,15,2,0]
arr.sort(compare) // [0, 1, 2, 8, 10, 15]

在这里插入图片描述
三、转换方法

常见的转换方法有:join()

join()
join() 方法接收一个参数,即字符串分隔符,返回包含所有项的字符串,不会改变原数组

let arr = [1,2,3]
arr.join(',') //'1,2,3'
arr // [1, 2, 3]
arr.join('-') //'1-2-3'

在这里插入图片描述
四、迭代方法
常用来迭代数组的方法(都不改变原数组)有如下:

some()
every()
forEach()
filter()
map()

some()
对数组每一项都运行传入的函数,如果有一项函数返回 true ,则这个方法返回 true

let arr= [1,2,3,4]
arr.some(item=>item>3) //true

在这里插入图片描述
every()
对数组每一项都运行传入的函数,如果对每一项函数都返回 true ,则这个方法返回 true

let arr = [1,2,3,4,5]
arr.every(item=>item>2) //false
arr.every(item=>item>=1) //true

在这里插入图片描述
forEach()
对数组每一项都运行传入的函数,没有返回值

let arr = [1,2,3,4]
arr.forEach(item=>{
    //要执行的内容
})

在这里插入图片描述
filter()
对数组每一项都运行传入的函数,函数返回 true 的项会组成数组之后返回

let arr= [1,2,3,4,5]
arr.filter(item=>item>3) // [4, 5]

在这里插入图片描述
map()
对数组每一项都运行传入的函数,返回由每次函数调用的结果构成的数组

let arr = [1,2,3,4]
let arr1 = arr.map(item=>item*2)
arr1 // [2, 4, 6, 8]
arr // [1, 2, 3, 4]

在这里插入图片描述

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

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

相关文章

ChatGPT国内免费使用的方法有哪些?

目录 一、ChatGpt是什么&#xff1f; 二、ChatGPT国内免费使用的方法&#xff1a; 第一点&#xff1a;电脑端 第二点&#xff1a;手机端 三、结语&#xff1a; 一、ChatGpt是什么&#xff1f; ChatGPt是美国OpenAI [1] 研发的聊天机器人程序 。更是人工智能技术驱动的自然语…

【C++数据结构】二叉搜索树的使用和模拟实现及其应用--K模型和KV模型

文章目录 一、二叉搜索树的概念二、二叉搜索树的操作及其实现(非递归)1.二叉搜索树节点和类的定义2.二叉搜索树的构造函数3.二叉搜索树的拷贝构造4.二叉树搜索树的赋值重载5.二叉搜索树的析构函数6.二叉搜索树的中序遍历7.二叉搜索树的查找8.二叉搜索树的插入9.二叉搜索树的删除…

瑞吉外卖 - 分页查询分类功能(12)

某马瑞吉外卖单体架构项目完整开发文档&#xff0c;基于 Spring Boot 2.7.11 JDK 11。预计 5 月 20 日前更新完成&#xff0c;有需要的胖友记得一键三连&#xff0c;关注主页 “瑞吉外卖” 专栏获取最新文章。 相关资料&#xff1a;https://pan.baidu.com/s/1rO1Vytcp67mcw-PD…

【Android 面经分享】阿里技术专家的 5年 Android 开发的求职之路

作者:yechaoa 来源:https://juejin.cn/post/6996551155220217869 前言 前段时间在看机会&#xff0c;本文就是我对求职过程的一个总结。 同时&#xff0c;也作为一个面试官&#xff0c;来说说求职中需要注意的点。 各大厂的面试会考核哪些知识点5年开发应该具备哪些技术要点…

chatgpt赋能Python-pycharm取消venv

PyCharm取消venv&#xff1a;一种更简便的虚拟环境管理方式 虚拟环境是Python开发中的重要组成部分之一。它可以让您在同一台机器上使用不同的Python版本、不同的库以及不同的项目而不会干扰彼此之间的功能独立性。而在Python开发中&#xff0c;venv是创建虚拟环境的常用方式之…

chatgpt赋能Python-pycharm怎么关联

Pycharm怎么关联——提高Python开发效率的关键步骤 作为一名有10年Python编程经验的工程师&#xff0c;我深知在日常开发中如何提高Python的编程效率至关重要。而Pycharm则是Python领域最常用的IDE之一&#xff0c;其强大的代码编辑和调试功能&#xff0c;深受开发者的喜爱。 …

Linux驱动开发 --- CCF时钟框架

0. CCF时钟框架概览 linux内核的CCF时钟框架可以分为三层&#xff0c;每一层的职责以及彼此的关系如下图所示 对CCF框架的分析也将以如下几个方向入手&#xff1a; consumer&#xff08;也就是device driver&#xff09;如何使用CCFprovider如何借助CCF管理系统的时钟资源CC…

前端BFC

一、首先我们要先了解常见的定位方案&#xff0c;总共3种&#xff08;普通流、浮动、绝对定位&#xff09; 而BFC是属于普通流的 我们可以把BFC看作为页面的一块渲染区域&#xff0c;他有着自己的渲染规则 简单来说BFC可以看作元素的一种属性&#xff0c;当元素拥有了BFC属性…

ChatGPT:2. 使用OpenAI创建自己的AI网站:1. 初探API

使用OpenAI创建自己的AI网站 如果你还是一个OpenAI的小白&#xff0c;有OpenAI的账号&#xff0c;但想调用OpenAI的API搞一些有意思的事&#xff0c;那么这一系列的教程将仔细的为你讲解如何使用OpenAI的API制作属于自己的AI网站。博主只能利用下班时间更新&#xff0c;进度慢…

自学spring个人笔记

目录 如何学习spring&#xff1f; 如何查看自己电脑是否安装了spring boot Spring Boot CLI安装成功 springboot的版本2.7.12(SNAPSHOT)与2.7.11有什么区别&#xff1f; 报错解决 Plugin org.springframework.boot:spring-boot-maven-plugin:not found 在maven pom.xml中…

【AFNetWorking源码(二)AFURLSessionManger和AFHTTPSessionManager】

前言 学习了Mananger的初始化和以GET请求为例的过程&#xff0c;发现整个过程离不开AFHTTPSessionManager和AFURLSessionManger的某些方法。这两个是AFN的重要的网络通信模块内容&#xff0c;对它们作揖详细的学习。 AFURLSessionManager和AFHTTPSessionManager都是AFNetwork…

chatgpt赋能Python-mac电脑安装python

在Mac电脑上轻松安装Python Python是一种高级编程语言&#xff0c;常用于数据科学、机器学习和Web开发等领域。如果你是一名Mac电脑用户&#xff0c;那么安装Python将会让你受益匪浅。本文将提供详细的操作步骤&#xff0c;让你轻松安装Python并开始学习编程。 第一步&#x…

【Linux】进程地址空间(带你认清内存的本质)

&#x1f525;&#x1f525; 欢迎来到小林的博客&#xff01;&#xff01;       &#x1f6f0;️博客主页&#xff1a;✈️小林爱敲代码       &#x1f6f0;️博客专栏&#xff1a;✈️Linux之路       &#x1f6f0;️社区 :✈️ 进步学堂       &a…

Linux:chmod chown 权限管理

基础权限有以下三个 r 读 4 w 写 2 x 执行 1 - 无此权限 0 开头的第一个字母是这个的类型 d 目录 - 普通文件 l 链接文件 常见的三种 只不过今天不讲这个 从第二个字母开始看起 三个字母为一组 一共…

【EfficientDet】《EfficientDet:Scalable and Efficient Object Detection》

CVPR-2020 文章目录 1 Background and Motivation2 Related Work3 Advantages / Contributions4 Method4.1 BiFPN4.2 EfficientDet 5 Experiments5.1 Datasets5.2 EfficientDet for Object Detection5.3 EfficientDet for Semantic Segmentation5.4 Ablation Study 6 Conclusio…

RocketMQ你不得不了解的 Rebalance机制源码分析

这里是weihubeats,觉得文章不错可以关注公众号小奏技术&#xff0c;文章首发。拒绝营销号&#xff0c;拒绝标题党 RocketMQ版本 version: 5.1.0 RocketMQ中consumer消费模型 在了解RocketMQ的Rebalance机制之前&#xff0c;我们必须先简单了解下rocketmq的消费模型 我们知道…

chatgpt赋能Python-left函数_python

Left 函数在Python中的使用及其优点 在Python编程语言中&#xff0c;字符串处理是不可避免的任务。Python提供了许多内置函数来处理字符串&#xff0c;其中left()函数是其中一个非常重要的函数。本文将介绍left()函数的用法、优点和一些实例&#xff0c;以便更好的理解该函数。…

redis高级篇(2)---主从

一)搭建主从架构: 单节点Redis的并发能力是有限的&#xff0c;所以说要想进一步提高Redis的并发能力&#xff0c;就需要搭建主从集群&#xff0c;实现读写分离&#xff0c;因为对于Redis来说大部分都是读多写少的场景&#xff0c;更多的要进行读的压力&#xff0c;最基本都要是…

【Android学习专题】java基本语法和概念(学习记录)

学习记录来自菜鸟教程 Java 变量 Java 中主要有如下几种类型的变量 局部变量 在方法、构造方法或者语句块中定义的变量被称为局部变量。变量声明和初始化都是在方法中&#xff0c;方法结束后&#xff0c;变量就会自动销毁类变量&#xff08;静态变量&#xff09; 类变量也声…

chatgpt赋能Python-libreoffice_python宏

介绍 LibreOffice是一套免费开源的办公软件&#xff0c;其中包含一个强大的Python宏系统&#xff0c;可以使用Python编写脚本来增强办公软件的功能。本文将介绍LibreOffice Python宏是什么&#xff0c;如何使用Python编写宏&#xff0c;并提供一些示例&#xff0c;以便读者可以…