『JavaScript』全面掌握JavaScript数组的操作、方法与高级技巧

📣读完这篇文章里你能收获到

• 学习JavaScript中数组的基本操作
• 掌握JavaScript数组的多种内置方法
• 了解JavaScript中的数组扩展运算符、Array.from()和Array.of()等实用技巧
• 熟悉如何在JavaScript中使用数组方法进行数据处理

在JavaScript中，数组是一种特殊类型的对象，用于存储有序的数据集合。本文将详细介绍JavaScript中的数组技术，包括基本操作、方法和一些实用技巧。

一、基本操作

1. 创建数组

在JavaScript中，可以使用以下方式创建数组：

let arr1 = [1, 2, 3, 4, 5];
let arr2 = new Array(10); // 创建一个长度为10的空数组

2. 访问和修改元素

可以使用方括号[]来访问和修改数组中的元素：

let arr = [1, 2, 3, 4, 5];

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

3. 数组长度

使用length属性可以获得数组的长度：

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

注意：修改length属性可以改变数组的长度，但需要注意这可能会导致数据丢失。

二、数组方法

JavaScript为数组提供了一系列内置方法，以下是一些常用的方法：

方法名	描述
push(element1, …, elementN)	将一个或多个元素添加到数组的末尾，并返回新的长度
pop()	删除并返回数组的最后一个元素
shift()	删除并返回数组的第一个元素
unshift(element1, …, elementN)	在数组的开头添加一个或多个元素，并返回新的长度
splice(start[, deleteCount, item1, …, itemX])	删除元素并/或添加新元素到数组中，并返回被删除的元素
slice(start[, end])	提取数组的一部分，并返回新的数组
concat(array2, …, arrayN)	连接一个或多个数组，并返回新的数组
join([separator])	将数组转换为字符串，元素由指定的分隔符连接
reverse()	颠倒数组中元素的顺序
sort([compareFunction])	对数组元素进行排序，默认升序
indexOf(searchElement[, fromIndex])	返回指定元素首次出现的索引，未找到则返回-1
lastIndexOf(searchElement[, fromIndex])	返回指定元素最后一次出现的索引，未找到则返回-1
includes(searchElement[, fromIndex])	检查数组是否包含指定的元素，返回布尔值
forEach(callback[, thisArg])	对数组中的每个元素执行一次提供的函数
map(callback[, thisArg])	创建一个新数组，其结果是调用提供的函数在每个元素上的结果
filter(callback[, thisArg])	创建一个新数组，其中包含通过测试的所有元素
reduce(callback[, initialValue])	对数组中的每个元素执行一个由你提供的reducer函数（升序执行），将其结果汇总为单个返回值
reduceRight(callback[, initialValue])	对数组中的每个元素执行一个由你提供的reducer函数（降序执行），将其结果汇总为单个返回值

以下是一些示例代码：

let arr = [1, 2, 3, 4, 5];

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

let lastElement = arr.pop();
console.log(lastElement); // 输出：6
console.log(arr); // 输出：[1, 2, 3, 4, 5]

arr.unshift("First");
console.log(arr); // 输出：["First", 1, 2, 3, 4, 5]

let removedElements = arr.splice(2, 1, "Two", "Three");
console.log(removedElements); // 输出：[3]
console.log(arr); // 输出：["First", 1, "Two", "Three", 4, 5]

let slicedArr = arr.slice(1, 4);
console.log(slicedArr); // 输出：[1, "Two", "Three"]

let joinedStr = arr.join(", ");
console.log(joinedStr); // 输出："First, 1, Two, Three, 4, 5"

arr.reverse();
console.log(arr); // 输出：[5, 4, "Three", "Two", 1, "First"]

arr.sort((a, b) => a - b);
console.log(arr); // 输出：[1, "First", "Three", "Two", 4, 5]

console.log(arr.indexOf(4)); // 输出：4
console.log(arr.includes("Two")); // 输出：true

arr.forEach((item, index) => console.log(`${index}: ${item}`));
// 输出：
// 0: 1
// 1: First
// 2: Three
// 3: Two
// 4: 4
// 5: 5

let mappedArr = arr.map(item => item * 2);
console.log(mappedArr); // 输出：[2, "First", "Three", "Two", 8, 10]

let filteredArr = arr.filter(item => typeof item === "number");
console.log(filteredArr); // 输出：[1, 4, 5]

let reducedValue = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(reducedValue); // 输出：25

三、实用技巧

1. 数组展开运算符

在ES6中引入了数组展开运算符（Spread syntax），它允许将一个数组或可迭代对象的内容扩展到其他数组或函数调用中。

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];

let combinedArr = [...arr1, ...arr2]; // 输出：[1, 2, 3, 4, 5, 6]

2. Array.from()和Array.of()

Array.from()和Array.of()是两个用于创建数组的静态方法。

let arrFrom = Array.from("Hello"); // 输出：["H", "e", "l", "l", "o"]
let arrOf = Array.of(1, 2, 3); // 输出：[1, 2, 3]