js中Array的方法簡介

zhangfaliang發表於2019-03-26
JS

    親愛的小夥伴我在之前的文章中寫過js Array的詳細方法，但是過於詳細，文章太長了，今天我就簡單的總結一下。也分享一下學習這些方法經驗，這些經驗僅供產考，大家如有有更好的方法也可以評論，分享一下。

     學習陣列的方法是，我們們大家不妨看看，怎麼效率更高，我在學習這些方法的時候，分一下，類別去學

  • 方法的功能是什麼
    • 需不要傳入引數
    • 有沒有改變原陣列
    • 返回結果是什麼

    我們們先按功能分

  • 陣列的轉換方法 join()、toString()、valueOf()、toLocaleString()
  • 增加個刪除方法 push() unshift() shift() pop()
  • 操作 concat() slice() splice()
  • 排序 sort() reverse()
  • 遍歷方法 filter() map() forEach() some() every()
  • 遞迴方法 reduce() reduceRight()
  • 檢查方法 indexOf() lastIndexOf()

轉換方法

  • join（）

    • 功能是把陣列變成字串，每項都以特定的字串隔開。
    • 引數（可選）
      • 無參是該方法和toString（）的返回值一樣，陣列變成字串並且每項字元以逗號隔開 例如[1,2,3].join()===[1,2,3].toString()===”1,2,3“
      • 有引數，陣列變成字串，每項都以特定的”引數“隔開。例如[1,2,3].join('|')==='1|2|3'
    • 原陣列不發生變化
    • 返回每項都以特定的字串隔開的字串

  • toString()

    • 功能是把陣列變成字串，每項都以逗號隔開，呼叫的是數字每項的toString
    • 無引數 例如 [1,2,3].toString()===”1,2,3“
    • 原陣列不發生變化
    • 返回每項都以逗號隔開的字串

  • valueOf()

    • 取陣列的原始值
    • 無引數 例如 [1,2,3].valueOf() //[1,2,3]
    • 原陣列不發生變化
    • 返回原陣列的備份

  • toLocaleString()

    • 功能是把陣列變成字串，每項都以逗號隔開，呼叫的是數字每項的toLocaleString,一般情況下和toString返回結果一樣，但是由於瀏覽器實現的不同有時候返回的也不同
    • 無引數 例如 [1,2,3].toLocaleString()===”1,2,3“
    • 原陣列不發生變化
    • 返回原陣列的備份

     這幾個方法在不傳入引數的情況下，都會對null、undefned、""進行過濾 例[,null,undefined].toString()//",, "
例[,null,undefined].join()//",," 例[,null,undefined].join('')//""
增刪改方法

  • push（）

    • 功能是在原陣列的末尾新增一項或者多項，根據引數而定
    • 引數 需要新增到陣列末尾的項，一項或者多項，例如 var arr=[1,2];arr.push(3,4,5); console.log(arr) // [1,2,3,4,5];
    • 原陣列發生改變
    • 返回改變後陣列的length

  • unshift（）

    • 功能是在原陣列的前端新增一項或者多項，根據引數而定
    • 引數 需要新增到陣列前端的項，一項或者多項，例如 var arr=[1,2];arr.unshift(3,4,5); console.log(arr) // [3,4,5,1,2];
    • 原陣列發生改變
    • 返回改變後陣列的length

  • shift（）

    • 功能是在原陣列的最前端刪除一項
    • 引數無 arr=[1,2];arr.shift(); console.log(arr) // [2];
    • 原陣列發生改變
    • 返回刪除的該項

  • pop（）

    • 功能是在原陣列的最末端刪除一項
    • 引數無 arr=[1,2];arr.pop(); console.log(arr) // [1];
    • 原陣列發生改變
    • 返回刪除的該項

操作方法

  • concat（）

    • 功能連線兩個陣列
    • 引數（可選）
      • 無 列 [1,2,3].concat()返回的是[1,2,3]
      • 有 列 [1,2,3].concat([4,5,6])返回的是[1,2,3,4,5,6]
    • 原陣列不發生改變
    • 返回的是原陣列的備份加上引數陣列的合併

  • slice（）

    • 通過引數（m，n）擷取陣列的某些部分，或者全部 引數（m，n）
      • 不傳入引數或者傳入0，會建立一個原陣列的副本，返回
      • 傳入的m 大於或者等於n 則返回一個[]
      • 傳入的m 小於n 則返回一個起始位置為n到m位置的陣列，但是不包含m位置的拿一項
      • 如果 m和n都是負數並m小於n，這個陣列的長度數x，則會返回一個x+（-m）起始項，到結束位置x+（-n)項的陣列，但是不包含結束位置x+（-n)項
    • 原陣列不發生改變
    • 返回的擷取陣列的某些部分，或者全部

  • splice（）

    • 通過引數（m，n, a）可以實現通過索引新增，刪除，修改 引數（m，n）
    • 引數（m，n, a）
      • 刪除： 可以刪除任意數量的項，但是要指定兩個引數：要刪除的第一項的位置和要刪除的項數。例如，splice(0,2)會刪除陣列中的前兩項。
      • 插入：可以向指定位置插入任何數量的項，只需要提供3個引數：起始位置、要刪除的項數、要插入的項。如果要插入多個項，可以再傳入任意多個項。例如[1,2,3].splice(2,0,4,5,6,7)則會在在陣列[1,2,3]的3後面新增4，5，6，7最後陣列變成[1,2,3,4,5,6,7].
      • 替換：可以在指定的位置插入任何數量的項，且同時刪除任意數量的項，需要指定3個引數：其實位置、要刪除的項的任意數量，要插入陣列的項，要插入的陣列項沒有必要和刪除項的數量相等例如，[1,2,3,4,5].splice(0,1,0,1) 返回的是擷取的那一項1，並在原陣列內新增0，1，原陣列變成 [0,1,2,3,4,5]
    • 原陣列發生改變
    • 返回的是一個陣列，裡面包含刪除項

排序方法

  • sort（）

    • 功能 返回一個經過排序好的陣列

    • 引數可選

      • 無引數 將當前陣列的每項進行過toString(),然後再以升序的方式排序陣列，例 var arr=[1,5,15,10] arr.sort(); console.log(arr)//[1,10,15,5]
      • 有引數 該函式的引數是一個函式，該引數函式需要返回一個大於0會在小於0的數,例 var arr=[1,15,16,10];arr.sort((prev,next)=>(prev-next));console.log(arr)//[1,10,15,16]; 降序的只需眼修改成return next-prev 例 var arr=[1,15,16,10];arr.sort((prev,next)=>(next-prev));console.log(arr)//[16，15，10，1];

    • 原陣列發生改變

    • 返回的是一個排序好的陣列

  • reverse（）

    • 功能 陣列進行反轉
    • 引數無
    • 原陣列發生改變
    • 返回一個經過反轉的陣列

遍歷方法
ECMAScript5 為陣列定義了5個迭代的方法。每個方法都會有兩個引數;要在每一項上執行的函式和（可選的）執行該函式的作用域---影響this的值。傳入這些方法中的函式會接受三個引數；陣列項的值、該項在陣列中的位置，陣列物件本身。根據使用的方法不同，這個函式執行後的返回值也是不同的，看下面五個方法的作用
  • every():對陣列中的每一項執行給定函式，如果每一項都返回true，則返回true。
    • 功能 遍歷陣列每項，對傳入的驗證函式進行執行，如果每一項都返回true，則返回true。例
      • var numbers = [1,2,3,4,5,6,7]; var everyResult = numbers.every((item,index,arry)=>(item>2)); alert(everyResult);// false
    • 引數 有兩個一個是驗證的函式，另個一（可選）當前函式的this 上下文
    • 原陣列不改變
    • 返回true或false
  • some()：對陣列中的每一項執行給定函式，如果任意一項都返回true，則返回true。
    • 功能 遍歷陣列每項，對傳入的驗證函式進行執行，如果任意一項都返回true，則返回true。例
      • var someResult = numbers.some((item,index,arr)=(item>2)) alert(someResult);//true
    • 引數 有兩個一個是驗證的函式，另個一（可選）當前函式的this 上下文
    • 原陣列不改變
    • 返回true或false
  • filter()：對陣列中的每一項執行給定函式，返回該函式返回true的項陣列
    • 功能 遍歷陣列每項，對傳入的驗證函式進行執行，如果任意一項都返回true，返回陣列該項該項
    • 引數 有兩個一個是驗證的函式，另個一（可選）當前函式的this 上下文 例
      • var numbers = [1,2,3,4,3,2,1]; var filterResult = numbers.filter((item,index,array)=>(item>2))alert(filterReault);//[3,4,3]
    • 原陣列不改變
    • 返回 陣列
  • map():對陣列中的每一項執行給定函式,返回每次函式呼叫的結果組成的陣列。
    • 功能 遍歷陣列每項返回每次函式呼叫的結果組成的陣列。
    • 引數 有兩個一個是驗證的函式，另個一（可選）當前函式的this 上下文 例
      • var numbers = [1,2,3,4,5,6]; var mapRes = numbers.map((item,index,array)=>(item*2)) alert(mapRes);//[2,4,6,8,12]
    • 原陣列不改變
    • 返回一個新的組合陣列
  • forEach():對陣列的每一項給定一個函式，這個方法沒有任何的返回值。
    • 功能 遍歷陣列每項，對陣列的每一項給定一個函式
    • 引數 有兩個一個是驗證的函式，另個一（可選）當前函式的this 上下文，例
      • var numbers = [1,2,3,4,5,6]; numbers.forEach((item,index,array)={ // 執行某些操作 })
    • 原陣列不改變
    • 返回 無

遞迴方法

ECMAScript5 還新增了兩個遞迴陣列方法：redurce()和redurceRight()。這兩個方法都會迭代陣列的所有項，然後構建一個最終返回的值。其中，redurce()方法從陣列的第一項開始，逐個遍歷到最後。而redurceRight()則從陣列的最後一項開始，向前遍歷到第一項

  • reduce()

    • 功能 從前端面迭代陣列的所有項，然後構建一個最終返回的值
    • 引數 有兩個一個是函式，另個一（可選）當前函式的第一次的第一個引數 ，例 *var values = [1,2,3,4,5]; var sum = values.reduce((prev,cur,index,array)=>(prev+cur)) alert(sum) ;// 15
    • 原陣列不改變
    • 返回 累計的和

  • reduceRight()

    • 功能 從末端面迭代陣列的所有項，然後構建一個最終返回的值
    • 引數 有兩個一個是函式，另個一（可選）當前函式的第一次的第一個引數 ，例 *var values = [1,2,3,4,5]; var sum = values.而reduceRight((prev,cur,index,array)=>(prev+cur)) alert(sum) ;// 15
    • 原陣列不改變
    • 返回 累計的和

相關文章