JavaScript數組API大合集

時間 2020-09-29

標籤 javascript 數組 api 合集欄目 JavaScript 简体版

原文原文鏈接

JavaScript數組知識點整理

1.jion()

將數組轉換爲字符串，()中放鏈接符，默認爲逗號，該方法不會改變原數組。數組

        var ary = [1,2,3,4,5,6,7,8,9];
        var aryJoin = ary.join();
        console.log(ary); //輸出原數組
        console.log(aryJoin); //1,2,3,4,5,6,7,8,9

2.push()

給數組末尾添加新內容，能夠添加多個，用逗號隔開，不能夠添加數組，添加數組會變成多維數組。返回值爲新數組的長度，會將原數組改變爲新數組。函數

   　　 var ary = [1,2,3,4,5,6,7,8,9];
        var aryPush = ary.push(10,11,12);
        console.log(ary);  //數組[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
        console.log(aryPush); //12

3.pop()

用於刪除數組的最後一個元素，返回值爲刪除的元素，會將原素組改變爲新數組。spa

        var ary = [1,2,3,4,5,6,7,8,9];
        var aryPop = ary.pop();
        console.log(ary); //[1,2,3,4,5,6,7,8]
        console.log(aryPop); // 9

4.shift()

用於刪除數組的第一個元素，返回值爲刪除的元素，會將原數組改變爲新數組。code

        var ary = [1,2,3,4,5,6,7,8,9];
        var aryShift = ary.shift();
        console.log(ary); //[2,3,4,5,6,7,8,9]
        console.log(aryShift); // 11

5.unshift()

用於給數組開頭添加元素，與pop()相反，返回值爲新數組的長度，會將原數組改變爲新數組。對象

        var ary = [1,2,3,4,5,6,7,8,9];
        var aryUnshift = ary.unshift(0,1);
        console.log(ary); // [0,1,1,2,3,4,5,6,7,8,9]
        console.log(aryUnshift); //11

6.sort()

用於給數組中的元素排序。可是sort()方法是按照字符的Unicode進行排序的。所以不能直接用來對數值進行排序，若是須要從小到大或者從大到小排序須要給sort()一個參數。sort()方法會改變原數組，原數組變爲排序後的數組，返回值爲新數組。blog

        var ary = [567,135,103,21,351,40,73,89,9];
        var arySort = ary.sort();
        console.log(ary); //[103, 135, 21, 351, 40, 567, 73, 89, 9]
        console.log(arySort); //[103, 135, 21, 351, 40, 567, 73, 89, 9]
        //從小到大 由於sort()會改變原數組，因此從新賦值
        ary = [567,135,103,21,351,40,73,89,9];
        var arySortA_B = ary.sort((a,b)=>a-b);
        console.log(arySortA_B); //[9, 21, 40, 73, 89, 103, 135, 351, 567]
        //從大到小 由於sort()會改變原數組，因此從新賦值
        ary = [567,135,103,21,351,40,73,89,9];
        var arySortB_A = ary.sort((a,b)=>b-a)
        console.log(arySortB_A);  //[567, 351, 135, 103, 89, 73, 40, 21, 9]

7.reverse()

用於顛倒數組，返回值是顛倒事後的新數組，會改變原數組，原數組變爲改變事後的新數組。排序

        var ary = [1,2,3,4,5,6,7,8,9];
        var aryReverse = ary.reverse();
        console.log(ary); //[9,8,7,6,5,4,3,2,1]
        console.log(aryReverse); //[9,8,7,6,5,4,3,2,1]

8.concat()

該方法用來拼接字符串，能夠直接將數組做爲參數，也能夠直接將新元素做爲參數，如有多個新元素時用逗號隔開。該方法返回值爲新數組，不會改變原數組。索引

        var aryOne = [1,2,3,4,5];
        var aryTwo = [6,7,8,9];
        var aryConcatOne = aryOne.concat(aryTwo);
        var aryConcatTwo = aryOne.concat(6,7,8,9);
        console.log(aryOne); //[1,2,3,4,5]
        console.log(aryTwo); //[6,7,8,9]
        console.log(aryConcatOne); // [1,2,3,4,5,6,7,8,9]
        console.log(aryConcatTwo); // [1,2,3,4,5,6,7,8,9]

9.slice()

該方法用來截取數組。能夠寫一個參數，也能夠寫兩個參數。寫一個參數時就是從第幾個開始截取到最後一個。兩個參數時就是從第幾個截取到第幾個的前一個，即 [ ) 前閉後開。只有一個值時返回值爲截取下來的新數組，有兩個參數時返回值也是截取下來的新數組。該方法不會改變原數組。ip

        var ary = [1,2,3,4,5,6,7,8,9];
        var arySliceOne = ary.slice(3);
        var arySliceTwo = ary.slice(5,8);
        console.log(ary); //[1,2,3,4,5,6,7,8,9]
        console.log(arySliceOne); //[4,5,6,7,8,9]
        console.log(arySliceTwo); // [6,7,8]

10.splice()

①刪除字符串

只有一個參數時是從開頭刪除若干項。有兩個參數時是刪除從哪裏到哪裏。該方法會改變原數組爲刪除指定項以後的數組。返回值爲刪除的元素組成的數組。

        var ary = [1,2,3,4,5,6,7,8,9];
        var arySplice = ary.splice(1);
        console.log(ary); //[1]
        console.log(arySplice);// [2,3,4,5,6,7,8,9]

        var ary = [1,2,3,4,5,6,7,8,9];
        var arySplice = ary.splice(1,3);
        console.log(ary);//[1,5,6,7,8,9,]
        console.log(arySplice); // [2,3,4]

②替換

有三個參數，第一個參數表示起始位置，第二個參數表示要刪除的項數，第三個參數爲要插入的項數。會改變原數組爲新數組，返回值爲被替換掉的元素。

        var ary = [1,2,3,4,5,6,7,8,9];
        var arySplice = ary.splice(1,5,2,3);
        console.log(ary); //[1,2,3,7,8,9]
        console.log(arySplice); //[2,3,4,5,6]

③插入

只須要將要刪除的項數改成0就能夠變爲插入。會改變原數組爲新數組，返回值爲空數組。

        var ary = [1,2,3,4,5,6,7,8,9];
        var arySplice = ary.splice(2,0,5,1);
        console.log(ary); //[1,2,5,3,4,5,6,7,8,9]
        console.log(arySplice); //[]

11.indexOf()

查找。第一個參數爲要查找的項，第二個參數爲起始位置，若是沒有就默認從頭開始。若是查找到了返回該元素的位置，若沒有查找到返回-1；不會改變原數組。

            var ary = [1, 2, 3, 4, 5, 6, 7, 8, 9, 8, 7, 6, 5, 4, 3, 2, 1];
            var aryIndexOfOne = ary.indexOf(3);
            console.log(ary); //[1, 2, 3, 4, 5, 6, 7, 8, 9, 8, 7, 6, 5, 4, 3, 2, 1]
            console.log(aryIndexOfOne); // 2
            var aryIndexOfTwo = ary.indexOf(10, 1);
            console.log(ary); //[1, 2, 3, 4, 5, 6, 7, 8, 9, 8, 7, 6, 5, 4, 3, 2, 1]
            console.log(aryIndexOfTwo); // -1

12.lastIndexOf()

查找。與indexOf()不一樣的是indexOf()爲從頭開始查找，lastIndexOf()是從後往前查找。參數同樣，可是，雖然是從後開始查找，返回值倒是數組正向時的索引。

            var ary = [1, 2, 3, 4, 5, 6, 7, 8, 9, 8, 7, 6, 5, 4, 3, 2, 1];
            var aryLastIndexOfOne = ary.lastIndexOf(3);
            console.log(ary); //[1, 2, 3, 4, 5, 6, 7, 8, 9, 8, 7, 6, 5, 4, 3, 2, 1]
            console.log(aryLastIndexOfOne); // 14
            var aryLastIndexOfTwo = ary.lastIndexOf(10, 1);
            console.log(ary); //[1, 2, 3, 4, 5, 6, 7, 8, 9, 8, 7, 6, 5, 4, 3, 2, 1]
            console.log(aryLastIndexOfTwo); // -1

13.forEach()

用來遍歷數組，參數爲函數，能夠傳參，第一個參數爲當前元素，第二個參數爲當前索引，第三個參數爲原數組。

        var arr = [1,2,3,4,5,6,7,8,9];
        var arrForEach = arr.forEach(function(a,b,c){
            console.log(a);  //輸出遍歷的元素
            console.log(b);  //輸出索引
            console.log(c)   //輸出原數組
        });

14.map()

map()的做用也是遍歷數組，可是能夠對數組中的每一項元素進行操做，而後返回一個新的數組。map()中的參數也是一個函數。

        var ary = [1,2,3,4,5,6,7,8,9];
        var aryMap = ary.map(function(item){
            return item+1;
        })
        console.log(ary);//[1, 2, 3, 4, 5, 6, 7, 8, 9]
        console.log(aryMap);//[1, 2, 3, 4, 5, 6, 7, 8, 9]

15.fllter()

過濾器。遍歷每一項元素，檢測其中符合要求的元素放入新元素。

        var ary = [1,2,3,4,5,6,7,8,9];
        var aryFilter = ary.filter(function(currentValue,index,arr){ //currentValue當前元素的值，index索引，arr當前元素屬於的數組對象
            console.log(currentValue); //輸入當前值
            console.log(index); //輸出索引
            console.log(arr); //輸出數組ary
            return currentValue%2==0;
            
        });
        console.log(ary);//[1,2,3,4,5,6,7,8,9]
        console.log(aryFilter); //[2, 4, 6, 8]

16.every()

一樣爲遍歷，參數爲一個函數。不一樣的是隻有每一項元素都知足要求時纔會返回true,不然就返回false.

        //15.every()
        var ary = [1, 2, 3, 4, 5, 6, 7, 8, 9];
        var aryEveryOne = ary.every(function(currentValue) { //currentValue當前元素的值(必選)，index索引，arr當前元素屬於的數組對象    
            return currentValue > 0;
        })
        var aryEveryTwo = ary.every(function(currentValue) {
            return currentValue > 5;
        })
        console.log(aryEveryOne); //true
        console.log(aryEveryTwo); //false

17.some()

some()和every()差很少,惟一不一樣的是，some()只要有一個知足要求就會返回true

        var ary = [1,2,3,4,5,6,7,8,9];
        var arySomeOne = ary.some(function(currentValue){
            return currentValue <0;
        })
        var arySomeTwo = ary.some(function(currentValue){
            return currentValue > 5;
        })
        console.log(arySomeOne); //false
        console.log(arySomeTwo); //true

18.for..in

for..in 在遍歷數組時遍歷的爲數組的索引。

        var ary = [1,2,3,4,5,6,7,8,9];
        for(var index in ary){
            console.log(index); //依次輸入 0 1 2 3 4 5 6 7 8
            console.log(ary[index]); //依次輸出  1 2 3 4 5 6 7 8 9
        }

for..in 通常用來遍歷對象的鍵名

        var Obj = {
            name:"saoge",
            age:18
        }
        for(var index in Obj){
            console.log(index); //依次輸出 name  age 
            console.log(Obj[index]); //依次輸出 saoge  18
        }

19.for..of

for..of在遍歷數組時遍歷的爲數組的元素。可是不能遍歷對象。

        var ary = [1,2,3,4,5,6,7,8,9];
        for(var index of ary){
            console.log(index) //依次輸出 1 2 3 4 5 6 7 8 9
        }

20.reduce()

reduce()用於接收一個函數做爲累加器。

        var ary = [1,2,3,4,5,6,7,8,9];
        var aryReduce = ary.reduce(function(total,currentValue){
            //total 必需，初始值或計算結束後返回值
            //currentValue 必須，當前元素
            // currentIndex 可選,當前元素的索引
            // arr 能夠選,當前元素所屬的數組對象
            console.log(total); //依次輸出 1 3 6 10 15 21 28 36
            console.log(currentValue);//依次輸出 2 3 4 5 6 7 8 9
            return total+currentValue;
        });
        console.log(aryReduce) //45

21.reduceRight()

做用同reduce()同樣，只不過是從右往左。

        var ary = [1,2,3,4,5,6,7,8,9];
        var aryReduceRight = ary.reduceRight(function(total,currentValue){
            //total 必需，初始值或計算結束後返回值
            //currentValue 必須，當前元素
            // currentIndex 可選,當前元素的索引
            // arr 能夠選,當前元素所屬的數組對象
            // console.log(total); //依次輸出 9 17 24 30 35 39 42 44
            console.log(currentValue);//依次輸出 8 7 6 5 4 3 2 1
            return total+currentValue;
        });
        console.log(aryReduceRight) //45