零基础学前端-传统前端开发(第四期-JS基础-数组)

注:JS文章流程为:数据类型>>运算>>语法,语句>>对象>>数组>>函数>>类

什么是数组:数组是一种非常常用的数据结构,用于存储一组有序的值。这些值可以是数字、字符串、对象,甚至是其他数组。数组中的每个值都有一个索引(从 0 开始),可以通过索引来访问和操作数组中的元素。

(类似于我们学过的数学里的集合,但只是表现上类似而已)

1. 创建数组

方法 :数组字面量

这是最常用的方式,直接用方括号 [] 包裹一组值。

let fruits = ["苹果", "香蕉", "橙子"];let numbers = [1, 2, 3, 4, 5];let mixed = [1, "hello", true, { name: "张三" }, [1, 2, 3]];

2. 访问数组元素

数组中的每个元素都有一个索引,从 0 开始。可以通过索引来访问和修改数组中的元素。

let fruits = ["苹果", "香蕉", "橙子"];// 访问元素console.log(fruits[0]); // 输出 "苹果"console.log(fruits[1]); // 输出 "香蕉"// 修改元素fruits[1] = "草莓";console.log(fruits); // 输出 ["苹果", "草莓", "橙子"]

3. 数组的常用方法

添加和删除元素

push():向数组末尾添加一个或多个元素,并返回新数组的长度。

fruits.push("葡萄");console.log(fruits); // 输出 ["苹果", "草莓", "橙子", "葡萄"]

pop():从数组末尾移除一个元素,并返回被移除的元素。

let removedItem = fruits.pop();console.log(removedItem); // 输出 "葡萄"console.log(fruits); // 输出 ["苹果", "草莓", "橙子"]

shift():从数组开头移除一个元素,并返回被移除的元素。

let firstItem = fruits.shift();console.log(firstItem); // 输出 "苹果"console.log(fruits); // 输出 ["草莓", "橙子"]

unshift():向数组开头添加一个或多个元素,并返回新数组的长度。

fruits.unshift("樱桃");console.log(fruits); // 输出 ["樱桃", "草莓", "橙子"]

查找元素

indexOf():查找某个值在数组中的索引,如果找不到返回 -1

let index = fruits.indexOf("橙子");console.log(index); // 输出 2

(因为计数的时候第一个数字记为0,也就是说你觉的苹果应该是1但他的序号实际为0)

includes():检查数组是否包含某个值,返回布尔值。

console.log(fruits.includes("草莓")); // 输出 trueconsole.log(fruits.includes("西瓜")); // 输出 false

遍历数组

for 循环

for (let i = 0; i < fruits.length; i++) {console.log(fruits[i]);}

数组的拷贝和拼接

slice():返回数组的一个浅拷贝,不会修改原数组。

let newFruits = fruits.slice(1, 3); // 从索引 1 到 3(不包括 3)console.log(newFruits); // 输出 ["草莓", "橙子"]

concat():将多个数组拼接成一个新数组,不会修改原数组。

let moreFruits = ["西瓜", "芒果"];let allFruits = fruits.concat(moreFruits);console.log(allFruits); // 输出 ["樱桃", "草莓", "橙子", "西瓜", "芒果"]

数组的排序

sort():对数组进行排序,会修改原数组。

let numbers = [3, 1, 4, 1, 5, 9];numbers.sort();console.log(numbers); // 输出 [1, 1, 3, 4, 5, 9]

如果需要按照数值大小排序,需要提供一个比较函数:

numbers.sort(function(a, b) {return a - b; // 升序});console.log(numbers); // 输出 [1, 1, 3, 4, 5, 9]

数组的过滤和映射

filter():创建一个新数组,包含通过测试的所有元素,不会修改原数组。

let evenNumbers = numbers.filter(function(num) {return num % 2 === 0;});console.log(evenNumbers); // 输出 [4]

map():创建一个新数组,其元素是调用一次提供的函数后的返回值,不会修改原数组。

let squaredNumbers = numbers.map(function(num) {return num * num;});console.log(squaredNumbers); // 输出 [1, 1, 9, 16, 25, 81]

由于没有足够的实际生活应用,所以大家可能会觉得很莫名其妙,给大家列举几个实例可能会方便了解一些

示例:管理学生名单

假设我们需要管理一个班级的学生名单,可以使用数组来实现。

let students = ["张三", "李四", "王五"];// 添加学生students.push("赵六");console.log("添加学生后:", students);// 删除学生students.shift(); // 删除第一个学生console.log("删除学生后:", students);// 查找学生let index = students.indexOf("王五");if (index !== -1) {console.log("找到学生:", students[index]);} else {console.log("学生未找到");}// 遍历学生名单students.forEach(function(student) {console.log("学生:", student);});

通过这样的方式可能会方便大家理解,由于是完全基础性的内容,切忌好高骛远

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

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

相关文章

深入理解 Docker 及常用命令

在云计算与容器化技术飞速发展的今天&#xff0c;Docker 已成为开发者必备的核心技能。本文将从底层原理到实战操作&#xff0c;系统梳理 Docker 的核心知识体系&#xff0c;结合大量实操案例帮助读者快速掌握容器化部署的全流程。 一、Docker 核心概念与底层原理 1.1 容器技…

【卫星通信】卫星与5G深度融合的架构研究——释放非地面网络潜能,构建全球无缝连接【3GPP TR 23.700-19 V0.1.0 (2025-04)】

引言 随着5G网络部署的持续推进&#xff0c;卫星通信在覆盖偏远地区、保障应急通信等场景中的重要性日益凸显。3GPP Technical Report&#xff08;TR&#xff09;23.700-19 V0.1.0&#xff08;2025-04&#xff09;作为Release 20阶段的最新研究成果&#xff0c;系统性地探讨了…

kicad运行时出错,_Pnext->_Myproxy = nullptr;访问内存出错

花费了比较长的时间&#xff0c;解决了编译过程中遇到的许多问题后&#xff0c;终于把这个开源的工程编译好了&#xff0c;运行post build 脚本将需要的链接文件拷贝好。正当我以为没有任何问题了&#xff0c;双击可执行程序运行。 结果运行起来的时候报错了&#xff0c;提示无…

资深Java工程师的面试题目(一)并发编程

以下是几道针对Java并发编程的面试题&#xff0c;涵盖基础知识、高级概念和实际应用场景&#xff0c;适合资深Java工程师的面试评估&#xff1a; 1. 线程池与任务调度 题目: 描述Java线程池的核心参数&#xff08;如corePoolSize、maximumPoolSize、keepAliveTime等&#xff…

解决Spark4.0.0依赖问题

Apache Spark 4.0.0 冲突解决指南 1. 问题背景 在尝试运行一个基于 Apache Spark 4.0.0 的 Java 应用程序。根据 Spark 4.0.0 的发布说明&#xff0c;该版本默认支持 Scala 2.13 和 JDK 17。在初始设置和运行过程中&#xff0c;遇到了以下主要问题&#xff1a; 依赖冲突 (PO…

什么是SeaTunnel

SeaTunnel&#xff1a;高性能、分布式数据集成平台 1. 什么是SeaTunnel&#xff1f; SeaTunnel&#xff08;原名Waterdrop&#xff09;是一个高性能、分布式、可扩展的数据集成平台&#xff0c;专为大规模数据同步、ETL&#xff08;Extract, Transform, Load&#xff09;和实…

Android 使用OkHttp 下载文件失败问题定位和修复

一、背景 使用Okhttp下载文件时,存在失败情况,刚开始以为是网络问题,后面添加相关日志发现,是在网络波动比较大的情况下,被判为timeout超时,结束了下载任务。 二、解决方案 有问题的下载配置写法: 注:这里只是展示配置下载的关键代码 val client OkHttpClient()val request…

【Docker基础】Docker核心概念:命名空间(Namespace)之PID详解

目录 引言 1 基础概念回顾 1.1 命名空间概述 1.2 命名空间的类型 2 PID命名空间详解 2.1 PID命名空间的概念 2.2 PID命名空间的作用 2.3 PID命名空间的工作原理 2.3.1 PID命名空间的创建与销毁 2.3.2 PID命名空间的层次结构 2.3.3 PID命名空间的进程ID映射 3 PID命…

SSM框架:企业级Java开发利器

SSM框架详解&#xff1a;Java企业级开发的核心基石 SSM框架是Java企业级开发中最流行的框架组合&#xff0c;由Spring、Spring MVC和MyBatis三大框架整合而成。这个轻量级的框架组合为Java开发者提供了高效、灵活的企业级应用解决方案。 一、SSM框架组成解析 1. Spring框架 …

网络安全中的人工智能应用

人工智能&#xff08;AI&#xff09;在网络安全中的应用从根本上改变了企业抵御网络威胁的方式。它利用先进的机器学习&#xff08;ML&#xff09;算法分析多源海量风险数据&#xff0c;挖掘威胁模式&#xff0c;从而更轻松地快速应对新兴风险。AI 能以惊人的速度和准确性帮助发…

Vue + Spring Boot 前后端交互实践:正确使用 `Content-Type: application/json` 及参数传递方式

在前后端分离开发中&#xff0c;前端通过 HTTP 请求与后端进行数据交互是常见的操作。其中&#xff0c;Content-Type 是决定请求体格式的重要字段之一。本文将以一个具体的例子出发&#xff0c;讲解如何在 Vue 前端 使用 Axios 发送 JSON 格式请求&#xff0c;并在 Spring Boot…

微服务拆分 SpringCloud

拆分原则 什么时候拆分 大多数小型项目&#xff1a; 一般是先采用单体架构&#xff0c;随着用户规模扩大、业务复杂后再逐渐拆分为微服务架构&#xff08;前易后难&#xff09;。确定的大型项目&#xff1a; 资金充足&#xff0c;目标明确&#xff0c;可以直接选择微服务架构…

DataX Hive写插件深度解析:从数据写入到Hive表关联实战

引言 在大数据处理流程中&#xff0c;将数据高效写入Hive表是数据仓库建设的关键环节。DataX作为阿里巴巴开源的数据同步工具&#xff0c;其Hive写插件&#xff08;Hdfswriter&#xff09;提供了将数据写入HDFS并与Hive表无缝关联的能力。本文将系统介绍Hdfswriter的功能特性、…

基于国产USRP搭建十六通道同步采集系统, 耗费200万 欢迎免费体验

随着无线通信、雷达探测和电子侦察等技术的发展&#xff0c;多通道信号同步采集的需求日益突出。我司基于8台USRP-LW N321设备&#xff0c;构建了一套高精度十六路通道信号同步采集系统&#xff0c;该系统通过并行采集与精确时频对齐&#xff0c;可为空间谱测向和MIMO系统等关键…

《前端编译工具源映射配置:Webpack与Gulp的深度剖析》

当我们深入探索不同前端编译工具时&#xff0c;Webpack与Gulp在源映射配置上的差异与特色&#xff0c;如同隐藏在代码深处的神秘宝藏&#xff0c;等待我们去挖掘、去解读。 Webpack作为现代前端构建的核心工具&#xff0c;在源映射配置方面展现出了高度的灵活性与可定制性。它…

4. 时间序列预测的自回归和自动方法

4.1自回归 自回归是一种时间序列预测方法&#xff0c;仅依赖于时间序列的先前输出&#xff1a;该技术假设下一个时间戳的未来观测值与先前时间戳的观测值存在线性关系。 在自回归中&#xff0c;前一个时间戳的输出值成为预测下一个时间戳的输入值&#xff0c;并且误差遵循简单线…

Android 多屏幕旋转控制原理与实战

在嵌入式设备、双显示终端或定制系统中&#xff0c;Android 多屏幕控制&#xff08;尤其是屏幕方向旋转&#xff09;是一个兼具挑战与价值的功能模块。本文将深入分析如何识别多个显示、如何通过系统 API 控制旋转&#xff0c;并讨论为何某些 displayId 无法旋转。 &#x1f4c…

faiss上的GPU流程,GPU与CPU之间的联系

GPU使用流程 1、初始化阶段 1.1:初始化GPU资源对象 目的: 为GPU上的操作分配和管理资源,例如临时内存和CUDA流。 操作: 创建StandardGpuResources对象来管理GPU的内存和计算资源。例如: faiss::gpu::StandardGpuResources res; res.setTempMemory(1024 * 1024 * 512); …

在CentOS 7系统安装PostgreSQL 15时出现`libzstd.so.1`依赖缺失问题

--> 正在处理依赖关系 libzstd.so.1()(64bit)&#xff0c;它被软件包 postgresql15-server-15.13-1PGDG.rhel7.x86_64 需要---> 软件包 python3-pip.noarch.0.9.0.3-8.el7 将被 安装---> 软件包 python3-setuptools.noarch.0.39.2.0-10.el7 将被 安装--> 解决依赖关…

走进Coinate|迪拜第二大交易平台如何构建极速金融引擎

在加密资产交易飞速发展的今天&#xff0c;技术实力已成为交易平台生存与发展的核心竞争力。与那些高调营销却技术薄弱的平台不同&#xff0c;来自迪拜的头部交易平台——Coinate&#xff0c;则始终坚持”以技术立命”的发展路径。 在迪拜这片充满创新与资本活力的中东热土&am…