前端深刻之js篇丨Array數組操做從入門到成神Up Up Up，持續更新中

時間 2019-11-12

原文原文鏈接

寫在前面

隨着前端深刻的不斷學習，發現數組這個數據結構在前端中有着至關大的存在感，因爲我初學前端的時候並無系統性的學習數組，因此我將經過這篇文章同你一塊兒學習數組，但願咱們能一塊兒進步，學會熟練操做數組。javascript

數組基本操做

建立數組

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()刪除頭部元素，這是數組中最經常使用的四個添加刪除方法，小夥伴必定要牢記。java

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()能夠將數組元素按照順序進行排列，好比數字前後順序或者字母排序。可是他並非按照數字大小順序來排序的，爲了使數組元素能按照數字大小排序，應該按照如下方式來實現。spa

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()默認不會對它進行扁平化處理。code

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
})