前言
Array 類型是除了 Object 類型之外又是一個特別經常用的一個類型了，當然數組在其他的語言中都是不可缺少的屬性，我們都知道不管 js 還是其他類的語言的數組都是數據的有序列表，但是在 javaScript 中的數組是有一定的區別的，具體的區別就是： js 中的數組保存的數據可以是任何類型的數據，比如，我可以在第一個位置來保存數字，第二個位置保存字符串，第三和第四保存一個對象都完全OK，同時我還可以非常方便的操作數組的大小，添加新數據長度也會自動增長，動態調整什么的都是沒有任何問題滴！而 c 或者其他的語言的數組和 js的數組一對比就完全看出區別了，至于什么是數組，怎么創建、怎么用的等等基礎用法這個就不用說了俺也默認你都知道的！
正文
我們日常對數據的各種操作都離不開數組，可以說數組的使用之多，接口返回的數據等等大都是使用到了數組
一、檢測數組
對于數組我們已經知道了什么是數組了，那么檢測數組又是怎么檢測的呢？
其實檢測數組的兩個方法：
01、 instanceof
let arr = []console.log( arr instanceof Array)//true
instanceof 的判斷其實就是判斷倆個操作數的構造函數的prototype屬性，在一個全局執行環境下 instanceof這個當然可以判斷數組的類型，那假如一個網頁同時有倆個框架下的情況下呢，我從一個框架傳一個數組到另一個框架中，而我從一個框架傳入的數組和這個框架中的數組卻是存在不一樣的構造函數，使用 instanceof 判斷是否為數組的時候就會出現問題，那又該怎么辦呢？
02、 Array.isArray
可以說 Array.isArray() 方法就是為了針對這個問題而新增的，這個方法不管你從哪里來到哪里去，只要判斷你是不是一個 Array 類型，看粟子：
let arr = [];console.log(Array.isArray(arr))//true
二、數組方法
當數組存有了我們需要的數據，然后就是對數據進行各種各樣的操作，而數組為我們提供了以下的方法(常用)
01、Array.prototype.join()
join() 方法將數組（類數組對象）的所以元素都連接成一個字符串然后返回這個字符串，一個元素的情況下直接返回
粟子：
let arr = ['apple','tomatoes','banana']console.log(arr.join())//apple,tomatoes,bananaconsole.log(arr.join('.'))//apple.tomatoes.bananaconsole.log(arr.join('-'))//apple-tomatoes-bananalet arr1 = ['apple']console.log(arr1.join('+'))//apple從例子可以看出，當什么都不添加的情況下的時候直接返回所有元素的字符串，添加分割符的情況時候就為元素直接添加一個新添加的字符，當數組只有一個元素的時候，無論添加什么都是直接返回該元素。
02、Array.prototype.push()
push() 方法用于將一個或者多個元素添加到數組的末端，返回數組的新的長度
又一個粟子：
let arr = ['apple','tomatoes','banana']console.log(arr.push('orange'))//4console.log(arr.push('pear','peach'))//6console.log(arr);//[ 'apple', 'tomatoes', 'banana', 'orange', 'pear', 'peach' ]03、Array.prototype.pop()
pop() 方法將數組的最后一個元素進行刪除，然后會返回刪除的改元素。該方法會改變數組的長度，空數組的情況下會返回 undefined
對方表示不想說話并扔了一個粟子：
let arr = [ 'apple', 'tomatoes', 'banana', 'orange', 'pear' ]console.log(arr.pop())//pearconsole.log(arr.pop())//orangeconsole.log(arr)//[ 'apple', 'tomatoes', 'banana' ]
04、Array.prototype.concat()
concat 方法是合并兩個或者多個數組，然后返回一個合并的新數組，但是并不改變原來的數組
接到新的粟子：
let arr = [ 'apple', 'tomatoes' ]let arr1 = ['banana', 'orange', 'pear']console.log(arr.concat(arr1));//[ 'apple', 'tomatoes', 'banana', 'orange', 'pear' ]console.log(arr.concat(2,arr1));//[ 'apple', 'tomatoes', 2, 'banana', 'orange', 'pear' ]console.log(arr);//[ 'apple', 'tomatoes' ](原數組)
05、Array.prototype.sort()
sort 方法對數組進行排序，返回排序的數組
一個簡單的粟子：
let array = [1,3,2,4,5,7,6,8]console.log(array.sort())//[ 1, 2, 3, 4, 5, 6, 7, 8 ]
拓展的粟子：
let array = [ { id: 5, name: "jk" }, { id: 2, name: "jc" }, { id: 3, name: "jg" }, { id: 4, name: "jp" }, { id: 1, name: "jq" }, { id: 6, name: "jr" }]console.log(array.sort( (a, b) => a.id - b.id)) //[ { id: 1, name: 'jq' },{ id: 2, name: 'jc' },{ id: 3, name: 'jg' },{ id: 4, name: 'jp' },{ id: 5, name: 'jk' },{ id: 6, name: 'jr' } ]結果不出意外也是正序排序，降序反過來就ok了
06、Array.prototype.slice()
slice() 方法從數組中返回選中的元素,對原數組進行淺拷貝
第一個參數為從0開始
第二個參數為從0開始
粟子：
let array = [ { id: 5, name: "jk" }, { id: 2, name: "jc" }, { id: 3, name: "jg" }, { id: 4, name: "jp" }, { id: 1, name: "jq" }, { id: 6, name: "jr" }]console.log(array.slice(0, 3)) //[ { id: 5, name: 'jk' },{ id: 2, name: 'jc' },{ id: 3, name: 'jg' } ]//字符串let str = 'this1 is slice'console.log(str.slice(0,5))//this1截取元素用的,但是原數組不會改變！
07、Array.prototype.splice()
splice() 方法用于添加、移除、刪除數組的元素，修改后的元素以數組形式返回。
第一個參數為修改開始的位置
第二個參數為刪除的個數
第三個參數為插入的參數
粟子：
let array = [ { id: 5, name: "jk" }, { id: 2, name: "jc" }, { id: 3, name: "jg" }, { id: 4, name: "jp" }, { id: 1, name: "jq" }, { id: 6, name: "jr" }];let arr = {id: 7, name: 'yy'}console.log(array.splice(1,1, arr));//[ { id: 2, name: 'jc' } ]console.log(array);// [ { id: 5, name: 'jk' },{ id: 7, name: 'yy' }, { id: 3, name: 'jg' }, { id: 4, name: 'jp' },{ id: 1, name: 'jq' },{ id: 6, name: 'jr' } ] splice() 方法直接返回修改的內容，第一個log返回的就是刪除的元素，如果第二參數為0或者為負數的時候則會返回一個空的數組，第二個log是改變后的數組。該方法會將原數組修改！
08、Array.prototype.shift()
shift() 方法會將數組的第一個元素進行刪除,然后返回刪除的元素(如果數組為空將會返回undefined)，該方法會修改數組的長度 粟子：
let array = [ { id: 5, name: "jk" }, { id: 2, name: "jc" }, { id: 3, name: "jg" }, { id: 4, name: "jp" }, { id: 1, name: "jq" }, { id: 6, name: "jr" }]console.log(1,array.shift())//1 { id: 5, name: 'jk' }console.log(2,array)//2 [ { id: 2, name: 'jc' },{ id: 3, name: 'jg' },{ id: 4, name: 'jp' },{ id: 1, name: 'jq' },{ id: 6, name: 'jr' } ]09、Array.prototype.unshift()
unshift() 該方法則是在數組的開頭添加一個或者多個元素
粟子：
let array = [ { id: 5, name: "jk" }, { id: 2, name: "jc" }, { id: 3, name: "jg" }, { id: 4, name: "jp" }, { id: 1, name: "jq" }, { id: 6, name: "jr" }]let arr = { id: 2, name: 'yy' }console.log(1,array.unshift(arr))//7console.log(2,array)//2 [ { id: 2, name: 'yy' },{ id: 5, name: 'jk' },{ id: 2, name: 'jc' },{ id: 3, name: 'jg' }{ id: 4, name: 'jp' },{ id: 1, name: 'jq' },{ id: 6, name: 'jr' } ]10、Array.prototype.reverse()
reverse() 方法用翻轉數組元素的位置，然后返回該數組
let arr = [1,2,3,4,5]console.log(arr.reverse())//[5,4,3,2,1]
11、Array.prototype.indexOf()
indexOf() 方法用于給定的元素然后從數組開頭查找數組，如果存在則返回該元素存在數組的下標，不存在則返回-1
簡單的粟子：
let array = [1,2,3,4,5,6,7,8,9]console.log(array.indexOf(3))//2
第二個粟子：（簡單的去重）
let array = [1,2,3,4,5,1,2,6,8,3,8,9]function arr(arr) {if(arr.length === 0 ) returnlet n = [];for(let i = 0; i<arr.length; i++) { if(n.indexOf(arr[i]) === -1) { n.push(arr[i]) }}return n}console.log(arr(array))//[ 1, 2, 3, 4, 5, 6, 8, 9 ]12、Array.prototype.lastIndexOf()
lastIndexOf() 方法從數組的末端開始按給定的元素進行查找，查找到則返回所在的下標，不存在則返回-1；
粟子：
var arr1 = [1,2,3,4,5]console.log(arr1.lastIndexOf(3))//2
迭代
1、Array.prototype.forEach()
forEach() 方法對數組中的每個元素執行一次所寫的回調函數（注意，一旦開始循環中途無法跳出循環）
回調函數接收三個參數
數組當前項值
數組當前項的下標
當前數組 簡單的粟子：
var words = ['one', 'two', 'three', 'four'];words.forEach((item, index) =>{ if(item === 'two') { words.splice(index, 1) }});console.log(words)//[ 'one', 'three', 'four' ]2、Array.prototype.map()
map() 方法會將該方法迭代后返回的新數組
簡單的粟子：
let arr = [1,2,3,4,5,6]let arrs = arr.map(item => item + 10)console.log(arrs)//[ 11, 12, 13, 14, 15, 16 ]
經典的粟子：
let a = [1,2,3].map(parseInt)a?
a等于多少呢，有的答案可能是123，有的答案又可能是別的，而且這是一個經典的面試題，是不是剛剛看的時候覺得特別簡單一下子就給出了答案了呢！
是不是很意外？還是說這個就是你意想中的事情呢？根據MDN中介紹：是因為通常的情況下我們的回調函數是接受一個參數，但是接受一個參數并不代表 map() 方法只給回調函數只傳一個參數而已，而上面的例子是因為 parseInt 平常我們使用的時候大都傳一個參數進行轉換，但是 parseInt 是可以接受兩個參數的，只不過第二個參數為 二進制 而已，所以第二個參數則會變成二進制，那么第三個參數 parseInt
則會忽略，所以返回這個答案！
3、Array.prototype.some()
some() 方法用于判斷回調函數中邏輯而返回 true 還是 false
粟子：
var arr = ['apple', 'banana', 'mango', 'guava']checkarr = (arr, val) => { return arr.some(item => val === item)}console.log(checkarr(arr, 'apple'))//true4、Array.prototype.reduce()
reduce() 方法接收一個函數作為累加器，數組中的每個值（從左到右）開始縮減，最終為一個值
第一個值為累加器（上一次回調函數返回的值/初始為第一個值）
第二個值為當前值
第三個值為當前下標
第四個值為當前數組 簡單的粟子：
var arr = [1, 2, 3, 4, 5]const data = arr.reduce((prev, curr) => prev + curr )console.log(data)//15
合并數組里面對象的值并累加(結合find一起使用):
let tableNetWorkData = [{'newLocker': 6,'newSection': -2,'newSite': 1,'partnerShip': "self"},{'newLocker': 5,'newSection': 24,'newSite': 1,'partnerShip': "self"},{'newLocker': 3,'newSection': 65,'newSite': 1,'partnerShip': "sell"},{'newLocker': 1,'newSection': 38,'newSite': 1,'partnerShip': "agent"},{'newLocker': -6,'newSection': 4,'newSite': 1,'partnerShip': "agent"},{'newLocker': 8,'newSection': 22,'newSite': 1,'partnerShip': "lease"},{'newLocker': 15,'newSection': -2,'newSite': 1,'partnerShip': "self"},]let result = tableNetWorkData.reduce((per, currNext) => { let pers = per.find( perItem => currNext.partnerShip === perItem.partnerShip ); if(pers) { pers.newLocker += currNext.newLocker; pers.newSection += currNext.newSection; pers.newSite += currNext.newSite; } else { let newPers = { newLocker: currNext.newLocker, newSection: currNext.newSection, newSite: currNext.newSite, partnerShip: currNext.partnerShip } per.push(newPers) } return per }, []); console.log(result)結果如下：
再來一個數組去重：
let arr = [1,2,2,3,4,5,5,6,8,7,7,9,8]let result = arr.reduce( (prev, curr) => { if(prev.length === 0 || prev[prev.length - 1] !== curr) { prev.push(curr) } return prev}, [])console.log(result)看結果：
5、Array.prototype.every()
every() 方法用于檢測數組所有元素是否通過指定的函數的邏輯操作，通過則返回 true 否則返回 false 。注意空數組則無論什么邏輯都將返回 true
回調函數接通常收三個參數:
當前值
當前值的下標
原數組
簡單的粟子：
var arr = [1, 30, 39, 21, 10, 13];console.log(arr.every(curr => { return curr < 45 }));// expected output: true6、Array.prototype.filter()
filter() 方法就是一個過濾原數組的方法返回需要的元素組成的新數組，想象成一個漏斗然后過濾一些符合的元素！（不會改變原數組）
當前值
當前值的下標
原數組
粟子：
let fruits = ['apple', 'banana', 'grapes', 'mango', 'orange']let filterindexOf = function (query){return fruits.filter(item => {return item.toLowerCase().indexOf(query.toLowerCase())> -1})}console.log(filterindexOf('an'))//["banana", "mango", "orange"]7、Array.prototype.toString()
toString() 方法就是將數組元素轉化為字符串
粟子：
var array1 = ['ca', 'ba', 'a', '1a'];console.log(array1.toString());// "ca,ba,a,1a"
8、Array.prototype.find()
find() 方法返回數組中滿足提供的測試函數的第一個元素的值
當前值
當前值的下標
原數組
粟子：
let arr = [ {name: 'apples', value: 2}, {name: 'bananas', value: 0}, {name: 'cherries', value: 5}];let res =arr.find ((item)=> { return item.name === 'bananas';})console.log(res)//{ name: "bananas", value: 0 }總結
對于數組在我們平常對數據的一些操作都大都避免不了使用數組對數據進一步的邏輯操作，所以對于數組的一些方法都要熟悉熟練的使用，只有熟練的使用數組各種方法才能在后端返回的數據進行一梭子的操作完成業務操作甚至是比較騷的操作，同時在使用數組的方法的時候避免給自己挖一些不必要的坑，我們要嚴格按照規范使用數組的方法這樣才不會出現一些神都看不懂的 bug ，當然文章所介紹的都是平常使用的一些方法，數組還有其他的方法沒有寫出來，需要的再自己查找了，如有錯誤萬望指出，萬分感謝！
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答
