JS程式設計語法之陣列
阿新 • • 發佈：2018-12-25
一、常用操作:
1、unshift：將引數新增到原陣列開頭，會返回陣列的長度 ，改變原陣列
（注:在IE6.0下測試返回值總為undefined，FF2.0下測試返回值為7，所以這個方法的返回值不可靠，需要用返回值時可用splice代替本方法來使用。）
var a = [1,2,3,4,5];
var b = a.unshift(-2,-1);
// a輸出
(7) [-2, -1, 1, 2, 3, 4, 5]
// b輸出
72、shift:刪除原陣列第一項，並返回刪除元素的值（如果陣列為空則返回undefined），改變原陣列
var a = [1,2,3,4,5]; var b = a.shift(); // a輸出 (4) [2, 3, 4, 5] // b輸出: 如果陣列a為空執行，返回undefined 1
3、pop：刪除原陣列最後一項，並返回刪除元素的值（如果陣列為空則返回undefined），改變原陣列
var a = [1,2,3,4,5];
var b = a.pop();
// a輸出
(4) [1, 2, 3, 4]
// b輸出: 如果陣列a為空執行，返回undefined
54、push:將引數新增到原陣列末尾，並返回陣列的長度，改變原陣列
var a = [1,2,3,4,5];
var b = a.push(6,7);
// a輸出
(7) [1, 2, 3, 4, 5, 6, 7]
// b輸出
75、concat:返回一個新陣列，是將引數新增到原陣列中構成的，原陣列不變
var a = [1,2,3,4,5];
var b = a.concat(6,7);
// a輸出
(5) [1, 2, 3, 4, 5]
// b輸出
(7) [1, 2, 3, 4, 5, 6, 7]6、splice(start,deleteCount,val1,val2,...):從start位置開始刪除deleteCount項，並從該位置起插入val1,val2,... ，並返回被刪除的元素，改變原陣列
var a = [1,2,3,4,5]; var b = a.splice(2,2,7,8,9); // 從index==2開始，刪除2項（即3，4），並在該位置插入7、8、9元素 // a輸出 (6) [1, 2, 7, 8, 9, 5] // b輸出 (2) [3, 4]
7、reverse:將陣列反序 ，並返回新的陣列，同時改變原陣列
var a = [1,2,3,4,5];
var b = a.reverse();
// a 輸出
(5) [5, 4, 3, 2, 1]
// b 輸出
(5) [5, 4, 3, 2, 1]8、sort(sortby):按指定的引數對陣列進行排序，並返回新的陣列，同時改變原陣列
1>預設排序順序：是根據字串Unicode碼點。
// 預設排序
var a = [10,5,40,25,1000,1];
var b = a.sort()
// a輸出
(6) [1, 10, 1000, 25, 40, 5]
// b輸出
(6) [1, 10, 1000, 25, 40, 5]2>按照指定的標準進行排序，需要提供比較函式，比較函式需要具備兩個引數 a 和 b
若 a 小於 b，在排序後的陣列中 a 應該出現在 b 之前，則返回一個小於 0 的值。
若 a 等於 b，則返回 0。
若 a 大於 b，則返回一個大於 0 的值
// 按照數值大小進行排序，實現排序函式
function sortNumber(a,b)
{
return a - b // 升序排列
// return b - a // 降序排列
}
var a = [10,5,40,25,1000,1];
var b = a.sort(sortNumber)
// a輸出
(6) [1, 5, 10, 25, 40, 1000]
// b輸出
(6) [1, 5, 10, 25, 40, 1000]9、slice(start,end):返回從原陣列中指定開始下標到結束下標之間的項組成的新陣列 ，不改變原陣列
start值為負數時，則從陣列的尾部開始擷取
end值為可選的,沒有規定時，則預設選取從start到陣列尾部的所有元素
var a = [1,2,3,4,5];
var b = a.slice(2,5);
// a輸出
(5) [1, 2, 3, 4, 5]
// b輸出
(3) [3, 4, 5]10、join(separator):陣列轉化成字串，返回新的字串，以separator為分隔符，省略的話則用預設用逗號為分隔符
var a = [1,2,3,4,5];
var b = a.join("|");
// a輸出
(5) [1, 2, 3, 4, 5]
// b輸出
"1|2|3|4|5"
var a = [1,2,3,4,5];
var b = a.join(); // 不插入分隔符，預設為逗號分隔開
// a輸出
(5) [1, 2, 3, 4, 5]
// b輸出
"1,2,3,4,5"11、split(separator):字串轉化成陣列，返回新的陣列，按separator為分隔符，切割成若干個字串
var a = "abc,abcd,aaa";
var b = a.split(",");
// a輸出
"abc,abcd,aaa"
// b輸出
(3) ["abc", "abcd", "aaa"]二、陣列迴圈
<一>、陣列迴圈遍歷的方式以及效能分析對比
1、for迴圈（效能最高）
for迴圈的計數器，很合適使用let命令。
1>常用版for迴圈
var array = ["George", "John", "Thomas", "James", "Adrew", "Martin"];
for (i = 0; i < array.length; i++) {
console.log(array[i], i);
}2>優化版for迴圈
說明：使用臨時變數，將長度快取起來，避免重複獲取陣列長度，當陣列較大時優化效果才會比較明顯。
for (i = 0, len = array.length; i < len; i++) {
console.log(array[i], i);
}2、使用for...in...
說明： 效率比較低（不建議使用）
for (var index in array) {
console.log(array[index], index)
}3、使用for...of...
說明： 這種方式是es6裡面用到的，效能要好於forin，但仍然比不上普通for迴圈
for (var value of array) {
console.log(value, array.indexOf(value))
}4、使用forEach
說明：使用頻率較高，實際上效能比普通for迴圈弱
array.forEach(function (item, index) {
console.log(item, index)
})5、使用map
使用的比較廣泛的，雖然用起來比較優雅，但實際效率還比不上foreach
array.map(function (item, index) {
console.log(item, index)
})
// 以上遍歷均可以輸出
George 0
John 1
Thomas 2
James 3
Adrew 4
Martin 5<二>、判斷語句，跳出for迴圈
1、使用for...break..可以跳出整個for迴圈，這個迴圈不再執行
for(var i=1;i<=7;i++) {
if(i==4) {
break;
}
console.log(i)
}
VM19912:5 1
VM19912:5 2
VM19912:5 3使用迴圈標籤跳出多層迴圈
其中lable2：，lable1：兩個迴圈標籤，分別表示外部迴圈和內部迴圈
testfunction = () => {
lable2:
for (int i = 0; i < 3; i++) {
lable1:
for (int j = 0; j < 3; j++) {
if (j == 1) {
break lable2; // 跳出外部迴圈
}
}
}
}2、使用for...continue... 當i==4時，跳出本次for迴圈，下次繼續執行
for(var i=1;i<=7;i++) {
if(i==4) {
continue;
}
console.log(i)
}
VM20052:5 1
VM20052:5 2
VM20052:5 3
VM20052:5 5
VM20052:5 63、使用forEach return false 不能跳出迴圈（map同）
[1,2,3,4,5,6].forEach((i) => {
console.log(i)
if ( i == 4) {
return false
}
})
VM19933:2 1
VM19933:2 2
VM19933:2 3
VM19933:2 4
VM19933:2 5
VM19933:2 61、使用擴充套件運算子（
...）將某些資料結構轉為陣列
var a = 'love'
var b = [...a]
// a輸出
(4) ["l", "o", "v", "e"]2、Array.of()， 將一組值轉化成陣列
Array.of(3, 11, 8)
// 輸出
(3) [3, 11, 8]3、find()
陣列例項的find方法，用於找出第一個符合條件的陣列成員並返回
// 空的陣列輸出時
[].find((n) => n < 0)
// 輸出
undefined
var a = [1, 4, -5, 10]
var b = a.find((value) => value > 0)
// b輸出
1
// find方法的回撥函式帶的三個引數：當前的值、當前的位置和原陣列。
var c = a.find(function(value, index, array){
console.log(value, index, array);
return value < 0;
})
// 輸出
1 0 (4) [1, 4, -5, 10]
4 1 (4) [1, 4, -5, 10]
-5 2 (4) [1, 4, -5, 10]
// c輸出
-54、findIndex()
返回第一個符合條件的陣列成員的位置，如果所有成員都不符合條件，則返回-1。
var a = [1, 4, -5, 10]
var b = a.findIndex((value) => value < 0)
// b輸出
2
indexOf方法無法識別陣列的NaN成員，但是findIndex方法可以藉助Object.is方法做到。
[NaN].indexOf(NaN)
-1
[NaN].findIndex(y => Object.is(NaN, y))
05、fill(value, startIndex, endIndex)
引數：要填充的值，起始位置（可選）、結束位置（可選） 會改變原陣列的值
var a = [1, 4, -5, 10]
var b = a.fill(7) // 不指定起始位置和結束位置時，會全部覆蓋
// b輸出
(4) [7, 7, 7, 7]
// a輸出
(4) [7, 7, 7, 7]
a.fill(7,1,2) // 從 1 號位開始，向原陣列填充 7，到 2 號位之前結束
// 輸出
(4) [1, 7, -5, 10]6、includes(searchElement, formValue?)
返回一個布林值，判斷某個陣列是否包含某個值
var a = [1, 4, -5, 10]
a.includes(10)
// 輸出
true7、flat()
返回一個新陣列，對原資料沒有影響，將巢狀的陣列變成一維陣列
對於多層巢狀的，用Infinity關鍵字作為引數
var a = [1, 2, [3, 4]]
var b = a.flat()
// b輸出
(4) [1, 2, 3, 4]
// a輸出
(3) [1, 2, Array(2)]
[1, [2, [3]]].flat(Infinity)
// 輸出
(3) [1, 2, 3]8、flatMap()
對原陣列的每個成員執行一個函式，然後對返回值執行flat()引數。會返回一個新陣列，不改變原陣列
var a = [1, 2, 3, 4]
var b = a.flatMap((x) => x*2)
// b輸出
(4) [2, 4, 6, 8]
// a輸出
(4) [1, 2, 3, 4]