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

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

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

常用方法

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

1、concat()

連接兩個(gè)或更多的數(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()

檢測(cè)數(shù)值元素的每個(gè)元素是否都符合條件，都符合則返回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()

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

和every的區(qū)別在于檢測(cè)到一個(gè)符合的元素就返回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()

檢測(cè)數(shù)值元素，并返回符合條件所有元素的數(shù)組，沒(méi)有符合的則返回空數(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ù)組每個(gè)元素都執(zhí)行一次回調(diào)函數(shù)。

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

6、indexOf()

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

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

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

7、 lastIndexOf()

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

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

8、 join()

把數(shù)組的所有元素放入一個(gè)字符串，可以通過(guò)傳入一個(gè)參數(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()

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

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

10、 pop()

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

	
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ù)組的末尾添加一個(gè)或更多元素，并返回新的長(zhǎng)度。

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ù)組元素計(jì)算為一個(gè)值（從左到右）。

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

13、 reduceRight()

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

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()

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

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

16、 unshift()

向數(shù)組的開(kāi)頭添加一個(gè)或更多元素，并返回新的長(zhǎng)度。

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()

對(duì)數(shù)組的元素進(jìn)行排序（數(shù)字從大到小，字母從a - z或A - Z （大寫字母優(yōu)先排序到小寫字母前邊）），也可以在sort中傳入一個(gè)函數(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為添加或者刪除元素的索引開(kāi)始位置，removeValueLength為要?jiǎng)h除數(shù)組的個(gè)數(shù)長(zhǎng)度，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ù)組的的一部分，并返回一個(gè)新數(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、‘ ... ’展開(kāi)運(yùn)算符

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

var numberArr = [1,3,2]
var stringArr = ['a','b','c']
// stringArr這個(gè)數(shù)組使用push方法直接添加numberArr
//stringArr.push(numberArr) // [ 'a', 'b', 'c', [ 1, 3, 2 ] ]
// arr1這個(gè)數(shù)組使用 使用push方法時(shí)前加 三個(gè)小數(shù)點(diǎn)
stringArr.push(...numberArr) // [ 'a', 'b', 'c', 1, 3, 2 ]使用三個(gè)小數(shù)點(diǎn)后展開(kāi)數(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() 方法用于將一個(gè)固定值替換數(shù)組的元素

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

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

填充是從 start 位置開(kāi)始，到 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ù)組扁平化處理，也就是降維處理

語(yǔ)法：array.flat( n )

參數(shù)：n為整數(shù)型，不是必須項(xiàng)，不填默認(rèn)值為1，使用時(shí)直接將二維數(shù)組降維成一維數(shù)組，如果填入整數(shù)，按照給出的整數(shù)進(jìn)行降維，如果給出的整數(shù)大于或者等于數(shù)組維度減一，則展開(kāi)全部?jī)?nèi)置數(shù)組，如果給出的是整數(shù)小于等于0，不會(huì)進(jìn)行降維展開(kāi)內(nèi)置數(shù)組注：在flat（）中添加參數(shù)Infinity可以不用去考慮數(shù)組的維度如：arr.flat(Infinity)時(shí)，即使你不知道arr的維度是多少，也是將arr這個(gè)數(shù)組全部展開(kāi)成為一個(gè)一維數(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)值，展開(kāi)二維數(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ù)組維度的最長(zhǎng)維度展出
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( )

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

//二維數(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( )

傳入一個(gè)整數(shù)，返回在該整數(shù)索引下的數(shù)組元素，該整數(shù)可以是負(fù)數(shù)，是負(fù)數(shù)時(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

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

Array.from ()

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

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

Array.of ()

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

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

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

以上就是一文帶你掌握J(rèn)avaScript中數(shù)組處理方法(含靜態(tài)方法)的詳細(xì)內(nèi)容，更多關(guān)于JavaScript數(shù)組處理的資料請(qǐng)關(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、‘ ... ’展開(kāi)運(yùn)算符

22、includes()

23、fill()

24、 flat( )

25、flatMap( )

26、at( )

靜態(tài)方法

Array.isArray ()

Array.from ()

Array.of ()

相關(guān)文章

最新評(píng)論

大家感興趣的內(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、‘ ... ’展開(kāi)運(yùn)算符

22、includes()

23、fill()

24、 flat( )

25、flatMap( )

26、at( )

靜態(tài)方法

Array.isArray ()

Array.from ()

Array.of ()

相關(guān)文章

最新評(píng)論

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

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

常用在線小工具

1、concat()

2、every()

3、some()

4、filter()

5、forEach()

7、 lastIndexOf()

8、 join()

9、map()

10、 pop()

11、push()

13、 reduceRight()

14、 reverse()

16、 unshift()

17、sort()

19、toString()

20、slice()

21、‘ ... ’展開(kāi)運(yùn)算符

23、fill()

24、 flat( )

25、flatMap( )

26、at( )