Javascript中經常使用數組方法總結（含es6）

數組(Array)是javascript中很是重要的數據結構之一，在咱們平常開發中能熟練使用數組的方法也是必須的，印象中數組的方法有不少，es5,es6也新增不少數組方法，今天就把這些零散的知識點都整理出來，和各位道友共同提升。

數組中的每一個元素對應一個索引（從0開始），同時每一個數組有本身的length屬性（等於該數組的元素個數(0~2^32-1)），每一個數組都指向Array構造函數的原型（Array.prototype）,即每一個數組能夠調用原型上定義的方法，咱們能夠在控制檯直接打印出Array.prototype:

怎麼樣，咱們平時所用到的數組方法都在這裏呢，爲了方便記憶，我對這些方法作了些簡單的分類：

會改變數組自己的方法：

1.棧方法：

ECMAScript數組提供了一種讓數組的行爲相似於其餘數據結構的方法。也就是說，可讓數組像棧同樣，能夠限制插入和刪除項的數據結構。棧是一種數據結構(後進先出)，也就是說最新添加的元素最先被移除。而棧中元素的插入(或叫推入)和移除(或叫彈出)，只發生在棧的頂部。ECMAScript爲數組專門提供了 push() 和 pop()方法。

1.push()方法能夠接收任意數量的參數，把它們逐個添加到數組的末尾，並返回修改後數組的長度。

var arr = [];
    var length = arr.push(1,2,3);
    console.log("數組的長度爲:",length,"arr:",arr)

2.pop() 方法則從數組末尾移除最後一個元素，減小數組的length值，而後返回移除的元素。

var arr = [3,2,1];
    var temp = arr.pop();
    console.log("取下的元素爲:",temp,"arr:",arr)

2.隊列方法

隊列在數組的末端添加元素，從數組的前端移除元素。經過push() 向數組末端添加一個元素，而後經過shift() 方法從數組前端移除一個元素。

shift() 方法能夠移除數組首位元素，而且返回取下的元素。

var arr = [9,3,2,1];
    var temp = arr.shift();
    console.log("取下的元素爲:",temp,"arr:",arr)

3.其餘數組方法

unshift() 用於在數組的開頭增長一個或多個元素，並返回數組的新長度。

var arr = [3,2,1];
    var temp = arr.unshift(5,4);
    console.log("數組的長度爲:",temp,"arr:",arr)

reverse() 顛倒數組中元素的排列順序，即原先的第一個變爲最後一個，原先的最後一個變爲第一個,並返回對數組的引用。

var arr = [3,2,1];
    arr.reverse();
    console.log("逆序後的數組爲:",arr)

sort() 對數組元素進行排序，並返回當前數組的引用。
若是調用該方法時沒有使用參數，將按字母順序對數組中的元素進行排序，說得更精確點，是按照字符編碼的順序進行排序。要實現這一點，首先應把數組的元素都轉換成字符串（若有必要），以便進行比較。
若是想按照其餘標準進行排序，就須要提供比較函數，該函數要比較兩個值，而後返回一個用於說明這兩個值的相對順序的數字。比較函數應該具備兩個參數 a 和 b，其返回值以下：

• 若 a 小於 b，在排序後的數組中 a 應該出如今 b 以前，則返回一個小於 0 的值。
• 若 a 等於 b，則返回 0。

• 若 a 大於 b，則返回一個大於 0 的值。

  var arr1 = [11,2,5,54,222,9];
     var arr2 = [11,2,5,54,222,9];
     function sortBy(a,b){
         return a - b;
     }
     arr1.sort();
     arr2.sort(sortBy);
     console.log("沒有用比較函數:",arr1)
     console.log("使用了比較函數:",arr2)

  

排序思想應該是相似於冒泡排序思想的，經過先後相鄰的兩個數進行比較，例如80與16，這時將80做爲方法函數sortNum(a,b)參數列表中的a，16做爲b，經過語句return a - b;返回一個數值，80-16=64,  若返回值>=1，則表示 a在排序後的序列中出如今 b 以後,因此80會在排序後出如今16以後，此時，新的數據序列爲16,80,50,6,100,1，再將80做爲a，50做爲b進行上述的作法，第一輪下來，100就會排在最後，又開始新的一輪排序，就是相似於冒泡排序的思想吧。

splice() 在任意的位置給數組添加或刪除任意個元素。返回被刪除的元素組成的一個數組。splice()方法因爲其參數的特殊性，能夠完成增、刪、改三個功能:splice()方法第一個參數爲添加/刪除項目的位置，第二個參數爲刪除元素的數量，以後的參數爲可選項，爲向數組新添加的元素：

var arr = [1,2,3];
    var temp = arr.splice(1,2,4,5);
    console.log("刪除的元素組成的數組:",temp,"修改後的數組:",arr);

不改變原數組的方法：

concat() 返回一個由當前數組和其它若干個數組或者若干個非數組值組合而成的新數組。淺拷貝。

var arr1 = [1,2,3];
    var arr2 = [4,5,6];
    var temp = arr1.concat(arr2,7,8);
    console.log("鏈接後的新數組:",temp);

join() 方法用於把數組中的全部元素放入一個字符串。參數可選，若不傳參數則使用逗號分隔：

var arr1 = [1,2,3];
    var arr2 = [4,5,6];
    var str = arr1.join("+");
    var str2 = arr2.join();
    console.log("使用+鏈接:",str,"未傳參數:",str2);

slice() 抽取當前數組中的一段元素組合成一個新數組。包含起始位置元素，不包含結束位置元素。

var arr1 = [1,2,3,4,5,6];
    var temp = arr1.slice(2,5)
    console.log("新數組爲:",temp);

toString() 返回一個由全部數組元素組合而成的字符串。遮蔽了原型鏈上的 Object.prototype.toString() 方法。

var arr = [9,3,2,1];
var temp = arr.toString();
console.log(temp)

ES5新增數組方法：

forEach() 對數組的每一個元素執行一次提供的函數。forEach() 對於空數組是不會執行回調函數的。且沒法提早終止循環：

var arr1 = [1,2,3,4,5,6];
    arr1.forEach((val,index,arr) =>{
        console.log("第"+index+"個元素:",val);
    })

some() 若是數組中至少有一個元素知足測試函數，則返回 true，不然返回 false。

var arr1 = [1,2,3,4,5,6];
    var flag = arr1.some((val,index,arr) =>{
        return val > 5
    })
    console.log(flag)   //true

every() 若是數組中的每個元素都知足測試函數，則返回 true，不然返回 false。

var arr1 = [1,2,3,4,5,6];
    var flag = arr1.every((val,index,arr) =>{
        return val > 5
    })
    console.log(flag)   //false

map() 返回一個由回調函數的返回值組成的新數組。不改變原數組

var arr1 = [1,2,3,4,5,6];
    var temp = arr1.map((val,index,arr) =>{
        return val * 2;
    })
    console.log("新數組爲:",temp)

filter() 將全部在過濾函數中返回 true 的數組元素放進一個新數組中並返回。不改變原數組

var arr1 = [1,2,3,4,5,6];
    var temp = arr1.filter((val,index,arr) =>{
        return val > 5;
    })
    console.log("新數組爲:",temp)

reduce() 從左到右爲每一個數組元素執行一次回調函數，並把上次回調函數的返回值放在一個暫存器中傳給下次回調函數，並返回最後一次回調函數的返回值。
好比，用reduce對數組計算累加後的結果：

var arr = [1,2,3,4,5,6];
    var temp = arr.reduce((prev,cur,index,arr) =>{
        console.log("上一次的值:",prev,"當前值:",cur,"當前下標:",index)
        return prev + cur;
    })
    console.log("計算後的結果:",temp)

注意，咱們若是沒有指定初始值，從下標1開始，若是咱們指定了初始值，則從下標0開始，如指定初始值爲2：

var arr = [1,2,3,4,5,6];
    var temp = arr.reduce((prev,cur,index,arr) =>{
        console.log("上一次的值:",prev,"當前值:",cur,"當前下標:",index)
        return prev + cur;
    },2)
    console.log("計算後的結果:",temp)

indexOf() 返回數組中第一個與指定值相等的元素的索引，若是找不到這樣的元素，則返回-1 。

var arr = [1,2,2,2,5,6];
    var temp = arr.indexOf(2);
    var temp2 = arr.indexOf(7);
    console.log("查找2:",temp,"查找7:",temp2)

lastIndexOf() 返回數組中最後一個（從右邊數第一個）與指定值相等的元素的索引，若是找不到這樣的元素，則返回 -1。

var arr = [1,2,2,2,5,6];
    var temp = arr.lastIndexOf(2);
    var temp2 = arr.lastIndexOf(7);
    console.log("查找2:",temp,"查找7:",temp2)

ES6新增數組方法：

1.擴展運算符(...) ...將數組變成一個參數序列

var arr = [1,2,3,4,5,6];
    console.log(...arr)
    console.log([...arr])

注意...arr只是參數序列，[...arr]纔是數組。關於擴展運算符的使用場景在另外一篇文章單獨探討。
2.Array.form() 可將僞數組對象和可迭代對象（iterable）（包括ES6新增的數據結構Set和Map）轉換爲數組。
3.copyWithin() copyWithin()方法淺複製數組的一部分到同一數組中的另外一個位置，並返回該數組。

var arr = [1,2,3,4,5,6];
    var temp = arr.copyWithin(1,2,4);
    console.log("新數組爲:",temp,arr)

4.find()和findIndex()
find()方法返回數組中知足提供的測試函數的第一個元素的值。不然返回 undefined。
findIndex()方法返回數組中知足提供的測試函數的第一個元素的索引。不然返回-1 。

var arr = [1,2,3,4,5,6];
    var flag = arr.find((val,index,arr) =>{
        return val > 5
    });
    var index = arr.findIndex((val,index,arr) =>{
        return val > 5
    });
    console.log("第一個知足條件的值爲:",flag,"下標爲:",index)

5.fill() fill()方法用一個固定值填充一個數組中從起始索引到終止索引內的所有元素，若不指定終止索引則一直填充到數組末尾，不指定起始和終止索引填充所有數組元素

var arr = [1,2,3,4,5,6];
    var temp = arr.fill(0,3,5)
    console.log("填充後的數組:",temp)

6.includes() includes()方法用來判斷一個數組是否包含一個指定的值，根據狀況，若是包含則返回true，不然返回false。

var arr = [1,2,3,4,5,6];
    var temp = arr.includes(3)
    var temp2 = arr.includes(8)
    console.log("是否包含3",temp,"是否包含8:",temp2)

總結的都是些最基本的用法，千里之行始於足下，從新把基礎夯實一下，若是存在錯誤或者表達不當，還望及時告知。