一文帶你掌握J(rèn)avaScript中數(shù)組處理方法(含靜態(tài)方法)

更新時間：2026年02月03日 08:58:41 作者：訥言丶

這篇文章主要為大家詳細介紹了JavaScript中數(shù)組處理方法,包含靜態(tài)方法,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

常用方法

JavaScript 數(shù)組方法，帶了 * 的為常用方法，目前共總結(jié)了26個方法，已基本涵蓋了目前JS的數(shù)組方法

1、concat()

連接兩個或更多的數(shù)組，并返回結(jié)果

var alpha = ["a", "b", "c"]; 
var numeric = [1, 2, 3];

var alphaNumeric = alpha.concat(numeric); 
console.log("alphaNumeric : " + alphaNumeric );    // a,b,c,1,2,3

2、every()

檢測數(shù)值元素的每個元素是否都符合條件，都符合則返回true，反之返回false

function isBigEnough(element, index, array) { 
        return (element >= 10); 
} 
        
var passed = [12, 5, 8, 130, 44].every(isBigEnough); 
console.log("Test Value : " + passed ); // false

3、some()

檢測數(shù)組元素中是否有元素符合指定條件，如果當(dāng)前元素符合，直接返回True，不會繼續(xù)遍歷判斷

和every的區(qū)別在于檢測到一個符合的元素就返回true

function isBigEnough(element, index, array) { 
	console.log(element)
   return (element >= 10); 
          
} 
          
var retval = [2, 5, 8, 1, 4].some(isBigEnough);
console.log("Returned value is : " + retval );  // false
          
var retval = [12, 5, 8, 1, 4].some(isBigEnough); 
console.log("Returned value is : " + retval );  // true

4、filter()

檢測數(shù)值元素，并返回符合條件所有元素的數(shù)組，沒有符合的則返回空數(shù)組

function isBigEnough(element, index, array) { 
   return (element >= 10); 
}           
var passed = [12, 5, 8, 130, 44].filter(isBigEnough); 
console.log("Test Value : " + passed ); // 12,130,44

5、forEach()

數(shù)組每個元素都執(zhí)行一次回調(diào)函數(shù)。

var num = [7, 8, 9];
num.forEach(function (value) {
    console.log(value);  // 7   8   9
});

6、indexOf()

搜索數(shù)組中的元素，并返回它所在的位置，如果同一數(shù)組中有多個相同的值則返回第一次出現(xiàn)值的下標(biāo)。如果搜索不到，返回值 -1，代表沒有此項。

var index = [12, 5, 8, 130, 44].indexOf(8); 
console.log("index is : " + index );  // 2

//利用該方法進行數(shù)組去重是比較高效的選擇
var arr = [1, 2, 3, 2, 1, 4, 2,'a','a','c','b','c'];
var newarr = arr.filter( (item,index) =>{
 //利用indexOf只會得到數(shù)組中出現(xiàn)第一個元素的下標(biāo)特性對當(dāng)前filter遍歷中的下標(biāo)進行全等判斷，為真則
 //明該元素是第一次出現(xiàn)
  return arr.indexOf(item) === index; 
})
console.log(newarr);

7、 lastIndexOf()

返回一個指定的字符串值最后出現(xiàn)的位置，在一個字符串中的指定位置從后向前搜索。

var index = [12, 5, 8, 130, 44].lastIndexOf(8); 
console.log("index is : " + index );  // 2

8、 join()

把數(shù)組的所有元素放入一個字符串，可以通過傳入一個參數(shù)成為數(shù)組元素的分割符

var arr = new Array("Google","Runoob","Taobao"); 
          
var str = arr.join(); 
console.log("str : " + str );  //str : Google,Runoob,Taobao
          
var str = arr.join(", "); 
console.log("str : " + str );  //str : Google, Runoob, Taobao
          
var str = arr.join(" + "); 
console.log("str : " + str );  //str : Google + Runoob + Taobao

9、map()

通過指定函數(shù)處理數(shù)組的每個元素，并返回處理后的數(shù)組。

var numbers = [1, 4, 9]; 
var roots = numbers.map(Math.sqrt); //math的sqrt方法用于開平方根
console.log("roots is : " + roots );  // 1,2,3

10、 pop()

刪除數(shù)組的最后一個元素并返回刪除的元素。

	
var numbers = [1, 4, 9]; 
          
var element = numbers.pop(); 
console.log("element is : " + element );  // 9
          
var element = numbers.pop(); 
console.log("element is : " + element );  // 4

11、push()

向數(shù)組的末尾添加一個或更多元素，并返回新的長度。

var numbers = new Array(1, 4, 9); 
var length = numbers.push(10); 
console.log("new numbers is : " + numbers );  // 1,4,9,10 
length = numbers.push(20); 
console.log("new numbers is : " + numbers );  // 1,4,9,10,20

12、reduce()

將數(shù)組元素計算為一個值（從左到右）。

var total = [0, 1, 2, 3].reduce(function(a, b){ return a + b; }); 
console.log("total is : " + total );  // 6

13、 reduceRight()

將數(shù)組元素計算為一個值（從右到左）。

var total = [0, 1, 2, 3].reduceRight(function(a, b){ return a + b; }); 
console.log("total is : " + total );  // 6

14、 reverse()

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

var arr = [0, 1, 2, 3].reverse(); 
console.log("Reversed array is : " + arr );  // 3,2,1,0

15、shift()

刪除并返回數(shù)組的第一個元素。

var arr = [10, 1, 2, 3].shift(); 
console.log("Shifted value is : " + arr );  // 10

16、 unshift()

向數(shù)組的開頭添加一個或更多元素，并返回新的長度。

var arr = new Array("orange", "mango", "banana", "sugar"); 
var length = arr.unshift("water"); 
console.log("Returned array is : " + arr );  // water,orange,mango,banana,sugar 
console.log("Length of the array is : " + length ); // 5

17、sort()

對數(shù)組的元素進行排序（數(shù)字從大到小，字母從a - z或A - Z （大寫字母優(yōu)先排序到小寫字母前邊）），也可以在sort中傳入一個函數(shù)方法確定排序順序

var arr = new Array("a", "c", "b", "Z"); 
var sorted = arr.sort(); 
console.log("Returned string is : " + sorted );  // Z,a,b,c,
var sort_fun = function(a,b){
return a - b
}
var num_arr = [1,3,9,1,4,2,5];
sort_arr = num_arr.sort(sort_fun)
console.log(sort_arr) //[1, 1, 2, 3, 4, 5, 9]

18、splice(index,removeValueLength,Value)

從數(shù)組中添加或刪除元素。index為添加或者刪除元素的索引開始位置，removeValueLength為要刪除數(shù)組的個數(shù)長度，Value為需要替換后的元素

var arr = ["orange", "mango", "banana", "sugar", "tea"];  
var removed = arr.splice(2, 0, "water");  
console.log("After adding 1: " + arr );    // orange,mango,water,banana,sugar,tea 
console.log("removed is: " + removed); 
          
removed = arr.splice(3, 1);  
console.log("After removing 1: " + arr );  // orange,mango,water,sugar,tea 
console.log("removed is: " + removed);  // banana

var arr = ["orange", "mango", "banana", "sugar", "tea"];  
var removed = arr.splice(2);  
console.log("After adding 1: " + arr ); // After adding 1: orange,mango
console.log("removed is: " + removed); //removed is: banana,sugar,tea

19、toString()

把數(shù)組轉(zhuǎn)換為字符串，并返回結(jié)果。

var arr = new Array("orange", "mango", "banana", "sugar");         
var str = arr.toString(); 
console.log("Returned string is : " + str );  //Returned string is : orange,mango,banana,sugar

20、slice()

選取數(shù)組的的一部分，并返回一個新數(shù)組。

var arr = ["orange", "mango", "banana", "sugar", "tea"]; 
console.log("arr.slice( 1, 2) : " + arr.slice( 1, 2) );  // mango
console.log("arr.slice( 1, 3) : " + arr.slice( 1, 3) );  // mango,banana

21、‘ ... ’展開運算符

將一個數(shù)組進行展開使用，相當(dāng)于直接遍歷出元素

var numberArr = [1,3,2]
var stringArr = ['a','b','c']
// stringArr這個數(shù)組使用push方法直接添加numberArr
//stringArr.push(numberArr) // [ 'a', 'b', 'c', [ 1, 3, 2 ] ]
// arr1這個數(shù)組使用 使用push方法時前加 三個小數(shù)點
stringArr.push(...numberArr) // [ 'a', 'b', 'c', 1, 3, 2 ]使用三個小數(shù)點后展開數(shù)組
console.log(stringArr)

22、includes()

判斷數(shù)組元素是否符合傳入的值，符合返回True,不符合返回false

var arr = [1,2,3,4,1,3];
var strArr = ['a','b','c','a','c']
var bool = arr.includes(5)
var bool1 = strArr.includes('c')

console.log(bool) //false
console.log(bool1) //true



//使用filter方法搭配includus方法用于數(shù)組去重很方便
var newArr = [];
newArr = strArr.filter(function(item){
  return newArr.includes(item) ? '' : newArr.push(item)
})
console.log(newArr) //輸出[ 'a', 'b', 'c' ]

23、fill()

fill() 方法用于將一個固定值替換數(shù)組的元素

語法： array.fill(value, start, end) 參數(shù)

value 必需。填充的值。
start 可選。開始填充位置。
end 可選。停止填充位置 (默認(rèn)為 array.length)

填充是從 start 位置開始，到 end-1 位置結(jié)束，不包含end位置. 直接修改原數(shù)組

let arr1 = [1, 2, 3, 4, 56, 7, 7, 8, 9];
arr1.fill(4, 2, 5);
console.log(arr1)  //   [1, 2, 4, 4, 4, 7, 7, 8, 9]
let arr2 = [1, 2, 3, 4, 56, 7, 7, 8, 9];
arr2.fill(4);
console.log(arr2)  //  [4, 4, 4, 4, 4, 4, 4, 4, 4]

24、 flat( )

flat( )用于數(shù)組扁平化處理，也就是降維處理

語法：array.flat( n )

參數(shù)：n為整數(shù)型，不是必須項，不填默認(rèn)值為1，使用時直接將二維數(shù)組降維成一維數(shù)組，如果填入整數(shù)，按照給出的整數(shù)進行降維，如果給出的整數(shù)大于或者等于數(shù)組維度減一，則展開全部內(nèi)置數(shù)組，如果給出的是整數(shù)小于等于0，不會進行降維展開內(nèi)置數(shù)組注：在flat（）中添加參數(shù)Infinity可以不用去考慮數(shù)組的維度如：arr.flat(Infinity)時，即使你不知道arr的維度是多少，也是將arr這個數(shù)組全部展開成為一個一維數(shù)組

let arr = ['一維數(shù)組A',['二維數(shù)組A','二維數(shù)組B'],{d:'D',e:'E'},['二維數(shù)組C',['三維數(shù)組A','三維數(shù)組B',{f:'F',g:'G'}]]]
let oneDimensionArr = arr.flat(); //默認(rèn)值，展開二維數(shù)組中的值
console.log(oneDimensionArr);
/*
[
  '一維數(shù)組A',
  '二維數(shù)組A',
  '二維數(shù)組B',
  { d: 'D', e: 'E' },
  '二維數(shù)組C',
  [ '三維數(shù)組A', '三維數(shù)組B', { f: 'F', g: 'G' } ]
]
*/
let moreDimensionArr = arr.flat(2);//如果給出的數(shù)組維度整數(shù)超出了該數(shù)組的維度，則按照該數(shù)組維度的最長維度展出
console.log(moreDimensionArr);
/*
[
  '一維數(shù)組A',
  '二維數(shù)組A',
  '二維數(shù)組B',
  { d: 'D', e: 'E' },
  '二維數(shù)組C',
  '三維數(shù)組A',
  '三維數(shù)組B',
  { f: 'F', g: 'G' }
]
*/

25、flatMap( )

展開二維數(shù)組，并可以對數(shù)組中的值進行相應(yīng)處理，當(dāng)數(shù)組為多維數(shù)組時，只能展開第一層

//二維數(shù)組
const arr = [1, 2, 3, 4,[5],6,[7]];
const newArr=arr.flatMap((x) => {return x * 2})
console.log(newArr) //[   2,  4,  6, 8, 10, 12, 14]

//多維數(shù)組
const arr1 = ['a', 'b', ['c'],[['d',['e']],'f']];
const newArr1=arr1.flatMap(x => x)
console.log(newArr1); //[ 'a', 'b', 'c', [ 'd', [ 'e' ] ], 'f' ]

26、at( )

傳入一個整數(shù)，返回在該整數(shù)索引下的數(shù)組元素，該整數(shù)可以是負(fù)數(shù)，是負(fù)數(shù)時表示‘反序’索引。參數(shù)超出，則返回undefined

const arr = [1, 2, 3, 4];
const value = arr.at(-1)
const value1 = arr.at(1)
console.log(value) //4
console.log(value1) //1

靜態(tài)方法

Array.isArray ()

let arr = [1, 2, 3];
let isArray = Array.isArray(arr);
console.log(isArray); // true

作用：用于確定傳遞的值是否為一個 Array 對象。它會返回一個布爾值，如果傳遞的對象是數(shù)組，則為 true，否則為 false。

Array.from ()

let newArray = Array.from({length: 5}, (_, i) => i * 2);
console.log(newArray); // [0, 2, 4, 6, 8]

作用：從類數(shù)組對象或可迭代對象創(chuàng)建一個新的數(shù)組實例。它接收兩個參數(shù)：第一個參數(shù)是一個類數(shù)組對象或可迭代對象，例如 {length: 5} 這樣的對象或 Set、Map、String 等可迭代對象。第二個參數(shù)是一個映射函數(shù)，可對新數(shù)組的元素進行轉(zhuǎn)換，可選。

Array.of ()

let newArray = Array.of(1, 2, 3);
console.log(newArray); // [1, 2, 3]

作用：創(chuàng)建一個新的數(shù)組，該數(shù)組包含傳遞給 Array.of() 的所有參數(shù)作為元素。與 Array() 構(gòu)造函數(shù)不同，Array.of() 不會將單個數(shù)字參數(shù)視為數(shù)組長度，而是將其作為元素。例如：

let arr1 = Array(3); // [undefined, undefined, undefined]
let arr2 = Array.of(3); // [3]

以上就是一文帶你掌握J(rèn)avaScript中數(shù)組處理方法(含靜態(tài)方法)的詳細內(nèi)容，更多關(guān)于JavaScript數(shù)組處理的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

一文帶你掌握J(rèn)avaScript中數(shù)組處理方法(含靜態(tài)方法)

目錄

常用方法

1、concat()

2、every()

3、some()

4、filter()

5、forEach()

6、indexOf()

7、 lastIndexOf()

8、 join()

9、map()

10、 pop()

11、push()

12、reduce()

13、 reduceRight()

14、 reverse()

15、shift()

16、 unshift()

17、sort()

18、splice(index,removeValueLength,Value)

19、toString()

20、slice()

21、‘ ... ’展開運算符

22、includes()

23、fill()

24、 flat( )

25、flatMap( )

26、at( )

靜態(tài)方法

Array.isArray ()

Array.from ()

Array.of ()

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

一文帶你掌握J(rèn)avaScript中數(shù)組處理方法(含靜態(tài)方法)

目錄

常用方法

1、concat()

2、every()

3、some()

4、filter()

5、forEach()

6、indexOf()

7、 lastIndexOf()

8、 join()

9、map()

10、 pop()

11、push()

12、reduce()

13、 reduceRight()

14、 reverse()

15、shift()

16、 unshift()

17、sort()

18、splice(index,removeValueLength,Value)

19、toString()

20、slice()

21、‘ ... ’展開運算符

22、includes()

23、fill()

24、 flat( )

25、flatMap( )

26、at( )

靜態(tài)方法

Array.isArray ()

Array.from ()

Array.of ()

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

2、every()

3、some()

4、filter()

7、 lastIndexOf()

8、 join()

9、map()

10、 pop()

11、push()

12、reduce()

14、 reverse()

16、 unshift()

17、sort()

18、splice(index,removeValueLength,Value)

19、toString()

20、slice()

21、‘ ... ’展開運算符

22、includes()

24、 flat( )

25、flatMap( )

26、at( )