前端小菜，先別慌——JS篇（數組）

數組（Array）

隨着前端MVVM框架（React，Vue，Angular）的全面普及，前端工程師在數據操做上耗費的時間愈來愈多；數組做爲數據的主要載體，天然挑起了大梁，在前端編碼中扮演者不可或缺的角色。所以，數組是菜鳥們的前端成長之路上，必須消滅的一個精英怪。

本文屬於基礎知識概括整理類文章，若是你瞭解數組的基本用法，可是對數組使用沒有一個清晰全面的認知，那本文應該適合你。

本文主要講解數組是如何建立的，數組有哪些遍歷方法，數組的實例方法中哪些是會改變數組自身的；最後，我從返回值的角度，分析了不一樣數組方法的使用場景。

1. 開始以前

在講數據的建立，訪問，遍歷以及其餘具體的操做方法以前，我以爲有必要先跟你們講一下數組的基本概念。好比數組對象，數組對象的屬性，數組對象的方法，數組實例，數組實例的屬性以及數組實例的方法。

• 數組對象—— Array是經常使用的標準內置對象，相似的還有String，Date，Math，Object等
• 數組對象的方法——主要有Array.from()，Array.of()，Array.isArray()
• 數組實例——經過new Array等方式建立的具體實例
• 數組實例的屬性——主要有length，以及prototype
• 數組實例的方法——繼承自Array.prototype的方法

注意：數組對象的方法與數組實例的方法是兩個不一樣的概念，使用方式也有所不一樣。以下所示，數組對象的方法使用，是Array後面跟方法名稱，而數組實例的方法，則是具體的數組後面跟方法名稱。

// 數組對象的方法
var arr=Array.from(["華爲","OPPO","VIVO"]);

// 數組實例的方法
["華爲","OPPO","VIVO"].pop();
複製代碼

2. 數組建立

數組實例的建立，一般使用如下幾種方式。

// 方式一 字面量建立
var arr=["華爲","OPPO","VIVO"];

// 方式二 構造函數建立
var arr=new Array();
arr[0]="華爲";
arr[1]="OPPO";
arr[2]="VIVO";

// 上述方式也能夠直接傳參初始化
var arr=new Array("華爲","OPPO","VIVO");

// 也能夠，先指定長度
var arr=new Array(3);

// 固然，ES6出來以後，咱們又多了全新的兩種方式：
// 將參數中全部值做爲元素造成數組。
var arr=Array.of("華爲","OPPO","VIVO");

//將數組，類數組對象或可迭代對象轉化爲數組
var arr=Array.from(["華爲","OPPO","VIVO"]);
複製代碼

3. 數組操做——遍歷元素

方法名稱	方法描述
forEach()	爲數組中的每一個元素執行一次回調函數。
entries()	返回一個數組迭代器對象，該迭代器會包含全部數組元素的鍵值對。
keys()	返回一個數組迭代器對象，該迭代器會包含全部數組元素的鍵。
values()	返回一個數組迭代器對象，該迭代器會包含全部數組元素的值。
every()	若是數組中的每一個元素都知足測試函數，則返回 true，不然返回 false。
some()	若是數組中至少有一個元素知足測試函數，則返回 true，不然返回 false。
filter()	將全部在過濾函數中返回 true 的數組元素放進一個新數組中並返回。
find()	找到第一個知足測試函數的元素並返回那個元素的值，若是找不到，則返回 undefined。
findIndex()	找到第一個知足測試函數的元素並返回那個元素的索引，若是找不到，則返回 -1。
map()	返回一個由回調函數的返回值組成的新數組。
reduce()	從左到右執行，並把上次回調函數的返回值放在一個暫存器中傳給下次回調函數，並返回最後一次回調的返回值。
reduceRight()	從右到左執行，並把上次回調函數的返回值放在一個暫存器中傳給下次回調函數，並返回最後一次回調的返回值。

4. 數組操做——改變自身

方法名稱	方法描述
push()	在數組的末尾增長一個或多個元素，並返回數組的新長度。
pop()	刪除數組的最後一個元素，並返回這個元素。
unshift()	在數組的開頭增長一個或多個元素，並返回數組的新長度。
shift()	刪除數組的第一個元素，並返回這個元素。
reverse()	顛倒數組中元素的排列順序，即原先的第一個變爲最後一個，原先的最後一個變爲第一個。
sort()	對數組元素進行排序，並返回當前數組。
splice()	在任意的位置給數組添加或刪除任意個元素。
fill()	將數組中指定區間的全部元素的值，都替換成某個固定的值。
copyWithin()	在數組內部，將一段元素序列拷貝到另外一段元素序列上，覆蓋原有的值。

5. 數組操做——不改變自身

方法名稱	方法描述
concat()	返回一個由當前數組和其它若干個數組或者若干個非數組值組合而成的新數組。
includes()	判斷當前數組是否包含某指定的值，若是是返回 true，不然返回 false。
join()	鏈接全部數組元素組成一個字符串。
slice()	抽取當前數組中的一段元素組合成一個新數組。
toSource()	返回一個表示當前數組字面量的字符串。遮蔽了原型鏈上的 Object.prototype.toSource() 方法。
toString()	返回一個由全部數組元素組合而成的字符串。遮蔽了原型鏈上的 Object.prototype.toString() 方法。
toLocaleString()	返回一個由全部數組元素組合而成的本地化後的字符串。遮蔽了原型鏈上的 .toLocaleString() 方法。
indexOf()	返回數組中第一個與指定值相等的元素的索引，若是找不到這樣的元素，則返回 -1。
lastIndexOf()	返回數組中最後一個（從右邊數第一個）與指定值相等的元素的索引，若是找不到這樣的元素，則返回 -1。

6. 數組操做代碼演示

單純的看文檔描述，沒有必定經驗的人，估計很難理解它們的具體使用場景；對於咱們菜鳥而言，操練代碼真刀實彈的幹才是王道；爲了方便你們的理解，我特將數組操做的方法，按照返回結果分類整理，以便你們理解，下面是各個方法的基本實現：

情形一 返回鏈接後的新數組

• concat()

var arrOdd = [7, 3, 5, 1, 11, 9];
var arrEven = [6, 8, 2, 4, 10];
var arrNew = arrOdd.concat(arrEven);
console.log("concat", arrNew);
// 輸出 [7, 3, 5, 1, 11, 9, 6, 8, 2, 4, 10]
複製代碼

情形二 返回與原數組長度一致的對象（新數組/當前數組/數組迭代器對象）

• map()
• reverse()
• sort()
• entries()
• keys()
• value()

var arrOdd = [7, 3, 5, 1, 11, 9];
var arrNew = arrOdd.map(item => item * 2);
console.log("map", arrNew);
// 輸出[14, 6, 10, 2, 22, 18]
// 長度以及順序與原數組一致，數組元素的值發生變化（也能夠不變，即返回原始值）

arrNew = arrOdd.reverse();
console.log("reverse", arrNew);
// 輸出[9, 11, 1, 5, 3, 7]
// 長度以與原數組一致，順序反轉，數組元素的值不變

arrNew = arrOdd.sort((a, b) => {
  if (a > b) return 1;
  if (a < b) return -1;
  return 0;
});
console.log("sort", arrNew);
// 輸出[1, 3, 5, 7, 9, 11]
// 長度以與原數組一致，順序按照指定的排列，數組元素的值不變

// 上面語句能夠簡寫爲: 
arrNew = arrOdd.sort((a, b) => a - b);

var iterator = arrOdd.entries();
for(let item of iterator){
  console.log(item);
}
// 輸出[0,1],[1,3],[2,4],[3,7],[4,9],[5,11]
// 返回數組迭代器對象，包含鍵值對

iterator = arrOdd.keys();
for(let item of iterator){
  console.log(item);
}
// 輸出1, 2, 3, 4, 5
// 返回數組迭代器對象，僅包含鍵

iterator = arrOdd.values();
for(let item of iterator){
  console.log(item);
}
// 輸出1, 3, 5, 7, 9, 11
// 返回數組迭代器對象，僅包含元素值
複製代碼

情形三 返回被移除或者提取的數組元素

• pop()
• shift()
• slice()
• splice()
• filter()

// pop(),shift(),slice(start_index, upto_index)
var arrOdd = [1, 3, 5, 7, 9, 11, 13];
var arrReturn = arrOdd.pop();
console.log(arrReturn);
// 輸出 13
// 返回尾部移除的數組元素

arrReturn = arrOdd.shift();
console.log(arrReturn);
// 輸出 1
// 返回頭部移除的數組元素

arrReturn = arrOdd.slice(2,4);
console.log(arrReturn);
// 輸出 [7, 9] 注意，此處不包含11
// 返回開始到結束的數組元素（不包含結束點的元素）

// filter(callback[, thisObject]) 
arrReturn = arrOdd.filter(item=>item> 4);
console.log(arrReturn);
// 輸出 [5, 7, 9, 11] 
// 返回符合篩選條件的值
 
複製代碼

情形四 返回數組長度

• push()
• unshift()

var arrOdd = [1, 3, 5, 7, 9, 11];
var length = arrOdd.push(13);
console.log(length, arrOdd);
// 輸出length : 7 , arrOdd: [1, 3, 5, 7, 9, 11, 13]
// 返回插入成功後的數組元素

var length = arrOdd.unshift(-1);
console.log(length, arrOdd);
// 輸出length : 8 , arrOdd: [-1, 1, 3, 5, 7, 9, 11, 13]
// 返回插入成功後的數組元素
複製代碼

情形五 返回匹配的索引

• findIndex()
• indexOf()
• lastIndexOf()

// arr.findIndex(callback[, thisArg])
var arrOdd = [1, 3, 5, 7, 5, 11];
var index = arrOdd.findIndex(item => item > 5);
console.log(index);
// 輸出 index : 3
// 返回能匹配自定義函數的第一個元素的索引

// indexOf(searchElement[, fromIndex]) 第二個參數決定開始檢索的位置
index = arrOdd.indexOf(5);
console.log(index);
// 輸出 index : 2
// 返回首個被找到的元素在數組中的索引位置; 若沒有找到則返回 -1

index = arrOdd.lastIndexOf(5);
console.log(index);
// 輸出 index : 4
// 返回該元素最後一次出現的索引，如未找到返回-1
複製代碼

情形六返回 true 或者 false

• every()
• some()
• includes()

// every(callback[, thisObject])
var arrOdd = [1, 3, 5, 7, 5, 11];
var result = arrOdd.every(item => item > 5);
console.log(result);
// 輸出 index : false
// 判斷是否所有元素都大於5

// some(callback[, thisObject]) 
result = arrOdd.some(item => item > 5);
console.log(result);
// 輸出 index : true
// 判斷是否有元素都大於5

// arr.includes(valueToFind[, fromIndex])
result = arrOdd.includes(5);
console.log(result);
// 輸出 index : true
// 判斷是否有元素的值爲5

複製代碼

情形七 返回計算出的單一值

• reduce()
• reduceRight()

// reduce(callback[, initialValue]) 
// 注意initialValue的使用,根據準備返回的類型，靈活的爲他賦值爲0 ，{}， [] 

// 累加計算
var arrOdd = [1, 3, 5, 7, 5, 11];
var result = arrOdd.reduce((acc, item) => {
  return acc + item;
}, 0);
console.log(result);
// 輸出 result : 32

var result = arrOdd.reduce((acc, item) => {
  acc.push(item + 1);
  return acc;
}, []);
console.log(result);
// 輸出 result : [2, 4, 6, 8, 6, 12]

var arr = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4];
var result = arr.reduce((acc, item) => {
  if (acc.indexOf(item) < 0) {
	acc.push(item);
  }
  return acc;
}, []);
// 輸出 result : [2, 4, 6, 8, 6, 12]

// reduceRight與reduce使用基本一致，只是操做順序與其相反（從右到左），因此不在贅述。
複製代碼

總結

數組操做是JavaScript中的基礎知識，若是可以靈活運用，每每能極大地幫助本身提高開發效率。做爲一個有追求的前端小菜，務必要詳細瞭解數組每個方法的使用，這樣纔可以在實際運用中信手拈來。最後，強烈推薦你們去MDN進行學習，學習連接： developer.mozilla.org/zh-CN/docs/…

但願這文章能對你們有所幫助，若是以爲還行，請你們給一個鼓勵的贊吧！ 若是以爲哪兒有問題的，也歡迎批評指正，謝謝！