數組七十二變

會改變原數組的方法:

  1. push() 在尾部添加一個或多個元素,並返回數組長度

    let arr = [1, 2, 3]
    arr.push('a', 'b') // 5
    console.log(arr) // [1, 2, 3, "a", "b"]
  2. pop()方法刪除數組的最後一個元素,返回刪除的元素

    //組合使用push()和pop()可以用JavaScript數組實現先進後出的棧
    let arr2 = ['a', 'b', 'c']
    arr2.pop() // "c"
    console.log(arr2) // ["a", "b"]
  3. unshift() 方法在頭部添加一個或多個元素,返回數組的長度

    let arr3 = ['a', 'b', 'c']
    arr3.unshift(1, 2) // 5
    console.log(arr3)  // [1, 2, "a", "b", "c"]
  4. shift()方法刪除數組的第一個元素,返回刪除的元素

    let arr4 = ['a', 'b', 'c']
    arr4.shift() // 'a'
    console.log(arr4) // ['b', 'c']
  5. splice()方法是在數組中插入或刪除元素的通用方法,返回刪除的元素

    let arr5 = [1, 2, 3, 4, 5]
    arr5.splice(2, 3, 'a','b') // [3, 4, 5]
    console.log(arr5); // [1, 2, "a", "b"]
  6. sort()方法將數組的元素排序並返回排序後的數組

    let arr6 = [2, 34, 123, 11, 32]
    arr6.sort() // [11, 123, 2, 32, 34]
    // 排序出現問題,由於數組的sort 函數是經過字典序排序,因此
    arr6.sort( (a, b) => {
        return a - b
    }) // [2, 11, 32, 34, 123]
  7. reverse() 方法將數組的元素顛倒順序,返回逆序的數組

    arr6.reverse() // [123, 34, 32, 11, 2]
  8. copyWithin()方法淺複製數組的一部分到同一個數組的另外一個位置,並返回它,而不修改其大小

    三個參數,第一個參數表明開始修改的位置,第二個參數表明做爲替換元素的起始位置,第三個元素表明替換元素的結束位置。javascript

    [1, 2, 3, 4, 5].copyWithin(-2);
    // [1, 2, 3, 1, 2]
    
    [1, 2, 3, 4, 5].copyWithin(0, 3);
    // [4, 5, 3, 4, 5]
    
    [1, 2, 3, 4, 5].copyWithin(0, 3, 4);
    // [4, 2, 3, 4, 5]
    
    [1, 2, 3, 4, 5].copyWithin(-2, -3, -1);
    // [1, 2, 3, 3, 4]
  9. fill()用固定值填充一個數組

    三個參數,第一個表明填充數組的值,第二個開始的索引,第三個終止索引。java

    [1, 2, 3].fill(4);               // [4, 4, 4]
    [1, 2, 3].fill(4, 1);            // [1, 4, 4]
    [1, 2, 3].fill(4, 1, 2);         // [1, 4, 3]

不改變原數組的方法

  1. slice() 方法返回一個從開始到結束(不包括結束)選擇的數組的一部分淺拷貝到一個新的數組對象,原數組不會被修改。

    let ary = [1, 2, 3]
    ary.slice(0, 2) // [1, 2]
  2. join() 方法將數組中全部元素轉換爲字符串並鏈接在一塊兒

    let ary2 = ['a', 'b', 'c']
    ary2.join('=') // "a=b=c"
  3. toString() 方法將數組的每一個元素轉換爲字符串

    let ary3 = ['a', 'b', 'c', 1, 2]
    ary3.toString() // "a,b,c,1,2"
  4. concat() 方法用於合併兩個或多個數組,此方法不改變現有數組,返回一個新數組

    ary2.concat(ary3)
    // ["a", "b", "c", "a", "b", "c", 1, 2]
  5. isArray() 用於肯定傳遞的值是不是一個 Array。

    arr instanceof Object // true
    arr instanceof Array // true
    
    // 爲了解決上面出現的狀況,數組可以使用 isArray() 方法進行判斷
    Array.isArray(arr) // true
    Array.isArray({}) // false

數組遍歷、映射、過濾、檢測、簡化等方法

  1. forEach() 方法從頭至尾遍歷數組,爲每一個元素調用指定的函數。

    let a = ['a', 'b', 'c']
    a.forEach( (item, index, a) => {
        console.log(index, item)
    })
    /* 
     0 "a"
     1 "b"
     2 "c"
    */
  2. map() 方法建立一個新數組,其結果是該數組中的每一個元素都調用一個callback函數後返回的結果。

    let a2 = [1, 2, 3]
    let double = a2.map( (item, index,a2) => {
        return item*2
    })
    console.log(double) // [2, 4, 6]
  3. filter() 方法返回的數組元素是調用的數組的一個子集。傳入的函數時用來邏輯斷定的,該函數返回 true 或 false,若是返回值爲true或能轉化爲true的值,那麼傳遞給判斷函數的元素就是這個子集的成員,它將被添加倒一個做爲返回值的數組中。

    let number = [1, 2, 3, 4, 5, 6];
    let small = number.filter((value, index, number) => {
        return value < 4 && index % 2 ===0;
    })
    console.log(small); // [1, 2, 3]
  4. every() 方法測試數組的全部元素是否都經過了指定函數的測試。當且僅當針對數組中的全部元素調用斷定函數都返回true,它才返回true。

    返回一個布爾值,當全部的元素都符合條件才返回true,不然返回false數組

    let a3 = [1, 2, 4, 10, 23]
    let result = a3.every( (element, index, a3) => {
        return element > 3
    })
    console.log(result) // false
  5. some() 方法測試數組中的某些元素是否經過由提供的函數實現的測試。當數組中至少有一個元素調用斷定函數返回true,它就返回true

    返回一個布爾值,當有一個元素符合條件就返回true,不然返回false函數

    let result2 = a3.some( (element, index, a3) => {
        return element > 3
    })
    console.log(result2) // true
  6. reduce() 和 reduceRight() 這兩個方法使用指定的函數將數組元素進行組合,生成單個值。

    返回值: 函數累計處理的結果測試

    let a4 = ['a', 'b', 'c']
    let a4str = a4.reduce( (a, b) => {
        return a + b
    })
    console.log(a4str) // abc
    
    // reduceRight() 是反方向
    let a4str2 = a4.reduce( (a, b) => {
        return a + b
    }) // cba
  7. indexof() 方法返回在數組中能夠找到一個給定元素的第一個索引,若是不存在,則返回-1。

    返回 首個被找到的元素在數組中的索引位置; 若沒有找到則返回 -1 。第二個參數表明開始查找的位置code

    let a5 = [1, 4, 5, 8]
    a5.indexOf(1) // 0
    a5.indexOf(4, 2) // -1
    a5.indexOf(5, 1) // 2
  8. lastIndexOf() 跟indexOf()查找方向相反,方法返回指定元素在數組中的最後一個的索引,若是不存在則返回 -1。

    返回數組中最後一個符合元素的索引,如未找到返回-1對象

    let array = [2,5,9,2];
    array.lastIndexOf(7) // -1
    array.lastIndexOf(2,4) // 3
    array.lastIndexOf(2,3) // 3
  9. includes() 方法用來判斷一個數組是否包含一個指定的值,根據狀況,若是包含則返回 true,不然返回false。

    解決不能查找 NaN的問題,返回一個布爾值,根據狀況,若是包含則返回 true,不然返回false。排序

    [1, 2, 3].includes(2);     // true
    [1, 2, 3].includes(4);     // false
    [1, 2, NaN].includes(NaN); // true
  10. find() 和 findIndex() find 方法返回數組中知足提供的測試函數的第一個元素的值。不然返回 undefined。findIndex 方法返回數組中知足提供的測試函數的第一個元素的索引。不然返回-1。

    find查找數組中第一個符合條件的值,若是查找到,當即返回,再也不向下進行。不然返回 undefined。findIndex會當即返回該元素的索引。若是回調從不返回真值,或者數組的length爲0,則findIndex返回-1。索引

    let a = [1, -4, -5, 10].find((n) => n < 0); 
    let b = [1, 4, -5, 10].findIndex((n) => n < 0); // 返回索引2
  11. keys() 方法返回一個新的Array迭代器,它包含數組中每一個索引的鍵。

    var array1 = ['a', 'b', 'c'];
    var iterator = array1.keys(); 
      
    for (let key of iterator) {
      console.log(key); // expected output: 0 1 2
    }
  12. values() 方法返回一個新的Array迭代器,它包含數組中每一個索引的值。

    let iterator2 = array1.values()
    for (const item of iterator2) {
        console.log(item) // a b c
    }
  13. entries() 方法返回一個新的Array迭代器,該對象包含數組中每一個索引的鍵/值對。

let iterator3 = array1.entries()
for (const item of iterator3) {
    console.log(item)
}
// [0, "a"]
// [1, "b"]
// [2, "c"]
相關文章
相關標籤/搜索