🧑🎓 个人主页：《爱蹦跶的大A阿》
🔥当前正在更新专栏：《VUE》 、《JavaScript保姆级教程》、《krpano》
目录
✨ 前言
数组的定义
创建数组
1. 数组字面量
2. Array构造函数
3. Array.of()
4. Array.from()
读取元素
写入元素
数组长度
清空数组
添加元素
删除元素
splice()
遍历数组
for循环
for...of循环
forEach()
map()/filter()/reduce()
搜索元素
indexOf()/lastIndexOf()
find()
findIndex()
includes()
排序数组
reverse()
sort()
数组和字符串转换
join()
split()
映射数组
map()
过滤数组
filter()
规约数组
reduce()
拷贝数组
浅拷贝
深拷贝
多维数组
稀疏数组
类数组对象
✨ 结语
✨ 前言
对象允许存储键值集合，这很好。
但很多时候我们发现还需要 有序集合，里面的元素都是按顺序排列的。例如，我们可能需要存储一些列表，比如用户、商品以及 HTML 元素等。
这里使用对象就不是很方便了，因为对象不能提供能够管理元素顺序的方法。我们不能在已有的元素“之间”插入一个新的属性。这种场景下对象就不太适用了。
这时一个特殊的数据结构数组（Array）就派上用场了，它能存储有序的集合。
数组的定义
数组是存储数据的有序列表,每个元素都有对应的索引位置。
创建数组
1. 数组字面量
使用[]创建数组最简单直观:
let arr = [1, 2, 3];2. Array构造函数
可以指定数组长度或元素:
let arr1 = new Array(3); // 创建长度为3的空数组
let arr2 = new Array(1, 2, 3); // 使用参数初始化数组3. Array.of()
将参数转换为数组元素:
let arr = Array.of(1, 2, 3); // [1, 2, 3]4. Array.from()
将类数组对象或可迭代对象转换为数组:
let arr = Array.from('foo'); // ['f', 'o', 'o']
读取元素
可以通过索引读取元素,从0开始:
let arr = [1, 2, 3];
let first = arr[0]; // 1
let second = arr[1]; // 2写入元素
同样通过索引可以修改写入元素:
let arr = [1, 2, 3];
arr[0] = 'first';
arr[1] = 'second';数组长度
length属性表示当前数组的长度:
let arr = [1, 2, 3];
arr.length; // 3清空数组
将length重置为0即可清空数组:
let arr = [1, 2, 3];
arr.length = 0; // 清空数组
添加元素
使用push()和unshift()可以向数组末尾或开头添加一个或多个元素:
let arr = [1, 2];
arr.push(3); // 尾部添加一个元素
arr.unshift(0); // 头部添加一个元素删除元素
使用pop()和shift()可以删除数组末尾或开头的元素:
let arr = [1, 2, 3];
arr.pop(); // 删除最后一个元素
arr.shift(); // 删除第一个元素
splice()
splice()可以删除任意位置的元素:
let arr = [1, 2, 3, 4];
arr.splice(2, 1); // 从索引2开始删除1个元素splice()也可以实现插入、替换等功能。
遍历数组
遍历数组常用的方法:
for循环
使用传统的for循环根据索引遍历:
for(let i = 0; i < arr.length; i++) {
// arr[i] 访问元素
}
for...of循环
使用for...of直接遍历元素:
for(let a of arr) {
// a 为数组元素
}forEach()
数组的forEach()方法遍历:
arr.forEach(function(element) {
// element为数组元素
});
map()/filter()/reduce()
数组的高阶函数也可以遍历数组
搜索元素
indexOf()/lastIndexOf()
搜索元素第一次或最后一次出现的索引:
let arr = [1, 2, 1];
arr.indexOf(1); // 0
arr.lastIndexOf(1); // 2find()
找到第一个满足条件的元素:
let found = arr.find(x => x > 2);
findIndex()
找到第一个满足条件元素的索引:
let index = arr.findIndex(x => x > 2);includes()
检查数组是否包含某元素:
[1,2,3].includes(2); // true
排序数组
reverse()
反转数组顺序:
let arr = [1, 2, 3];
arr.reverse(); // [3, 2, 1]sort()
默认按字符串排序:
let arr = [3, 1, 2];
arr.sort(); // [1, 2, 3]可以传入比较函数自定义排序逻辑。
数组和字符串转换
join()
join()可以将数组转换为字符串:
let arr = [1, 2, 3];
arr.join(); // "1,2,3"
arr.join('-'); // "1-2-3"split()
split()可以将字符串分割成数组:
"a-b-c".split('-'); // ['a', 'b', 'c']
映射数组
map()
map()将数组元素映射到新数组:
let arr = [1, 2, 3];
let mapped = arr.map(x => x * 2); // [2, 4, 6]不会改变原数组
过滤数组
filter()
filter()过滤数组元素:
let arr = [1, 2, 3];
let filtered = arr.filter(x => x > 2); // [3]
规约数组
reduce()
reduce()可以将数组组合为单个值:
let arr = [1, 2, 3];
let sum = arr.reduce((a, b) => a + b); // 6拷贝数组
浅拷贝
使用slice()可以浅拷贝数组:
let arr2 = arr1.slice();
深拷贝
可以递归实现深拷贝:
function deepCopy(arr) {
// 递归拷贝算法
}多维数组
数组可以包含其他数组,形成多维数组:
let arr = [
[1, 2],
[3, 4]
];访问多维数组需要多层索引:
arr[1][0]; // 返回3遍历多维数组需要嵌套循环:
for (let i = 0; i < arr.length; i++) {
for (let j = 0; j < arr[i].length; j++) {
// 遍历 sub array
}
}
稀疏数组
当数组的元素不连续时,就会形成稀疏数组:
let arr = [];
arr[0] = 1;
arr[3] = 4;数组的长度为4,但中间有空隙。
遍历稀疏数组需要检查元素是否存在:
for(let i = 0; i < arr.length; i++) {
if(arr.hasOwnProperty(i)) {
// 处理存在的元素
}
}
类数组对象
拥有长度和索引元素的对象,类似于数组:
let obj = {
0: 'first',
1: 'second',
length: 2
};可以使用Array.from()转换为数组。
✨ 结语
本文全面介绍了JavaScript数组的各种功能点,现做一个简要总结。
数组是一种存储数据的有序列表,可以通过索引进行访问。我们首先介绍了数组的各种创建方式。
然后详细讲解了数组元素的读取和写入,以及获取数组长度和清空数组的方法。
对于修改数组,我们涵盖了尾部/头部添加,中间删除,splice的用法。
遍历数组常用的有for循环、forEach、for...of等。搜索数组可以用indexOf、find、includes等。
排序数组有reverse和sort两种方法。转换数组可以用join和split。
映射数组可以用map实现,过滤可以用filter实现。reduce可以将数组规约为一个值。
拷贝数组有浅拷贝和深拷贝之分。多维数组和稀疏数组也需要特殊处理。
这篇文章涵盖了数组的全方位用法分析,提供详细的代码示例,旨在成为JavaScript数组的完整指南。
如果对数组的任何操作或用法不清楚,都欢迎在评论区提出,我会继续补充解释。希望这篇全面解析可以帮助大家全面掌握JavaScript数组的使用。
