js數組經常使用方法總結

js經常使用數組方法總結

push()

var arr = [1, 2, 3]
    console.log('添加前的數組', arr) // [1, 2, 3]
    var result = arr.push(10, 20)
    console.log('返回值', result)    // 5
    
//總結以下：
    `向數組末尾添加一項或多項`
    `返回值：添加後的數組長度`
    `原數組：發生改變`
複製代碼

unshift()

var arr = [1, 2, 3]
    var result = arr.unshift(40, 50, 60)
    console.log('添加後', arr) // [40, 50, 60, 1, 2, 3]
    console.log('返回值', result) // 6
    
// 總結以下：
    `向數組開頭添加一項或者多項`
    `返回值：添加後的數組長度`
    `原數組：發生改變`
複製代碼

pop()

var arr = [1, 2, 3, 'hello']
    var result = arr.pop()
    console.log('刪除後', arr) // [1, 2, 3]
    console.log('返回值', result) // 'hello'
    
// 總結以下：
    `做用：刪除數組末尾最後一項`
    `原數組：發生改變`
    `返回值：返回的是 刪除的那一項`
複製代碼

shift()

var arr = ['hello', 1, 2, 3]
    console.log('刪除前', arr) // ['hello', 1, 2, 3]
    var result = arr.shift()
    console.log('刪除後', arr) // [1, 2, 3]
    console.log('返回值', result) // 'hello'
    
// 總結以下：
    `做用：刪除數組開頭第一項`
    `原數組：發生改變`
    `返回值：返回的是 刪除的那一項`
複製代碼

splice()

var arr = [10, 20, 30, 40, 50]
    console.log('調用前', arr) // [10, 20, 30, 40, 50]
    var result = arr.splice(2)
    var result = arr.splice(1, 3) 
    console.log('調用後原數組', arr) // [10, 20]
    console.log('返回值', result) // [30, 40, 50]
    var result = arr.splice(1, 0, 2019, 2018) // [10, 20, 2019, 2018]
// 總結以下：
    `splice(x): 從索引x處開始 一直刪除到末尾，將刪除的內容組成新數組返回`
    `splice(x, y): 從索引x處開始，刪除y個`
    `splice(x, y, ...n): 從索引x處開始，刪除y個，將參數n以及後面全部參數 插入到索引x處`
複製代碼

slice()

var arr = ['a', 'b', 'c', 'd', 'e', 'f'];
    var res = arr.slice(1, 3)
    console.log('返回值', res) // ['b', 'c']

// 總結以下：
    `slice(x): 從索引x處開始 一直克隆到末尾，將克隆的內容組成新數組返回`
    `slice(x, y): 從索引x處克隆到索引y處（不包含y項）`
    `slice(-x)：從arr.length加上-x處截取到數組末尾`
複製代碼

concat()

var arr1 = [1, 2, 3]
    var arr2 = [6, 7, 8]
    var res1 = arr1.concat(arr2, 2, 'df')
    console.log('返回值', res1) // [1, 2, 3, 6, 7, 8, 2, 'df']

// 總結以下：
    `不會影響原數組`
    `返回值：拼接好的內容 組成的新數組`
複製代碼

join()

var arr = [1, 2, 3]
    arr.join('') // "123"
    arr.join('+') // "1+2+3"
    
// 總結以下：
    `將數組轉換成字符串 原數組不會發生改變`
    `根據指定的鏈接符 組成新字符串`
複製代碼

indexOf() （ES5的方法）

var arr = [1, 'a', 2, 'b', 3, 'c']
    var res = arr.indexOf('b') // 3
    var res = arr.indexOf(20) // -1
    
// 總結以下：
    `查找某個值 在數組中的索引位置`
    `返回值：查找到的那一項的索引`
    `若是查找不到 就返回-1 說明數組中不存在這一項`
複製代碼

lastIndexOf() （ES5的方法）

var arr = [1, 'b', 2, 'b', 3]
    console.log(arr.lastIndexOf('b')) // 3
    
// 總結以下：
    `查找 值在數組中 最後一次出現的索引位置`
    `返回值：查找到的那一項的索引`
    `若是查找不到 就返回-1 說明數組中不存在這一項`
複製代碼

every() （ES5的方法）

var arr = [1, 2, 3, 4];
    var temp = arr.every((item, index, array) => {
        return item > 2;
    });
    console.log(arr, temp); // [ 1, 2, 3, 4 ] false

    var arr = [1, 2, 3, 4];
    var temp = arr.every(function(item, index, array) {
        return item > this.id;
    }, {id: 2});
    console.log(arr, temp); // [ 1, 2, 3, 4 ] false
    
// 總結以下：
    `對數組中的每一項運行給定函數，若是該函數對每一項都返回true,則返回trun`
    `方法的第二個參數可選，做用是設定第一個參數中的this指向，若是使用第二個參數，注意callback不能是箭頭函數`
複製代碼

some() （ES5的方法）

var arr = [1, 2, 3, 4];
    var temp = arr.some((item, index, array) => {
        return item > 2;
    });
    console.log(arr, temp); // [ 1, 2, 3, 4 ] true
    
// 總結以下：
    `對數組中的每一項運行給定函數，若是該函數對任意一項返回true,則返回true`
複製代碼

filter() （ES5的方法）

var arr = [1, 2, 3, 4];
    var temp = arr.filter((item, index, array) => {
        return item > 2;
    });
    console.log(arr, temp); // [ 1, 2, 3, 4 ] [3, 4]

// 總結以下：
    `對數組中的每一項運行給定函數，返回該函數返回true的項組成的數組`
複製代碼

map() （ES5的方法）

var arr = [1, 2, 3, 4];
    var temp = arr.map((item, index, array) => {
        return item * item;
    });
    console.log(arr, temp); // [ 1, 2, 3, 4 ] [ 1, 4, 9, 16]

// 總結以下：
    `對數組中的每一項運行給定函數，返回每次函數調用的結果組成的數組`
複製代碼

forEach() （ES5的方法）

var arr = [1, 2, 3, 4];
    var temp = arr.forEach((item, index, array) => {
       // 不會有返回值，但可在這裏執行某些操做
        return item * item;
    });
    console.log(arr, temp); // [ 1, 2, 3, 4 ] undefined

// 總結以下：
    `對數組中的每一項運行給定函數。無返回值`
複製代碼

reduce() && reduceRight() （ES5的方法）

// 數組求和
    var arr = [1, 2, 3];
    var sum = arr.reduce((prev, cur, index, array) => {
        return prev + cur;
    });
    console.log(arr, sum); // [ 1, 2, 3 ] 6
    
    // 傳initialValue 基礎值的示例
    var sum1 = arr.reduce((prev, cur, index, array) => {
        return prev + cur;
    }, 10);
    // 返回的值是：10+1+2+3
    console.log(arr, sum1); // [ 1, 2, 3 ] 16
    
    var arr = ['h', 'e', 'l', 'l', 'o'];
    var str = arr.reduceRight((prev, cur, index, array) => {
        return prev + cur;
    });
    console.log(arr, str); // [ 'h', 'e', 'l', 'l', 'o' ] 'olleh'
// 總結以下：
    `reduce()從數組的第一項開始，逐步遍歷到最後，迭代數組的全部項`
    `reduceRight()從數組的第一項開始，逐步遍歷到最後，迭代數組的全部項`
複製代碼

find() （ES6的方法）

let arr = [1, 2, 3, 4, 5];
    let temp = arr.find((item, index, array) => {
        return item > 2;
    })
    console.log(arr, temp); // [1, 2, 3, 4, 5] 3
// 總結以下：
    `查找數組中第一個符合條件的元素，返回該元素`
複製代碼

findIndex() （ES6的方法）

let arr = [1, 2, 3, 4, 5];
    let temp = arr.findIndex((item, index, array) => {
        return item > 2;
    })
    console.log(arr, temp); // [1, 2, 3, 4, 5] 2
// 總結以下：
    `查找數組中第一個符合條件的元素所在位置的索引，並返回該索引值`
複製代碼

fill() （ES6的方法）

let arr = [1, 2, 3, 4, 5];
    let temp = arr.fill('a', 2, 4);
    console.log(arr, temp); // [1, 2, 'a', 'a', 5] [1, 2, 'a', 'a', 5]
// 總結以下：
    `用指定元素，填充數組從start(包括)到end（不包括）之間的元素，若是該區間內已經有元素，直接替換掉`
複製代碼

includes() （ES7的方法）

let arr = [1, 2, 3, 4, 5];
    let temp = arr.includes(5);
    console.log(arr, temp); // [1, 2, 3, 4, 5] true
    
    // 這個方法彌補了indexOf查看元素時的一個不足，即查找NaN的偏差
    let arr1 = [NaN, 'a'];
    let temp1 = arr1.includes(NaN);
    let temp2 = arr1.indexOf(NaN);
    console.log(temp1, temp2); // true -1
// 總結以下：
    `判斷數組中是否包含指定的元素`
複製代碼