JS中Array的常用方法

文章目录

      • 1. 创建和初始化数组
      • 2. 添加和删除元素
      • 3. 查找元素
      • 4. 遍历数组
      • 5. 数组转换
      • 6. 排序和反转
      • 7. 其他方法

JavaScript 中的 Array 对象提供了许多常用的方法,这些方法可以帮助你更方便地操作数组。以下是一些常用的 Array 方法及其用法:

1. 创建和初始化数组

  • new Array():创建一个空数组。
  • Array.of():创建一个具有可变数量参数的新数组实例。
  • Array.from():从类数组或可迭代对象创建一个新的数组实例。
const arr1 = new Array();
const arr2 = Array.of(1, 2, 3);
const arr3 = Array.from('hello'); // ['h', 'e', 'l', 'l', 'o']

2. 添加和删除元素

  • push(...items):在数组末尾添加一个或多个元素,并返回新的长度。
  • pop():移除数组末尾的元素,并返回该元素。
  • unshift(...items):在数组开头添加一个或多个元素,并返回新的长度。
  • shift():移除数组开头的元素,并返回该元素。
const arr = [1, 2, 3];arr.push(4); // arr 现在是 [1, 2, 3, 4]
console.log(arr.pop()); // 输出: 4, arr 现在是 [1, 2, 3]arr.unshift(0); // arr 现在是 [0, 1, 2, 3]
console.log(arr.shift()); // 输出: 0, arr 现在是 [1, 2, 3]

3. 查找元素

  • indexOf(searchElement[, fromIndex]):返回第一个匹配项的索引,如果没有找到则返回 -1。
  • lastIndexOf(searchElement[, fromIndex]):返回最后一个匹配项的索引,如果没有找到则返回 -1。
  • find(callback[, thisArg]):返回数组中满足提供的测试函数的第一个元素的值,如果没有找到则返回 undefined
  • findIndex(callback[, thisArg]):返回数组中满足提供的测试函数的第一个元素的索引,如果没有找到则返回 -1。
const arr = [1, 2, 3, 4, 5];console.log(arr.indexOf(3)); // 输出: 2
console.log(arr.lastIndexOf(3)); // 输出: 2const foundElement = arr.find(element => element > 3);
console.log(foundElement); // 输出: 4const foundIndex = arr.findIndex(element => element > 3);
console.log(foundIndex); // 输出: 3

4. 遍历数组

  • forEach(callback[, thisArg]):对数组中的每个元素执行一次提供的函数。
  • map(callback[, thisArg]):创建一个新数组,其结果是该数组中的每个元素调用提供的函数的结果。
  • filter(callback[, thisArg]):创建一个新数组,包含通过提供的函数实现的测试的所有元素。
  • reduce(callback[, initialValue]):对数组中的每个元素执行一个由您提供的 reducer 函数(升序执行),将其结果汇总为单个返回值。
  • reduceRight(callback[, initialValue]):与 reduce 类似,但降序执行。
const arr = [1, 2, 3, 4, 5];// forEach
arr.forEach(element => console.log(element));// map
const squared = arr.map(element => element * element);
console.log(squared); // 输出: [1, 4, 9, 16, 25]// filter
const evenNumbers = arr.filter(element => element % 2 === 0);
console.log(evenNumbers); // 输出: [2, 4]// reduce
const sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 输出: 15// reduceRight
const reversedSum = arr.reduceRight((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(reversedSum); // 输出: 15

5. 数组转换

  • slice([begin[, end]]):返回一个新的数组,包含从开始到结束(不包括结束)的数组的一部分浅拷贝。
  • splice(start[, deleteCount[, ...items]]):改变原数组,通过删除现有元素和/或添加新元素。
  • concat(...items):返回一个新的数组实例,该实例是通过将现有数组与传入的数组或非数组值连接而成的。
  • flat(depth):按照指定深度递归地展平数组。
  • flatMap(callback[, thisArg]):先映射数组,然后将结果展平。
const arr = [1, 2, 3, 4, 5];// slice
const sliced = arr.slice(1, 3);
console.log(sliced); // 输出: [2, 3]// splice
const removed = arr.splice(1, 2, 10, 11);
console.log(arr); // 输出: [1, 10, 11, 4, 5]
console.log(removed); // 输出: [2, 3]// concat
const concatenated = arr.concat([6, 7]);
console.log(concatenated); // 输出: [1, 10, 11, 4, 5, 6, 7]// flat
const nested = [1, [2, [3, [4, 5]]]];
const flattened = nested.flat(Infinity);
console.log(flattened); // 输出: [1, 2, 3, 4, 5]// flatMap
const mappedAndFlattened = arr.flatMap(x => [x, x * 2]);
console.log(mappedAndFlattened); // 输出: [1, 2, 10, 20, 11, 22, 4, 8, 5, 10]

6. 排序和反转

  • sort([compareFunction]):对数组的元素进行排序,并返回排序后的数组。
  • reverse():反转数组中元素的顺序,并返回反转后的数组。
const arr = [3, 1, 4, 1, 5, 9, 2, 6];// sort
arr.sort((a, b) => a - b);
console.log(arr); // 输出: [1, 1, 2, 3, 4, 5, 6, 9]// reverse
arr.reverse();
console.log(arr); // 输出: [9, 6, 5, 4, 3, 2, 1, 1]

7. 其他方法

  • includes(searchElement[, fromIndex]):判断数组是否包含某个指定的值,如果是返回 true,否则返回 false
  • join([separator]):将所有数组元素连接成一个字符串。
  • some(callback[, thisArg]):检测数组中是否有至少一个元素满足提供的测试函数。
  • every(callback[, thisArg]):检测数组中的所有元素是否都满足提供的测试函数。
const arr = [1, 2, 3, 4, 5];// includes
console.log(arr.includes(3)); // 输出: true// join
const joined = arr.join('-');
console.log(joined); // 输出: 1-2-3-4-5// some
const hasEven = arr.some(element => element % 2 === 0);
console.log(hasEven); // 输出: true// every
const allPositive = arr.every(element => element > 0);
console.log(allPositive); // 输出: true

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

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

相关文章

实时计算Flink应用场景

实时计算Flink应用场景 Flink是一个开源的流处理和批处理框架,具有低延迟、高吞吐、容错性强等特点,适用于大规模的实时数据处理和分析。它能够处理包括事件流、日志、传感器数据等各种类型的数据,因此在多个行业和领域有着广泛的应用。以下…

ABB主调制解调器(DSTC130)

‌ABB控制调解器是一种用于工业自动化控制的设备,具有高性能、易于编程和配置、易于集成、高可靠性和维护方便等特点。‌ 它采用先进的控制算法和数据处理技术,能够实现高精度的控制和监测,快速响应系统的变化,提高系统的稳定性和…

查看SQL执行计划 explain

查看SQL执行计划 explain explain使用方式 alter session set current_schematest; explain plan for sql语句; --并不会实际执行,因此生成的执行计划也是预估的 select * from table(dbms_xplan.display); explain使用场景 1.内存中没有谓词信息了&#xff0…

[Javase]深入理解跨平台原理

文章目录 一、Java 跨平台原理深度解析二、代码的编译与解释1、编译型语言2、解释型语言 三、Java 跨平台的核心 —— 虚拟机1、什么是虚拟机2、为什么能实现跨平台 四、JDK:Java 开发的强大工具包1、JDK 的介绍2、JDK 的重要组件 五、JRE:Java 运行的基…

FlinkSQL中 的 双流JOIN

在 Flink SQL 中,流与流的 JOIN 是一种复杂的操作,因为它涉及到实时数据的无界处理。理解 Flink SQL 流与流 JOIN 的底层原理和实现需要从多个角度来分析,包括 状态管理、事件时间处理、窗口机制 以及 内部数据流处理模型 等。下面将从这些角…

基于SpringBoot+Vue的益农智慧服务平台【提供源码+答辩PPT+参考文档+项目部署】

一、项目技术架构: 本项目是一款SpringBoot益农平台的设计与实现。 该SpringBootVue的益农平台的设计与实现,后端采用SpringBoot架构,前端采用VueElementUI实现页面的快速开发,并使用关系型数据库MySQL存储系统运行数据。本系统分…

java-uniapp小程序-引导关注公众号、判断用户是否关注公众号

目录 1、前期准备 公众号和小程序相互关联 准备公众号文章 注册公众号测试号 微信静默授权的独立html 文件 2: 小程序代码 webview页面代码 小程序首页代码 3:后端代码 1:增加公众号配置项 2:读取公众号配置项 3&…

MySQL中查询语句的执行流程

文章目录 前言流程图概述最后 前言 你好,我是醉墨居士,今天我们一起探讨一下执行一条查询的SQL语句在MySQL内部都发生了什么,让你对MySQL内部的架构具备一个宏观上的了解 流程图 概述 对于查询语句的SQL的执行流程,主要可以分为…

【Linux】<互斥量>解决<抢票问题>——【多线程竞争问题】

前言 大家好吖,欢迎来到 YY 滴Linux系列 ,热烈欢迎! 本章主要内容面向接触过C的老铁 主要内容含: 欢迎订阅 YY滴C专栏!更多干货持续更新!以下是传送门! YY的《C》专栏YY的《C11》专栏YY的《Lin…

[Windows]文件搜索利器Everything(附zip)

前言 写代码过程中,老大突然发一条信息 老大:这周周报发一下。 我:好的。 然后我就 显示桌面打开-我的电脑找到E盘,找到周报文件夹寻找到所有周报中今天的周报复制发送 当我用上Everything之后 打开,输入周报copy发…

Kafka-kraft模式部署与使用

学习Kafka-Kraft部署使用背景和意义 目前磐基平台已经提供kafka3.5.1版本能力,新版本对kakfa元数据管理、注册协调架构已经发生了很大的变化。据了解目前已有租户在使用。对于kafka新版本新特性来讲,广大磐基运维不十分了解和熟练,特别是在维…

尚硅谷rabbitmq2024 集群篇仲裁队列 第52节 答疑

我们希望创建一个队列,队列分布在各个节点上,仲裁队列很好的解决了这个问题.那么在仲裁队列之前,创建一个队列,队列不是分布在各个节点上的吗? 在RabbitMQ中,默认情况下创建的队列是“普通队列”&#xff0…

Oracle T5-2 ILOM配置

ILOM管理口ip地址配置 连接控制器(SP)串口(RJ45),进行系统设置 (缺省:9600,8-n-1,root/changeme) …………………. ORACLESP-AK02566506 login: root Password: Detecting screen size; pl…

EditText的inputType 详解

EditText的inputType属性用于指定EditText接受的输入类型,它可以通过XML布局文件或代码来设置。‌ 该属性决定了EditText在键盘弹出时的样式和功能,例如是否显示数字键盘、是否允许输入特殊字符等。通过设置不同的InputType,可以限制用户输入…

Axure重要元件三——中继器

亲爱的小伙伴,在您浏览之前,烦请关注一下,在此深表感谢! 本节课:中继器 课程内容:认识中继器、中继器基本操作、中继器案例 应用场景:高级表单交互 一、认识中继器 我们不从理论视角去展示…

MySQL InnoDB Buffer Pool空间不足导致查询变慢

问题现象 前端调用后台服务查询接口响应很慢,查看 MySQL 的日志,有如下日志: [Warning] InnoDB: Difficult to find free blocks in the buffer pool (13430 search iterations)! 13430 failed attempts to flush a page! Consider increas…

Android Framework AMS(05)startActivity分析-2(ActivityThread启动到Activity拉起)

该系列文章总纲链接:专题总纲目录 Android Framework 总纲 本章关键点总结 & 说明: 说明:本章节主要解读AMS通过startActivity启动Activity的整个流程的整个流程的第二阶段:从ActivityThread启动到Activity拉起。 第一阶段文…

【Vue】Vue(八)Vue3.0 使用ref 和 reactive创建响应式数据

ref 创建:基本类型的响应式数据 **作用:**定义响应式变量。语法:let xxx ref(初始值)。**返回值:**一个RefImpl的实例对象,简称ref对象或ref,ref对象的value属性是响应式的。注意点: JS中操作…

《拿下奇怪的前端报错》:1比特丢失导致的音视频播放时长无限增长-浅析http分片传输核心和一个坑点

问题背景 在一个使用MongoDB GridFS实现文件存储和分片读取的项目中,同事遇到了一个令人困惑的问题:音频文件总是丢失最后几秒,视频文件也出现类似情况。更奇怪的是,播放器显示的总时长为无限大。这个问题困扰了团队成员几天&…

Java项目-基于Springboot的应急救援物资管理系统项目(源码+说明).zip

作者:计算机学长阿伟 开发技术:SpringBoot、SSM、Vue、MySQL、ElementUI等,“文末源码”。 开发运行环境 开发语言:Java数据库:MySQL技术:SpringBoot、Vue、Mybaits Plus、ELementUI工具:IDEA/…