腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

JavaScript中數(shù)組常用的十種方法總結(jié)

更新時間：2025年09月06日 09:15:49 投稿：daisy

JavaScript提供了許多強大的數(shù)組方法,讓你可以輕松地操作和修改數(shù)組,下面這篇文章主要介紹了JavaScript中數(shù)組常用的十種方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

前言

本文介紹js數(shù)組的常用的10中方法，以是否改變原數(shù)組，配合代碼以及注釋，將一些常用的數(shù)組方法整理出來。

首先我們會改變原數(shù)組的方法有：

push / pop / unshift / shift / splice / sort / reverse

不改變原數(shù)組，也就是生成新數(shù)組的方法有：

/ concat / slice / map / filter

返回其他值的有：

/ reduce / find / findIndex / every / includes / indexOf/

1.改變原數(shù)組

1.1 push()方法

push方法作用在尾部，進行新增值，并且返回值是length長度，不是新數(shù)組

const arr = ['a'];
const arr1 = arr.push('ss', 'ee')
console.log(arr1);               //打印出 3，因為 push 方法返回的是數(shù)組的長度
console.log(arr);                 //打印出 ['a', 'ss', 'ee']

1.2 pop()方法

pop()方法刪除數(shù)組的最后一個元素，并返回被刪除的那個元素

const last = arr.pop();
console.log(last);                  // 'ee'
console.log(arr);                   // ['a', 'ss']

1.3 unshift() 和 shift() 方法

• unshift：頭部插入元素 → 返回新 length
• shift：刪除第 1 個元素 → 返回被刪元素，數(shù)組為空的話返回underfined

arr.unshift('head');   // 返回 3，arr頭部添加了一個元素
console.log(arr);                   // ['head', 'a', 'ss']
arr.shift();// 返回 'head'，arr刪除第一個元素
console.log(arr);                   // ['a', 'ss']

1.4 splice() 方法

語法：arr.splice(start,deleteCount?,...items?)

方法:三個參數(shù)的意思為，從start開始，刪除deleteCount個元素，再把items放進去，問號？代表可選，返回由被刪除的元素組成的新數(shù)組，沒有刪除的話則是空數(shù)組

const nums = [0, 1, 2, 3, 4];
const deleted = nums.splice(2, 2, 'a', 'b'); // 從索引 2 開始，刪除 2 個元素，并替換成 'a' 和 'b'
console.log(deleted);                // ['2', '3']
console.log(nums);                  // ['0', '1', 'a', 'b', '4']

1.5 sort() 方法和 reverse() 方法

sort()正向排序。返回的是排序后的原數(shù)組的本身

reverse()逆向排序。返回的是反轉(zhuǎn)后的原數(shù)組本身。

const nums = [3, 1, 4, 1, 5];
nums.sort((a, b) => a - b); // 升序
console.log(nums);
nums.reverse((a, b) => b - a);             // 反轉(zhuǎn)
console.log(nums);          // [5, 4, 3, 1, 1]

sort里面可寫可不寫

2.生成新數(shù)組

2.1contact()方法

進行數(shù)組的合并，并返回新的數(shù)組

const a = [1, 2];
const b = a.concat([3, 4], 5); // 支持打散參數(shù)
console.log(a); // [1, 2]  原數(shù)組不變
console.log(b); // [1, 2, 3, 4, 5]

2.2 slice() 方法

作用：進行切片的拷貝，截取子數(shù)組，返回的是切片后的新數(shù)組

const arr = [0, 1, 2, 3, 4];
const sub = arr.slice(1, 4); // 左閉右開
console.log(sub); // [1, 2, 3]
const copy = arr.slice();    // 不傳參就是全拷貝
console.log(copy); // [0, 1, 2, 3, 4]

2.3 map() 方法

作用：對數(shù)組的一一映射，生成對應(yīng)的新數(shù)組 → 返回映射后的新數(shù)組

const nums = [1, 2, 3];
const squares = nums.map(n => n * n);
console.log(nums);    // [1, 2, 3]
console.log(squares); // [1, 4, 9]

2.4 filter() 方法

作用：條件過濾 → 返回過濾后的新數(shù)組

const users = [
  { id: 1, vip: true },
  { id: 2, vip: false },
];
const vipUsers = users.filter(u => u.vip); // 遍歷users數(shù)組，過濾條件是篩選出vip屬性為true的用戶對象
console.log(vipUsers);  // 輸出過濾后的vip用戶數(shù)組，返回[{id: 1, vip: true}]

3.返回其他值的方法

3.1 reduce() 方法

作用：累積聚合 → 返回累積結(jié)果（任意類型）

語法為： const sum = nums.reduce((acc, cur) => acc + cur, 0);

使用 reduce 方法計算數(shù)組所有元素的總和
acc 是累加器（accumulator），初始值為0
cur 是當(dāng)前元素（current element）
每次迭代將當(dāng)前元素加到累加器上

const nums = [1, 2, 3, 4];
const sum = nums.reduce((acc, cur) => acc + cur, 0); // 遍歷nums數(shù)組，reduce方法接收一個函數(shù)作為參數(shù)，該函數(shù)接收兩個參數(shù)，acc是累計值，cur是當(dāng)前值,0是初始值
const max = nums.reduce((max, cur) => cur > max ? cur : max); // 遍歷nums數(shù)組，reduce方法接收一個函數(shù)作為參數(shù)，該函數(shù)接收兩個參數(shù)，max是累計值，cur是當(dāng)前值,0是初始值

3.2 find() 方法和 findIndex() 方法

find：首個匹配元素 → 返回該元素或 undefined
findIndex：首個匹配索引 → 返回索引或 -1

const users = [{ id: 3 }, { id: 5 }];
const user5 = users.find(u => u.id === 5);      // 返回第一個滿足條件的用戶對象,
console.log(user5); // { id: 5 }
const idx = users.findIndex(u => u.id === 5);   // 返回第一個滿足條件的用戶對象的索引
console.log(idx); // 1

3.3 every() 方法和 some() 方法和 includes() 方法

• every：全真為真 → 返回布爾值
• some：一真即真 → 返回布爾值
• includes：是否包含某值 → 返回布爾值

[2, 4, 6].every(n => n % 2 === 0);  // true
[2, 5, 6].some(n => n % 2 !== 0);   // true
[1, 2, NaN].includes(NaN);          // true

4.總結(jié)

其中需要遍歷的方法有：sort（）,reverse()，map()，filter()，reduce（）、find（）、findIndex（）、every（）、some（），includes()，js中數(shù)組的方法有很多，我目前只整理了這幾個常用的方法，不斷的使用這些方法，能幫助我了解更多js知識點，也能幫助我更好的應(yīng)用到實戰(zhàn)當(dāng)中。

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

您可能感興趣的文章: