平時工做時一些數組經常使用方法，以及操做總結

時間 2020-01-10

標籤平時一些數組經常使用方法以及總結简体版

原文原文鏈接

平時工做中，少不了使用數組，對於後端的返回數據有時若不是符合dom樹渲染的數據前端仍是會本身從新用後端返回數據重組來進行dom渲染。
廢話很少說，咱們先來看看數組所包含的方法，也許不是很全，不足處請你們補充，你們相互成長才是寫這篇文章的目的不是嗎？！
ES5中Array經常使用API：
一、join()
二、push()
三、pop()
四、splice()
五、indexOf()
六、lastIndexOf()
七、reverse()
八、slice()
九、every()
十、some()
十一、reduce()
十二、reduceRight()
1三、forEach()
1四、map()
1五、filter()
1六、sort()
1七、concat()
1八、shift()
1九、unshift()
20、toLocaleString()
ES6新增：
一、擴展運算符 ...的使用
二、Array.form()
三、Array.of()
四、copyWithin()
五、find（）
六、findIndex()
七、fill()
八、entries()
九、flat()
十、flatMap()
十一、keys()
十二、values()
1三、數組的空位
tips：es6的好多用法本菜雞還不熟悉，中間借鑑了阮一峯大神的API（沒錯就是連目錄都是抄的）中間加了一些本身使用時的心得見解，你們噴個人時候輕點(我就是抄了，大家說我我也不改)附上阮一峯大神撰寫的文檔連接http://es6.ruanyifeng.com/#do...
廢話很少說直接上正題前端

1:數組對象的join方法：
join方法是將數組對象中的，每一個對象轉換成字符串，並用傳入參數字符串進行拼接，並返回一個字符串es6

let Arr = [1,2,3,4]
    console.log(Arr.join(',')) //1,2,3,4
    console.log(Arr.join('-')) //1-2-3-4
    let Arr2 = [1,2,[3,4],[5,6]]
    console.log(Arr2.join(',')) //1,2,3,4,5,6
    //若數組中有對象，則會對對象先使用tostring方法，因此對象將會被轉換成[object Object]，通常不會這麼作也很少作說明
    let Arr3 =[1,2,{name:'name1',value:1}]//1,2,[object Object]
    console.log(Arr3.join(','))

2:數組對象的push方法：
該方法相信你們都很熟悉，是向數組末尾追加元素，可是其實這個方法是有一個反參的，你們可能沒有注意後端

let arr = [1,2,3]
console.log(`push返回參數:${arr.push(4)} 追加後的數組對象:${arr} `)//打印結果 push返回參數:4 追加後的數組對象:1,2,3,4
    
    // 注意到打印出的arr.push(4)的反參4沒有，沒錯就是返回拼接後的數組的長度(length屬性)

//數組對象是能夠接受全部對象的，因此push方法的入參是能夠是全部合法對象(Symbol對象這塊好像是不行，或者說是我沒有轉換)
    let arr = [1,2]
    arr.push('String')
    arr.push(Symbol('symbol'))
    arr.push({name:'testName',value:'Saurfang'})
    arr.push([3,4])
    arr.push(undefined)
    arr.push(null)
    arr.push(NaN)
    arr.push(new Date())
    console.dir(arr)

輸出結果：api

2：數組對象的pop方法：
pop() 方法將刪除 arrayObject 的最後一個元素，把數組長度減 1，而且返回它刪除的元素的值。若是數組已經爲空，則 pop() 不改變數組，並返回 undefined 值。數組

//pop
    let arr = [1,2,3]
    console.log(arr.pop()) //3  返回的是刪除的元素
    console.log(arr) //[1, 2]   刪除最後一位元素的數組
    let arr2 = [1]
    console.log(arr2.pop())   //1
    console.log(arr2)         //[]
    let arr3 = []
    console.log(arr3.pop())   //undefined
    console.log(arr3)         //[]

3：數組對象的splice()方法
splice() 方法向/從數組中添加/刪除項目，而後返回被刪除的項目
splice方法有多個參數沒必要要每一個都填寫，具體參數我借用w3cschool給咱們的文檔說明dom

語法arrayObject.splice(index,howmany,item1,.....,itemX)

參數以及用法

index：必需。整數，規定添加/刪除項目的位置，使用負數可從數組結尾處規定位置。
howmany：必需。要刪除的項目數量。若是設置爲 0，則不會刪除項目。
item1, ..., itemX：可選。向數組添加的新項目。

//splice
    let arr =[1,2,3,4]
    // arr.splice(1,2) //從數組indexOf爲1的位置刪除兩個元素並返回一個數組
    console.log(arr.splice(1,2))// [2, 3]
    console.log(arr)  //[1,4]
    let arr2=[1,2,3,4]
    arr2.splice(1,2,666,777,888) //從arr2indexOf爲1的位置刪除兩個元素並插入666，777，888三個元素
    console.log(arr2) //[1, 666, 777, 888, 4]
    let arr3 = [1,2,3,4]
    arr3.splice(-1,1,7777)//從arr3末尾刪除1個元素並在刪除元素位置插入7777
    console.log(arr3) //[1, 2, 3, 7777]
    let arr4 = [1,2,3,4]
    arr4.splice(-1,0,6666)//從arr4末尾刪除0個元素並在刪除元素位置插入7777
    console.log(arr4)  //[1, 2, 3, 6666, 4]
    let arr5 = [1,2,3,4]
    arr5.splice(-2,3,9999)
    console.log(arr5)//[1, 2, 9999]

5：數組對象的indexOf方法:函數

返回輸入參數在數組中的位置(第一次出現)

//indexOf

    let arr =['a','b','c','d']
    console.log(arr.indexOf('c'))  //2
    let arr2 = ['a','b','b','b']
    console.log(arr2.indexOf('b')) //1

6：數組對象的lastIndexOf方法：編碼

返回輸入參數在數組中的位置(最後一次出現)
用法就很少作闡述了和indexOf()同樣

7：數組對象的reverse方法：spa

顛倒數組中元素的位置

//reverse
    let arr = [1,2,3,4]
    arr.reverse()
    console.log(arr) //[4, 3, 2, 1]

8：數組對象的slice方法：code

從已有的數組中返回選定的元素
用法：arrayObject.slice(start,end)

start：必需。規定從何處開始選取。若是是負數，那麼它規定從數組尾部開始算起的位置。也就是說，-1 指最後一個元素，-2 指倒數第二個元素，以此類推。
可選。規定從何處結束選取。該參數是數組片段結束處的數組下標。若是沒有指定該參數，那麼切分的數組包含從 start 到數組結束的全部元素。若是這個參數是負數，那麼它規定的是從數組尾部開始算起的元素。

//slice
    let arr = [1,2,3,4]
    console.log(arr.slice(0,2))//[1, 2] //返回arr中第1個元素開始截取兩個長度的數組長度
    console.log(arr)//[1, 2, 3, 4]//該方法與splice方法不一樣，只是返回其中一截的數組長度並拼接成數組返回，並不會改變原數組

9：數組對象的every方法
檢索數組對象中每一個元素是否都符合要求

let arr = [10,11,12,13]
    console.log(arr.every(i=>i>10))//判斷arr中全部元素是否大於10//false
    console.log(arr.every(i=>i>9)) //判斷arr中全部元素是否大於9//true

10：數組對象的some方法
檢索數組對象中是否有符合規則的元素

let arr = [10,11,12,13]
    console.log(arr.some(i=>i<9)) //判斷arr中是否有元素小於9  //false
    console.log(arr.some(i=>i<11)) //判斷arr中是否有元素小於11 //true

11：數組對象的reduce方法
累加器方法，和forEach方法有點相似對數組中對象進行遍歷計算並返回最終結果

//reduce
    let arr = [1,2,3,4,5,6,7,8,9,10]

    console.log( '結果:'+
        arr.reduce((x,y)=>{
            console.log(`x=>${x}`)
            console.log(`y=>${y}`)
            return x+y
        })
    ) //55

從輸出結果來看大家能夠發現第一次運行回調函數的時候x爲1，y爲2，而第二次x=3，y=3，第三次輸出爲x=6，y=4，由此能夠看出第一次x等於數組的第一個元素值，第二個元素爲數組的第二個元素值，而日後，x爲回調函數返回的值，y爲arr[次數]的值

11：數組對象的reduceRight方法

//reduceRight
    let arr = [1,2,3,4,5,6,7,8,9,10]

    console.log( '結果:'+
        arr.reduceRight((x,y)=>{
            console.log(`x=>${x}`)
            console.log(`y=>${y}`)
            return x+y
        })
    ) //55

從輸出結果來看能夠看出，reduceRight方法與reduce方法同樣，以後過是從末尾計算追加

12：數組對象的forEach方法
方法用於調用數組的每一個元素，並將元素傳遞給回調函數

let arr = ['aaa','ccc','ddd','eee','bbb']
    arr.forEach((currentValue,index,arr)=>{
        console.log(`index:${index},value:${currentValue}`)
        console.log(arr)
    })
    /*   此爲輸出結果
         index:0,value:aaa
         ['aaa','ccc','ddd','eee','bbb']...
         forEach方法對數組中的元素進行遍歷，進行操做回調函數中的currentValue爲遍歷的當前元素值，index爲當前元素索引，arr是當前元素返回的數組
         forEach 方法用於調用數組的每一個元素，並將元素傳遞給回調函數。
         若是對數組中的每一個元素都要進行操做或者判斷則可使用此方法，若是遍歷須要回返則不建議使用

    */

過多的我就不說了，這個平時用的比較多你們基本上都知道用法
13：數組對象的map方法
這個和forEach方法很像，區別我寫在代碼備註裏了
`let arr = ['aaa','ccc','ddd','eee','bbb']

console.log(arr.map((currentValue,index,arr)=>{
    
    return currentValue+index
}))
/*   此爲輸出結果
        [aaa1,ccc2,ddd3,eee4,bbb5]
     map方法和forEach方法很像回調方法的都是必傳當前遍歷元素的值與選填的當前元素索引選填的當前元素所在數組惟一不一樣的是forEach方法沒有返回值可是map方法卻會返回一個新數組這用於要對數組中加入一些新子元素很是方便（操做數組）
*/`

14:數組對象的filter方法
過濾器方法，過濾出數組對象中符合自定義規則的元素並組合成一個新數組返回

//filter
    let arr = [111,222,333,444,555,666]
    console.log(
        arr.filter((currentValue,index,arr)=>{
            return currentValue>333
        })
    ) //輸出結果 [444,555,666]
    /**
     * filter方法的入參用法用forEach map同樣都是currentValue必填，index，arr選填
     * filter將會返回一個過濾掉不符合自定義規則的數組的新數組
     * */

15:數組對象的sort方法

多用於數組的排序可傳入一個回調函數來定義排序方式，通常在比較Number元素大小時可用，若是數組中元素都是Number類型而又沒有傳入回調函數則返回原數組，說白了不傳回調函數比較大小隻對String類型有效，因此又想不傳入回調函數又想排序純Number數組就要先把全部數組元素轉換成String類型進行排序，廢話很少說直接上代碼

let arr = [333,11,666,2,8,123,0]
    let arr2 = ['zzz','eee','sss','aaa','ddd']
    console.log(arr2.sort())  // ["aaa", "ddd", "eee", "sss", "zzz"]
    console.log(arr.sort()) //[0, 11, 123, 2, 333, 666, 8]
    //因而可知不傳回調函數對純Number類型的數組是不生效的，可見sort方法的排序方式是經過編碼來對數組元素進行排序的

    //純Number類型數組從小到大排序
    console.log(arr.sort((a,f)=>{
        return a-f
    }))//[0, 2, 8, 11, 123, 333, 666]
    //純Number類型數組從大到小排序
    console.log(arr.sort((a,f)=>{
        return -(a-f)
    }))//[666, 333, 123, 11, 8, 2, 0]

16：數組對象的concat方法：
這方法如今不怎麼用了吧仍是講一講，該方法用於拼接數組，可傳入多個參數（至少傳入一個）返回一個新數組，若是傳入的是一個數組則會拼接入數組中的元素而不是數組

let arr = [1,2,3,4,5]
    console.log(arr.concat(6,7,8,[9,10],[11],[12,13]))//[1,2,3,4,5,6,7,8,9,10,11,12,13]

過多的我也不講了，ES6中有更好用的方法，我會在下一篇博客中說明

17：數組對象的shift方法：

這個不太好用我就簡單說明，畢竟一家人最重要的是整整齊齊
若是數組是空的，那麼 shift() 方法將不進行任何操做，返回 undefined 值。

//shift
    let arr = [1,2,3,4,5]
    console.log(arr.shift())  //1
    console.log(arr)          //[2,3,4,5]
    //注意啦，這個方法會改變原數組長度的，通常場合都用不到

18：數組對象的unshift方法：
unshift() 方法將把它的參數插入 arrayObject 的頭部，並將已經存在的元素順次地移到較高的下標處，以便留出空間。該方法的第一個參數將成爲數組的新元素 0，若是還有第二個參數，它將成爲新的元素 1，以此類推。（這段我直接抄的由於不知道如何表達）
廢話很少說，上代碼

//unshift
    let arr = [1,2,3,4,5]
    console.log(arr.unshift(6)) //6
    console.log(arr.unshift([7,8,9]))//7

    console.log(arr)  //[[7,8,9],6,1,2,3,4,5]
    //unshift方法返回的是新數組長度，而shift方法是返回第一個被刪除的元素，這兩個方法都會改變數組長度，而傳入的參數若是是個數組將不會和concat方法同樣將傳入數組元素打散

好啦，我能想的起來的數組方法只有這麼多了，這些都是es6以前的，es6中有好多新的好用的操做數組的api我將在下一篇博客中講，同時也會說一些我在平時工做中操做數組的騷操做，但願你們能指正個人意見，寫博客的目的不就是共同成長嗎？我如今只是只小菜雞望諸君多多提點同時望諸君代碼永無bug