JavaScript——JS数组

目录

前言

一、数组的创建、读写和长度 

二、数组元素的增减

三、数组的遍历

四、多维数组 

总结

---

前言

在 JavaScript 编程世界里，数组是不可或缺的数据结构基石。它如同一个万能容器，能灵活存储数字、字符串、对象等各类数据，广泛应用于数据处理、页面渲染、算法实现等诸多场景。无论是处理简单的列表数据，还是复杂的层次化信息，掌握数组的操作技巧，都是开发者高效编码的必备技能。

一、数组的创建、读写和长度

数组的出现是为了批量的处理数据。

1.创建方式：可以使用数组字面量 [] 或 new Array() 构造函数创建数组。

例如：

(1）使用数组字面量 [] 

var numberArray=[1,2,3,4,5,6];

(2)使用new Array()

var numberArray = new Array();

 这种情况可以设置数组的长度，也可不设置

var numberArray = new Array(1);//创建一个长度为1的数组

注意：在使用 new Array() 时，如果只传入一个参数，它会被当作数组的长度而非元素。例如 ：

var arry = new Array(4, 5, 6);//创建了一个包含三个元素 4、5、6 的数组

这种情况则被当作元素 。

 2.读写操作：数组元素的读取和写入在形式上相似，都是用赋值符号连接的两个表达式。

读取时，存放读入值的变量在左边，数组元素在右边：

var Array = [1,"array",true,2.7];
var array = Array[0];//读取第一个元素到变量array中

写入时，数组元素在左边，待写值在右边： 

var Array = [1,"array",true,2.7];
Array[0] = 9;//在第一个元素的位置写入9
console.log(Array[0]);//原来的1已经被覆盖，输出9

3.数组长度：数组长度指数组中元素的个数，等于最大索引值加1，数组的length属性即数组的长度。

var arrayLength = [1,"array",true,2.7];
console.log(arrayLength.length);//输出4

数组的长度也可以写入，当写入的值小于数组的实际长度时，数组会被删除一部分。大于实际长度时，数组会在尾部添加一些空的区域。 

arrayLength.length = 2;
console.log(arrayLength);//输出[1,"array"]

 注意：当访问超出数组长度的索引时，返回 undefined；修改超出当前长度的索引会使数组长度增加，中间未赋值的元素为 undefined。

二、数组元素的增减

         增

1.在尾部添加元素

(1)直接给当前尾部元素的后一个位置赋值

var numberArray = [12,23,34,45];
numberArray[numberArray.length] = 56;
console.log(numberArray);//输出[12,23,34,45,56]

(2)push() 在数组末尾添加元素

var numberArray = [12,23,34,45];
var newLength = numberArray.push(56);
console.log(newLength);//输出5
console.log(numberArray);//输出[12,23,34,45,56]

2.在头部添加元素

unshift() 在数组开头添加元素

var numberArray = [12,23,34,45];
var newLength = numberArray.unshift(56);
console.log(newLength);//输出5
console.log(numberArray);//输出[56,12,23,34,45]

           删

1.在尾部删除元素

(1).直接修改数组长度为更小的值。

var array = [1,"array",true,2.7];
array.length =3;
console.log(array);//输出[1,"array",true]

(2). 使用delete运算符。

var array = [1,"array",true,2.7];
delete array[3];
console.log(array);//输出[1,"array",true]

(3). 使用pop()一次删除一个，并返回被删除的元素。

var numberArray = [12,23,34,45];
var newLength = numberArray.pop();
console.log(newLength);//输出3
console.log(numberArray);//输出[12,23,34]

2.在头部删除元素

shift():删除数组头部一个元素并返回该元素，然后所有元素往索引值小的方向移动一位。

var Array = [11,22,33,44,55];
console.log(Array.shift());//输出11，11被从数组中删除
console.log(Array);//输出[22,33,44,55]

注意：

<1>push() 和 pop() 操作在数组末尾进行，性能较好；unshift() 和 shift() 操作会改变数组中所有元素的索引，性能相对较差。

<2>对空数组使用 pop() 或 shift() 会返回 undefined。

三.数组的遍历

遍历方式：可以使用 for 循环、for...of 循环、forEach() 方法遍历数组。

for循环

const numbers = [10, 20, 30, 40, 50];
for (let i = 0; i < numbers.length; i++) {
    console.log(numbers[i]);
}

 注意：

• 索引管理：需要手动管理索引 i，如果索引超出数组长度范围，访问结果将是 undefined。
• 灵活性：for 循环非常灵活，可以根据需要修改索引的起始值、结束条件和步长。

for...of 循环

const fruits = ['apple', 'banana', 'cherry'];
for (const fruit of fruits) {
    console.log(fruit);
}

 注意：for...of 循环只能获取元素值，无法直接获取元素的索引。如果需要索引，可以结合 entries() 方法使用。

const colors = ['red', 'green', 'blue'];
for (const [index, color] of colors.entries()) {
    console.log(`Index: ${index}, Color: ${color}`);
}

可以使用 break 和 continue 语句控制循环流程。

forEach()

var numArr = [10,11,12,13,14];
numArr.forEach(function(mem,i,arr) {
    mem *= 10;
    arr[i] = mem;
});
console.log(numArr);//输出[100,110,120,130,140]

 forEach()方法的参数是一个无名字的函数，函数有三个参数，第一个参数是当前的数组元素，第二个参数是当前的索引，第三个参数是数组对象的索引。

注意：

• 无法跳出循环：forEach() 方法没有内置的机制来提前终止循环，不能使用 break 或 continue 语句。如果需要提前终止，可以考虑使用 for 或 for...of 循环。
• 返回值：forEach() 方法返回 undefined，它主要用于执行副作用（如打印日志、修改数组元素等），而不是用于生成新数组。

四.多维数组 

1.概念：在 JavaScript 中，多维数组是指数组的元素也是数组，最常见的是二维数组，就像一个表格，有行和列的概念。

// 创建二维数组
const twoArray = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

// 创建三维数组
const threeArray = [
    [
        [11, 12],
        [13, 14]
    ],
    [
        [21, 22],
        [23, 24]
    ]
];

twoArray 是一个二维数组，它包含三个子数组，每个子数组又包含三个元素；threeArray 是一个三维数组，它包含两个子数组，每个子数组又包含两个子数组，这些最内层的子数组包含两个元素。

2.多维数组的访问

console.log(twoDArray[i][j]);
console.log(threeDArray[i][j][k]);

 对于二维数组，使用两个索引 [i][j] 来访问元素，i 表示行索引，j 表示列索引；对于三维数组，则使用三个索引 [i][j][k] 来访问元素。

3.多维数组的遍历

遍历多维数组通常需要使用嵌套循环，对于二维数组，外层循环遍历行，内层循环遍历列；对于更高维度的数组，以此类推增加循环层级。

注意:

• 多维数组的索引从 0 开始计数，要确保访问的索引不超出数组的范围，否则会返回 undefined。
• 对多维数组进行修改时，要注意修改的是引用还是值，避免出现意外的结果。例如，直接修改子数组中的元素会影响原数组。

---

总结

以上内容梳理了 JavaScript 数组知识。