【前端 07】JavaScript中的数组对象

news2024/9/20 9:36:55

JavaScript中的数组对象

在JavaScript中，数组（Array）对象是一种非常基础且强大的数据结构，用于在单个变量中存储多个值。这些值可以是任何数据类型，包括数字、字符串、甚至是其他数组（多维数组）。数组的长度是动态变化的，这意呀着你可以在运行时添加或删除元素。接下来，我们将详细探讨JavaScript数组的语法、属性、以及常用的方法。
请添加图片描述

语法格式

JavaScript提供了两种主要的方式来定义数组：

方式1：使用`new Array()`构造函数

javascript复制代码

var arr = new Array(1, 2, 3, 4); // 创建一个包含元素1, 2, 3, 4的数组

注意，如果new Array()只传入一个数字参数，并且这个数字是一个正整数，那么它将创建一个具有指定长度但所有元素都是undefined的数组，而非包含那个数字的数组。

方式2：使用数组字面量

javascript复制代码

var arr = [1, 2, 3, 4]; // 同样创建一个包含元素1, 2, 3, 4的数组

这种方式更为简洁且常用。

访问数组元素

在JavaScript中，你可以通过索引来访问数组中的元素。索引从0开始。

javascript复制代码

var secondElement = arr[1]; // 获取数组中的第二个元素（索引为1）

数组的长度

JavaScript数组的length属性表示数组中的元素数量。你可以通过修改length属性来截断数组或在数组末尾添加undefined元素。

var arr = [1, 2, 3, 4];  
console.log(arr.length); // 输出: 4  
  
arr[10] = 50; // 在索引10的位置添加一个元素，自动填充undefined以保持连续性  
console.log(arr.length); // 输出: 11  
  
for (let i = 0; i < arr.length; i++) {  
    console.log(arr[i]);  
}

常用的数组方法

forEach()

forEach()方法遍历数组的每个元素，并对每个元素执行一次提供的函数。

var arr = [1, 2, 3, 4];  
  
// 使用匿名函数  
arr.forEach(function(element) {  
    console.log(element);  
});  
  
// 使用箭头函数  
arr.forEach(element => {  
    console.log(element);  
});

push()

push()方法将一个或多个元素添加到数组的末尾，并返回新的数组长度。

var arr = [1, 2, 3, 4];  
arr.push(5, 6, 7);  
console.log(arr); // 输出: [1, 2, 3, 4, 5, 6, 7]

splice()

splice()方法通过删除或替换现有元素或者原地添加新的元素来修改数组，并以数组形式返回被修改的内容。

var arr = [1, 2, 3, 4, 5];  
// 从索引2开始删除2个元素  
arr.splice(2, 2);  
console.log(arr); // 输出: [1, 2, 5]  
  
// 也可以用来添加元素  
arr.splice(2, 0, 'a', 'b'); // 从索引2开始，删除0个元素，并添加'a'和'b'  
console.log(arr); // 输出: [1, 2, 'a', 'b', 5]