快捷導(dǎo)航

javascript數(shù)組的一些常用方法詳細(xì)匯總

更新時(shí)間：2024年09月23日 08:59:03 作者：前端李易安

在JavaScript開發(fā)中,數(shù)組的操作至關(guān)重要,本文詳細(xì)介紹了數(shù)組的常用方法,包括添加、刪除、查找、迭代、遍歷、排序和變換等功能,掌握這些方法,可以有效地處理和操作數(shù)組數(shù)據(jù),提高開發(fā)效率和代碼的可維護(hù)性,需要的朋友可以參考下

前言

在 JavaScript 中，數(shù)組是一個(gè)非常常用的數(shù)據(jù)結(jié)構(gòu)，JavaScript 提供了許多方法來操作和處理數(shù)組。以下是 JavaScript 中數(shù)組的常用方法，分為不同類型進(jìn)行介紹：

1. 添加/刪除元素

push()：向數(shù)組末尾添加一個(gè)或多個(gè)元素，返回?cái)?shù)組的新長(zhǎng)度。
```
let arr = [1, 2, 3];
arr.push(4); // arr = [1, 2, 3, 4]
```

pop()：移除并返回?cái)?shù)組最后一個(gè)元素。

let arr = [1, 2, 3];
let last = arr.pop(); // arr = [1, 2], last = 3

unshift()：向數(shù)組開頭添加一個(gè)或多個(gè)元素，返回?cái)?shù)組的新長(zhǎng)度。
```
let arr = [2, 3];
arr.unshift(1); // arr = [1, 2, 3]
```

shift()：移除并返回?cái)?shù)組第一個(gè)元素。

let arr = [1, 2, 3];
let first = arr.shift(); // arr = [2, 3], first = 1

splice(start, deleteCount, item1, item2, ...)：從數(shù)組中刪除、添加或替換元素。返回被刪除的元素?cái)?shù)組。

let arr = [1, 2, 3, 4, 5];
arr.splice(1, 2); // 刪除從索引 1 開始的 2 個(gè)元素，arr = [1, 4, 5]
arr.splice(2, 0, 6, 7); // 在索引 2 處插入 6 和 7，arr = [1, 4, 6, 7, 5]

slice(start, end)：返回從 start 到 end（不包括 end）的淺拷貝新數(shù)組，不修改原數(shù)組。
```
let arr = [1, 2, 3, 4, 5];
let newArr = arr.slice(1, 3); // newArr = [2, 3]
```

2. 查找元素

indexOf(item)：返回元素在數(shù)組中的第一個(gè)索引，找不到則返回 -1。
```
let arr = [1, 2, 3, 4];
arr.indexOf(3); // 2
```
lastIndexOf(item)：返回元素在數(shù)組中的最后一個(gè)索引，找不到則返回 -1。
```
let arr = [1, 2, 3, 2];
arr.lastIndexOf(2); // 3
```
includes(item)：判斷數(shù)組是否包含某個(gè)元素，返回布爾值。
```
let arr = [1, 2, 3];
arr.includes(2); // true
```
find(callback)：返回滿足條件的第一個(gè)元素，找不到則返回 undefined。
```
let arr = [1, 2, 3, 4];
let found = arr.find(num => num > 2); // 3
```
findIndex(callback)：返回滿足條件的第一個(gè)元素的索引，找不到則返回 -1。
```
let arr = [1, 2, 3, 4];
let foundIndex = arr.findIndex(num => num > 2); // 2
```

3. 迭代和遍歷

forEach(callback)：對(duì)數(shù)組中的每個(gè)元素執(zhí)行一次提供的函數(shù)（不會(huì)返回新數(shù)組）。
```
let arr = [1, 2, 3];
arr.forEach(num => console.log(num)); // 輸出：1 2 3
```
map(callback)：對(duì)數(shù)組中的每個(gè)元素執(zhí)行提供的函數(shù)，返回新的數(shù)組。
```
let arr = [1, 2, 3];
let newArr = arr.map(num => num * 2); // newArr = [2, 4, 6]
```

filter(callback)：返回滿足條件的元素組成的新數(shù)組。

let arr = [1, 2, 3, 4];
let filteredArr = arr.filter(num => num > 2); // filteredArr = [3, 4]

some(callback)：如果數(shù)組中至少有一個(gè)元素滿足條件，則返回 true，否則返回 false。
```
let arr = [1, 2, 3];
arr.some(num => num > 2); // true
```
every(callback)：如果數(shù)組中每個(gè)元素都滿足條件，則返回 true，否則返回 false。
```
let arr = [1, 2, 3];
arr.every(num => num > 0); // true
```
reduce(callback, initialValue)：將數(shù)組元素組合為一個(gè)值，callback 接收四個(gè)參數(shù)：累計(jì)值、當(dāng)前值、當(dāng)前索引和原數(shù)組。initialValue 是可選的初始累計(jì)值。
```
let arr = [1, 2, 3, 4];
let sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0); // sum = 10
```

reduceRight(callback, initialValue)：從數(shù)組的末尾開始執(zhí)行 reduce 操作。

let arr = [1, 2, 3, 4];
let sum = arr.reduceRight((accumulator, currentValue) => accumulator + currentValue, 0); // sum = 10

4. 數(shù)組排序和變換

sort(compareFunction)：對(duì)數(shù)組進(jìn)行排序，會(huì)修改原數(shù)組。compareFunction 可選，用于自定義排序規(guī)則。

字符串?dāng)?shù)組排序

let fruits = ['banana', 'apple', 'mango'];
fruits.sort();
console.log(fruits); // 輸出 ['apple', 'banana', 'mango']

數(shù)字?jǐn)?shù)組排序對(duì)于數(shù)字?jǐn)?shù)組，默認(rèn)排序可能會(huì)給出錯(cuò)誤的結(jié)果，因?yàn)槟J(rèn)是將所有值轉(zhuǎn)換成字符串再排序

let numbers = [8, 2, 3, 5, 1, 10];
numbers.sort(); // 默認(rèn)轉(zhuǎn)換為字符串排序，結(jié)果可能不是期望的 [1, 2, 3, 5, 8, 10]
console.log(numbers); // 輸出[ 1, 10, 2, 3, 5, 8 ]

為了正確地對(duì)數(shù)字進(jìn)行排序，應(yīng)該提供一個(gè)比較函數(shù)

let numbers = [8, 2, 3, 5, 1, 10];
numbers.sort((a, b) => a - b); 
console.log(numbers); // 輸出[1, 2, 3, 5, 8, 10]

如果想要倒序

let numbers = [8, 2, 3, 5, 1, 10];
numbers.sort((a, b) => b - a); 
console.log(numbers); // 輸出[10, 8, 5, 3, 2, 1]

對(duì)象數(shù)組排序如果你有一個(gè)對(duì)象數(shù)組，并且想要根據(jù)某個(gè)屬性來排序這些對(duì)象，可以這樣做：

let people = [
  { name: 'John', age: 23 },
  { name: 'Jane', age: 29 },
  { name: 'Jack', age: 27 }
];

// 按年齡排序
people.sort((a, b) => a.age - b.age);
console.log(people);
// 輸出：
// [
//   { name: 'John', age: 23 },
//   { name: 'Jack', age: 27 },
//   { name: 'Jane', age: 29 }
// ]

reverse()：反轉(zhuǎn)數(shù)組順序，會(huì)修改原數(shù)組。
```
let arr = [1, 2, 3];
arr.reverse(); // arr = [3, 2, 1]
```
join(separator)：將數(shù)組元素連接成字符串，separator 是可選的分隔符。
```
let arr = [1, 2, 3];
let str = arr.join('-'); // str = "1-2-3"
```
concat()：合并兩個(gè)或多個(gè)數(shù)組，返回新數(shù)組，不修改原數(shù)組。
```
let arr1 = [1, 2];
let arr2 = [3, 4];
let newArr = arr1.concat(arr2); // newArr = [1, 2, 3, 4]
```
flat(depth)：將多維數(shù)組“拉平”到指定的深度，默認(rèn)深度為 1。
```
let arr = [1, [2, [3, [4]]]];
let flatArr = arr.flat(2); // flatArr = [1, 2, 3, [4]]
```
flatMap(callback)：對(duì)每個(gè)元素調(diào)用映射函數(shù)，然后將結(jié)果“拉平”一層。
```
let arr = [1, 2, 3];
let flatMapped = arr.flatMap(num => [num, num * 2]); // flatMapped = [1, 2, 2, 4, 3, 6]
```

5. 其他常用方法

Array.isArray()：檢查一個(gè)值是否為數(shù)組。
```
Array.isArray([1, 2, 3]); // true
```
fill(value, start, end)：用指定值填充數(shù)組，start 和 end 是可選的起始和結(jié)束位置（不包括結(jié)束位置）。
```
let arr = [1, 2, 3, 4];
arr.fill(0, 1, 3); 
console.log(arr) // 會(huì)改變?cè)瓟?shù)組輸出：[1, 0, 0, 4]
```
from()：從類數(shù)組或可迭代對(duì)象創(chuàng)建一個(gè)新數(shù)組。
```
let arr = Array.from('hello'); 
console.log(arr) // 輸出：['h', 'e', 'l', 'l', 'o']
```
of()：根據(jù)給定的參數(shù)創(chuàng)建一個(gè)新數(shù)組。
```
 let arr = Array.of(1, 2, 3); 
 console.log(arr) // [ 1, 2, 3 ]
```