在 JavaScript 中，数组（Array） 是一种用于存储多个值的对象。数组是有序的集合，可以包含不同类型的数据，如数字、字符串、对象、甚至其他数组。数组可以动态改变大小，非常灵活。

1. 创建数组

1.1 使用字面量（推荐）

数组字面量是最常用且推荐的方式来创建数组。可以直接用方括号 [] 来创建一个数组。

const arr1 = [1, 2, 3, 4, 5];
const arr2 = ['apple', 'banana', 'orange'];
const arr3 = [1, 'apple', true, { key: 'value' }];
console.log(arr1);  // 输出：[1, 2, 3, 4, 5]
console.log(arr2);  // 输出：["apple", "banana", "orange"]

1.2 使用 new Array() 构造函数

虽然可以通过 new Array() 来创建数组，但这通常不推荐，因为它有一些潜在的陷阱。

const arr4 = new Array(5);  // 创建一个长度为 5 的空数组（数组元素为 undefined）
console.log(arr4);  // 输出：[ <5 empty items> ]
const arr5 = new Array(1, 2, 3);  // 创建一个包含 1, 2, 3 的数组
console.log(arr5);  // 输出：[1, 2, 3]

1.3 通过 Array.of()

Array.of() 方法用于创建一个新的数组实例，其元素为传入的参数。

const arr6 = Array.of(1, 2, 3, 4);
console.log(arr6);  // 输出：[1, 2, 3, 4]

1.4 通过 Array.from()

Array.from() 可以从类数组对象（如 NodeList 或 arguments）创建一个新数组，或者将其他可迭代对象转换为数组。

const str = 'hello';
const arr7 = Array.from(str);  // 将字符串转换为数组
console.log(arr7);  // 输出：['h', 'e', 'l', 'l', 'o']

2. 数组的属性和方法

2.1 数组的基本属性

• length：返回数组的长度。

const arr = [1, 2, 3, 4];
console.log(arr.length);  // 输出：4

2.2 数组的方法

数组对象提供了很多方法来操作数组。以下是一些常用的方法。

2.2.1 添加和删除元素

• push()：向数组的末尾添加一个或多个元素，并返回新数组的长度。

const arr = [1, 2, 3];
arr.push(4, 5);
console.log(arr);  // 输出：[1, 2, 3, 4, 5]

• pop()：删除数组末尾的元素，并返回被删除的元素。

const arr = [1, 2, 3];
const removedElement = arr.pop();
console.log(arr);  // 输出：[1, 2]
console.log(removedElement);  // 输出：3

• shift()：删除数组开头的元素，并返回被删除的元素。

const arr = [1, 2, 3];
const removedFirstElement = arr.shift();
console.log(arr);  // 输出：[2, 3]
console.log(removedFirstElement);  // 输出：1

• unshift()：在数组开头添加一个或多个元素，并返回新数组的长度。

const arr = [1, 2, 3];
arr.unshift(0);
console.log(arr);  // 输出：[0, 1, 2, 3]

2.2.2 查找元素

• indexOf()：返回数组中某个元素第一次出现的位置，如果找不到返回 -1。

const arr = [1, 2, 3, 4, 5];
console.log(arr.indexOf(3));  // 输出：2
console.log(arr.indexOf(6));  // 输出：-1

• lastIndexOf()：返回数组中某个元素最后一次出现的位置。

const arr = [1, 2, 3, 4, 5, 3];
console.log(arr.lastIndexOf(3));  // 输出：5

• includes()：检查数组中是否包含某个元素，返回布尔值。

const arr = [1, 2, 3];
console.log(arr.includes(2));  // 输出：true
console.log(arr.includes(4));  // 输出：false

2.2.3 操作数组中的元素

• map()：通过给定的函数处理数组的每个元素，返回处理后的新数组。

const arr = [1, 2, 3];
const doubled = arr.map(x => x * 2);
console.log(doubled);  // 输出：[2, 4, 6]

• filter()：根据条件筛选出符合条件的元素，返回一个新数组。

const arr = [1, 2, 3, 4, 5];
const evenNumbers = arr.filter(x => x % 2 === 0);
console.log(evenNumbers);  // 输出：[2, 4]

• forEach()：对数组的每个元素执行一次给定的函数。

const arr = [1, 2, 3];
arr.forEach(x => console.log(x * 2));
// 输出：
// 2
// 4
// 6

• reduce()：从数组的左侧开始累计处理数组中的每个元素，返回一个最终的计算结果。

const arr = [1, 2, 3, 4];
const sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum);  // 输出：10

• reduceRight()：与 reduce() 类似，但从数组的右侧开始。

const arr = [1, 2, 3, 4];
const sumRight = arr.reduceRight((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sumRight);  // 输出：10

2.2.4 数组排序和反转

• sort()：按字典顺序对数组元素进行排序（默认情况下会将数组元素转换为字符串进行比较）。

const arr = [5, 3, 8, 1];
arr.sort();
console.log(arr);  // 输出：[1, 3, 5, 8]

• reverse()：将数组中的元素反转。

const arr = [1, 2, 3, 4];
arr.reverse();
console.log(arr);  // 输出：[4, 3, 2, 1]

2.2.5 数组拆分和连接

• slice()：返回一个新的数组，是原数组的一部分，不改变原数组。

const arr = [1, 2, 3, 4, 5];
const sliced = arr.slice(1, 4);
console.log(sliced);  // 输出：[2, 3, 4]

• splice()：可以从数组中添加或删除元素，直接修改原数组。

const arr = [1, 2, 3, 4, 5];
arr.splice(2, 1, 'a', 'b');  // 从索引2删除1个元素，并插入 'a' 和 'b'
console.log(arr);  // 输出：[1, 2, 'a', 'b', 4, 5]

• concat()：合并两个或多个数组，返回一个新的数组。

const arr1 = [1, 2];
const arr2 = [3, 4];
const arr3 = arr1.concat(arr2);
console.log(arr3);  // 输出：[1, 2, 3, 4]

2.2.6 数组的其他方法

• find()：返回数组中第一个符合条件的元素，如果没有找到，返回 undefined。

const arr = [5, 10, 15];
const found = arr.find(x => x > 8);
console.log(found);  // 输出：10

• findIndex()：返回数组中第一个符合条件的元素的索引，如果没有找到，返回 -1。

const arr = [5, 10, 15];
const index = arr.findIndex(x => x > 8);
console.log(index);  // 输出：1

• join()：将数组中的所有元素连接成一个字符串，元素之间用指定的分隔符分隔。

const arr = ['apple', 'banana', 'cherry'];
console.log(arr.join(', '));  // 输出："

apple, banana, cherry"

3. 实战案例：数组的实际应用

3.1 计算数组中的平均值

const numbers = [10, 20, 30, 40, 50];
const average = numbers.reduce((sum, num) => sum + num, 0) / numbers.length;
console.log(average);  // 输出：30

3.2 去重数组中的重复元素

const arr = [1, 2, 2, 3, 3, 4, 5];
const uniqueArr = [...new Set(arr)];
console.log(uniqueArr);  // 输出：[1, 2, 3, 4, 5]

4. 总结

JavaScript 数组是一个强大的工具，具有丰富的内置方法，可以进行元素的操作、查找、修改和排序等多种操作。掌握数组的常用方法，可以大大提高你处理数据的效率。更多详细内容请关注其他相关文章。