前端页面Javascript数组
JavaScript 数组详解
在 JavaScript 中，数组是一种用于存储多个值的数据结构。它允许我们将一组具有相同或不同数据类型的数据项存储在一个单一的变量中。数组是引用类型，这意味着数组变量存储的是数组的内存地址，而不是数组本身的数据。这篇文章将深入探讨 JavaScript 数组的各个方面，包括声明、初始化、常见的操作方法、遍历方式、以及一些高级特性。
一、声明与初始化
（一）声明方式
在 JavaScript 中，有多种方式可以声明数组：
1. 使用数组字面量（Array Literal）
数组字面量是最常用的声明数组的方式。它使用一对方括号[]来定义数组。
let emptyArray = []; // 声明一个空数组
let numberArray = [1, 2, 3, 4, 5]; // 声明一个包含数字的数组
let stringArray = ["Hello", "World", "JavaScript", "Array"]; // 声明一个包含字符串的数组
let mixedArray = [1, "Hello", true, { name: "Alice", age: 25 }, [1, 2, 3]]; // 声明一个包含多种数据类型的数组2. 使用Array构造函数
Array构造函数允许我们通过显式的方式创建数组。
let emptyArray = new Array(); // 声明一个空数组
let numberArray = new Array(5); // 创建一个包含 5 个元素的数组，所有元素的初始值为 undefined
let stringArray = new Array("Hello", "World", "JavaScript", "Array"); // 声明一个包含字符串的数组注意：当使用new Array(size)的方式时，如果size是一个正整数，则数组会初始化为指定的大小，所有元素的初始值为undefined。
（二）初始化
在声明数组后，可以通过不同的方式对数组的元素进行初始化：
1. 逐个赋值
let arr = [];
arr[0] = 10;
arr[1] = "Hello";
arr[2] = true;2. 使用fill方法
fill方法用于将数组中的所有元素填充为一个静态值。
let arr = new Array(5).fill(0); // 创建一个包含 5 个 0 的数组二、数组的基本操作
（一）访问元素
可以通过索引来访问数组中的元素。数组索引从0开始。
let arr = [10, 20, 30, 40, 50];
console.log(arr[0]); // 输出 10
console.log(arr[2]); // 输出 30（二）修改元素
可以直接通过索引修改数组中的元素。
let arr = [10, 20, 30, 40, 50];
arr[1] = 25; // 将索引为 1 的元素修改为 25
console.log(arr); // 输出 [10, 25, 30, 40, 50]（三）添加元素
1. 在数组末尾添加元素
- 使用
push方法：将一个或多个元素添加到数组的末尾，并返回数组的新长度。
let arr = [10, 20, 30];
let newLength = arr.push(40, 50);
console.log(arr); // 输出 [10, 20, 30, 40, 50]
console.log(newLength); // 输出 5- 使用
unshift方法：将一个或多个元素添加到数组的开头，并返回数组的新长度。
let arr = [10, 20, 30];
let newLength = arr.unshift(5, 8);
console.log(arr); // 输出 [5, 8, 10, 20, 30]
console.log(newLength); // 输出 52. 在指定位置添加元素
使用splice方法：可以在指定位置插入一个或多个元素。
let arr = [10, 20, 30, 40, 50];
arr.splice(2, 0, "a", "b"); // 在索引 2 的位置插入 "a" 和 "b"
console.log(arr); // 输出 [10, 20, "a", "b", 30, 40, 50]splice方法的参数依次是：起始索引、删除的元素个数（设置为0表示不删除）、插入的元素。
（四）删除元素
1. 从数组末尾删除元素
- 使用
pop方法：删除数组的最后一个元素，并返回被删除的元素。
let arr = [10, 20, 30, 40, 50];
let removedElement = arr.pop();
console.log(arr); // 输出 [10, 20, 30, 40]
console.log(removedElement); // 输出 50- 使用
shift方法：删除数组的第一个元素，并返回被删除的元素。
let arr = [10, 20, 30, 40, 50];
let removedElement = arr.shift();
console.log(arr); // 输出 [20, 30, 40, 50]
console.log(removedElement); // 输出 102. 从指定位置删除元素
使用splice方法：可以在指定位置删除元素。
let arr = [10, 20, 30, 40, 50];
arr.splice(2, 2); // 从索引 2 开始删除 2 个元素
console.log(arr); // 输出 [10, 20, 50]（五）查找元素
1. 使用indexOf方法
indexOf方法用于查找数组中某个元素的第一次出现的索引。如果找不到，则返回-1。
let arr = [10, 20, 30, 40, 50];
console.log(arr.indexOf(30)); // 输出 2
console.log(arr.indexOf(60)); // 输出 -12. 使用lastIndexOf方法
lastIndexOf方法用于查找数组中某个元素的最后一次出现的索引。如果找不到，则返回-1。
let arr = [10, 20, 30, 30, 40, 50];
console.log(arr.lastIndexOf(30)); // 输出 33. 使用find方法
find方法用于查找数组中满足提供的测试函数的第一个元素。如果找到，则返回该元素；否则返回undefined。
let arr = [10, 20, 30, 40, 50];
let foundElement = arr.find(element => element > 25);
console.log(foundElement); // 输出 304. 使用findIndex方法
findIndex方法用于查找数组中满足提供的测试函数的第一个元素的索引。如果找到，则返回该索引；否则返回-1。
let arr = [10, 20, 30, 40, 50];
let foundIndex = arr.findIndex(element => element > 25);
console.log(foundIndex); // 输出 2（六）数组的遍历
1. 使用for循环
let arr = [10, 20, 30, 40, 50];
for (let i = 0; i < arr.length; i++) {console.log(arr[i]);
}2. 使用for...of循环
let arr = [10, 20, 30, 40, 50];
for (const element of arr) {console.log(element);
}3. 使用forEach方法
forEach方法用于对数组的每个元素执行一次提供的函数。
let arr = [10, 20, 30, 40, 50];
arr.forEach((element, index) => {console.log(`Element at index ${index}: ${element}`);
});4. 使用map方法
map方法用于创建一个新数组，其元素是调用提供的函数后的结果。
let arr = [10, 20, 30, 40, 50];
let newArr = arr.map(element => element * 2);
console.log(newArr); // 输出 [20, 40, 60, 80, 100]5. 使用filter方法
filter方法用于创建一个新数组，其元素是通过提供的测试的所有元素。
let arr = [10, 20, 30, 40, 50];
let newArr = arr.filter(element => element > 25);
console.log(newArr); // 输出 [30, 40, 50]6. 使用reduce方法
reduce方法用于对数组的元素执行一个由您提供的 reducer 函数，将其结果汇总为单个返回值。
let arr = [10, 20, 30, 40, 50];
let sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 输出 150三、数组的转换
（一）转换为字符串
1. 使用toString方法
toString方法将数组转换为一个由逗号分隔的字符串。
let arr = [10, 20, 30, 40, 50];
console.log(arr.toString()); // 输出 "10,20,30,40,50"2. 使用join方法
join方法将数组的元素连接成一个字符串，可以指定分隔符。
let arr = [10, 20, 30, 40, 50];
console.log(arr.join()); // 输出 "10,20,30,40,50"
console.log(arr.join('-')); // 输出 "10-20-30-40-50"（二）转换为数组
1. 使用Array.from方法
Array.from方法用于从可迭代对象（如数组、类数组对象等）创建一个新的数组实例。
let arrayLike = { 0: 10, 1: 20, 2: 30, length: 3 };
let arr = Array.from(arrayLike);
console.log(arr); // 输出 [10, 20, 30]2. 使用扩展运算符（...）
扩展运算符可以将一个可迭代对象展开为多个元素。
let arrayLike = { 0: 10, 1: 20, 2: 30, length: 3 };
let arr = [...arrayLike];
console.log(arr); // 输出 [10, 20, 30]四、数组的排序与反转
（一）排序
1. 默认排序
sort方法用于对数组元素进行排序，默认按字符串的 Unicode 码点进行排序。
let arr = [30, 10, 20, 50, 40];
arr.sort();
console.log(arr); // 输出 [10, 20, 30, 40, 50]2. 自定义排序
可以通过提供比较函数来自定义排序规则。
let arr = [30, 10, 20, 50, 40];
arr.sort((a, b) => a - b); // 升序排序
console.log(arr); // 输出 [10, 20, 30, 40, 50]arr.sort((a, b) => b - a); // 降序排序
console.log(arr); // 输出 [50, 40, 30, 20, 10]（二）反转
reverse方法用于将数组中的元素顺序反转。
let arr = [10, 20, 30, 40, 50];
arr.reverse();
console.log(arr); // 输出 [50, 40, 30, 20, 10]五、数组的合并与分割
（一）合并数组
1. 使用concat方法
concat方法用于合并两个或多个数组，并返回一个新数组，原数组不会被修改。
let arr1 = [10, 20, 30];
let arr2 = [40, 50];
let arr3 = arr1.concat(arr2);
console.log(arr3); // 输出 [10, 20, 30, 40, 50]2. 使用扩展运算符（...）
扩展运算符可以将多个数组合并为一个新数组。
let arr1 = [10, 20, 30];
let arr2 = [40, 50];
let arr3 = [...arr1, ...arr2];
console.log(arr3); // 输出 [10, 20, 30, 40, 50]（二）分割数组
1. 使用slice方法
slice方法用于从原数组中提取指定范围的元素，并返回一个新数组，原数组不会被修改。
let arr = [10, 20, 30, 40, 50];
let newArr = arr.slice(1, 4); // 提取索引从 1 到 3（不包括 4）的元素
console.log(newArr); // 输出 [20, 30, 40]2. 使用splice方法
splice方法用于添加、删除或替换数组中的元素，并返回被删除的元素。
let arr = [10, 20, 30, 40, 50];
let removedElements = arr.splice(1, 3); // 从索引 1 开始删除 3 个元素
console.log(removedElements); // 输出 [20, 30, 40]
console.log(arr); // 输出 [10, 50]六、数组的复制与比较
（一）复制数组
1. 浅复制
- 使用
slice方法
let arr = [10, 20, 30, 40, 50];
let newArr = arr.slice();
console.log(newArr); // 输出 [10, 20, 30, 40, 50]- 使用扩展运算符
let arr = [10, 20, 30, 40, 50];
let newArr = [...arr];
console.log(newArr); // 输出 [10, 20, 30, 40, 50]2. 深复制
深复制需要手动实现，因为 JavaScript 没有内置的深复制方法。可以使用JSON.parse和JSON.stringify进行简单的深复制，但这不适用于包含复杂数据类型（如函数、Date对象等）的数组。
let arr = [10, 20, { name: "Alice", age: 25 }, [30, 40]];
let newArr = JSON.parse(JSON.stringify(arr));
console.log(newArr); // 输出 [10, 20, { name: "Alice", age: 25 }, [30, 40]]（二）比较数组
比较数组的相等性需要逐个比较元素，因为直接使用===比较两个数组会比较它们的内存地址，而不是内容。
function arraysEqual(arr1, arr2) {if (arr1.length !== arr2.length) {return false;}for (let i = 0; i < arr1.length; i++) {if (arr1[i] !== arr2[i]) {return false;}}return true;
}let arr1 = [10, 20, 30];
let arr2 = [10, 20, 30];
let arr3 = [10, 20, 40];console.log(arraysEqual(arr1, arr2)); // 输出 true
console.log(arraysEqual(arr1, arr3)); // 输出 false七、数组的高级特性
（一）稀疏数组
稀疏数组是指数组中存在空槽（holes）的数组。空槽不同于undefined，它表示该索引不存在。
let arr = new Array(5);
console.log(arr); // 输出 [ <5 empty items> ]
console.log(arr[0]); // 输出 undefined
console.log(arr.length); // 输出 5（二）密集数组
密集数组是指数组中没有空槽的数组。在大多数情况下，我们处理的都是密集数组。
let arr = [10, 20, 30, 40, 50];
console.log(arr); // 输出 [10, 20, 30, 40, 50]
console.log(arr.length); // 输出 5（三）类数组对象
类数组对象是指具有length属性和索引属性的对象，但不是真正的数组。常见的类数组对象包括函数的arguments对象和NodeList对象。
function test() {console.log(arguments); // 输出类数组对象console.log(Array.from(arguments)); // 将类数组对象转换为数组
}test(10, 20, 30);（四）迭代器与生成器
数组是可迭代的，可以通过迭代器协议进行遍历。生成器函数可以创建自定义的迭代器。
function* arrayIterator(arr) {for (let i = 0; i < arr.length; i++) {yield arr[i];}
}let arr = [10, 20, 30];
let iterator = arrayIterator(arr);console.log(iterator.next().value); // 输出 10
console.log(iterator.next().value); // 输出 20
console.log(iterator.next().value); // 输出 30八、数组的实际应用场景
（一）数据存储与操作
数组是最常用的数据存储结构之一。它可以用于存储和操作大量同类型或不同类型的数据。
（二）实现栈与队列
可以通过数组的方法实现栈（push和pop）和队列（push和shift或unshift和pop）。
（三）多维数组
数组的元素可以是另一个数组，从而实现多维数组。例如，二维数组可以用于表示矩阵。
（四）处理列表数据
在 Web 开发中，数组常用于处理列表数据，如表格数据、列表元素等。
over！
