当前位置: 首页 > news >正文

JavaScript中常用的数组方法

在日常开发中,我们会接触到js中数组的一些方法,这些方法对我们来说,可以很便利的达到我们想要的结果,但是因为方法比较多,有些方法也不常用,可能会过一段时间就会忘记,那么在这里我整理了一些数组的方法,供大家查阅。

一、改变原数组的

  • Array.push(),向数组的末尾添加一个或多个元素,并返回新的数组长度。
let arr = [1,2,3];
arr.push(4,5,6);
//arr = [1,2,3,4,5,6];
  • Array.pop(),删除并返回数组的最后一个元素,若该数组为空,则返回undefined。
let arr = [1,2,3];
var del = arr.pop();
// del = 3;
// arr = [1,2];
  • Array.unshift(),向数组的开头添加一个或多个元素,并返回新的数组长度。
let arr = [1,2,3];
var res = arr.unshift(0);
// res = 4;
// arr = [0,1,2,3];
  • Array.shift(),删除数组的第一项,并返回第一个元素的值。若该数组为空,则返回undefined。
let arr = [1,2,3];
var res = arr.shift();
// res = 1;
// arr = [2,3];
  • Array.reverse(),将数组倒序。
let arr = [1,2,3];
arr.reverse();
// arr = [3,2,1];
  • Array.sort(),对数组元素进行排序。按照字符串UniCode码排序。
let arr = [1,4,2,5,3];
// 从小到大
arr.sort(function(a, b){return a-b});
// [1,2,3,4,5]
// 从大到小
arr.sort(function(a, b){return b-a});
// [5,4,3,2,1]
  • Array.splice(index,howmany,arr1,arr2…) ,用于添加或删除数组中的元素。从index位置开始删除howmany个元素,并将arr1、arr2…数据从index位置依次插入。howmany为0时,则不删除元素。
//移除数组的第三个元素,并在数组第三个位置添加新元素
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,1,"Lemon","Kiwi");
//Banana,Orange,Lemon,Kiwi,Mango

二、不改变原数组的

  • Array.concat(arr1,arr2…),合并两个或多个数组,生成一个新的数组。
let arr = [1,2];
let arr1 = [3,4];
let arr2 = [5,6];
let res = arr.concat(arr1,arr2);
//res = [1,2,3,4,5,6]
//arr = [1,2]
  • Array.join(),将数组的每一项用指定字符连接形成一个字符串。默认连接字符为 “,” 逗号。
let arr = [1,2,3,4,5];
let str1 = arr.join();
let str2 = arr.join('-');
//str1=1,2,3,4,5
//str2=1-2-3-4-5
  • Array.slice() 按照条件查找出其中的部分内容。

    参数:

    array.slice(n, m),从索引n开始查找到m处(不包含m)

    array.slice(n) 第二个参数省略,则一直查找到末尾

    array.slice(0)原样输出内容,可以实现数组克隆

    array.slice(-n,-m) slice支持负参数,从最后一项开始算起,-1为最后一项,-2为倒数第二项

    返回值:返回一个新数组

    是否改变原数组:不改变

let arr = [1,2,3,4];
let res = arr.slice(2,4);
// res = [3,4]
  • Array.map( function ( item, index, arr) {}),原数组的每一项执行函数后,返回一个新的数组。

第一个参数:item,必须,当前元素的值

第二个参数:index,可选,当前元素在数组中的索引值

第三个参数:arr,当前元素属于的数组对象

特点:

(1) 函数执行次数 === 数组长度

(2) 函数内部的return

return 新的元素,如果没有return,则map的返回值都是undefined

(3) map方法的返回值

返回映射之后的新数组

const arr = [88,90,100,20,50]
const res = arr.map(item => item * 0.8)
  • Array.forEach(function ( item, index,arr) {} ),用于调用数组的每个元素,并将元素传递给回调函数。(注意该方法和map的区别,若直接打印Array.forEach,结果为undefined)。

第一个参数: item,必须,当前元素的值

第二个参数 : index,可选,当前元素在数组中的索引值

第三个参数 : arr,当前元素所处的数组对象

注意点:

(1) forEach() 对于空数组是不会执行回调函数的。

(2) forEach() 是不支持的 continue 与 break 语句的,利用try...catch在特定时机抛出异常达到跳出循环的效果。

const arr = [1,2,3,4,5]
arr.forEach( (item , index ) => {console.log( item, index )
})
  • Array.filter(function),过滤数组中,符合条件的元素并返回一个新的数组。
let arr = [1,2,3,4];
let res = arr.filter(item => item > 2);
// res = [3,4]
  • Array.reduce(function),reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
let arr = [1,2,3,4,5];
let res1 = arr.reduce((a,b) => a + b));
let res2 = arr.reduce((a,b) => a * b));
// arr = [1,2,3,4,5]
// res1 = 15
// res1 = 120
  • Array.some(function),对数组中的每一项进行判断,若都不符合则返回false,否则返回true。
const arr = [10,20.50,60,70,80]
const res = arr.some(item => item < 0)
// res: flase
  • Array.every(function),对数组中的每一项进行判断,若都符合则返回true,否则返回false。
const arr = [10,20,30,40,50,60]
const res = arr.every(item => item > 5)
// res: true
  • Array.indexOf(),将从头到尾地检索数组,看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头(没有指定 start参数时)。如果找到一个 item,则返回 item 的第一次出现的位置。如果在数组中没找到指定元素则返回 -1。
//语法
// array.indexOf(item,start) 
//item 必须 要查找的元素的位置,
//start 非必须可选的整数参数。规定在数组中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数,则将从字符串的首字符开始检索。
let food= ["番茄", "胡萝卜", "排骨", "苹果"];
let a = food.indexOf("苹果");
console.log(a) // 3
let b= food.indexOf("香蕉");
console.log(b) // -1

相关文章:

JavaScript中常用的数组方法

在日常开发中&#xff0c;我们会接触到js中数组的一些方法&#xff0c;这些方法对我们来说&#xff0c;可以很便利的达到我们想要的结果&#xff0c;但是因为方法比较多&#xff0c;有些方法也不常用&#xff0c;可能会过一段时间就会忘记&#xff0c;那么在这里我整理了一些数…...

磁疗为什么“没效果”?原来真相是这样!

很多人磁疗之后&#xff0c; 总爱迫不及待问一个问题&#xff1a; “这个多长时间见效啊&#xff1f;” …… 还有些人几天没有效果&#xff0c; 就果断下结论&#xff1a; “这东西没用&#xff01;” …… 有不少人错误地把磁疗等同于“药品”一样看待&#xff0c;总觉得…...

【直击招聘C++】5.1函数模板

5.1函数模板一、要点归纳1.定义函数模板2.实例化函数模板3.重载模板函数4.函数调用的匹配顺序一、要点归纳 1.定义函数模板 定义函数模板的一般格式如下&#xff1a; template<类型形参表> 返回类型 函数名&#xff08;形参表&#xff09; {函数体&#xff1b; }例如以…...

谈谈Java多线程离不开的AQS

如果你想深入研究Java并发的话&#xff0c;那么AQS一定是绕不开的一块知识点&#xff0c;Java并发包很多的同步工具类底层都是基于AQS来实现的&#xff0c;比如我们工作中经常用的Lock工具ReentrantLock、栅栏CountDownLatch、信号量Semaphore等&#xff0c;而且关于AQS的知识点…...

国际化语言,多语言三种方式

可以用透传的方式&#xff0c;自己写local的json文件&#xff0c;不需要配置什么&#xff0c;直接传&#xff0c;自己写方法i18n nextjsi18n umi4一、透传的方式 export const AppContext React.createContext<any>({})app.tsx 用context包裹import type { AppProps } f…...

C++——哈希3|位图

目录 常见哈希函数 位图 位图扩展题 位图的应用 常见哈希函数 1. 直接定址法--(常用) 这种方法不存在哈希冲突 取关键字的某个线性函数为散列地址&#xff1a;Hash&#xff08;Key&#xff09; A*Key B 优点&#xff1a;简单、均匀 缺点&#xff1a;需要事先知道关键字的…...

75 error

全部 答对 答错 选择题 3. 某公司非常倚重预测型方法交付项目&#xff0c;而其招聘的新项目经理却习惯于运用混合型方法。项目范围包含很多不清晰的需求。项目经理应该如何规划项目的交付&#xff1f; A company that is heavily focused on delivering projects using predi…...

ESP-C3入门8. 连接WiFi并打印信息

ESP-C3入门8. 连接WiFi并打印信息一、ESP32 连接WiFi的基本操作流程1. 初始化nvs存储2. 配置WiFi工作模式3. 设置WiFi登陆信息4. 启动WiFi5. 开启连接6. 判断是否成功二、事件处理函数1. 定义事件处理函数2. 创建事件组3. 在事件处理函数中设置事件组位4. 在其他任务中等待事件…...

使用python将EXCEL表格中数据转存到数据库

使用Python将excel表格中数据转存到数据库 1. 思路&#xff1a; 1&#xff09; 使用python读取excel表格中数据 2&#xff09;根据数据生成sql语句 3&#xff09;批量运行sql语句 2. 代码&#xff1a; import pandas as pddef readExcel(path, excel_file):return pd.read_e…...

【C++】类和对象(三)

目录 一、构造函数补充 1、初始化列表 1.1、初始化列表概念 1.2、初始化列表性质 2、explicit关键字 二、static成员 1、概念及使用 2、性质总结 三、友元 1、友元函数 2、友元类 四、内部类 五、拷贝对象时的一些编译器优化 一、构造函数补充 在《类和对象&#x…...

vTESTstudio - VT System CAPL Functions - General/Trigger Function

前面文章中我们已经介绍了常用的几种板卡的基本信息&#xff0c;那这些板卡该如何去通过软件调用呢&#xff1f;带着这个问题我们开始新的一块内容 - VT系统相关的自动化控制函数介绍&#xff0c;我会按照不同的板卡来分类&#xff0c;对其可控制的函数进行介绍&#xff0c;方便…...

IDEA 快捷键

ctrlD &#xff1a;复制当前行到下一行 ctrlO : 重写当前类的方法 ctrlshiftu : 大小写转化 Alt 上/下 &#xff1a;跳到上一个、下一个函数 Alt 左/右 : 回到上一个、下一个文件 Alt 回车 &#xff1a; 代码修正 Alt Insert &#xff1a; 插入代码 Ctrl Alt L &#xf…...

2023新华为OD机试题 - 入栈出栈(JavaScript) | 刷完必过

入栈出栈 题目 向一个空栈中依次存入正整数 假设入栈元素N(1 <= N <= 2^31-1) 按顺序依次为Nx ... N4、N3、N2、N1, 当元素入栈时,如果N1=N2+...Ny (y的范围[2,x],1 <= x <= 1000) 则N1到Ny全部元素出栈,重新入栈新元素M(M=2*N1) 如依次向栈存储6、1、2、3,当存…...

微信公众号扫码授权登录思路

引言 上学期研究了一下微信登录相关内容&#xff0c;也写了两三篇笔记&#xff0c;但是最后实际登录流程没有写&#xff0c;主要因为感觉功能完成有所欠缺&#xff0c;一直也没有好的思路&#xff1b;这两天我又看了看官方文档&#xff0c;重新构思了一下微信公众号登录相关的…...

数据结构与算法基础-学习-10-线性表之顺序栈的清理、销毁、压栈、弹栈

一、函数实现顺序栈的其他函数实现&#xff0c;请看之前的博客链接《数据结构与算法基础-学习-09-线性表之栈的理解、初始化顺序栈、判断顺序栈空、获取顺序栈长度的实现》。1、ClearSqStack&#xff08;1&#xff09;用途清理栈的空间。只需要栈顶指针和栈底指针相等&#xff…...

Hazel游戏引擎(005)

本人菜鸟&#xff0c;文中若有代码、术语等错误&#xff0c;欢迎指正 我写的项目地址&#xff1a;https://github.com/liujianjie/GameEngineLightWeight&#xff08;中文的注释适合中国人的你&#xff09; 文章目录前言关键操作代码文件关键代码代码流程代码文件关键代码exter…...

牛客网Python篇数据分析习题(四)

1.现有一个Nowcoder.csv文件&#xff0c;它记录了牛客网的部分用户数据&#xff0c;包含如下字段&#xff08;字段与字段之间以逗号间隔&#xff09;&#xff1a; Nowcoder_ID&#xff1a;用户ID Level&#xff1a;等级 Achievement_value&#xff1a;成就值 Num_of_exercise&a…...

盲盒如何创业?

所谓的“盲盒”&#xff0c;受众群体大部分是那些爱碰运气的人&#xff0c;顾客买的是那种在打开盲盒时一刹那的惊喜感和神秘感&#xff0c;在打开盲盒之前&#xff0c;谁也不知道自己会得到什么&#xff0c;这也是为什么消费者更愿意购买的原因。网上的盲盒&#xff0c;主要是…...

第1集丨Java中面向对象相关概念汇总

目录一、基本概念1.1 类1.2 属性1.3 方法1.4 静态1.5 包1.6 import二、高级概念2.1 构造方法2.2 继承2.3 super & this2.4 多态2.5 方法重载2.6 方法重写2.7 访问权限2.8 内部类2.9 final2.10 抽象2.11 接口2.12 匿名类面向对象的编程思想力图使计算机语言中对事物的描述与…...

高性能(二)

三、读写分离和分库分表 1.读写分离 1.1 概述 将数据库的读写操作分散到不同的数据库节点上 通常一主多从一台主数据库负责写&#xff0c;多台从数据库负责读。 主库和从库之间会进行数据同步&#xff0c;以保证从库中数据的准确性。 1.2 问题及解决 1.2.1 问题 主从同…...

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用&#xff0c;可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器&#xff0c;能够帮助开发者更好地管理复杂的依赖关系&#xff0c;而 GraphQL 则是一种用于 API 的查询语言&#xff0c;能够提…...

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

css3笔记 (1) 自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size&#xff1a;0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...

mysql已经安装,但是通过rpm -q 没有找mysql相关的已安装包

文章目录 现象&#xff1a;mysql已经安装&#xff0c;但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时&#xff0c;可能是因为以下几个原因&#xff1a;1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...

scikit-learn机器学习

# 同时添加如下代码, 这样每次环境(kernel)启动的时候只要运行下方代码即可: # Also add the following code, # so that every time the environment (kernel) starts, # just run the following code: import sys sys.path.append(/home/aistudio/external-libraries)机…...

给网站添加live2d看板娘

给网站添加live2d看板娘 参考文献&#xff1a; stevenjoezhang/live2d-widget: 把萌萌哒的看板娘抱回家 (ノ≧∇≦)ノ | Live2D widget for web platformEikanya/Live2d-model: Live2d model collectionzenghongtu/live2d-model-assets 前言 网站环境如下&#xff0c;文章也主…...

学习一下用鸿蒙​​DevEco Studio HarmonyOS5实现百度地图

在鸿蒙&#xff08;HarmonyOS5&#xff09;中集成百度地图&#xff0c;可以通过以下步骤和技术方案实现。结合鸿蒙的分布式能力和百度地图的API&#xff0c;可以构建跨设备的定位、导航和地图展示功能。 ​​1. 鸿蒙环境准备​​ ​​开发工具​​&#xff1a;下载安装 ​​De…...