1. 数组方法的分类
JavaScript 数组方法可以大致分为以下几类:
-
添加/删除元素:
push()
,pop()
,shift()
,unshift()
,splice()
-
查找/访问元素:
indexOf()
,lastIndexOf()
,find()
,findIndex()
-
遍历数组:
forEach()
,map()
,filter()
,reduce()
-
排序/反转:
sort()
,reverse()
-
数组转换:
join()
,toString()
,slice()
,concat()
-
其他实用方法:
includes()
,fill()
,flat()
,flatMap()
2. 添加和删除元素
2.1 🌟push()
:向数组末尾添加元素
push()
方法用于向数组末尾添加一个或多个元素,并返回新数组的长度。
let arr = [1, 2, 3];
arr.push(4, 5); // 向数组末尾添加 4 和 5
console.log(arr); // [1, 2, 3, 4, 5]
2.2 🌟pop()
:移除数组末尾的元素
pop()
方法用于移除数组末尾的元素,并返回被移除的元素。
let arr = [1, 2, 3, 4];
let removed = arr.pop(); // 移除数组末尾的 4
console.log(arr); // [1, 2, 3]
console.log(removed); // 4
2.3 shift()
:移除数组第一个元素
shift()
方法用于移除数组第一个元素,并返回被移除的元素。
let arr = [1, 2, 3, 4];
let removed = arr.shift(); // 移除数组第一个元素 1
console.log(arr); // [2, 3, 4]
console.log(removed); // 1
2.4 unshift()
:向数组开头添加元素
unshift()
方法用于向数组开头添加一个或多个元素,并返回新数组的长度。
let arr = [2, 3, 4];
arr.unshift(1, 0); // 向数组开头添加 1 和 0
console.log(arr); // [0, 1, 2, 3, 4]
2.5 🌟splice()
:从数组中添加或删除元素
splice()
方法功能强大,可以用于添加、删除或替换数组中的元素。
let 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]
3. 查找和访问元素
3.1 🌟indexOf()
:查找元素的索引
indexOf()
方法返回指定元素在数组中的第一个索引,如果不存在则返回 -1。
let arr = [1, 2, 3, 4, 5];
let index = arr.indexOf(3); // 查找 3 的索引
console.log(index); // 2
3.2 lastIndexOf()
:查找元素的最后一个索引
lastIndexOf()
方法返回指定元素在数组中的最后一个索引,如果不存在则返回 -1。
let arr = [1, 2, 3, 2, 4];
let index = arr.lastIndexOf(2); // 查找 2 的最后一个索引
console.log(index); // 3
3.3 🌟find()
:查找满足条件的第一个元素
find()
方法返回数组中满足条件的第一个元素。
let arr = [1, 2, 3, 4, 5];
let result = arr.find(item => item > 3); // 查找第一个大于 3 的元素
console.log(result); // 4
3.4 🌟findIndex()
:查找满足条件的第一个元素的索引
findIndex()
方法返回数组中满足条件的第一个元素的索引。
let arr = [1, 2, 3, 4, 5];
let index = arr.findIndex(item => item > 3); // 查找第一个大于 3 的元素的索引
console.log(index); // 3
4. 遍历数组
4.1 🌟forEach()
:遍历数组并执行回调函数
forEach()
方法对数组中的每个元素执行一次回调函数。
let arr = [1, 2, 3, 4, 5];
arr.forEach(item => {
console.log(item);
});
// 输出:
// 1
// 2
// 3
// 4
// 5
4.2 🌟map()
:创建一个新数组,每个元素经过回调函数处理
map()
方法对数组中的每个元素执行回调函数,并返回一个新数组。
let arr = [1, 2, 3, 4, 5];
let newArr = arr.map(item => item * 2); // 每个元素乘以 2
console.log(newArr); // [2, 4, 6, 8, 10]
4.3 🌟filter()
:创建一个新数组,包含满足条件的元素
filter()
方法返回一个新数组,包含所有满足条件的元素。
let arr = [1, 2, 3, 4, 5];
let newArr = arr.filter(item => item > 3); // 筛选大于 3 的元素
console.log(newArr); // [4, 5]
4.4 🌟reduce()
:将数组中的值累积处理,返回一个单一的结果
reduce()
方法对数组中的每个元素执行回调函数,并将结果累积到一个单一的输出值。
let arr = [1, 2, 3, 4, 5];
let sum = arr.reduce((acc, curr) => acc + curr, 0); // 计算数组元素的总和
console.log(sum); // 15
5. 排序和反转
5.1 🌟sort()
:对数组元素进行排序
sort()
方法对数组中的元素进行排序,默认按字符串顺序排序。
let arr = [3, 1, 4, 2];
arr.sort(); // 默认按字符串顺序排序
console.log(arr); // [1, 2, 3, 4]
// 如果需要按数字顺序排序,需要传入比较函数:
arr.sort((a, b) => a - b);
console.log(arr); // [1, 2, 3, 4]
5.2 reverse()
:反转数组中元素的顺序
reverse()
方法反转数组中元素的顺序。
let arr = [1, 2, 3, 4, 5];
arr.reverse(); // 反转数组
console.log(arr); // [5, 4, 3, 2, 1]
6. 数组转换
6.1 join()
:将数组元素连接成一个字符串
join()
方法将数组中的元素连接成一个字符串,默认用逗号分隔。
let arr = [1, 2, 3, 4, 5];
let str = arr.join(", "); // 用逗号和空格分隔
console.log(str); // "1, 2, 3, 4, 5"
6.2 toString()
:将数组转换为字符串
toString()
方法将数组转换为字符串,默认用逗号分隔。
let arr = [1, 2, 3, 4, 5];
let str = arr.toString(); // 转换为字符串
console.log(str); // "1,2,3,4,5"
6.3 slice()
:返回数组的一个浅拷贝
slice()
方法返回数组的一个浅拷贝,不修改原数组。
let arr = [1, 2, 3, 4, 5];
let newArr = arr.slice(1, 4); // 从索引 1 到 4(不包括 4)
console.log(newArr); // [2, 3, 4]
6.4 concat()
:合并两个或多个数组
concat()
方法用于合并两个或多个数组,返回一个新数组。
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let newArr = arr1.concat(arr2); // 合并数组
console.log(newArr); // [1, 2, 3, 4, 5, 6]
7. 其他实用方法
7.1 🌟includes()
:检查数组是否包含某个值
includes()
方法用于检查数组是否包含某个值,返回布尔值。
let arr = [1, 2, 3, 4, 5];
let hasThree = arr.includes(3); // 检查是否包含 3
console.log(hasThree); // true
7.2 fill()
:用一个固定值填充数组的指定部分
fill()
方法用一个固定值填充数组的指定部分。
let arr = [1, 2, 3, 4, 5];
arr.fill(0, 1, 4); // 从索引 1 到 4 填充 0
console.log(arr); // [1, 0, 0, 0, 5]
7.3 flat()
:将多维数组扁平化为一维数组
flat()
方法将多维数组扁平化为一维数组。
let arr = [1, [2, [3, 4]]];
let newArr = arr.flat(2); // 深度为 2 的扁平化
console.log(newArr); // [1, 2, 3, 4]
7.4 flatMap()
:扁平化数组并映射
flatMap()
方法先对数组中的每个元素执行回调函数,然后将结果扁平化为一维数组。
let arr = [1, 2, 3];
let newArr = arr.flatMap(item => [item, item * 2]); // 每个元素映射为两个值
console.log(newArr); // [1, 2, 2, 4, 3, 6]