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

谁借莪１个温暖的怀抱￠ 2024-02-22 09:33 48阅读 0赞

![在这里插入图片描述][ee6246a97e76456ea2a96231b3fde401.png]

当我们编写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); // 输出：true
    
    var 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中数组的更多技巧和应用。

<table> 
 <tbody> 
  <tr> 
   <td> <strong><font>作者信息</font></strong><br> <br> <font> 作者 ： 繁依Fanyi</font><br> <font>CSDN：</font> <a href="https://blog.csdn.net/qq_21484461?spm=1000.2115.3001.5343" rel="nofollow"><font>https://techfanyi.blog.csdn.net</font></a><br> <font>掘金：</font><a href="https://juejin.cn/user/4154386571867191" rel="nofollow"><font>https://juejin.cn/user/4154386571867191</font></a> </td> 
  </tr> 
 </tbody> 
</table>

[ee6246a97e76456ea2a96231b3fde401.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/c39517feeaf842d8b2ddbd9fd1f79230.png