1. 程式人生 > >js數組常用方法總結

js數組常用方法總結

mod reducer length 方法 指定 box 但是 map pre

最近工作中經常用到數組操作,每次都傻傻不知道怎麽用,今天有時間整理了一下,希望對大家有幫助!這些基礎的知識,要熟記於心。 1、 join() 功能:將數組中所有元素都轉化為字符串並連接在一起。 輸入: 分隔符,默認為逗號 輸出:分隔符分割的字符串
1 var a = [1,2,3];
2 a.join(); // =>"1,2,3"
3 a.join(";");// =>"1;2;3"

2、 reverse()

功能:將數組中的元素顛倒順序。

輸入:無

輸出:逆序的數組

1 var a = [1,2,3];
2 a.reverse().join()// =>"3,2,1"

3、sort()
功能:將數組中的元素
輸入:比較函數或null。null時表示按照字母表順序排序;傳入帶兩個參數的比較函數時;第一個參數在前,則返回小於0的數值;第一個參數在後,則返回大於0的數組
輸出:排序後數組
註意:改變了原數組
舉例:

1 var a = [22,33,11111,4444];
2 a.sort();// =>11111,22,33,4444
3 a.sort(function(a,b){
4     return a-b;
5 });// => 22,33,4444,11111
6 a.sort(function(a,b){return b-a})// =>11111,4444,33,22

4、concat()
功能:數組拼接的功能
輸入:待拼接的元素;如果參數中有數組,則連接的是數組元素,而非數組本身;但是不支持遞歸,不修改調用的數組。
輸出:拼接後的新數組
註意:新建的數組,原數組不改變。

1 var a = [1,2,3];
2 a.concat(4,5) // =>[1,2,3,4,5]
3 a.concat([4,5]) // =>[1,2,3,4,5]
4 a.concat(4,[5,[6,7]]) //[1,2,3,4,5,[6,7]]

5、slice()
功能:獲取原數組的片段或子數組
輸入:片段的開始和結束
輸出:返回的數組包含第一個參數指定的位置和所有到但不含第二個參數指定位置之間的所有元素。如果為負數,表示相對於數組中最後一個元素的位置。
註意:新建的數組,原數組不改變。

1 var a = [1,2,3,4,5];
2 a.slice(0,3);// =>[1,2,3]
3 a.slice(3);// =>[4,5]
4 a.slice(1,-1)// =>[2,3,4]

6、splice()
功能:從數組中刪除元素、插入元素到數組中或者同事完成這兩種操作。
輸入:第一個參數為指定插入或刪除的起始位置,第二個參數為要刪除的個數。之後的參數表示需要插入到數組中的元素
輸出:返回一個由刪除元素組成的數組。
註意:新建了一個數組,並修改了原數組

1 var a = [1,2,3,4,5,6,7,8];
2 a.splice(4) // =>[5,6,7,8];a [1,2,3,4]
3 a.splice(2,0,‘a‘,‘b‘) // =>[];a [1,2,a,b,3,4]

7、push()和pop()
功能:push從數組尾部添加一個或多個元素,並返回數組新的長度;pop返回最後一個元素
輸入:push輸入為插入的元素;pop輸入為空
輸出:push為新長度;pop為返回的數組元素

1 var stack = [];
2 stack.push(1,2);// =>stack:[1,2],返回2
3 stack.pop;// => stack: [1],返回2

8、unshift()和shift
功能:類似push和pop,不同是從頭部插入和刪除,而非尾部

9、toString()和toLocaleString()
功能:將數組的每個元素轉化為字符串,並且輸入用逗號分隔的字符串列表。功能類似join();
輸入:無
輸出:字符串

1 [1,2,3].toString() // =>‘1,2,3‘

10、forEach()
功能:從頭至尾遍歷數組,為每個元素調用指定函數
輸入:輸入為一個待遍歷函數,函數的參數依次為:數組元素、元素的索引、數組本身
輸出:只是執行了遍歷函數,無特定返回

1 var data = [1,2,3,4,5];
2 data.forEach(function(v,i,a){a[i] = v + 1;});
3 data // =>[2,3,4,5,6]

11、map()
功能:調用的數組的每一個元素傳遞給指定的函數,並返回一個新數組
輸入:和forEach一樣
輸出:執行完函數的新數組
註意:返回新數組,不修改原數組

1 a = [1,2,3];
2 b = a.map(function(x){return x*x;}); // =>[1,4,9]

12、filter()
功能:將數組元素執行特定函數,而返回一個子集。
輸入:執行邏輯判斷的函數,該函數返回true或false,參數類似forEach和map()
輸出:如果執行輸入函數返回值為true,則傳遞給判定函數的元素是這個子集的成員

1 a = [5,4,3,2,1];
2 smallvalues = a.filter(function(x){return x<3});// =>[2,1]

13、every()和some()
功能:對數組元素進行指定函數的邏輯判斷。
輸入:特定函數
輸出:true 或者false

1 var a = [1,2,3,4,5];
2 a.every(function(x){return x<10;}) // =>true

14、reduce()和reduceRight()
功能:使用指定的函數將數組元素進行組合,生成單個值。
輸入:兩個參數,第一個是執行化簡操作的函數。第二個(可選)的參數是一個傳遞給函數的初始值。
註意:執行化簡的函數的第一個參數為目前為止化簡操作累積的結果。
15、indexOf()和lastIndexOf()
功能:搜索整個數組中具有給定值得元素,返回找到的第一個元素的索引或者如果沒有找到就返回-1.lastIndexOf為反向搜索。
輸入:元素的值。
輸入:索引值

16、Array.from()
功能:將兩類對象轉為真正的數組:類似數組的對象和可遍歷的對象
輸入:待轉換的對象,第二個參數可選,作用類似於數組的map方法,用來對每個元素進行處理,將處理後的值放入返回的數組。
輸入:數組

1 let arrayLike = {
2        ‘0‘:‘a‘,
3        ‘1‘:‘b‘,
4        ‘2‘:‘c‘,
5        length:3
6 };
7 let arr2 = Array.from(arrayLike);// =>[‘a‘,‘b‘,‘c‘]

17、Array.of()
功能:將一組值,轉換為數組。
輸入:數組元素
輸出:數組

1 Array.of(2,11,3)// =>[2,11,3]
2 Array.of(3)// =>[3]

18、copyWithin()
功能:在當前數組內部,將指定位置的成員復制到其他位置,返回當前數組。
輸入:第一個參數(從該位置開始替換數據);第二個參數可選(從該位置開始讀取數據,默認為0,負值表示倒數);第三個參數(到該位置前停止讀取,默認為數組長度)
輸出:返回當前替換後的數組。
註意:改變了當前數組

1 [1, 2, 3, 4, 5].copyWithin(0, 3) //=> [4, 5, 3, 4, 5]

19、find()和findIndex()
功能:找到第一個符合條件的數組成員。
輸入:回調函數,所有數組成員依次執行該函數,直到找到第一個返回值為true的成員。回調函數可以接受三個參數,依次為值,位置,原數組。
輸出:find()返回找到的成員;findIndex()返回成員的位置。

1 [1,5,10,15].find(function(value,index,arr){
2     return value > 9;
3 })// =>10

20、fill()
功能:使用給定的值,填充一個數組。
輸入:第一個參數為待填充的值,第二和第三參數可選,分別表示填充的起始和結束位置(不包括)。
輸出:填充後的數組

1 [‘a‘, ‘b‘, ‘c‘].fill(7, 1, 2)
2 // =>[‘a‘, 7, ‘c‘]

21、entries()、keys()、values()
功能:用於遍歷數組,可以用for…of循環進行遍歷。區別是keys()是對鍵名的遍歷、values是對鍵值的遍歷、entries()是對鍵值對的遍歷。
輸入:無
輸出:遍歷器對象

 1 for (let index of [‘a‘, ‘b‘].keys()) {
 2   console.log(index);
 3 }
 4 // =>0
 5 // =>1
 6 
 7 for (let elem of [‘a‘, ‘b‘].values()) {
 8   console.log(elem);
 9 }
10 // =>‘a‘
11 // =>‘b‘
12 
13 for (let [index, elem] of [‘a‘, ‘b‘].entries()) {
14   console.log(index, elem);
15 }
16 // =>0 "a"
17 // =>1 "b"

如果不使用for…of循環,可以手動調用遍歷器對象的next方法,進行遍歷。

22、includes()
功能:表示某個數組是否包含給定的值
輸入:第一個參數必選(待檢查的給定值),第二個參數可選,表示搜索的起始位置,默認為0,負數表示倒數的位置。
輸出:一個布爾值。
註意:和indexOf的區別,indexOf進行了運算符的強比對,會導致對NaN誤判。

1 [1, 2, 3].includes(2);     // true
2 [1, 2, 3].includes(4);     // false
3 [1, 2, NaN].includes(NaN); // true

js數組常用方法總結