快捷導(dǎo)航

JavaScript中Array的常用方法舉例詳解

更新時(shí)間：2025年06月04日 08:29:18 作者：shifff

這篇文章主要介紹了JavaScript中Array常用方法的相關(guān)資料,JavaScript的Array對(duì)象提供多種方法,涵蓋創(chuàng)建、增刪、查找、遍歷、轉(zhuǎn)換、排序等操作,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下

前言

JavaScript 中的 Array 對(duì)象提供了許多常用的方法，這些方法可以幫助你更方便地操作數(shù)組。以下是一些常用的 Array 方法及其用法：

1. 創(chuàng)建和初始化數(shù)組

new Array()：創(chuàng)建一個(gè)空數(shù)組。
Array.of()：創(chuàng)建一個(gè)具有可變數(shù)量參數(shù)的新數(shù)組實(shí)例。
Array.from()：從類數(shù)組或可迭代對(duì)象創(chuàng)建一個(gè)新的數(shù)組實(shí)例。

const arr1 = new Array();
const arr2 = Array.of(1, 2, 3);
const arr3 = Array.from('hello'); // ['h', 'e', 'l', 'l', 'o']

2. 添加和刪除元素

push(...items)：在數(shù)組末尾添加一個(gè)或多個(gè)元素，并返回新的長度。
pop()：移除數(shù)組末尾的元素，并返回該元素。
unshift(...items)：在數(shù)組開頭添加一個(gè)或多個(gè)元素，并返回新的長度。
shift()：移除數(shù)組開頭的元素，并返回該元素。

const arr = [1, 2, 3];

arr.push(4); // arr 現(xiàn)在是 [1, 2, 3, 4]
console.log(arr.pop()); // 輸出: 4, arr 現(xiàn)在是 [1, 2, 3]

arr.unshift(0); // arr 現(xiàn)在是 [0, 1, 2, 3]
console.log(arr.shift()); // 輸出: 0, arr 現(xiàn)在是 [1, 2, 3]

3. 查找元素

indexOf(searchElement[, fromIndex])：返回第一個(gè)匹配項(xiàng)的索引，如果沒有找到則返回 -1。
lastIndexOf(searchElement[, fromIndex])：返回最后一個(gè)匹配項(xiàng)的索引，如果沒有找到則返回 -1。
find(callback[, thisArg])：返回?cái)?shù)組中滿足提供的測試函數(shù)的第一個(gè)元素的值，如果沒有找到則返回 undefined。
findIndex(callback[, thisArg])：返回?cái)?shù)組中滿足提供的測試函數(shù)的第一個(gè)元素的索引，如果沒有找到則返回 -1。

const arr = [1, 2, 3, 4, 5];

console.log(arr.indexOf(3)); // 輸出: 2
console.log(arr.lastIndexOf(3)); // 輸出: 2

const foundElement = arr.find(element => element > 3);
console.log(foundElement); // 輸出: 4

const foundIndex = arr.findIndex(element => element > 3);
console.log(foundIndex); // 輸出: 3

4. 遍歷數(shù)組

forEach(callback[, thisArg])：對(duì)數(shù)組中的每個(gè)元素執(zhí)行一次提供的函數(shù)。
map(callback[, thisArg])：創(chuàng)建一個(gè)新數(shù)組，其結(jié)果是該數(shù)組中的每個(gè)元素調(diào)用提供的函數(shù)的結(jié)果。
filter(callback[, thisArg])：創(chuàng)建一個(gè)新數(shù)組，包含通過提供的函數(shù)實(shí)現(xiàn)的測試的所有元素。
reduce(callback[, initialValue])：對(duì)數(shù)組中的每個(gè)元素執(zhí)行一個(gè)由您提供的 reducer 函數(shù)（升序執(zhí)行），將其結(jié)果匯總為單個(gè)返回值。
reduceRight(callback[, initialValue])：與 reduce 類似，但降序執(zhí)行。

const arr = [1, 2, 3, 4, 5];

// forEach
arr.forEach(element => console.log(element));

// map
const squared = arr.map(element => element * element);
console.log(squared); // 輸出: [1, 4, 9, 16, 25]

// filter
const evenNumbers = arr.filter(element => element % 2 === 0);
console.log(evenNumbers); // 輸出: [2, 4]

// reduce
const sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 輸出: 15

// reduceRight
const reversedSum = arr.reduceRight((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(reversedSum); // 輸出: 15

5. 數(shù)組轉(zhuǎn)換

slice([begin[, end]])：返回一個(gè)新的數(shù)組，包含從開始到結(jié)束（不包括結(jié)束）的數(shù)組的一部分淺拷貝。
splice(start[, deleteCount[, ...items]])：改變?cè)瓟?shù)組，通過刪除現(xiàn)有元素和/或添加新元素。
concat(...items)：返回一個(gè)新的數(shù)組實(shí)例，該實(shí)例是通過將現(xiàn)有數(shù)組與傳入的數(shù)組或非數(shù)組值連接而成的。
flat(depth)：按照指定深度遞歸地展平數(shù)組。
flatMap(callback[, thisArg])：先映射數(shù)組，然后將結(jié)果展平。

const arr = [1, 2, 3, 4, 5];

// slice
const sliced = arr.slice(1, 3);
console.log(sliced); // 輸出: [2, 3]

// splice
const removed = arr.splice(1, 2, 10, 11);
console.log(arr); // 輸出: [1, 10, 11, 4, 5]
console.log(removed); // 輸出: [2, 3]

// concat
const concatenated = arr.concat([6, 7]);
console.log(concatenated); // 輸出: [1, 10, 11, 4, 5, 6, 7]

// flat
const nested = [1, [2, [3, [4, 5]]]];
const flattened = nested.flat(Infinity);
console.log(flattened); // 輸出: [1, 2, 3, 4, 5]

// flatMap
const mappedAndFlattened = arr.flatMap(x => [x, x * 2]);
console.log(mappedAndFlattened); // 輸出: [1, 2, 10, 20, 11, 22, 4, 8, 5, 10]

6. 排序和反轉(zhuǎn)

sort([compareFunction])：對(duì)數(shù)組的元素進(jìn)行排序，并返回排序后的數(shù)組。
reverse()：反轉(zhuǎn)數(shù)組中元素的順序，并返回反轉(zhuǎn)后的數(shù)組。

const arr = [3, 1, 4, 1, 5, 9, 2, 6];

// sort
arr.sort((a, b) => a - b);
console.log(arr); // 輸出: [1, 1, 2, 3, 4, 5, 6, 9]

// reverse
arr.reverse();
console.log(arr); // 輸出: [9, 6, 5, 4, 3, 2, 1, 1]

7. 其他方法

includes(searchElement[, fromIndex])：判斷數(shù)組是否包含某個(gè)指定的值，如果是返回 true，否則返回 false。
join([separator])：將所有數(shù)組元素連接成一個(gè)字符串。
some(callback[, thisArg])：檢測數(shù)組中是否有至少一個(gè)元素滿足提供的測試函數(shù)。
every(callback[, thisArg])：檢測數(shù)組中的所有元素是否都滿足提供的測試函數(shù)。

const arr = [1, 2, 3, 4, 5];

// includes
console.log(arr.includes(3)); // 輸出: true

// join
const joined = arr.join('-');
console.log(joined); // 輸出: 1-2-3-4-5

// some
const hasEven = arr.some(element => element % 2 === 0);
console.log(hasEven); // 輸出: true

// every
const allPositive = arr.every(element => element > 0);
console.log(allPositive); // 輸出: true