在 JavaScript 中,数组是一个特殊的数据结构,可以用来存储不同类型的元素。作为我们开发人员使用最频繁的数据结构之一,本文介绍一些你可能不太了解但又必须掌握的数组内置方法,帮助你提升开发效率,快速完成数据处理。
concat()
此方法用于连接两个或多个数组,它不会改变现有的数组,返回的是多个数组连接后一个新数组。
代码语言:javascript复制const myArray = [1, 2, 3, 4, 5];
const myArray2 = [10, 20, 30, 40, 50];
myArray.concat(myArray2);
// -------> 输出:[1, 2, 3, 4, 5, 10, 20, 30, 40, 50]
from()
from()
方法用于通过拥有 length
属性的对象或可迭代的对象来返回一个数组。如果对象是数组返回 true
,否则返回 false
。
代码语言:javascript复制用法:
Array.from(object, mapFunction, thisValue)
object 要转换为数组的对象(必需) mapFunction 数组中每个元素要调用的函数(可选) thisValue 映射函数(mapFunction)中的 this 对象(可选)
const myString = "XPOET";
Array.from(myString);
// -------> 输出:["X", "P", "O", "E", "T"]
const mySet = new Set(["a", "a", "b", "c"]);
Array.from(mySet);
// -------> 输出:["a", "b", "c"]
Array.from([1, 2, 3], (x) => x * 10);
// -------> 输出:[10, 20, 30]
reverse()
此方法用于反转数组中元素的顺序,使第一个元素成为最后一个,最后一个元素成为第一个。
代码语言:javascript复制const myArray = ["e", "d", "c", "b", "a"];
myArray.reverse();
// -------> 输出:["a", "b", "c", "d", "e"]
forEach()
此方法用于循环遍历数组中的每个元素,并将元素传递给回调函数。
代码语言:javascript复制
forEach()
对空数组不执行。
const myArray = [
{ id: 1, name: "Job" },
{ id: 2, name: "Alan" },
{ id: 3, name: "Lily" },
];
myArray.forEach((element) => console.log(element.name));
// -------> 输出:Job
// Alan
// Lily
find()
在数组中查找并返回符合条件的元素。如果符合条件的元素有多个,那么只返回第一个元素。如果没有符合条件的元素,则返回 undefined
。
代码语言:javascript复制
find()
对空数组不执行;不改变数组的原始值。
const myArray = [
{ id: 1, name: "John" },
{ id: 2, name: "Ali" },
{ id: 3, name: "Mass" },
];
myArray.find((element) => element.id === 2);
// -------> 输出:{id: 3, name: "Ali"}
myArray.find((element) => element.id === 5);
// -------> 输出:undefined
findIndex()
在数组中查找并返回符合条件的元素的索引(index)。如果符合条件的元素有多个,那么只返回第一个元素的索引(index)。如果没有符合条件的元素,则返回 -1
。
代码语言:javascript复制
findIndex()
对空数组不执行;不会改变数组的原始值。
const myArray = [
{ id: 1, name: "John" },
{ id: 2, name: "Ali" },
{ id: 3, name: "Mass" },
];
myArray.findIndex((element) => element.id === 3);
// -------> 输出:2
myArray.findIndex((element) => element.id === 7);
// -------> 输出:-1
filter()
在数组中过滤出符合条件的所有元素,并返回一个新数组。如果数组中没有符合条件的元素,则返回一个空数组。
代码语言:javascript复制
filter()
不改变数组的原始值。
const myArray = [
{ id: 1, name: "John" },
{ id: 2, name: "Ali" },
{ id: 3, name: "Mass" },
{ id: 4, name: "Mass" },
];
myArray.filter((element) => element.name === "Mass");
// -------> 输出:[{id: 3, name: "Mass"}, {id: 4, name: "Mass"}]
includes()
此方法用于判断数组中是否包含指定的值,如果有返回 true
,否则返回 false
。
const myArray = ["A", "B", "C", 1, 2, 3, 4, 5];
myArray.includes(3);
// -------> 输出:true
myArray.includes(8);
// -------> 输出:false
myArray.includes("A");
// -------> 输出:true
some()
在数组内判断是否有符合条件的元素,只要有一个元素符合条件,则返回 true
,否则返回 false
。
代码语言:javascript复制
some()
对空数组不执行;不改变数组的原始值。
const myArray = ["a", "b", "c", "d", "e"];
myArray.some((item) => item === "d");
// -------> 输出:true
myArray.some((item) => item === "h");
// -------> 输出:false
every()
在数组内判断每一个元素是否都符合匹配条件,如果是,返回true
,反之则返回 false
。
const myArray = ["a", "b", "c", "d", "e"];
myArray.every((item) => item === "d");
// -------> 输出:false
const myArray2 = ["a", "a", "a", "a", "a"];
myArray2.every((item) => item === "a");
// -------> 输出:true
sort()
此方法对数组内的元素进行排序,并返回排序后的新数组。
代码语言:javascript复制const myArray = [5, 4, 3, 2, 1];
// 升序
myArray.sort((a, b) => a - b);
// -------> 输出:[1, 2, 3, 4, 5]
// 降序
myArray.sort((a, b) => b - a);
// -------> 输出:[5, 4, 3, 2, 1]
map()
循环遍历数组中的每一个元素,并返回一个新数组,新数组中的元素为原始数组元素调用函数处理后的值。
代码语言:javascript复制
map()
对空数组不执行;不会改变原始数组。
const myArray = [5, 4, 3, 2, 1];
myArray.map((x) => x * x);
// -------> 输出:[25, 16, 9, 4, 1]
fill()
此方法用于把一个固定值来替换数组中的元素(固定值可以是字母、数字、字符串、数组等等),并返回替换后的新数组。
代码语言:javascript复制语法:
fill(value, start, end)
value 参数 1 :固定值 start 参数 2:开始替换的索引 end 参数 3:结束替换的索引
const myArray = [1, 2, 3, 4, 5];
myArray.fill("A", 1, 3);
// -------> 输出:[1, "A", "A", 4, 5]
reduce()
reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
代码语言:javascript复制语法:
reduce(function(total, currentValue, currentIndex, array), initialValue)
total 初始值,或者计算结束后的返回值(必需) currentValue 当前元素(必需) currentIndex 当前元素的索引(可选) array 当前元素所属的数组对象(可选)
const myArray = [1, 2, 3, 4, 5];
myArray.reduce((total, value) => total * value);
// 1 * 2 * 3 * 4 * 5
// -------> 输出:120
flat()
flat()
方法用于数组扁平化处理,即把数组中多维数组降维,最后返回降维后新数组。
代码语言:javascript复制用法:
flat(depth)
depth 表示要降维的深度(可选,默认为 1)
const myArray = [1, 2, [3, 4, 5, ["A", "B", "C"]]];
myArray.flat();
// -------> 输出:[[1, 2, 3, 4, 5, ["A", "B", "C"]]
myArray.flat(2);
// -------> 输出:[1, 2, 3, 4, 5, "A", "B", "C"]
flatMap()
该方法将函数应用于数组的每个元素,然后将结果压缩为一个新数组。该方法结合了 flat()
和 map()
。
const myArray = [[1], [2], [3], [4], [5]];
myArray.flatMap((arr) => arr * 10);
// -------> 输出:[10, 20, 30, 40, 50]
// 等同于:
myArray.flat().map((arr) => arr * 10);
// -------> 输出:[10, 20, 30, 40, 50]