【Java 进阶篇】JavaScript Array数组详解

在这里插入图片描述

当我们编写JavaScript代码时，经常需要处理一组数据。JavaScript中的数组（Array）是一种用于存储多个值的数据结构，它提供了许多方法和功能，使我们能够方便地操作这些数据。在本篇博客中，我们将详细探讨JavaScript数组，包括如何创建、操作、遍历和使用数组。

什么是JavaScript数组？

JavaScript数组是一种有序的数据集合，它可以存储多个值。数组的每个值称为元素，每个元素都有一个与之关联的索引，用来标识其在数组中的位置。数组可以包含不同数据类型的元素，包括数字、字符串、对象等。例如：

var fruits = ["苹果", "香蕉", "橙子"];
var numbers = [1, 2, 3, 4, 5];
var mixed = ["Hello", 42, true, { name: "John" }];

在上面的示例中，我们创建了不同类型的数组。fruits数组包含字符串元素，numbers数组包含数字元素，mixed数组则混合了字符串、数字、布尔值和对象。

创建数组

直接量法

最简单的创建数组的方法是使用数组直接量（array literal），就是一对方括号[]，并在其中添加元素，元素之间用逗号分隔。例如：

var colors = ["红色", "绿色", "蓝色"];

使用Array构造函数

另一种创建数组的方法是使用Array构造函数。你可以不传递参数，创建一个空数组，或者传递一个数字参数，表示数组的长度。例如：

var emptyArray = new Array();
var arrayWithLength = new Array(3); // 创建一个长度为3的数组

使用Array.of()方法

在ES6中，引入了Array.of()方法，它允许我们创建具有指定元素的新数组。与Array构造函数不同，Array.of()不会将单个数字参数解释为数组长度。例如：

var numbers = Array.of(1, 2, 3, 4, 5);

使用扩展运算符

ES6还引入了扩展运算符（spread operator），它可以将一个可迭代对象（比如字符串、集合、数组等）展开成多个元素。这使得创建数组变得更加方便。例如：

var colors = ["红色", "绿色", ...otherColors, "蓝色"];

上面的代码将otherColors中的所有元素插入到colors数组中。

访问数组元素

要访问数组元素，可以使用方括号[]和元素的索引。索引是从0开始的，第一个元素的索引为0，第二个元素的索引为1，依此类推。例如：

var fruits = ["苹果", "香蕉", "橙子"];
console.log(fruits[0]); // 输出：苹果
console.log(fruits[1]); // 输出：香蕉
console.log(fruits[2]); // 输出：橙子

修改数组元素

你可以通过索引来修改数组元素的值。例如：

var colors = ["红色", "绿色", "蓝色"];
colors[1] = "黄色"; // 将第二个元素从"绿色"改为"黄色"
console.log(colors); // 输出：["红色", "黄色", "蓝色"]

数组的长度

要获取数组的长度，可以使用数组的length属性。例如：

var numbers = [1, 2, 3, 4, 5];
console.log(numbers.length); // 输出：5

你还可以通过修改length属性来截断或扩展数组。如果将length设置为一个小于数组当前长度的值，数组将被截断。如果将length设置为一个大于数组当前长度的值，数组将被扩展并用undefined填充。例如：

var numbers = [1, 2, 3, 4, 5];
numbers.length = 3; // 截断数组
console.log(numbers); // 输出：[1, 2, 3]
var numbers = [1, 2, 3, 4, 5];
numbers.length = 7; // 扩展数组
console.log(numbers); // 输出：[1, 2, 3, 4, 5, undefined, undefined]

数组的方法

JavaScript提供了许多用于操作数组的内置方法。这些方法可以用于添加、删除、替换、搜索、排序和遍历数组。以下是一些常用的数组方法：

push()和pop()

  • push()方法用于在数组末尾添加一个或多个元素。
  • pop()方法用于移除并返回数组的最后一个元素。
var fruits = ["苹果", "香蕉"];
fruits.push("橙子"); // 添加橙子到数组末尾
console.log(fruits); // 输出：["苹果", "香蕉", "橙子"]var lastFruit = fruits.pop(); // 移除并返回最后一个元素
console.log(lastFruit); // 输出：橙子
console.log(fruits); // 输出：["苹果", "香蕉"]

unshift()和shift()

  • unshift()方法用于在数组开头添加一个或多个元素。
  • shift()方法用于移除并返回数组的第一个元素。
var fruits = ["香蕉", "橙子"];
fruits.unshift("苹果"); // 添加苹果到数组开头
console.log(fruits); // 输出：["苹果", "香蕉", "橙子"]var firstFruit = fruits.shift(); // 移除并返回第一个元素
console.log(firstFruit); // 输出：苹果
console.log(fruits); // 输出：["香蕉", "橙子"]

concat()

concat()方法用于合并两个或多个数组，并返回一个新数组，而不修改原数组。

var colors1 = ["红色", "绿色"];
var colors2 = ["蓝色", "黄色"];
var allColors = colors1.concat(colors2);
console.log(allColors); // 输出：["红色", "绿色", "蓝色", "黄色"]

join()

join()方法用于将数组的所有元素拼接成一个字符串。可以传递一个分隔符作为参数，用于分隔元素。

var fruits = ["苹果", "香蕉", "橙子"];
var fruitString = fruits.join(", "); // 使用逗号和空格分隔元素
console.log(fruitString); // 输出：苹果, 香蕉, 橙子

slice()

slice()方法用于从数组中提取元素，创建一个新数组。可以传递开始索引和结束索引来指定提取的元素范围。

var numbers = [1, 2, 3, 4, 5];
var subArray = numbers.slice(1, 4); // 提取索引1到3的元素
console.log(subArray); // 输出：[2, 3, 4]

splice()

splice()方法用于向数组中插入、删除或替换元素。可以传递多个参数来指定操作。

var colors = ["红色", "绿色", "蓝色"];
// 从索引1开始删除1个元素，然后插入"黄色"和"紫色"
colors.splice(1, 1, "黄色", "紫色");
console.log(colors); // 输出：["红色", "黄色", "紫色", "蓝色"]

indexOf()和lastIndexOf()

  • indexOf()方法用于查找指定元素在数组中的第一个匹配的索引。
  • lastIndexOf()方法用于查找指定元素在数组中的最后一个匹配的索引。
var numbers = [1, 2, 3, 2, 4, 2, 5];
var firstIndexOf2 = numbers.indexOf(2); // 查找2的第一个索引
console.log(firstIndexOf2); // 输出：1
var lastIndexOf2 = numbers.lastIndexOf(2); // 查找2的最后一个索引
console.log(lastIndexOf2); // 输出：5

includes()

includes()方法用于判断数组是否包含指定元素，返回布尔值。

var fruits = ["苹果", "香蕉", "橙子"];
var hasBanana = fruits.includes("香蕉");
console.log(hasBanana); // 输出：truevar hasGrapes = fruits.includes("葡萄");
console.log(hasGrapes); // 输出：false

filter()

filter()方法用于创建一个新数组，其中包含通过指定函数测试的所有元素。

var numbers = [1, 2, 3, 4, 5];
var evenNumbers = numbers.filter(function (number) {return number % 2 === 0; // 返回偶数
});
console.log(evenNumbers); // 输出：[2, 4]

map()

map()方法用于创建一个新数组，其中的元素是通过指定函数对原数组中的每个元素执行操作后得到的。

var numbers = [1, 2, 3, 4, 5];
var squaredNumbers = numbers.map(function (number) {return number * number; // 返回每个元素的平方
});
console.log(squaredNumbers); // 输出：[1, 4, 9, 16, 25]

reduce()

reduce()方法用于对数组中的所有元素执行一个指定的函数，将它们汇总为单个值。

var numbers = [1, 2, 3, 4, 5];
var sum = numbers.reduce(function (accumulator, currentValue) {return accumulator + currentValue; // 计算总和
}, 0); // 初始值为0
console.log(sum); // 输出：15

forEach()

forEach()方法用于执行一个指定的函数，一次为数组中的每个元素调用该函数。

var colors = ["红色", "绿色", "蓝色"];
colors.forEach(function (color) {console.log("颜色：" + color);
});

这只是JavaScript数组的基础，还有很多其他方法和技巧可以用来处理数组。数组是JavaScript编程中不可或缺的部分，熟练掌握它将帮助你更好地处理和操作数据。无论是在网页开发还是后端开发中，都会频繁使用到数组。

总结

JavaScript数组是一种强大的数据结构，用于存储和操作多个值。你可以使用不同的方法来创建、访问、修改和操作数组，以满足各种编程需求。了解JavaScript数组的基础知识对于任何JavaScript开发者都是至关重要的。

本篇博客只是JavaScript数组的一个入门，数组还有很多更高级的用法和方法等待你去探索。希望本文能够帮助你更好地理解和使用JavaScript数组。如果你想深入了解更多，请继续学习和实践，掌握JavaScript中数组的更多技巧和应用。

作者信息

作者 ： 繁依Fanyi
CSDN： https://techfanyi.blog.csdn.net
掘金：https://juejin.cn/user/4154386571867191

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

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

相关文章

“Jwt认证在前后端分离架构中的应用与优化“

“Jwt认证在前后端分离架构中的应用与优化“

目录 引言1. JWT的简介1.1 什么是JWT1.2 JWT的优势 2. JWT工具类2.1 JWT生成与解析2.2 JWT与安全性 3. JWT案例演示后台改动前台改动 总结 引言 在当今互联网应用开发中，前后端分离架构已经成为一种主流的开发模式。而身份验证和授权是保证系统安全性的重要环节之一…
阅读更多...
内存空间的分配与回收之连续分配管理方式

内存空间的分配与回收之连续分配管理方式

1.连续分配管理方式 连续分配:指为用户进程分配的必须是一个连续的内存空间。 1.单一连续分配 在单一连续分配方式中，内存被分为系统区和用户区。系统区通常位于内存的低地址部分，用于存放操作系统相关数据;用户区用于存放用户进程相关数据。内存中只…
阅读更多...
Windows下DataGrip连接Hive

Windows下DataGrip连接Hive

DataGrip连接Hive 1. 启动Hadoop2. 启动hiveserver2服务3. 启动元数据服务4. 启动DG 1. 启动Hadoop 在控制台中输入start-all.cmd后，弹出下图4个终端（注意终端的名字）2. 启动hiveserver2服务 单独开一个窗口启动hiveserver2服务，…
阅读更多...
HarmonyOS 远端状态订阅开发实例

HarmonyOS 远端状态订阅开发实例

IPC/RPC 提供对远端 Stub 对象状态的订阅机制， 在远端 Stub 对象消亡时，可触发消亡通知告诉本地 Proxy 对象。这种状态通知订阅需要调用特定接口完成，当不再需要订阅时也需要调用特定接口取消。使用这种订阅机制的用户，需要实现消…
阅读更多...
clone()方法使用时遇到的问题解决方法（JAVA）

clone()方法使用时遇到的问题解决方法（JAVA）

我们平时在自定义类型中使用这个方法时会连续遇到 4 个问题。 基础代码如下： class A {int[] a {1,2,3}; }public class Test {public static void main(String[] args) {} } 第一个： 当我们直接调用时报错原因是Object类中的clone方法是被protecte…
阅读更多...
竞赛 深度学习 YOLO 实现车牌识别算法

竞赛 深度学习 YOLO 实现车牌识别算法

文章目录 0 前言1 课题介绍2 算法简介2.1网络架构 3 数据准备4 模型训练5 实现效果5.1 图片识别效果5.2视频识别效果 6 部分关键代码7 最后 0 前言 🔥 优质竞赛项目系列，今天要分享的是 🚩 基于yolov5的深度学习车牌识别系统实现 该项目较…
阅读更多...
支付宝企业转账到个人账号[新接口版](php源码,亲测)

支付宝企业转账到个人账号[新接口版](php源码,亲测)

前言 之前专栏写过一篇企业支付宝转账到个人的文章，里面用的是老接口，官方已经不再维护。最近有人找到帮忙使用新接口实现这个功能，看了下文档以及官方的sdk，为了这一个接口，我还要去下载官方庞大的sdk，而且php低版本的还不支持composer，就很离谱，经过一天的研究，把单…
阅读更多...
Pytorch之ConvNeXt图像分类

Pytorch之ConvNeXt图像分类

文章目录 前言一、ConvNeXt设计决策1.设计方案2.Training Techniques3.Macro Design🥇Changing stage compute ratio🥈Change stem to "Patchify" 4.ResNeXt-ify5. Inverted Bottleneck6.Large Kernel Size7.Micro Design✨Replacing ReLU wit…
阅读更多...
Diffusion Model论文/DALL E 2

Diffusion Model论文/DALL E 2

B站视频学习记录 Ho J, Jain A, Abbeel P. Denoising diffusion probabilistic models[J]. Advances in neural information processing systems, 2020, 33: 6840-6851. Atwood J, Towsley D. Diffusion-convolutional neural networks[J]. Advances in neural information pro…
阅读更多...
基于PLC的机械手控制系统设计

基于PLC的机械手控制系统设计

目录 摘 要......................................................................................................................... 1 第一章 绪论.............................................................................................................…
阅读更多...
接口

接口

一、认识接口 public interface A {//成员变量（常量）String NAME"啦啦啦";//成员方法 抽象方法void test();//不能有代码块 // static {}//不能有构造器 // public A{ // // }// 接口不能创建对象 }二、接口的好处 三、JDK8 接口新增…
阅读更多...
【单片机】19-TFT彩屏

【单片机】19-TFT彩屏

一、背景知识--显示器 1.什么是TFT （1）LCD显示器的构成：液晶面板驱动器【电压驱动】控制器【逻辑控制】 （2）液晶面板大致分为：TN，TFT，IPS等 （3）驱动器是跟随…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023