1. 程式人生 > >js 數組方法(個人學習筆記)

js 數組方法(個人學習筆記)

rev 了解 很多 com 過濾 接收參數 版本 push 操作數

首先,創建數組的兩個方法:

  1.構造函數: 

var array = new Array();//新建一個空數組
var array1 = new Array(20);//新建一個長度為20位的空數組
var array2 = new Array("1","2");//新建一個內容包括有1,2兩位的數組

  2.字面量表示法

var arr6 = ["lily","lucy","Tom"]; // 創建一個包含3個字符串的數組
alert(arr6[0]); //lily
arr6[1] = "mary"; //修改第二項為mary
arr6[3] = "sean"; //增加第四項為sean

 判斷是否為數組的方法:

  1.instanceof Array

    用法:

var array = new Array();
console.log(array instanceof Array);//true

    缺點:如果你從一個框架向另一個框架傳入一個數組,那麽傳入的數組與在第二個框架中原生創建的數組分別具有各自不同的構造函數。這樣的話,判斷不了

  2.Array.isArray()(推薦)

    用法:var array = new Array(); console.log(Array.isArray(array));

 數組方法:

  下面開始介紹數組的方法,數組的方法有數組原型方法,也有從object對象繼承來的方法,這裏我們只介紹數組的原型方法,數組原型方法主要有以下這些:  

    join()
    push()和pop()
    shift() 和 unshift()
    sort()
    reverse()
    concat()
    slice()
    splice()
    indexOf()和 lastIndexOf() (ES5新增)
    forEach() (ES5新增)
    map() (ES5新增)
    filter() (ES5新增)
    every() (ES5新增)
    some() (ES5新增)
    reduce()和 reduceRight() (ES5新增)

  針對ES5新增的方法瀏覽器支持情況:

    Opera 11+
    Firefox 3.6+
    Safari 5+
    Chrome 8+
    Internet Explorer 9+

  對於支持的瀏覽器版本,可以通過Array原型擴展來實現。下面詳細介紹一下各個方法的基本功能。

   1.join();

    作用:將數組整理成字符串(跟字符串方法split()相對應) 

    用法:只接收一個參數:即分隔符。

var arr = [1,2,3];
console.log(arr.join()); // 1,2,3
console.log(arr.join("-")); // 1-2-3
console.log(arr); // [1, 2, 3](原數組不變

    2.push()和pop()

      作用:push方法是對數組新增作用,新值會加到數組最後,返回值是新的數組的長度,參數可接受任意數量

      pop()方法是對數組進行刪除,刪除數組最後一位,減少數組的 length 值,然後返回移除的項不接受參數

      用法:

var arr = ["Lily","lucy","Tom"];
var count = arr.push("Jack","Sean");
console.log(count); // 5
console.log(arr); // ["Lily", "lucy", "Tom", "Jack", "Sean"]
var item = arr.pop();
console.log(item); // Sean
console.log(arr); // ["Lily", "lucy", "Tom", "Jack"]

    3.shift() 和 unshift()

     作用:   

        shift():刪除原數組第一項,並返回刪除元素的值;如果數組為空則返回undefined
         unshift:將參數添加到原數組開頭,並返回數組的長度 。

      這組方法和上面的push()和pop()方法正好對應,一個是操作數組的開頭,一個是操作數組的結尾。

      用法:

var arr = ["Lily","lucy","Tom"];
var count = arr.unshift("Jack","Sean");
console.log(count); // 5
console.log(arr); //["Jack", "Sean", "Lily", "lucy", "Tom"]
var item = arr.shift();
console.log(item); // Jack
console.log(arr); // ["Sean", "Lily", "lucy", "Tom"]

    4.sort()

    作用:對數組內部數據進行排序(可接受函數)

     用法:

var arr1 = ["a", "d", "c", "b"];
console.log(arr1.sort()); // ["a", "b", "c", "d"]
arr2 = [13, 24, 51, 3];
console.log(arr2.sort()); // [13, 24, 3, 51]
console.log(arr2); // [13, 24, 3, 51](元數組被改變)

    上面出現的問題原因是:在排序時,sort()方法會調用每個數組項的 toString()轉型方法,然後比較得到的字符串,以確定如何排序。即使數組中的每一項都是數值, sort()方法比較的也是字符串,因此會出現以上的這種情況;

    為了解決上述問題,sort()方法可以接收一個比較函數作為參數,以便我們指定哪個值位於哪個值的前面。比較函數接收兩個參數,如果第一個參數應該位於第二個之前則返回一個負數,如果兩個參數相等則返回 0,如果第一個參數應該位於第二個之後則返回一個正數。以下就是一個簡單的比較函數:

function compare(value1, value2) {
if (value1 < value2) {
return -1;
} else if (value1 > value2) {
return 1;
} else {
return 0;
}
}
arr2 = [13, 24, 51, 3];
console.log(arr2.sort(compare)); // [3, 13, 24, 51]

    5.reverse()

    作用:將數組內容完全反轉(不接收參數

     用法:

var arr = [13, 24, 51, 3];
console.log(arr.reverse()); //[3, 51, 24, 13]
console.log(arr); //[3, 51, 24, 13](原數組改變)

    6.concat()

      作用:將參數添加到原數組中。這個方法會先創建當前數組一個副本,然後將接收到的參數添加到這個副本的末尾,最後返回新構建的數組。在沒有給 concat()方法傳遞參數的情況下,它只是復制當前數組並返回副本。

      用法:

var arr = [1,3,5,7];
var arrCopy = arr.concat(9,[11,13]);
console.log(arrCopy); //[1, 3, 5, 7, 9, 11, 13]
console.log(arr); // [1, 3, 5, 7](原數組未被修改)

    如果傳入的是一個二維數組,那麽也會把這一數組項當作一項添加到Array中

var arrCopy2 = arr.concat([9,[11,13]]);
console.log(arrCopy2); //[1, 3, 5, 7, 9, Array[2]]
console.log(arrCopy2[5]); //[11, 13]

    7.slice()

      作用:返回從原數組中指定開始下標到結束下標之間的項組成的新數組(不會改變原數組

      用法:

var arr = [1,3,5,7,9,11];
var arrCopy = arr.slice(1);//如果只寫第一個參數的話,這個表示從數組第二位到數組最後一位
var arrCopy2 = arr.slice(1,4);//從數組第二位開始(包括第二位)到第四位(不包括第四位)截取數組
var arrCopy3 = arr.slice(1,-2);//復數表示從數組最後往前算,-1表示數組最後一位,這裏的-2表示數組倒數第二位(負值的話,跟數組長度相加,也能是相同效果,等同於arr.slice(1,4))
var arrCopy4 = arr.slice(-4,-1);
console.log(arr); //[1, 3, 5, 7, 9, 11](原數組沒變)
console.log(arrCopy); //[3, 5, 7, 9, 11]
console.log(arrCopy2); //[3, 5, 7]
console.log(arrCopy3); //[3, 5, 7]
console.log(arrCopy4); //[5, 7, 9]

    8.splice()

      作用:很強大的數組方法,它有很多種用法,可以實現刪除、插入和替換。(原數組會變化)  

      array.splice(index,howmany,item1,.....,itemX)

        index表示數組要更正的起始位置,(必填

       howmany:表示從起始位置之後需要替換/刪除的的數量,如果是0的話,不會進行刪除操作;

       item1,.....,itemX(選填,如果不填的話,只有前面的話,表示從index開始,進行刪除,數量為howmany)如果寫的話,表示在前刪除操作做完之後把這些方法刪除位置。進行插入替換,

       用法:

var arr = [1,3,5,7,9,11];
var arrRemoved = arr.splice(0,2);
console.log(arr); //[5, 7, 9, 11] 改變了原數組
console.log(arrRemoved); //[1, 3] 返回值是截取的數值組成的數組
var arrRemoved2 = arr.splice(2,0,4,6);
console.log(arr); // [5, 7, 4, 6, 9, 11] 如果是0的話,會將後面的數值插入到index的前面
console.log(arrRemoved2); // []
var arrRemoved3 = arr.splice(1,1,2,4);
console.log(arr); // [5, 2, 4, 4, 6, 9, 11]
console.log(arrRemoved3); //[7]

    9.indexOf()和latIndexOf()

     作用: 

      indexOf():接收兩個參數:要查找的項和(可選的)表示查找起點位置的索引。其中, 從數組的開頭(位置 0)開始向後查找。
      lastIndexOf:接收兩個參數:要查找的項和(可選的)表示查找起點位置的索引。其中, 從數組的末尾開始向前查找。

      這兩個方法都返回要查找的項在數組中的位置,或者在沒找到的情況下返回-1。(只會找到第一個匹配項)在比較第一個參數與數組中的每一項時,會使用全等操作符(類型也會進行比較的)

    用法:

var arr = [1,3,5,7,7,5,3,1];
console.log(arr.indexOf(5)); //2
console.log(arr.lastIndexOf(5)); //5
console.log(arr.indexOf(5,2)); //2
console.log(arr.indexOf(5,3)); //5
console.log(arr.indexOf(5,10)); //-1
console.log(arr.lastIndexOf(5,4)); //2
console.log(arr.indexOf("5")); //-1

    10.forEach()

     作用: 對數組進行遍歷循環,對數組中的每一項運行給定函數。這個方法沒有返回值。參數都是function類型,默認有傳參,參數分別為:遍歷的數組內容;內容對應的數組索引,數組本身。

      用法:

var arr = [1, 2, 3, 4, 5];
arr.forEach(function(x, index, a){
console.log(x + ‘|‘ + index + ‘|‘ + (a === arr));
});
// 輸出為:
// 1|0|true
// 2|1|true
// 3|2|true
// 4|3|true
// 5|4|true

    11.map()

      作用:指“映射”,對數組中的每一項運行給定函數,返回每次函數調用的結果組成的數組

      用法:

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.map(function(item,index,a){//跟foreach一樣的參數
return item*item;
});
console.log(arr2); //[1, 4, 9, 16, 25]

      有return的話,返回值會組成一個新數組,如果沒有返回值的話,也會有一個同長度的新數組,不過每一項都是undifined

      跟forEach()方法類似,不過map有返回值

    12.filter()

     作用::“過濾”功能,數組中的每一項運行給定函數,返回滿足過濾條件組成的數組。(不改變原數組)

      用法:

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var arr2 = arr.filter(function(x, index) {
return index % 3 === 0 || x >= 8;
}); 
console.log(arr2); //[1, 4, 7, 8, 9, 10]

    13.every()

      作用:判斷數組中每一項都是否滿足條件,只有所有項都滿足條件,才會返回true。(不改變原數組

      用法:

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.every(function(x) {
return x < 10;
}); 
console.log(arr2); //true
var arr3 = arr.every(function(x) {
return x < 3;
}); 
console.log(arr3); // false

    14.some()

     作用:判斷數組中是否存在滿足條件的項,只要有一項滿足條件,就會返回true。(不改變原數組)

     用法:

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.some(function(x) {
return x < 3;
}); 
console.log(arr2); //true
var arr3 = arr.some(function(x) {
return x < 1;
}); 
console.log(arr3); // false

    15.reduce()和reduceRight()

      作用:這兩個方法都會實現叠代數組的所有項,然後構建一個最終返回的。reduce()方法從數組的第一項開始,逐個遍歷到最後。而 reduceRight()則從數組的最後一項開始,向前遍歷到第一項。

        這兩個方法都接收兩個參數:一個在每一項上調用的函數和(可選的)作為歸並基礎的初始值。

        傳給 reduce()和 reduceRight()的函數接收 4 個參數:前一個值、當前值、項的索引和數組對象。這個函數返回的任何值都會作為第一個參數自動傳給下一項。第一次叠代發生在數組的第二項上,因此第一個參數是數組的第一項,第二個參數就是數組的第二項。

        下面代碼用reduce()實現數組求和,數組一開始加了一個初始值10。

var values = [1,2,3,4,5];
var sum = values.reduceRight(function(prev, cur, index, array){
return prev + cur;
},10);//這個10會當作循環第一次回調函數裏面的prev值
console.log(sum); //25  

js 數組方法(個人學習筆記)