前端數組方法匯總
下面是我們在前端開發中經常使用到的一些關於數組的方法，包括數組的創建等等，你可以通過點擊下面的錨點鏈接來查看，希望對你有幫助。
創建數組
new Array()
創建數組的方式有兩種，第一種方式就是使用Array構造函數
var arr=new Array()
如果你預先知道數組的個數，那么你可以給構造函數傳遞參數，構造函數length的值就是這個參數
var arr=new Array(10);
console.log(arr.length)//10
也可以向構造函數中傳遞Array數組中的包含的每一項
var arr=new Array('apple','oriange');
console.log(arr)//[ 'apple', 'oriange' ]
創建數組的第二種方式就是字面量表示法
var color=['blue','green','pink','yellow'];
var num=[1,2,3,4];
檢測數組
object instanceof constructor
instanceof運算符用於測試構造函數的prototype屬性是否出現在對象的原型鏈中的任何位置，如果返回true，也就是說明可以通過右邊的構造函數來得到左邊的對象（js中一切皆對象）
var value = [1, 2, 3];
console.log(value instanceof Array)//結果是true，說明value是數組
Array.isArray(value)
上面方法不能有效檢出不能環境下生成的數組，也就是環境A下利用構造函數生成的arr1,環境B下生成的Arr2,如果在環境下檢測環境環境B下面生成的內容，有可能會出錯
es5中新增的方法。不管是在什么環境下生產的，都可以精准的判斷這個值是不是數組
var value = [1, 2, 3];
console.log(Array.isArray(value))//結果是true，說明value一定是個數組
轉換方法
toString()
顯式調用toString將數組轉換為字符串，數組中的每個值用','連接
var color=['blue','green','pink','yellow'];
console.log(color.toString())//blue,green,pink,yellow
join()
join()方法將數組切割成為字符串，字符串的每一項用join的參數分隔,不傳遞參數默認按','分隔
var color=['blue','green','pink','yellow'];
console.log(color.join())//blue,green,pink,yellow
console.log(color.join('?'));//blue?green?pink?yellow
棧方法
push()
push方法接收任意數量的參數，把他們逐個放在數組的末尾，返回修改后的數組長度。
var color = ['blue'];
var len = color.push('green', 'pink');
console.log(color)//[ 'blue', 'green', 'pink' ]
console.log(len)//3
pop()
pop方法從數組末尾移除最后一項，返回移除的內容。
var color = ['blue', 'green'];
var count = color.pop();
console.log(count);//green
console.log(color);//[ 'blue' ]
console.log(color.length);//1
隊列方法
shift()
移除數組中的第一項並返回，同時將數組長度減一
var color = ['blue', 'green'];
var count = color.shift();
console.log(color);//[ 'green' ]
console.log(count);//blue
console.log(color.length);//1
unshift()
在數組的前端添加項，返回添加后數組的長度。
var color = ['blue', 'green'];
var len = color.unshift('pink');
console.log(color);//[ 'pink', 'blue', 'green' ]
console.log(len);//3
重排序方法
reverse()
將數組的先后順序顛倒，即為第一項變成最后一項，最后一項變為第一項，數組長度不變
var color = ['blue', 'green'];
color.reverse()
console.log(newColor);//[ 'green', 'blue' ]
console.log(color.length);//2
sort()
將數組中的每一項按照升序排列，最小值在前面，最大值在后面
var arr = [1, 2, 10, 23]
arr.sort();
console.log(arr)
操作方法
concat()
添加一個數組到當前數組中，並返回一個合並后的新數組。
var color = ['blue', 'green'];
var color2 = color.concat('yellow');
var color3 = color.concat(['yellow', 'blank', 'red']);
console.log(color);//[ 'blue', 'green' ]
console.log(color2);//[ 'blue', 'green', 'yellow' ]
console.log(color3);//[ 'blue', 'green', 'yellow', 'blank', 'red' ]
slice()
slice方法是基於當前數組並根據參數截取對應位置的數組內容，返回一個新的數組，可以接受兩個參數，起始位置和結束位置。表示截取從其實位置到結束位置的數組內容。也可以只接受一個參數，表示截取從起始位置到原數組末尾的數組內容。
var color = ['blue', 'green', 'yellow', 'blank', 'red'];
var color1 = color.slice(1, 3);
var color2 = color.slice(1);
console.log(color1);//[ 'green', 'yellow' ]
console.log(color2);//[ 'green', 'yellow', 'blank', 'red' ]
如果參數的第二項不傳，則隱式的表示為參數是-1，也就是數組長度加一項位置
splice()
splice方法可以向數組中刪除，插入，替換任意數量的項。
刪除
接受兩個參數，第一個參數表示要從哪里開始刪除，第二個項表示刪除的個數。
var color = ['blue', 'green', 'yellow', 'blank', 'red'];
var recolor = color.splice(0, 2);//從第0個開始刪除兩個
console.log(color);//[ 'yellow', 'blank', 'red' ]
console.log(recolor);//[ 'blue', 'green' ]
插入
接受三個參數，第一個參數為起始位置（從哪里開始插入），第二個參數為要刪除的個數（0），第三個參數為要插入的項。
var color = ['blue', 'green', 'yellow', 'blank', 'red'];
var recolor = color.splice(2, 0, '#e4393c');//從第二個位置開始，刪除0個，並插入項#e4393c
console.log(color);//[ 'blue', 'green', '#e4393c', 'yellow', 'blank', 'red' ]
替換
接受三個參數，第一個參數為起始位置（從哪里開始插入），第二個參數為要刪除的個數，第三個參數為要插入的項。
var color = ['blue', 'green', 'yellow', 'blank', 'red'];
var recolor = color.splice(2, 1, '#e4393c');//從第二個位置開始刪除一項，並從第二個位置開始插入項#e4393c
console.log(color);//[ 'blue', 'green', '#e4393c', 'blank', 'red' ]
位置方法
indexOf()
indexOf方法是從數組起始位置開始向后查找，找到了返回對應的索引值，找不到返回-1
var numberArr = [1, 2, 3, 4, 5, 6, 7];
var index = numberArr.indexOf(3)//2
console.log(index)
lastIndexOf()
lastIndexOf方法是從數組末尾位置開始向前查找，找到了返回對應的索引值，找不到返回-1
var numberArr = [1, 2, 3, 4, 5, 6, 7];
var index = numberArr.lastIndexOf(2)//1
console.log(index)
迭代方法
every()
every循環數組的每一項，並給定一個函數。如果該函數對每一項都返回true，那么結果就是true，否則返回false。接收一個回調函數，回調函數中有三個參數，第一個為循環中的每一項，第二個參數為當前項的下標，第三項為數組本身。
var numberArr = [1, 2, 3, 4, 5, 6, 7];
// var index = numberArr.lastIndexOf(2)
// console.log(index)
var res = numberArr.every(function (item, index, array) {
console.log(item, index, array)
return (item > 2)
})
console.log(res)
filter()
filter方法循環數組中的每一項，並給定一個函數，返回函數中返回true項的集合。回調函數中有三個參數，第一個為循環中的每一項，第二個參數為當前項的下標，第三項為數組本身。
var numberArr = [1, 2, 3, 4, 5, 6, 7];
var res = numberArr.filter(function (item, index, array) {
return (item < 2)
})
console.log(res)//1
forEach()
操作函數中的每一項，這個函數沒有返回值.你可以利用這個函數操作數組中的每一項，並根據自己的要求生成新的函數或者一些判斷等等
var numberArr = [1, 2, 3, 4, 5, 6, 7];
numberArr.forEach(function (item, index, array) {
//執行某些操作
})
map()
操作函數中的每一項,返回每次函數調用的結果組成的數組。
var numberArr = [1, 2, 3, 4, 5, 6, 7];
var res = numberArr.map(function (item, index, array) {
return item * 2
});
console.log(res);//[ 2, 4, 6, 8, 10, 12, 14 ]
some()
給數組中的每一項給定一個函數，只有有一項符合給定函數要求就返回true，否則返回false。
var numberArr = [1, 2, 3, 4, 5, 6, 7];
var res = numberArr.some(function (item, index, array) {
return item > 5
})
console.log(res)//true
歸並方法
reduce()
從第一項迭代數組的所有項，並返回一個新的值。接受兩個參數，一個在每一項上面都調用的函數，一個是歸並基礎的初始值（可選參數）。其中調用函數接受四個參數（前一個值，當前值，項的索引，原數組對象）
var val = [1, 2, 3, 4, 5];
var res = val.reduce(function (pre, cur, index, array) {
return pre + cur
}, null)
console.log(res)//15
reduceRight()
和reduce方法不同的就是遍歷的初始位置是從數組的最后一項開始向數組的第一項遍歷，其他的使用完全一致。
var val = [1, 2, 3, 4, 5];
var res = val.reduceRight(function (pre, cur, index, array) {
return pre + cur
}, null)
console.log(res)//15