js數組的方法

Javascript原生方法

注意:js數組每一項能夠保存任何類型的數據，好比第一個元素是字符串，第二個元素是數字，第三個元素是對象

建立數組

tips: 建議使用數組字面量方式【簡單】

var colors = new Array() var colors = new Array('red','blue') var colors = []; var colors = ['red','blue'];

檢測數組

對於一個網頁或一個全局做用域，能夠經過以下方法

if(arr instanceof Array){ //對數組執行某些操做 }

網頁中包含多個框架，經過以下ES5方法檢測

if(Array.isArray(arr)){ //對數組執行某些操做 }

轉換方法

arr.valueOf()

var colors = ['red','blue','green'] colors.valueOf() //['red','blue','green']

arr.toString()

var colors = ['red','blue','green'] colors.toString() //"red,blue,green"

tips: arr.toString() 與 arr.join()輸出相同，不過join裏能夠輸入其它連接符

push、pop、unshift、shift

arr.push(item)
接受任意數量的參數，添加到數組末尾，返回新數組的長度

var colors = ['red'] colors.push('blue','green'); //3

arr.pop()
刪除數組最後一項，返回刪除的項

var colors = ['blue','green'] colors.pop() //green

arr.unshift()
接受任意數量的參數，添加到數組頭部，返回新數組的長度

var colors = ['red'] colors.unshift('green') //2

arr.shift()
刪除數組第一項，返回刪除的項

var colors = ['blue','green'] colors.shift() //blue

reverse、sort、concat、slice

arr.reverse()
反轉數組的順序，並返回從新排序以後的數組， 原數組會被改變

var arr1 = [1,2,3,'red','blue'] arr1.reverse() //["blue", "red", 3, 2, 1]

arr.sort()
若是不傳參數，默認狀況下數組內的元素會被轉換爲字符串進行比較，所以通常不推薦直接使用默認的arr.sort()進行排序。
返回值爲排序後的新數組。原數組會被改變
注意：sort裏接收一個比較參數

var b = [1,2,3] //升序 b.sort((a,b)=>a-b) //[1, 2, 3] //降序 b.sort((a,b)=>b-a) //[3, 2, 1]

sort擴展(非數字類型排序，對象裏的某個key值排序)

arr.concat()
沒有傳遞參數，那麼只是複製當前數組並返回副本，原數組不變；
傳遞一個元素（數組）或多個元素（數組）,會將其合併到arr中，返回新數組，原數組不變

var colors = ['red','blue','green'] colors.concat('gray',['a','green']) //["red", "blue", "green", "gray", "a", "green"] console.log(colors) // ["red", "blue", "green"]

tips: js數組複製

arr.concat()    //原生 [...arr] //ES6 Array.from(arr) //ES6 $.extend(arr) //JQ

arr.slice
剪切數組，返回剪切以後的數組，元素不會改變
一、傳入一個參數，表示起始位置，結束位置爲最末尾

var colors = ['red','blue','green'] colors.slice(2) //['green']

二、傳入2個參數，表示起始位置與結束位置，但不包括結束位置所在的元素

var colors = ['red','blue','green'] colors.slice(1,2) //['blue']

splice()

刪除：arr.splice(index, num)
傳入兩個參數，第一個爲位置（ 數組下標），第二個爲刪除的項數，能夠刪除任意項，返回刪除元素組成的數組，原數組變了

var colors = ['red','blue','green'] colors.splice(1,1) //['blue']

插入：arr.splice(index,0,item)
傳入3個參數， [起始位置（ 數組下標） | 要刪除的項數 爲0 | 要插入的元素]， 最終返回刪除掉的元素組成的數組，由於這裏刪除項數爲0，所以會返回空數組

var colors = ['red','blue','green'] colors.splice(1,0,'gray') //[] console.log(colors) // ['red','gray','blue','green']

替換：arr.splice(index, num, item)
傳入3個參數，[起始位置 | 要刪除的項數 | 要插入的任意項數]， 最終返回刪除掉的元素組成的數組

var colors = ["red", "gray", "blue", "green"] colors.splice(2,2,'yellow') // ["blue", "green"] console.log(colors); //["red", "gray", "yellow"]

tips:這個方法會由於參數的不一樣而實現不一樣的功能

查找元素

arr.indexOf()
驗證數組中是否含有某個元素，返回第一個匹配到的元素在數組中所在的位置，若是沒有，則返回 -1

var colors = ["red", "gray", "yellow"] colors.indexOf('gray') // 1 colors.indexOf('mm') //-1

arr.lastIndexOf()
驗證數組中是否含有某個元素，不過是從數組尾部開始查找，返回第一個匹配到的元素所在的位置，若是沒有，則返回-1

var colors = ["red", "gray", "yellow","gray"] colors.indexOf('gray') // 3 colors.lastIndexOf('mm') //-1

迭代方法

ES5定義了5個迭代方法，每一個方法接收2個參數----》[要在每一項上運行的函數 | 運行該函數的做用域對象（可選）]
運行的函數包括3個參數 ---》 [數組項的值 | 該項在數組中的位置 | 數組對象自己]

arr.every()
檢查數組中的項是否知足某個條件，傳入的函數對每一項都返回true,則返回true

var nums = [1,2,3,4,5,4,3,2,1] nums.every((item, index, arr)=> item >2 ) //false

arr.some()
檢查數組中的項是否知足某個條件，只要傳入的函數對數組中某一項返回true,則返回true

var nums = [1,2,3,4,5,4,3,2,1] nums.some((item, index, arr)=> item >2 ) //true

arr.filter()
對數組中的每一項運行給定函數，返回該函數會返回true的項組成的新數組

//返回nums中全部值大於2的數組 var nums = [1,2,3,4,5,4,3,2,1] nums.filter((item, index, arr)=> item >2 ) //[3, 4, 5, 4, 3]

arr.map()
對數組中的每一項運行給定函數，返回每次函數調用的結果組成的新數組

//返回nums中每一項乘以2的數組 var nums = [1,2,3,4,5,4,3,2,1] nums.map((item, index, arr)=> item * 2 ) // [2, 4, 6, 8, 10, 8, 6, 4, 2]

arr.forEach()
對數組中的每一項運行給定函數，這個方法沒有返回值

//返回nums中每一項乘以2的數組 var nums = [1,2,3,4,5,4,3,2,1] nums.forEach((item, index, arr)=> item * 2 ) // undefined

tips： map、forEach裏不可使用continue、break ,每一項都會執行，若是遍歷中要用到continue或break提高效率，則可使用for()循環 或 for...of..循環

歸併操做

每一個方法接收兩個參數[在每一項上調用的函數 | 做爲歸併基礎的初始值（可選）],都會迭代數組每一項，返回一個最終的值
函數接收4個參數[前一個值 | 當前值 | 項的索引 | 數組對象自己]

arr.reduce()
從左開始

//求數組全部元素之和 var nums = [1,2,3,4,5] nums.reduce((prev,cur,index,arr)=>prev+cur) //15 

arr.reduceRight()
從右開始

//求數組全部元素之和 var nums = [1,2,3,4,5] nums.reduceRight((prev,cur,index,arr)=>prev+cur) //15 

ES6數組方法擴展

一、求一個數組中最大元素

因爲js不提供求數組最大元素的函數，因此只能套用Math.max函數將數組轉爲一個參數序列，而後求最大值；有了擴展運算符之後就能夠直接使用了Math.max了

//ES5的寫法 Math.max.apply(null,[1,3,6]) ///6 //ES6的寫法 Math.max(...[1,3,6]) //6

二、經過push函數將一個數組添加到另外一個數組的尾部

ES5的寫法中，push的參數不能夠是數組，因此只好經過apply方法變通使用push方法；有了擴展運算符，能夠直接將數組傳入push方法中

//ES5的寫法 var arr1 = [1,2] var arr2 = [4,5] Array.prototype.push.apply(arr1,arr2) //返回新數組長度，arr1改變 //ES6的寫法 var arr1 = [1,2] var arr2 = [4,5] arr1.push(...arr2) //返回新數組長度，arr1改變

三、合併數組

//ES5寫法 var arr = [4,5] [1,2].concat(arr) //[1, 2, 4, 5] //ES6寫法 var arr = [4,5] [1,2,...arr]

四、Array.from()妙用

//數組去重 function combine(){ let arr = [].concat.apply([], arguments); //沒有去重複的新數組 return Array.from(new Set(arr)); } var m = [1, 2, 2], n = [2,3,3]; console.log(combine(m,n)); // [1, 2, 3] //遍歷Nodelist對象 let ps = document.querySelectorAll('p') Array.from(ps).forEach(function(p){ console.log(p) }) //將字符串轉化爲數組 Array.from('hello') //["h", "e", "l", "l", "o"]

五、Array.of()
替代Array() 或 new Array(),而且不存在參數不一樣而致使的重載

Array.of(2,3,5) //[2,3,5] Array.of(2) //[2] Array.of(2).length //1

六、arr.copyWithin()
將當前數組內部制定位置的成員複製到其餘位置，返回當前新數組，原數組改變
接收三個參數[從該位置開始替換 | 從該位置開始讀取數據 | 到該位置中止讀取數據]

//將4,5移動到前兩位 [1,2,3,4,5].copyWithin(0,3) //[4,5,3,4,5]

七、arr.find() arr.findIndex()
找出第一個符合條件的數組成員，它參數是一個函數，每個成員執行這個函數，找到返回true,沒找到返回undefined
函數的參數[當前值 | 當前的位置 | 原數組]

[1,4,9,10,15].find((item, index, arr)=>{ return item > 9; }) //10 [1,4,9,10,15].findIndex((item, index, arr)=>{ return item > 10; }) //4

八、arr.fill()
用給定的值填充一個數組

['a','b','c'].fill(7) //[7,7,7] ['a','b','c'].fill(7,1,2) //['a',7,'c']

九、arr.includes()
數組是否包含某個值，返回true 或 false

[1,2,3].includes(2) //true

十、for...of...
遍歷數組元素

for(let item of colors){ console.log(item) // red,gray,yellow } 

tips:裏面可使用break continue提高效率