JavaScript数组方法-系统性总结详解

概述

数组（Array）是JavaScript中最常用、最重要的一种数据类型，而且在实际开发中，我们也经常需要对数组进行各种操作，比如查询、增加、删除、排序等等。JavaScript提供了很多数组方法，让我们能够方便快捷的对数组进行各种操作，使得开发变得更加高效。本篇文章旨在对JavaScript数组方法进行系统性总结、详细讲解。

基本数组方法

push()方法

push()方法可以向数组尾部添加一个或多个元素，并返回新的数组长度。

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

pop()方法

pop()方法会从数组尾部删除一个元素，并返回该元素的值。

var arr = [1, 2, 3];
var last = arr.pop();
console.log(arr); //输出：[1, 2]
console.log(last); //输出：3

shift()方法

shift()方法可以从数组头部删除一个元素，并返回该元素的值。

var arr = [1, 2, 3];
var first = arr.shift();
console.log(arr); //输出：[2, 3]
console.log(first); //输出：1

unshift()方法

unshift()方法可以向数组头部添加一个或多个元素，并返回新的数组长度。

var arr = [1, 2, 3];
arr.unshift(0, -1);
console.log(arr); //输出：[-1, 0, 1, 2, 3]

slice()方法

slice()方法可以截取数组的部分元素，并返回一个新的数组。

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

splice()方法

splice()方法可以删除数组的部分元素，并可以在指定位置插入新的元素。

var arr = [1, 2, 3, 4, 5];
arr.splice(2, 2, 'a', 'b');
console.log(arr); //输出：[1, 2, 'a', 'b', 5]

迭代方法

forEach()方法

forEach()方法用于遍历数组的每一个元素，执行指定的回调函数。

var arr = [1, 2, 3, 4, 5];
arr.forEach(function(item, index, array) {
    console.log(item, index, array);
});

map()方法

map()方法返回一个新的数组，其中的元素是调用指定函数后的结果。

var arr = [1, 2, 3, 4, 5];
var newArr = arr.map(function(item, index, array) {
    return item * 2;
});
console.log(newArr); //输出：[2, 4, 6, 8, 10]

归约方法

reduce()方法

reduce()方法用于把数组元素累积到一个值上，可以返回一个新的值。

var arr = [1, 2, 3, 4, 5];
var sum = arr.reduce(function(prev, curr, index, array) {
    return prev + curr;
});
console.log(sum); //输出：15

数组检索方法

indexOf()方法

indexOf()方法用于从数组头部开始查找指定元素的位置，如果找到则返回它在数组中的位置，否则返回-1。

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

lastIndexOf()方法

lastIndexOf()方法用于从数组尾部开始查找指定元素的位置，如果找到则返回它在数组中的位置，否则返回-1。

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

示例说明

示例一：使用reduce()方法计算数组平均值

var arr = [1, 2, 3, 4, 5];
var sum = arr.reduce(function(prev, curr, index, array) {
    return prev + curr;
});
var avg = sum / arr.length;
console.log(avg); //输出：3

示例二：使用map()方法将数组中的字符串转换为数字

var arr = ['1', '2', '3', '4', '5'];
var newArr = arr.map(function(item, index, array) {
    return parseInt(item);
});
console.log(newArr); //输出：[1, 2, 3, 4, 5]

总结

本篇文章介绍了JavaScript数组的基本方法、迭代方法、归约方法和检索方法。通过实践应用，我们可以更加熟练地掌握它们，并解决实际开发中的问题。