寫在前面
隨着前端深入的不斷學習，發現數組這個數據結構在前端中有着相當大的存在感，由於我初學前端的時候並沒有系統性的學習數組，所以我將通過這篇文章同你一起學習數組，希望我們能一起進步，學會熟練操作數組。
數組基本操作
創建數組
var arr1 = []; //通過字面量的方式創建一個沒有元素的空數組
var arr2 = new Array(); //通過構造函數的方式創建一個空數組
var arr3 = new Array(5); //創建一個有五個元素的數組，此時每個數組元素爲undefined
var arr4 = [1,2,3,4,5]; //創建有五個值的數組
var arr5 = [{id:1,name:'不是酸檸檬'},{id:2,name:'no lemon'}]; //創建一個值爲對象的數組數組創建有兩種方式，分別是[]字面量方式、new Array()構造函數方式，本質上創建方式是一致的，使用字面量的方式要比構造函數的方式簡單的多，推薦小夥伴們使用。
數組增加刪除
push()、pop()、unshift()和shift()
var arr = []; //通過字面量的方式創建一個沒有元素的空數組
arr[1] = '不是酸檸檬'; //寫入第一個元素 ['不是酸檸檬']
arr.push('22歲'); //在數組末尾添加一個元素 ['不是酸檸檬','22歲']
arr.pop(); //刪除數組末尾的元素 ['不是酸檸檬']
arr.unshift('22歲'); //在數組頭部添加元素 ['22歲','不是酸檸檬']
arr.shift(); //刪除數組頭部的元素 ['不是酸檸檬']這裏主要介紹到了最基本的兩組增加刪除元素的方式，分別是push()在數組末尾添加、pop()刪除末尾元素、unshift()在數組頭部添加、shift()刪除頭部元素，這是數組中最常用的四個添加刪除方法，小夥伴一定要牢記。
splice()
var arr = [0,1,2,3,4,5,6,7];
arr.splice(4); // 從下標爲4的元素一直刪除到末尾，此時arr爲 [0, 1, 2, 3]
arr.splice(1,2); // 從下標爲1的元素開始向後刪除兩個元素，此時arr爲 [0, 3]
arr.splice(1,0,[1,2]); // 從下標爲1的元素開始向後刪除0個元素，並且插入元素'1,2'，此時arr爲 [0, 1, 2, 3]splice()是數組操作中很重要的方法，使用splice()可以更爲自由的對數組進行相應的增加刪除，通過splice()方法也可以很輕鬆的實現push()、pop()、unshift()和shift()四個方法，小夥伴們可以自己嘗試一下，加強對splice()方法的理解。
delete和arr.length()
var skill = ['Vue','React','ES6'];
delete skill[0]; //將第一個元素設爲空，不改變數組長度 [empty,'React','angular']
skill.length = 5; //將數組長度設置爲5 [empty,'React','angular',empty,empty]
skill.length = 0; //將數組長度設置爲0，此時數組置爲空 []這裏應該注意delete和length的區別，使用delete操作後的數組元素會被設置爲empty，不會改變原數組長度。使用length操作後，若設置長度大於原數組長度，則新添的元素設置爲empty，若設置長度小於原數組長度，則刪除多餘元素，並改變數組長度，若設置length爲0，則清空數組，使數組長度改變爲零。
數組方法
join()
var skill = ['Vue','React','angular'];
skill.join(); //"Vue,React,angular"
skill.join('----'); //"Vue----React----angular"通過arr.join()可以將數組元素拼接成字符串，並在每個元素中添加指定字符，如不設置，則默認添加逗號。
reverse()
var arr = [1,2,3,4,5];
arr.reverse(); //[5,4,3,2,1]通過arr.reverse()可以將數組中每一個元素調到順序進行排列。
sort()
var arr = [5,4,3,2,1];
arr.sort(); //[1,2,3,4,5]
var arr1 = ['a','c','e','d','b']
arr1.sort(); ['a','b','c','d','e']通過arr.sort()可以將數組元素按照順序進行排列，比如數字先後順序或者字母排序。但是他並不是按照數字大小順序來排序的，爲了使數組元素能按照數字大小排序，應該按照以下方式來實現。
var arr = [55555,44,3333,222,11111];
arr.sort(); //[11111, 222, 3333, 44, 55555] 按照數字先後順序，並沒有對比大小
arr.sort((a,b)=>{
return a-b; //數字由小到大進行排列 [44, 222, 3333, 11111, 55555]
})
arr.sort((a,b)=>{
return b-a; //數字由大到小進行排列 [55555, 11111, 3333, 222, 44]
})concat()
var arr = [1,2,3];
arr.concat(4,5); // [1, 2, 3, 4, 5]
arr.concat([4,5]); // [1, 2, 3, 4, 5]
arr.concat([4,5],[6,7]); // [1, 2, 3, 4, 5, 6, 7]
arr.concat(4,[5,[6,7]]); // [1, 2, 3, 4, 5, [6, 7]]通過arr.concat()可以將字符添加到數組元素中，也可以將其他數組添加到當前數組中，但如果是嵌套數組，concat()默認不會對它進行扁平化處理。
slice()
var arr = [1,2,3,4,5];
arr.slice(0,3); // [1, 2, 3] 從下標爲0的元素開始的三個元素
arr.slice(3); // [4, 5] 從下標爲3的元素開始到結束的元素通過arr.slice()可以對數組進行查詢，如果傳入兩個參數(x,y)，則意義爲從下標x開始，向後數y個元素；如果傳入一個參數(x)，則意義爲從下標x開始一直到末尾的所有元素。
filter()、every()和some()
var arr = [1,2,3,4,5];
var resarr1 = arr.filter((x)=>{
return x>3;
}); // [4, 5] 篩選數組元素大於3的結果
var resarr2 = arr.filter((x)=>{
return x%2==0;
}); // [2, 4] 篩選數組元素中的偶數通過arr.filter()可以對數組進行帶條件的篩選，在filter()裏面寫入相應條件，這裏要注意執行arr.filter()會返回一個數組，我們需要定義一個新數組來接收它。
var arr = [1,2,3,4,5];
arr.every((x)=>{
return x>3;
}); // false arr數組中不是每一項都大於3，返回false
arr.every((x)=>{
return x>0;
}); // false arr數組中每一項都大於0，返回true
arr.some((x)=>{
return x>3;
}); // false arr數組中存在一項大於3，返回true這一組方法是用來判斷數組中有沒有相應值的，arr.every()判斷的值必須所有都滿足條件纔會返回true，而arr.some()判斷的值只需要有一項滿足就會返回true。
reduce()
var arr = [1,2,3,4,5];
var sum = arr.reduce((x,y)=>{
return x+y //0+1+2+3+4+5 =》 15
},0)
var product = arr.reduce((x,y)=>{
return x*y //1*2*3*4*5 => 120
})
var max = arr.reduce((x,y)=>{
return (x>y)?x:y //5
})arr.reduce()方法會對傳入的數組元素進行組合，如例子中的x和y，在每個方法中的返回值會注入到x中，然後繼續與下一個y值進行操作，所有操作完成後返回最終結果，這個方法有第二個參數用來設置默認值到x，但默認值不是必填項。
爲了方便小夥伴理解，我把代碼中sum當做例子來進行拆解
- (x=0,y=1) => 0+1=1
- (x=1,y=2) => 1+2=3
- (x=3,y=3) => 3+3=6
- (x=6,y=4) => 6+4=10
- (x=10,y=5) => 10+5=15
- 此時便利完所有數組元素，返回值15
結論
今天我們一起學習了數組操作的常用方法，知識點比較多，也沒有太多連貫性，但是這些方法在我們的日常工作中會經常用到，希望你能夠多加練習，深入理解這些方法，你的前端水平一定會更上一層樓的。
關於數組的操作方法還有很多沒有寫到，這篇文章將會持續更新，有需要的小夥伴可以點贊收藏，在我更新之後就可以及時來閱讀學習啦！
結語
以上就是本文章的全部內容了，如果有不正確的地方歡迎指正。
感謝您的閱讀，如果感覺有用不妨點贊/轉發。
前端深入系列是一個踩坑系列，是由我本人對工作和學習中所遇到的問題和踩過的坑的一個探索與總結，在此記錄分享出去，同時也是對自我技能的一個反思和追問。
前端路漫，踩坑不斷。
前端深入系列持續更新中……
以上2019-11-04。