JavaScript数组常用的方法整理
JavaScript数组常用的方法整理
以下或许是一些在实际工作中你或许会使用到的数组方法。
1. splice()
- 方法名称：splice()
- 返回值：返回被删除的元素数组
- 是否改变原数组：是
- 参数：
- start：开始删除的索引，例如第一个就是0。
- deleteCount：删除元素的数量
- …items：将要新添加的元素。
- 描述：splice()方法可以实现增删改。
let arr1 = ["游小北", "youxiaobei", "JaketYou"];
let res1 = arr1.splice(0, 1, "增加一个元素", "再增加一个元素", '又增加一个元素');
console.log(res1); // ['游小北']，得到删除的元素
console.log(arr1); // ['增加一个元素', '再增加一个元素', '又增加一个元素', 'youxiaobei', 'JaketYou']
2. slice()
- 方法名称：slice()
- 返回值：返回截取的元素数组
- 是否改变原数组：否
- 参数：
- start：开始位置，例如1就是删除索引为1的元素
- end：结束位置，例如3就删除索引3之前的元素
- 描述：slice()方法用来截取元素。
let arr2 = ["游小北", "youxiaobei", "JaketYou"];
let res2 = arr2.slice(1, 3);
console.log(res2); //[ 'youxiaobei', 'JaketYou' ]
console.log(arr2); //[ '游小北', 'youxiaobei', 'JaketYou' ] // 不改变原数组
3. pop()
- 方法名称：pop()
- 返回值：返回被截取的元素
- 是否改变原数组：是
- 参数：无
- 描述：pop()方法截取最后一个元素，并返回被截取的元素。
let arr3 = ["游小北", "youxiaobei", "JaketYou"];
let res3 = arr3.pop();
console.log(res3); // JaketYou
console.log(arr3); // [ '游小北', 'youxiaobei' ]
4. shift/unshift
- 方法名称：shift() / unshift()
- 是否改变原数组：是
- 描述：shift()方法截取第一个元素，返回被截取的元素，unshift()将新的元素添加到数组开头并返回新数组的长度。
let arr4 = ["游小北", "youxiaobei", "JaketYou"];
let res4 = arr4.shift();
console.log(res4); // 游小北
console.log(arr4); //[ 'youxiaobei', 'JaketYou' ]
console.log(arr4.unshift('jk')) // 3 // 数组的长度
5. reduce()
- 方法名称：reduce()
- 返回值：返回累积计算的结果
- 是否改变原数组：否
- 参数：
- callback（函数）：用于执行累积计算的逻辑。回调的参数为pre（上次的值），item（当前项），index，arr（原数组）
- initialValue（初始值，可选）：作为第一次调用回调函数时的第一个参数传入。
- 描述：reduce()方法遍历数组，按顺序迭代每个元素，返回累积计算的结果。
let arr5 = [1, 2, 3];
// 第一种情况，加默认值，会多一次循环
const res = arr5.reduce((pre, item, index, arr) => {
return pre + item;
}, 10);
console.log(res); //16
// 第二种不加默认值，少一次循环
const res5 = arr5.reduce((pre, item, index, arr) => {
return pre + item;
});
console.log(res5); // 6
6. forEach()
- 方法名称：forEach()
- 返回值：无返回值 (undefined)
- 是否改变原数组：否
- 参数：
- callback（函数）：用于对每个元素执行的操作。回调的参数为 value（当前项），index，arr（原数组）。
- 描述：forEach()方法遍历数组，对每个元素执行回调函数中定义的操作，没有返回值。
let arr6 = [1, 2, 3];
let sum = 0;
arr6.forEach((item, index, arr) => {
sum = sum + item;
});
console.log(sum); // 6
7. concat()
- 方法名称：concat()
- 返回值：连接后的新数组
- 是否改变原数组：否
- 参数：要连接到原数组的其他数组或值。
- 备注：concat()方法将参数中的数组或值连接到原数组的末尾，并返回一个新的数组。
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = [7, 8, 9];
let newArr = arr1.concat(arr2, arr3);
console.log(newArr); // 输出：[1, 2, 3, 4, 5, 6, 7, 8, 9]
let newArr2 = arr1.concat(4, 5);
console.log(newArr2); // 输出：[1, 2, 3, 4, 5]
8. some()
- 方法名称：some()
- 返回值：布尔值
- 是否改变原数组：否
- 参数：回调函数，返回一个条件判断。
- 描述：some()方法对数组中的每个元素调用回调函数，如果有任何元素满足回调函数的条件，则返回 true；否则返回 false。
let arr8 = [1, 2, 3, 4, 5];
let hasEven = arr8.some((element) => {
return element % 2 === 0;
});
console.log(hasEven); // 输出：true，因为2是偶数
9. every()
- 方法名称：every()
- 返回值：布尔值
- 是否改变原数组：否
- 参数：回调函数，返回一个条件判断。
- 描述：every()方法对数组中的每个元素调用回调函数，如果所有元素都满足回调函数的条件，则返回 true；否则返回 false。
let arr8 = [1, 2, 3, 4, 5];
let allPositive = arr8.every((element) => {
return element > 0;
});
console.log(allPositive); // 输出：true，因为所有元素都大于0
10. find()
- 方法名称：find()
- 返回值：满足条件的第一个元素值，如果没有找到则返回 undefined。
- 是否改变原数组：否
- 参数：回调函数。
- 备注：find()方法对数组中的每个元素调用回调函数，返回第一个满足回调函数条件的元素。
let arr10 = [1, 2, 3, 4, 5];
let evenNumber = arr10.find((element) => {
return element % 2 === 0;
});
console.log(evenNumber); // 输出：2，因为2是数组中的第一个偶数
11. findIndex()
- 方法名称：findIndex()
- 返回值：满足条件的第一个元素的索引，如果没有找到则返回 -1。
- 是否改变原数组：否
- 参数：回调函数。
- 备注：findIndex()方法对数组中的每个元素调用回调函数，返回第一个满足回调函数条件的元素的索引。
let arr10 = [1, 2, 3, 4, 5];
let evenIndex = arr10.findIndex((element) => {
return element % 2 === 0;
});
console.log(evenIndex); // 输出：1，因为2是数组中的第一个偶数，其索引为1
12. join()
- 方法名称：join()
- 返回值：由数组中的每个元素转换为字符串并连接得到的字符串。
- 是否改变原数组：否
- 参数：分隔符（可选）。
- 备注：join()方法会将数组中的每个元素转换为字符串，并用指定的分隔符（默认为逗号）将它们连接起来。
let arr12 = [1, 2, 3, 4, 5];
let joinedString = arr12.join("-");
console.log(joinedString); // 输出："1-2-3-4-5"
13. toString()
- 方法名称：toString()
- 返回值：由数组中的每个元素转换为字符串并连接得到的字符串
- 是否改变原数组：否
- 参数：无，意味着传递任何参数都无效
- 备注：toString()方法会将数组中的每个元素转换为字符串，并用逗号将他们连接起来。
let arr12 = [1, 2, 3, 4, 5];
let arrayString = arr12.toString();
console.log(arrayString); // 输出："1,2,3,4,5"
14. indexOf()
- 方法名称：indexOf()
- 返回值：找到的第一个匹配元素的索引，如果没有找到则返回 -1。
- 是否改变原数组：否
- 参数：待搜索的元素，可选的开始搜索的位置。
- 备注：indexOf()方法从数组的开头（或从指定的位置）向后搜索，返回第一个匹配元素的索引。
let arr14 = [1, 2, 3, 4, 2, 5, 2];
let firstIndex = arr14.indexOf(2);
console.log(firstIndex); // 输出：1，因为2第一次出现在索引1处
15. lastIndexOf()
- 方法名称：lastIndexOf()
- 返回值：找到的最后一个匹配元素的索引，如果没有找到则返回 -1。
- 是否改变原数组：否
- 参数：待搜索的元素，可选的开始搜索的位置。
- 备注：lastIndexOf()方法从数组的末尾（或从指定的位置）向前搜索，返回最后一个匹配元素的索引。
let arr14 = [1, 2, 3, 4, 2, 5, 2];
let lastIndex = arr14.lastIndexOf(2);
console.log(lastIndex); // 输出：6，因为2最后一次出现在索引6处
16. map()
- 方法名称：map()
- 返回值：由原数组每个元素经过处理后的返回值组成的新数组。
- 是否改变原数组：否
- 参数：回调函数。
- 备注：map()方法对数组中的每个元素都执行提供的回调函数，并将回调函数的返回值组成一个新数组返回。
let arr16 = [1, 2, 3, 4, 5];
let squaredArr = arr16.map(function (element) {
return element * element;
});
console.log(squaredArr); // 输出：[1, 4, 9, 16, 25]
17. reverse()
- 方法名称：reverse()
- 返回值：反转后的数组。
- 是否改变原数组：是
- 参数：无
- 备注：reverse()方法反转数组中元素的顺序。
let arr17 = [1, 2, 3, 4, 5];
arr17.reverse();
console.log(arr17); // 输出：[5, 4, 3, 2, 1]
18. filter()
- 方法名称：filter()
- 返回值：由满足回调函数条件的元素组成的新数组。
- 是否改变原数组：否
- 参数：回调函数
- 备注：filter()方法对数组中的每个元素执行提供的条件判断函数，并返回满足条件的元素组成的新数组。
let arr18 = [1, 2, 3, 4, 5];
let filteredArr = arr18.filter(function (element) {
return element > 2;
});
console.log(filteredArr); // 输出：[3, 4, 5]
19. sort()
- 方法名称：sort()
- 返回值：排序后的数组。
- 是否改变原数组：是
- 参数：排序比较函数（可选）
- 备注：sort()方法对数组进行原地排序，默认按照 Unicode 排序。可以传入一个比较函数来指定排序规则。
function compareNumbers(a, b) {
return b - a;
}
let arr19 = [4, 2, 1, 3, 5];
arr19.sort();
console.log(arr19); // 输出：[1, 2, 3, 4, 5]
arr19.sort(compareNumbers);
console.log(arr19); // 输出：[5, 4, 3, 2, 1]
20. includes()
- 方法名称：includes()
- 返回值：布尔值。
- 是否改变原数组：否
- 参数：要查找的元素，开始搜索的索引（可选）
- 备注：includes()方法判断数组是否包含指定的元素，返回布尔值。
let arr20 = [1, 2, 3, 4, 5];
// 示例：使用 includes 方法判断数组是否包含元素
let result = arr20.includes(3);
let result1 = arr20.includes(3,2);
let result2 = arr20.includes(3,3);
console.log(result); // 输出：true
console.log(result1); // 输出：true
console.log(result2); // 输出：false
21. array.with(index, value)
- 方法名称：array.with(index, value)
- 返回值：修改后的数组。
- 是否改变原数组：否
- 参数：将被修改的索引，要分配给指定索引的任何值。
- 备注：array.with(index, value)是方括号表示法修改指定索引值的复制方法版本。
const arr21 = [1, 2, 3, 4, 5];
console.log(arr21.with(2, 6)); // [1, 2, 6, 4, 5]
console.log(arr21); // [1, 2, 3, 4, 5]
22. isArray()
- 方法名称：isArray()
- 返回值：布尔值。
- 是否改变原数组：否
- 参数：要判断的值
- 备注：isArray()方法用来判断给定的值是否是数组。
let arr22 = [1, 2, 3, 4, 5];
console.log(Array.isArray(arr22)); // 输出：true
23. flat()
- 方法名称：flat()
- 返回值：新的一维数组
- 是否改变原数组：否
- 参数：表示深度；例如数字，1 代表展开的层级为 1，2 也同理。 可使用 Infinity 作为参数代表必然展开为 1 维数组
- 备注：flat()方法将多维数组转化为一维。
let arr23 = [1, [2, 3], [4, [5]]];
console.log(arr23.flat()) // [1, 2, 3, 4, [5]]
console.log(arr23.flat(2)) // [1, 2, 3, 4, 5]
let arrInfinite = [1, [2, 3], [4, [5,[6]]]];
console.log(arrInfinite.flat(2)) // [1, 2, 3, 4, 5, [6]]
console.log(arrInfinite.flat(Infinity)) // [1, 2, 3, 4, 5, 6]
24. flatMap()
- 方法名称：flatMap()
- 返回值：新的一维数组。
- 是否改变原数组：否
- 参数：回调函数。
- 备注：flatMap()方法对数组的每个元素执行指定操作，并将结果展开成一个新数组。
let arr24 = [1, 2, 3];
let arr24fm = [1, 2, 3, [4]]
let arr24fmNan = [1, 2, 3, [4, 5]]
const res24 = arr24.flatMap(x => [x, x * 2])
const res24fm = arr24fm.flatMap(x => [x, x * 2])
const res24fmNan = arr24fmNan.flatMap(x => [x, x * 2])
console.log(res24) // [1, 2, 2, 4, 3, 6]
console.log(res24fm) // [1, 2, 2, 4, 3, 6, [4], 8]
console.log(res24fmNan) // [1, 2, 2, 4, 3, 6, [4, 5], NaN]
25. keys()
- 方法名称：keys()
- 返回值：迭代器对象。
- 是否改变原数组：否
- 参数：无
- 备注：keys()方法返回一个包含数组中每个索引键的迭代器对象。
let arr25 = ['a', 'b', 'c'];
const iterator25 = arr25.keys(); // 示例：获取数组arr25中每个索引键的迭代器对象
console.log('i', iterator25.next()); // i { value: 0, done: false }
console.log('i', iterator25.next()); // i { value: 1, done: false }
console.log('i', iterator25.next()); // i { value: 2, done: false }
console.log('i', iterator25.next()); // i { value: undefined, done: true } // done 为 true 表示迭代结束
26. values()
- 方法名称：values()
- 返回值：迭代器对象。
- 是否改变原数组：否
- 参数：无
- 备注：values()方法返回一个包含数组中每个元素值的迭代器对象。
let arr26 = ['a', 'b', 'c'];
let iterator26 = arr26.values();
console.log(iterator26.next()); // 输出：{value: 'a', done: false}
console.log(iterator26.next()); // 输出：{value: 'b', done: false}
console.log(iterator26.next()); // 输出：{value: 'c', done: false}
console.log(iterator26.next()); // 输出：{value: undefined, done: true}
27. entries()
- 方法名称：entries()
- 返回值：迭代器对象。
- 是否改变原数组：否
- 参数：无
- 备注：entries()方法返回一个包含数组中每个索引键和对应元素值的迭代器对象。
let arr27 = ['a', 'b', 'c'];
let iterator27 = arr27.entries();
console.log(iterator27.next()); // 输出：{value: [0, 'a'], done: false}
console.log(iterator27.next()); // 输出：{value: [1, 'b'], done: false}
console.log(iterator27.next()); // 输出：{value: [2, 'c'], done: false}
console.log(iterator27.next()); // 输出：{value: undefined, done: true}
28. from()
- 方法名称：from()
- 返回值：新的数组。
- 是否改变原数组：否
- 参数：类似数组或可迭代的对象, 调用数组每个元素的函数 mapFn, 执行 mapFn 时用作 this 的值。
- 备注：from()方法通过类似数组或可迭代的对象创建一个新的数组。
console.log(Array.from('foo')); // 输出：["f", "o", "o"]
console.log(Array.from([1, 2, 3], (x) => x + x)); // 输出：[2, 4, 6]
29. of()
- 方法名称：of()
- 返回值：新的数组。
- 是否改变原数组：否
- 参数：传入的参数作为数组的元素。
- 备注：of()方法根据传入的参数创建一个新的数组。就算没有参数，也会创建一个空数组。
console.log(Array.of('1', 2, '3')) // ["1", 2, "3"]
console.log(Array.of(0)) // [0]
console.log(Array.of()) // []