1. 數(shù)組方法的分類

JavaScript 數(shù)組方法可以大致分為以下幾類：

• 添加/刪除元素：push()，pop()，shift()，unshift()，splice()
• 查找/訪問元素：indexOf()，lastIndexOf()，find()，findIndex()
• 遍歷數(shù)組：forEach()，map()，filter()，reduce()
• 排序/反轉(zhuǎn)：sort()，reverse()
• 數(shù)組轉(zhuǎn)換：join()，toString()，slice()，concat()
• 其他實(shí)用方法：includes()，fill()，flat()，flatMap()

2. 添加和刪除元素

2.1 ??push()：向數(shù)組末尾添加元素

push() 方法用于向數(shù)組末尾添加一個(gè)或多個(gè)元素，并返回新數(shù)組的長(zhǎng)度。

let arr = [1, 2, 3];
arr.push(4, 5); // 向數(shù)組末尾添加 4 和 5
console.log(arr); // [1, 2, 3, 4, 5]

2.2 ??pop()：移除數(shù)組末尾的元素

pop() 方法用于移除數(shù)組末尾的元素，并返回被移除的元素。

let arr = [1, 2, 3, 4];
let removed = arr.pop(); // 移除數(shù)組末尾的 4
console.log(arr); // [1, 2, 3]
console.log(removed); // 4

2.3 shift()：移除數(shù)組第一個(gè)元素

shift() 方法用于移除數(shù)組第一個(gè)元素，并返回被移除的元素。

let arr = [1, 2, 3, 4];
let removed = arr.shift(); // 移除數(shù)組第一個(gè)元素 1
console.log(arr); // [2, 3, 4]
console.log(removed); // 1

2.4 unshift()：向數(shù)組開頭添加元素

unshift() 方法用于向數(shù)組開頭添加一個(gè)或多個(gè)元素，并返回新數(shù)組的長(zhǎng)度。

let arr = [2, 3, 4];
arr.unshift(1, 0); // 向數(shù)組開頭添加 1 和 0
console.log(arr); // [0, 1, 2, 3, 4]

2.5 ??splice()：從數(shù)組中添加或刪除元素

splice() 方法功能強(qiáng)大，可以用于添加、刪除或替換數(shù)組中的元素。

let arr = [1, 2, 3, 4, 5];
arr.splice(2, 1, "a", "b"); // 從索引 2 開始，刪除 1 個(gè)元素，插入 "a" 和 "b"
console.log(arr); // [1, 2, "a", "b", 4, 5]

3. 查找和訪問元素

3.1 ??indexOf()：查找元素的索引

indexOf() 方法返回指定元素在數(shù)組中的第一個(gè)索引，如果不存在則返回 -1。

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

3.2 lastIndexOf()：查找元素的最后一個(gè)索引

lastIndexOf() 方法返回指定元素在數(shù)組中的最后一個(gè)索引，如果不存在則返回 -1。

let arr = [1, 2, 3, 2, 4];
let index = arr.lastIndexOf(2); // 查找 2 的最后一個(gè)索引
console.log(index); // 3

3.3 ??find()：查找滿足條件的第一個(gè)元素

find() 方法返回?cái)?shù)組中滿足條件的第一個(gè)元素。

let arr = [1, 2, 3, 4, 5];
let result = arr.find(item => item > 3); // 查找第一個(gè)大于 3 的元素
console.log(result); // 4

3.4 ??findIndex()：查找滿足條件的第一個(gè)元素的索引

findIndex() 方法返回?cái)?shù)組中滿足條件的第一個(gè)元素的索引。

let arr = [1, 2, 3, 4, 5];
let index = arr.findIndex(item => item > 3); // 查找第一個(gè)大于 3 的元素的索引
console.log(index); // 3

4. 遍歷數(shù)組

4.1 ??forEach()：遍歷數(shù)組并執(zhí)行回調(diào)函數(shù)

forEach() 方法對(duì)數(shù)組中的每個(gè)元素執(zhí)行一次回調(diào)函數(shù)。

let arr = [1, 2, 3, 4, 5];
arr.forEach(item => {
  console.log(item);
});
// 輸出：
// 1
// 2
// 3
// 4
// 5

4.2 ??map()：創(chuàng)建一個(gè)新數(shù)組，每個(gè)元素經(jīng)過回調(diào)函數(shù)處理

map() 方法對(duì)數(shù)組中的每個(gè)元素執(zhí)行回調(diào)函數(shù)，并返回一個(gè)新數(shù)組。

let arr = [1, 2, 3, 4, 5];
let newArr = arr.map(item => item * 2); // 每個(gè)元素乘以 2
console.log(newArr); // [2, 4, 6, 8, 10]

4.3 ??filter()：創(chuàng)建一個(gè)新數(shù)組，包含滿足條件的元素

filter() 方法返回一個(gè)新數(shù)組，包含所有滿足條件的元素。

let arr = [1, 2, 3, 4, 5];
let newArr = arr.filter(item => item > 3); // 篩選大于 3 的元素
console.log(newArr); // [4, 5]

4.4 ??reduce()：將數(shù)組中的值累積處理，返回一個(gè)單一的結(jié)果

reduce() 方法對(duì)數(shù)組中的每個(gè)元素執(zhí)行回調(diào)函數(shù)，并將結(jié)果累積到一個(gè)單一的輸出值。

let arr = [1, 2, 3, 4, 5];
let sum = arr.reduce((acc, curr) => acc + curr, 0); // 計(jì)算數(shù)組元素的總和
console.log(sum); // 15

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

5.1 ??sort()：對(duì)數(shù)組元素進(jìn)行排序

sort() 方法對(duì)數(shù)組中的元素進(jìn)行排序，默認(rèn)按字符串順序排序。

let arr = [3, 1, 4, 2];
arr.sort(); // 默認(rèn)按字符串順序排序
console.log(arr); // [1, 2, 3, 4]
// 如果需要按數(shù)字順序排序，需要傳入比較函數(shù)：
arr.sort((a, b) => a - b);
console.log(arr); // [1, 2, 3, 4]

5.2 reverse()：反轉(zhuǎn)數(shù)組中元素的順序

reverse() 方法反轉(zhuǎn)數(shù)組中元素的順序。

let arr = [1, 2, 3, 4, 5];
arr.reverse(); // 反轉(zhuǎn)數(shù)組
console.log(arr); // [5, 4, 3, 2, 1]

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

6.1 join()：將數(shù)組元素連接成一個(gè)字符串

join() 方法將數(shù)組中的元素連接成一個(gè)字符串，默認(rèn)用逗號(hào)分隔。

let arr = [1, 2, 3, 4, 5];
let str = arr.join(", "); // 用逗號(hào)和空格分隔
console.log(str); // "1, 2, 3, 4, 5"

6.2 toString()：將數(shù)組轉(zhuǎn)換為字符串

toString() 方法將數(shù)組轉(zhuǎn)換為字符串，默認(rèn)用逗號(hào)分隔。

let arr = [1, 2, 3, 4, 5];
let str = arr.toString(); // 轉(zhuǎn)換為字符串
console.log(str); // "1,2,3,4,5"

6.3 slice()：返回?cái)?shù)組的一個(gè)淺拷貝

slice() 方法返回?cái)?shù)組的一個(gè)淺拷貝，不修改原數(shù)組。

let arr = [1, 2, 3, 4, 5];
let newArr = arr.slice(1, 4); // 從索引 1 到 4（不包括 4）
console.log(newArr); // [2, 3, 4]

6.4 concat()：合并兩個(gè)或多個(gè)數(shù)組

concat() 方法用于合并兩個(gè)或多個(gè)數(shù)組，返回一個(gè)新數(shù)組。

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let newArr = arr1.concat(arr2); // 合并數(shù)組
console.log(newArr); // [1, 2, 3, 4, 5, 6]

7. 其他實(shí)用方法

7.1 ??includes()：檢查數(shù)組是否包含某個(gè)值

includes() 方法用于檢查數(shù)組是否包含某個(gè)值，返回布爾值。

let arr = [1, 2, 3, 4, 5];
let hasThree = arr.includes(3); // 檢查是否包含 3
console.log(hasThree); // true

7.2 fill()：用一個(gè)固定值填充數(shù)組的指定部分

fill() 方法用一個(gè)固定值填充數(shù)組的指定部分。

let arr = [1, 2, 3, 4, 5];
arr.fill(0, 1, 4); // 從索引 1 到 4 填充 0
console.log(arr); // [1, 0, 0, 0, 5]

7.3 flat()：將多維數(shù)組扁平化為一維數(shù)組

flat() 方法將多維數(shù)組扁平化為一維數(shù)組。

let arr = [1, [2, [3, 4]]];
let newArr = arr.flat(2); // 深度為 2 的扁平化
console.log(newArr); // [1, 2, 3, 4]

7.4 flatMap()：扁平化數(shù)組并映射

flatMap() 方法先對(duì)數(shù)組中的每個(gè)元素執(zhí)行回調(diào)函數(shù)，然后將結(jié)果扁平化為一維數(shù)組。

let arr = [1, 2, 3];
let newArr = arr.flatMap(item => [item, item * 2]); // 每個(gè)元素映射為兩個(gè)值
console.log(newArr); // [1, 2, 2, 4, 3, 6]

到此這篇關(guān)于老生常談JavaScript 數(shù)組方法的文章就介紹到這了,更多相關(guān)JavaScript 數(shù)組方法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論