JavaScript常用数组方法

191 阅读5分钟

JavaScript 数组方法全解析

在 JavaScript 中,数组是一种非常重要的数据结构,它提供了许多强大的方法来操作和处理数组中的元素。本文将详细介绍 JavaScript 中的所有数组方法,帮助你更好地理解和使用数组。

一、数组的创建

在 JavaScript 中,可以使用以下方式创建数组:

javascript

Copy

// 方式一:使用数组字面量
let arr1 = [1, 2, 3, 4, 5];

// 方式二:使用构造函数
let arr2 = new Array(1, 2, 3, 4, 5);

// 创建一个空数组
let arr3 = [];
let arr4 = new Array();

二、数组的基本方法

1. push()

push()方法将一个或多个元素添加到数组的末尾,并返回新数组的长度。

javascript

Copy

let arr = [1, 2, 3];
let length = arr.push(4, 5);
console.log(arr); // [1, 2, 3, 4, 5]
console.log(length); // 5

2. pop()

pop()方法删除数组的最后一个元素,并返回被删除的元素。

javascript

Copy

let arr = [1, 2, 3];
let element = arr.pop();
console.log(arr); // [1, 2]
console.log(element); // 3

3. unshift()

unshift()方法将一个或多个元素添加到数组的开头,并返回新数组的长度。

javascript

Copy

let arr = [1, 2, 3];
let length = arr.unshift(0);
console.log(arr); // [0, 1, 2, 3]
console.log(length); // 4

4. shift()

shift()方法删除数组的第一个元素,并返回被删除的元素。

javascript

Copy

let arr = [1, 2, 3];
let element = arr.shift();
console.log(arr); // [2, 3]
console.log(element); // 1

三、数组的遍历方法

1. forEach()

forEach()方法对数组中的每个元素执行一次给定的函数。

javascript

Copy

let arr = [1, 2, 3];
arr.forEach(function(element) {
    console.log(element);
});
// 输出:1、2、3

2. map()

map()方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

javascript

Copy

let arr = [1, 2, 3];
let newArr = arr.map(function(element) {
    return element * 2;
});
console.log(newArr); // [2, 4, 6]

3. filter()

filter()方法创建一个新数组,其包含通过所提供函数实现的测试的所有元素。

javascript

Copy

let arr = [1, 2, 3, 4, 5];
let newArr = arr.filter(function(element) {
    return element % 2 === 0;
});
console.log(newArr); // [2, 4]

4. reduce()

reduce()方法对数组中的每个元素执行一个由您提供的 reducer 函数 (升序执行),将其结果汇总为单个返回值。

javascript

Copy

let arr = [1, 2, 3, 4, 5];
let sum = arr.reduce(function(accumulator, currentValue) {
    return accumulator + currentValue;
}, 0);
console.log(sum); // 15

5. reduceRight()

reduceRight()方法接受一个函数作为累加器(accumulator)和数组的每个值(从右到左)将其减少为单个值。

javascript

Copy

let arr = [1, 2, 3];
let result = arr.reduceRight(function(accumulator, currentValue) {
    return accumulator + currentValue;
});
console.log(result); // 6

四、数组的搜索方法

1. indexOf()

indexOf()方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回 -1。

javascript

Copy

let arr = [1, 2, 3, 4, 5];
let index = arr.indexOf(3);
console.log(index); // 2

2. lastIndexOf()

lastIndexOf()方法返回指定元素在数组中的最后一个索引,如果不存在则返回 -1。

javascript

Copy

let arr = [1, 2, 3, 2, 1];
let index = arr.lastIndexOf(2);
console.log(index); // 3

3. includes()

includes()方法用来判断一个数组是否包含一个指定的值,根据情况返回 true 或 false

javascript

Copy

let arr = [1, 2, 3];
let hasElement = arr.includes(2);
console.log(hasElement); // true

五、数组的排序方法

1. sort()

sort()方法对数组的元素进行排序,并返回排序后的数组。默认情况下,排序是在 ASCII 字符顺序下进行的。

javascript

Copy

let arr = [3, 1, 2];
arr.sort();
console.log(arr); // [1, 2, 3]

可以通过提供一个比较函数来实现自定义排序。

javascript

Copy

let arr = [3, 1, 2];
arr.sort(function(a, b) {
    return a - b;
});
console.log(arr); // [1, 2, 3]

2. reverse()

reverse()方法将数组中元素的位置颠倒,并返回该数组。

javascript

Copy

let arr = [1, 2, 3];
arr.reverse();
console.log(arr); // [3, 2, 1]

六、数组的转换方法

1. join()

join()方法将数组中的所有元素转换为一个字符串,并返回这个字符串。可以指定一个分隔符作为参数。

javascript

Copy

let arr = [1, 2, 3];
let str = arr.join('-');
console.log(str); // 1-2-3

2. toString()

toString()方法将数组转换为字符串,并返回结果。与 join()方法类似,但默认使用逗号作为分隔符。

javascript

Copy

let arr = [1, 2, 3];
let str = arr.toString();
console.log(str); // 1,2,3

3. toLocaleString()

toLocaleString()方法返回一个字符串表示数组中的元素。元素将使用各自的 toLocaleString 方法进行转换。

javascript

Copy

let arr = [new Date('2023-01-01'), new Date('2023-02-01')];
let str = arr.toLocaleString();
console.log(str); // 1/1/2023, 2/1/2023

七、数组的其他方法

1. slice()

slice()方法返回一个新的数组对象,这一对象是一个由 begin 和 end 决定的原数组的浅拷贝(包括 begin,不包括end)。

javascript

Copy

let arr = [1, 2, 3, 4, 5];
let newArr = arr.slice(1, 4);
console.log(newArr); // [2, 3, 4]

2. splice()

splice()方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。

javascript

Copy

let arr = [1, 2, 3, 4, 5];
let removedElements = arr.splice(2, 2, 6, 7);
console.log(arr); // [1, 2, 6, 7, 5]
console.log(removedElements); // [3, 4]

3. fill()

fill()方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。

javascript

Copy

let arr = [1, 2, 3, 4, 5];
arr.fill(0, 1, 4);
console.log(arr); // [1, 0, 0, 0, 5]

4. copyWithin()

copyWithin()方法浅复制数组的一部分到同一数组中的另一个位置,并返回它,不会改变原数组的长度。

javascript

Copy

let arr = [1, 2, 3, 4, 5];
arr.copyWithin(0, 3, 5);
console.log(arr); // [4, 5, 3, 4, 5]

八、总结

JavaScript 中的数组方法提供了强大的功能来操作和处理数组。通过掌握这些方法,你可以更高效地处理数据,实现各种复杂的逻辑。在实际开发中,根据不同的需求选择合适的数组方法,可以大大提高代码的可读性和可维护性。

希望本文对你理解和使用 JavaScript 数组方法有所帮助!