1. 程式人生 > >JavaScript陣列常用方法集合

JavaScript陣列常用方法集合

1.陣列的定義

陣列(array)是按次序排列的一組值。每個值的位置都有編號(從0開始),整個陣列用方括號表示

    var arr = ['a', 'b', 'c'];

2.建立陣列的三種方法

    // 常規方式
    var arr = new Array();
    arr[0] = 'a';
    arr[1] = 'b';
    arr[2] = 'c';

    // 簡潔方式
    var arr = new Array('a', 'b', 'c');

    // 字面方式
    var arr = ['a', 'b', 'c'];
    var arr = [
        {a: 1},
        [1, 2, 3],
        function() {return true;}
    ];

3.陣列方法和屬性

length 設定或返回陣列元素的個數,length = 0也可以清空陣列。

    var arr = ['a', 'b', 'c'];
    arr.length // 3

    arr.length = 5;
    arr.length; // 5
    arr[4] // undefined

    arr.length = 0;
    arr // []

pop()  刪除陣列中的最後一個元素,並返回刪除的元素

    var arr = ['a', 'b', 'c'];
    arr.pop(); // c
    arr // ['a', 'b']

push()  向陣列的末尾新增一個或多個新元素,並返回新陣列的長度

    var arr = ['a', 'b', 'c'];
    arr.push('d'); // 4
    arr // ['a', 'b', 'c', 'd']

shift()  刪除陣列的第一個元素,並返回刪除的元素

    var arr = ['a', 'b', 'c'];
    arr.shift(); // a
    arr // ['b', 'c']

unshift() 向陣列的開頭新增一個或多個元素,並返回新陣列的長度

    var arr = ['a', 'b', 'c'];
    arr.unshift('A'); // 4
    arr // ['A', 'a', 'b', 'c']

toString() 把陣列轉換成字串,並返回結果

    var arr = ['a', 'b', 'c'];
    arr.toString(); // a, b, c
    arr // ['a', 'b', 'c']

valueOf() 返回陣列物件的原始值

    var arr = ['a', 'b', 'c'];
    arr.valueOf(); // a, b, c
    arr // ['a', 'b', 'c']

indexOf() 搜尋陣列中的元素,並返回它所在的位置,如果搜尋的元素沒有出現,則返回-1

    var arr = ['a', 'b', 'c'];
    arr.indexOf('b'); // 1
    arr // ['a', 'b', 'c']

lastIndexOf() 返回指定字串最後出現的位置,在一個字串中指定的位置從後往前搜尋。如果搜尋的元素沒有出現,則返回-1

    var arr = ['a', 'b', 'c', 'b'];
    arr.lastIndexOf('b'); // 3
    arr // ['a', 'b', 'c', 'b']

join()  將陣列中的每個元素轉換成字串,並將這些字串連線起來

    var arr = ['a', 'b', 'c'];
    arr.join(); // a, b, c
    arr.join('-'); // a-b-c
    arr.join(' and '); // a and b and c
    arr // ['a', 'b', 'c']

concat()  連線兩個或多個數組,並返回合併結果,不會改變現有的陣列

    var arr1 = ['a', 'b', 'c'];
    var arr2 = ['d', 'e', 'f'];
    arr1.concat(arr2); // ['a', 'b', 'c', 'd', 'e', 'f']
    arr1 // ['a', 'b', 'c']

slice()  選取陣列的一部分,並返回一個新陣列,不會改變原陣列

    // array.slice(start, end)
    // start 可選, 規定從何處開始選取。如果是負數,那麼它規定從陣列尾部開始算起的位置。也就是        說,-1 指最後一個元素,-2 指倒數第二個元素,以此類推。
    // end 可選, 規定從何處結束選取。該引數是陣列片斷結束處的陣列下標。如果沒有指定該引數,那麼切分的陣列包含從 start 到陣列結束的所有元素。如果這個引數是負數,那麼它規定的是從陣列尾部開始算起的元素。

    var arr = ['a', 'b', 'c','d', 'e'];
    arr.slice(1,3); // ['b', 'c']
    arr // ['a', 'b', 'c','d', 'e']

splice() 從陣列中新增、刪除、替換元素,會改變原陣列


    // array.splice(index,howmany,item1,.....,itemX)
    // index 必需, 規定從何處新增/刪除元素。
    // howmany 必需, 規定應該刪除多少元素。必須是數字,但可以是 "0"。
    // item1, ..., itemX 可選, 要新增到陣列的新元素

    var arr1 = ['a', 'b', 'c','d', 'e'];
    arr1.splice(0,1);
    arr1 // ["b", "c", "d", "e"]

    var arr2 = ['a', 'b', 'c','d', 'e'];
    arr2.splice(0, 1, 'A');
    arr2 // ["A", "b", "c", "d", "e"]

    var arr3 = ['a', 'b', 'c','d', 'e'];
    arr3.splice(0, 0, 'A');
    arr3 // ["A", "a", "b", "c", "d", "e"]

reverse() 用於顛倒陣列中元素的順序,會改變原陣列

    var arr = ['a', 'b', 'c','d', 'e'];
    arr.reverse(); // ["e", "d", "c", "b", "a"]
    arr // ["e", "d", "c", "b", "a"]

find() 返回符合傳入測試函式條件的陣列元素  


    // find() 方法返回通過測試(函式內判斷)的陣列的第一個元素的值。
    // find() 方法為陣列中的每個元素都呼叫一次函式執行:
    // 當陣列中的元素在測試條件時返回 true 時, find() 返回符合條件的元素,之後的值不會再呼叫執行函式。
    // 如果沒有符合條件的元素返回 undefined

    var ages = ['10', '18', '20','36', '50'];
    function checkAdult(age) {
        return age >= 20;
    }
    ages.find(checkAdult) // 20
    ages // ['10', '18', '20','36', '50']

filter()  檢測數值元素,並返回符合條件的所有元素的陣列

    // filter() 方法建立一個新的陣列,新陣列中的元素是通過檢查指定陣列中符合條件的所有元素。

    var ages = ['10', '18', '20','36', '50'];
    function checkAdult(age) {
        return age >= 20;
    }

    ages.filter(checkAdult) // ["20", "36", "50"]
    ages // ['10', '18', '20','36', '50']

includes() 判斷一個數組是否包含一個指定的值   

    var ages = ['10', '18', '20','36', '50'];
    ages.includes('10'); // true
    ages.includes('75'); // false
    ages // ['10', '18', '20','36', '50']

map()  通過指定函式處理陣列中的每個元素,並返回處理後的

    // map() 方法返回一個新陣列,陣列中的元素為原始陣列元素呼叫函式處理後的值。
    // map() 方法按照原始陣列元素順序依次處理元素。

    //array.map(function(currentValue,index,arr), thisValue)
    //currentValue 必須,當前元素的值
    //index 可選, 當期元素的索引值
    //arr 可選, 當期元素屬於的陣列物件
    //this.value 可選, 物件作為該執行回撥時使用,傳遞給函式,用作 "this" 的值。

    var ages = [10, 18, 20, 36, 50];
    var res = ages.map(function(item, index, input) {
        return item * 10
    })

    res // [100, 180, 200, 360, 500]
    ages // [10, 18, 20, 36, 50]

forEach()  遍歷陣列,陣列每個元素都執行一次回撥函式,會改變原陣列   

    // forEach() 方法用於呼叫陣列的每個元素,並將元素傳遞給回撥函式。
    // array.forEach(function(currentValue, index, arr), thisValue)
    // currentValue 必需, 當前元素
    // index 可選, 當前元素的索引值。
    // arr 可選, 當前元素所屬的陣列物件。

    var ages = [10, 18, 20, 36, 50];
    var res = ages.forEach(function(item, index, input) {
        input[index] = item *10;
    })
    res // undefined
    ages // [100, 180, 200, 360, 500]

sort() 對陣列的元素進行排序,預設按升序排序,會改變原陣列

    var ages = [36, 50, 10, 20, 18];
    ages.sort(); // [10, 18, 20, 36, 50]
    ages // [10, 18, 20, 36, 50]

some()  檢測陣列元素中是否有元素符合指定條件

    // some() 方法用於檢測陣列中的元素是否滿足指定條件(函式提供)。
    // some() 方法會依次執行陣列的每個元素:
    // 如果有一個元素滿足條件,則表示式返回true , 剩餘的元素不會再執行檢測。
    // 如果沒有滿足條件的元素,則返回false。

    var ages = ['10', '18', '20','36', '50'];
    function checkAdult(age) {
        return age >= 20;
    }
    ages.some(checkAdult) // true
    ages // ['10', '18', '20','36', '50']

every() 檢測陣列中是否每個元素都符合指定條件

    // every() 方法用於檢測陣列所有元素是否都符合指定條件(通過函式提供)。
    // every() 方法使用指定函式檢測陣列中的所有元素:
    // 如果陣列中檢測到有一個元素不滿足,則整個表示式返回 false ,且剩餘的元素不會再進行檢測。
    // 如果所有元素都滿足條件,則返回 true。

    var ages = ['10', '18', '20','36', '50'];
    function checkAdult(age) {
        return age >= 20;
    }
    ages.every(checkAdult) // false
    ages // ['10', '18', '20','36', '50']

isArray() 判斷物件是否為陣列

    // isArray() 方法用於判斷一個物件是否為陣列。
    // 如果物件是陣列返回 true,否則返回 false。

    var ages = ['10', '18', '20','36', '50'];
    Array.isArray(ages); // true
    ages // ['10', '18', '20','36', '50']

reduce()  將陣列元素迭代計算為一個值(從左到右)

    // reduce() 方法接收一個函式作為累加器,陣列中的每個值(從左到右)開始縮減,最終計算為一個值。
    // array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
    // total 必需,初始值, 或者計算結束後的返回值。
    // currentValue 必需,當前元素
    // currentIndex 可選,當前元素的索引
    // arr 可選,當前元素所屬的陣列物件。

    var ages = [10, 18, 20, 36, 50];
    function getSun(total, num) {
        return total + num;
    }
    ages.reduce(getSun) // 134
    ages // ['10', '18', '20','36', '50']