JS常用数组 API

来碗疙瘩汤

已于 2023-05-21 07:34:35 修改

阅读量410

点赞数

分类专栏： JS 文章标签： javascript 前端开发语言

于 2023-05-20 17:31:41 首次发布

本文链接：https://blog.csdn.net/weixin_62328829/article/details/130783414

版权

JS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

数组（Array）是 JavaScript 中最常用的数据结构之一。它可以包含任意类型的值，并可以通过索引访问和修改数组元素。在实际开发中，我们常常需要对数组进行增删改查等操作。下面介绍常用的 20 个数组 API。

push()

push() 方法将一个或多个元素添加到数组的末尾，并返回修改后的数组长度。以下是示例代码：

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

pop()

pop() 方法从数组中移除并返回最后一个元素。以下是示例代码：

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

concat()

concat() 方法将两个或多个数组合并成一个新数组。以下是示例代码：

const arr1 = [1, 2];
const arr2 = [3, 4];
const arr3 = arr1.concat(arr2);
console.log(arr3); // [1, 2, 3, 4]

join()

join() 方法将数组中的所有元素转换为字符串，并使用指定的分隔符将它们连接在一起。以下是示例代码：

const arr = ['a', 'b', 'c'];
const str = arr.join('-');
console.log(str); // 'a-b-c'

reverse()

reverse() 方法反转数组中元素的顺序，并返回修改后的数组。以下是示例代码：

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

shift()

shift() 方法从数组中移除并返回第一个元素。以下是示例代码：

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

slice()

slice() 方法返回数组的一个切片，即从指定开始位置到指定结束位置之间的元素。以下是示例代码：

const arr = [1, 2, 3, 4, 5];
const slice1 = arr.slice(1, 3);
const slice2 = arr.slice(-2);
console.log(slice1); // [2, 3]
console.log(slice2); // [4, 5]

sort()

sort() 方法按字母顺序对数组进行排序，或者根据指定的排序规则进行排序。以下是示例代码：

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

const arr2 = ['banana', 'apple', 'orange'];
arr2.sort();
console.log(arr2); // ['apple', 'banana', 'orange']

const arr3 = ['banana', 'apple', 'orange'];
arr3.sort((a, b) => a.localeCompare(b));
console.log(arr3); // ['apple', 'banana', 'orange']

splice()

splice() 方法在指定位置添加、移除或替换一个或多个元素，并返回被移除的元素组成的数组。以下是示例代码：

const arr = [1, 2, 3, 4];
const removed = arr.splice(1, 2, 5, 6);
console.log(arr); // [1, 5, 6, 4]
console.log(removed); // [2, 3]

toString()

toString() 方法将数组转换为字符串，并返回结果。以下是示例代码：

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

unshift()

在JavaScript数组中，unshift() 方法用于在数组的开头添加一个或多个元素。其语法如下所示：

array.unshift(element1[, ...[, elementN]])

其中，array表示要操作的数组；element1到elementN表示要添加的元素。

下面是一个代码示例：

let fruits = ['apple', 'banana', 'orange'];
fruits.unshift('pear', 'grape');
console.log(fruits); // ['pear', 'grape', 'apple', 'banana', 'orange']

indexOf()

在JavaScript数组中，indexOf() 方法用于在数组中查找指定元素的位置。它返回指定元素在数组中第一次出现的位置。其语法如下所示：

array.indexOf(searchElement[, fromIndex])

其中，array表示要操作的数组；searchElement表示要查找的元素；fromIndex是指在哪个索引处开始查找。

下面是一个代码示例：

let fruits = ['apple', 'banana', 'orange', 'apple'];
console.log(fruits.indexOf('apple')); // 0
console.log(fruits.indexOf('orange')); // 2
console.log(fruits.indexOf('pear')); // -1

lastIndexOf()

在JavaScript数组中，lastIndexOf() 方法用于在数组中查找指定元素的最后一个位置。它返回指定元素在数组中最后一次出现的位置。其语法如下所示：

array.lastIndexOf(searchElement[, fromIndex])

其中，array表示要操作的数组；searchElement表示要查找的元素；fromIndex是指在哪个索引处开始查找。

下面是一个代码示例：

let fruits = ['apple', 'banana', 'orange', 'apple'];
console.log(fruits.lastIndexOf('apple')); // 3
console.log(fruits.lastIndexOf('orange')); // 2
console.log(fruits.lastIndexOf('pear')); // -1

filter()

在JavaScript数组中，filter() 方法用于返回符合指定条件的元素数组。其语法如下所示：

array.filter(callback[, thisArg])

其中，array表示要操作的数组；callback是一个函数，用来测试数组中的每个元素；thisArg是执行函数callback时使用的this值。callback函数的返回值为true或false，当返回值为true时，对应的元素会被包含在返回的数组中。

下面是一个代码示例：

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let evenNumbers = numbers.filter(function(element) {
    return element % 2 === 0;
});
console.log(evenNumbers); // [2, 4, 6, 8, 10]

map()

在JavaScript数组中，map() 方法用于返回由回调函数处理原数组中的每个元素组成的新数组。其语法如下所示：

array.map(callback[, thisArg])

其中，array表示要操作的数组；callback是一个函数，用来操作数组中的每个元素；thisArg是执行函数callback时使用的this值。callback函数返回的所有值会组成一个新数组。

下面是一个代码示例：

let numbers = [1, 2, 3, 4, 5];
let squareNumbers = numbers.map(function(element) {
    return element * element;
});
console.log(squareNumbers); // [1, 4, 9, 16, 25]

reduce()

reduce()是JavaScript中最常用的数组方法之一。它可以将一个数组中的所有元素累加、计算或拼接为单个值，具体取决于传递给它的回调函数。reduce()方法需要两个参数，第一个参数是回调函数，第二个参数是初始值（也可以省略，此时初始值为第一个元素的值）。

回调函数接收四个参数：

累加器：初始值或上一次回调返回值。
当前元素：正在处理的当前元素。
当前索引：正在处理的当前元素的索引。
原始数组：调用reduce()方法的原始数组。

在下面的代码示例中，我们使用reduce()方法将一个数组中的所有元素相加：

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue);
console.log(sum); // 15

find()

find()方法用于返回数组中符合指定条件的第一个元素。它需要一个回调函数作为参数，该函数接收三个参数：

当前元素：正在处理的当前元素。
当前索引：正在处理的当前元素的索引。
原始数组：调用find()方法的原始数组。

回调函数必须返回一个布尔值，如果返回值为true，则find()方法会返回该元素的值。

在下面的示例中，我们使用find()方法查找一个数组中的第一个偶数值：

const numbers = [1, 3, 5, 2, 4];
const firstEvenNumber = numbers.find((number) => number % 2 === 0);
console.log(firstEvenNumber); // 2

some()

some()方法与find()方法类似，但some()方法用于检查数组中是否存在符合指定条件的元素。它也需要一个回调函数作为参数，该函数接收三个参数：

当前元素：正在处理的当前元素。
当前索引：正在处理的当前元素的索引。
原始数组：调用some()方法的原始数组。

回调函数必须返回一个布尔值，如果返回值为true，则some()方法会返回true。

在下面的示例中，我们使用some()方法检查数组中是否存在大于10的值：

const numbers = [1, 3, 5, 12, 7];
const isGreaterThanTen = numbers.some((number) => number > 10);
console.log(isGreaterThanTen); // true

every()

every()方法与some()方法类似，但它用于检查数组中的所有元素是否符合指定条件。它也需要一个回调函数作为参数，该函数接收三个参数：

当前元素：正在处理的当前元素。
当前索引：正在处理的当前元素的索引。
原始数组：调用every()方法的原始数组。

回调函数必须返回一个布尔值，如果返回值为false，则every()方法会返回false。

在下面的示例中，我们使用every()方法检查数组中是否所有值都大于0：

const numbers = [1, 3, 5, 12, 7];
const isAllPositive = numbers.every((number) => number > 0);
console.log(isAllPositive); // true

includes()

includes()方法用于检查数组中是否包含指定元素。该方法返回一个布尔值，如果数组包含指定元素，则返回true，否则返回false。

includes()方法需要一个参数，即要查找的元素。在使用该方法时，可以指定可选参数start，该参数表示开始查找的位置。如果未指定该参数，则默认从数组的第一个元素开始查找。

下面是一个示例代码，该代码演示了如何使用includes()方法来确定数组中是否包含指定元素：

const fruits = ['apple', 'banana', 'orange', 'mango'];
const hasBanana = fruits.includes('banana');
console.log(hasBanana); // true
const hasWatermelon = fruits.includes('watermelon');
console.log(hasWatermelon); // false