js數(shù)組方法全面總結(jié)

創(chuàng)建數(shù)組

  • 使用Array構(gòu)造函數(shù)
var a = new Array()
var b = new Array(5);  //創(chuàng)建長(zhǎng)度為5的數(shù)組
var c = new Array("a","b","c");
  • 使用數(shù)組字面量表示法
var a = [];
var b = [5];      //創(chuàng)建一個(gè)含數(shù)字5的數(shù)組
var c = ["a","b","c"];

數(shù)組屬性

length表示數(shù)組的長(zhǎng)度

var colors = ["red","green","blue","black"];
colors.length                   //4

length屬性并不是只讀的,通過(guò)設(shè)置該值可以從數(shù)組末尾刪除項(xiàng)或向數(shù)組中添加項(xiàng)

var colors = ["red","green","blue","black"];
colors.length = 2;        //colors:["red","green"]
colors.length = 4;        //colors:["red","green",undefined,undefined]

數(shù)組方法

  • 棧、隊(duì)列方法

  1. push(item...) 向數(shù)組中添加元素,返回修改后數(shù)組的長(zhǎng)度
var numbers= [1,2,3,4];
numbers.push(5)           //5       numbers:[1,2,3,4,5]
numbers.push(6,7)         //7       numbers:[1,2,3,4,5,6,7]
  1. pop() 從數(shù)組末尾移除一項(xiàng),減少數(shù)組的長(zhǎng)度,返回移除的項(xiàng)
var numbers= [1,2,3,4];
numbers.pop()           //4         numbers:[1,2,3]
  1. unshift(item...) 向數(shù)組前端添加任意項(xiàng),返回** 修改后數(shù)組的長(zhǎng)度 **
var numbers= [1,2,3,4];
numbers.unshift(5)           //5       numbers:[5,1,2,3,4]
numbers.unshift(6,7)         //7       numbers:[6,7,5,1,2,3,4]
  1. shift() 移除數(shù)組第一項(xiàng),減少數(shù)組的長(zhǎng)度,返回移除的項(xiàng)
var numbers= [1,2,3,4];
numbers.shift()           //1         numbers:[2,3,4]
  • 排序方法

  1. reverse()反轉(zhuǎn)數(shù)組項(xiàng)的順序,改變?cè)瓟?shù)組
var numbers= [1,2,3,4];
numbers.reverse()          //[4,3,2,1]         numbers:[4,3,2,1]
  1. sort()默認(rèn)情況下,即無(wú)參數(shù)情況,sort()方法按升序排列數(shù)組。該方法會(huì)調(diào)用每個(gè)數(shù)組項(xiàng)的tostring()方法,然后比較字符串,因此即使數(shù)組中每一項(xiàng)都是數(shù)值,sort()方法比較的也是字符串
var numbers= [1,15,5,10];
numbers.sort()          //[1, 10, 15, 5]         numbers:[1, 10, 15, 5]

sort()方法可以接受一個(gè)比較函數(shù)作為參數(shù)。其中比較函數(shù)接受兩個(gè)參數(shù),如果兩個(gè)參數(shù)排序不需要交換位置則返回負(fù)數(shù),如果需要交換位置則返回一個(gè)正數(shù),如果兩個(gè)參數(shù)相等則返回0

var numbers= [1,15,5,10];
function compare(val1,val2){
      if(val1 < val2){
         return -1;
      }
      else if(val1 > val2){
         return 1;
      }
      else{
         return 0;   
      }
}
numbers.sort(compare)          //[1, 5, 10,15]         numbers:[1, 5, 10,15]  
  • 操作、位置方法

  1. concat()其參數(shù)可以是一個(gè)或多個(gè)項(xiàng),也可以是一個(gè)或多個(gè)數(shù)組。創(chuàng)建一個(gè)當(dāng)前數(shù)組的副本,然后在數(shù)組末尾添加參數(shù)項(xiàng),并返回新的數(shù)組,原數(shù)組不變
 var numbers= [1,2,3,4];
 numbers.concat(5,[6,7])          //[1,2,3,4,5,6,7]         numbers:[1,2,3,4]
  1. slice()獲取截取數(shù)組,如果是一個(gè)參數(shù),則獲取從該參數(shù)位置開(kāi)始到數(shù)組結(jié)束所有值,如果有兩個(gè)參數(shù),則獲取從起始值位置到結(jié)束值位置的值(不包括結(jié)束值位置項(xiàng)),返回新的數(shù)組。原數(shù)組不變
    如果結(jié)束值小于起始位置則返回空數(shù)組。
 var numbers= [1,2,3,4];
 numbers.slice(2)          //[3,4]         numbers:[1,2,3,4]
numbers.slice(1,3)       //[2,3]         numbers:[1,2,3,4]

** 注意:** * 如果參數(shù)中存在負(fù)數(shù),則將參數(shù)值加上數(shù)組長(zhǎng)度來(lái)計(jì)算。如:*

var numbers= [1,2,3,4];
numbers.slice(-1)          //[4]         numbers:[1,2,3,4]
numbers.slice(-4,-2)       //[1,2]         numbers:[1,2,3,4]
  1. splice() 返回刪除項(xiàng)組成的數(shù)組,原數(shù)組被改變

    • 刪除 :從指定位置刪除指定項(xiàng)數(shù)
      splice(0,3) 表示刪除數(shù)組的[0][1][2]位置的三項(xiàng)
    • 插入 : 從指定位置刪除0項(xiàng),再添加項(xiàng)
      splice(1,0,3,4) 表示從數(shù)組的第[1]項(xiàng)開(kāi)始插入3,4兩個(gè)值
    • 替換 :從指定位置刪除指定項(xiàng)數(shù),再添加項(xiàng)
      splice(1,2,3,4) 表示從數(shù)組[1][2]位置上的值被替換成3,4兩個(gè)值

var numbers= [1,2,3,4];
numbers.splice(1,2) //[2,3] numbers:[1,4]
numbers.splice(1,0,2,3,4,5) //[] numbers:[1,2,3,4,5,4]
numbers.splice(2,2,4,5) //[3,4] numbers:[1,2,4,5,5,4]

4. `indexOf()`從前向后查找,接受兩個(gè)參數(shù):查找的項(xiàng)和查找的起點(diǎn)位置(可選),默認(rèn)從數(shù)組的起始位置向后查找,返回**索引值**
```javascript
var numbers= [1,2,3,4,4,5,3,1,2];
numbers.indexOf(2)              //1        numbers:[1,2,3,4,4,5,3,1,2]
numbers.indexOf(2,4)              //8       numbers:[1,2,3,4,4,5,3,1,2]
  1. lastIndexOf()從后向前查找,接受兩個(gè)參數(shù):查找的項(xiàng)和查找的起點(diǎn)位置(可選),默認(rèn)從數(shù)組的結(jié)束位置向前查找,返回索引值
var numbers= [1,2,3,4,4,5,3,1,2];
numbers.lastIndexOf(2)              //8        numbers:[1,2,3,4,4,5,3,1,2]
numbers.lastIndexOf(4,3)            //3        numbers:[1,2,3,4,4,5,3,1,2], 從[3]位向前查找
  • 遍歷方法

  1. every(fn)對(duì)數(shù)組中的每一項(xiàng)運(yùn)行給定的函數(shù),如果該函數(shù)對(duì)每一項(xiàng)都返回true,則返回true
  var numbers= [1,2,3,4,5];
 numbers.every(function(item,index,array){
       return (item>0);
 })                                                          //true       
numbers.every(function(item,index,array){
       return (item>2);
 })                                                         //false         
  1. filter(fn)對(duì)數(shù)組中的每一項(xiàng)運(yùn)行給定的函數(shù),返回該函數(shù)會(huì)返回true的項(xiàng)組成的數(shù)組
  var numbers= [1,2,3,4,5];
 numbers.filter(function(item,index,array){
       return (item>2);
 })                                                          //[3,4,5]       
  1. forEach(fn)對(duì)數(shù)組中的每一項(xiàng)運(yùn)行給定的函數(shù),沒(méi)有返回值
  2. map(fn)對(duì)數(shù)組中的每一項(xiàng)運(yùn)行給定的函數(shù),返回每次函數(shù)調(diào)用的結(jié)果組成的數(shù)組
  var numbers= [1,2,3,4,5];
 numbers.map(function(item,index,array){
       return (item+10);
 })                                                          //[11,12,13,14,15]       
  1. some(fn)對(duì)數(shù)組中的每一項(xiàng)運(yùn)行給定的函數(shù),如果該函數(shù)對(duì)任一項(xiàng)返回true,則返回true
   var numbers= [1,2,3,4,5];
  numbers.some(function(item,index,array){
        return (item>3);
  })                                                          //true  
  • 歸并方法

以下兩個(gè)方法都接受兩個(gè)參數(shù),一個(gè)是在數(shù)組每一項(xiàng)上調(diào)用的函數(shù),另一個(gè)可選參數(shù)是作為歸并基礎(chǔ)的初始值。其中作為參數(shù)的函數(shù)接受4個(gè)參數(shù):前一個(gè)值、當(dāng)前值、項(xiàng)和索引和數(shù)組對(duì)象。這個(gè)函數(shù)返回的任何值都會(huì)作為第一個(gè)參數(shù)自動(dòng)傳給下一項(xiàng)

  1. reduce(fn) 從頭開(kāi)始遍歷
  2. reduceRight(ffn)從尾開(kāi)始遍歷
   var numbers= [1,2,3,4,5];
  numbers.reduce(function(pre,cur,index,array){
        return pre+cur;
  })                                               //15   對(duì)數(shù)組求和
numbers.reduce(function(pre,cur,index,array){
        return pre+cur;
  },10)                                           //25   以10為基數(shù)對(duì)求數(shù)組求和
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 第一章: JS簡(jiǎn)介 從當(dāng)初簡(jiǎn)單的語(yǔ)言,變成了現(xiàn)在能夠處理復(fù)雜計(jì)算和交互,擁有閉包、匿名函數(shù), 甚至元編程等...
    LaBaby_閱讀 1,689評(píng)論 0 6
  • 本文總結(jié)了數(shù)組所有的方法。 1. 檢測(cè)對(duì)象是不是數(shù)組 instanceof操作符 Array.isArray()方...
    胡不歸vac閱讀 691評(píng)論 0 1
  • 由于最近都在freecodecamp上刷代碼,運(yùn)用了很多JavaScript數(shù)組的方法,因此做了一份關(guān)于JavaS...
    2bc5f46e925b閱讀 1,997評(píng)論 0 16
  • Javascript有很多數(shù)組的方法,有的人有W3C的API,還可以去MDN上去找,但是我覺(jué)得API上說(shuō)的不全,M...
    頑皮的雪狐七七閱讀 4,180評(píng)論 0 6
  • 第5章 引用類型(返回首頁(yè)) 本章內(nèi)容 使用對(duì)象 創(chuàng)建并操作數(shù)組 理解基本的JavaScript類型 使用基本類型...
    大學(xué)一百閱讀 3,265評(píng)論 0 4