Javascript 陣列語法詳解
阿新 • • 發佈：2018-11-09
JavaScript 中的陣列相當於 Java 中的 Map ，陣列本身是一個物件，屬於引用資料型別
更多精彩
- 更多技術部落格，請移步 asing1elife’s blog
定義
- 既然陣列是一個物件，當進行 alert(arr) 時
- 應該輸出 [object object] ，可是卻輸出的是陣列中具體的值
- 因為 alert() 會對將要輸出的值進行隱式的 toString() 轉換
- 通過轉換，陣列 arr 便直接輸出其內部值
var arr = new Array(6) // 甚至不用預先宣告，不用 new push
- 往指定陣列尾部推送值，並返回值
var arr = []
arr.push(1)
arr.push(2, 3) // 可以是單個值，也可以是多個值
var result = arr.push(4, 5)
alert(arr) // 顯示 1,2,3,4,5 表示通過 push() 推送到陣列中的值不會被覆蓋 pop
- 從指定陣列尾部移除一個元素，並返回值
var arr = [1, 2, 3, 4, 'aa']
var result = arr.pop()
alert(arr) // 顯示 1,2,3,4
alert(result) // 顯示 aa ，pop() 在移除元素的同時會將被移除的值作為返回值
shift
- 從指定陣列頭部移除一個元素，並返回值
var arr = ['aa', 1, 2, 3, 4]
var result = arr. unshift
- 往指定陣列頭部推送值，並返回值
var arr = [1, 2, 3, 4]
var result = arr.unshift('aa', 'bb')
alert(arr) // 顯示 aa,bb,1,2,3,4
alert(result) // 顯示 6 ，unshift() 在推送值的同時，可以返回陣列的當前長度
splice(startIndex, spliceLength, var1, var2, … varN)
- 擷取字串的同時，拼接新字串到指定位置
- startIndex 擷取的起始位置
- spliceLength 擷取的長度
- var1, var2, … varN 待拼接的新字串
var arr = [1, 2, 3, 4, 5]
arr.splice(1, 2, 3, 4, 5)
alert(arr) // 顯示 1,3,4,5,4,5 從陣列 arr 的索引 1 開始，擷取長度為 2 ，將 [2, 3] 替換為 [3, 4, 5]
var arr1 = [1, 2, 3, 4, 5]
arr1.splice(1, 2)
alert(arr1) // 顯示 1,4,5 從陣列 arr1 的索引 1 開始，擷取長度為 2 ，且無帶拼接字串
var arr2 = [1, 2, 3, 4, 5]
arr2.splice(1)
alert(arr2) // 顯示 1 ，從陣列 arr2 的所以 1 開始，在未指定長度的情況下，後續字串全部截斷
slice
- 擷取字串
- 不運算元組本身，而是返回被擷取的內容
var arr = [1, 2, 3, 4, 5]
var result = arr.slice(2, 4) // 採用左閉右開區間 [2, 4) 也就是索引從第 2 位開始，到第 4 位結束，且不包括第 4 位
alert(result) // 顯示 3,4
concat
- 在指定陣列後連線新的陣列或值
- 不運算元組本身，而是返回連線後的結果
var arr1 = [1, 2, 3]
var arr2 = [4, 5]
var result = arr1.concat(arr2) // 將 arr1 和 arr2 進行連線，並返回結果
alert(result) // 顯示 1,2,3,4,5
var result2 = arr1.concat(4) // 講 4 連線到 arr1 之後，並返回結果
alert(result2) // 顯示 1,2,3,4
join
- 在指定陣列的每個元素之間插入值
- 不運算元組本身，而是返回連線後的結果
var arr = [1, 2, 3]
var result = arr.join('-') // 在 arr 的每個元素之間新增 - 字元
alert(result) // 顯示 1-2-3
sort
- 方法本身存在缺陷，無法直接對陣列進行正序或倒序的排序，需要自行傳入方法進行輔助操作
- 優化方式見 Javascript 陣列排序
var arr = [10, 2, 4, 1, 7]
arr.sort() // 並非對 arr 進行正序排序，而是講陣列中的每個元素視為字串，講其中的各位進行分別比較
// 例如將 10 分為 1 和 0 ，然後先將 1 和 2 4 7 比較，則認為 10 比 2 4 7 小
// 再將 1 和 1 比較，在相等的情況下則發現 10 比 1 還多一個 0 ，所以將 10 排在 1 之後
alert(arr) // 顯示 1,10,2,4,7
// 用於輔助 sort() 進行排序的方法
// 若需要正序排序，則在 value1 < value2 的情況下返回 -1 ，在 value1 > value2 的情況下返回 1
// 若需要倒序排序，則在 value1 < value2 的情況下返回 1 ，在 value1 > value2 的情況下返回 -1
function compare(value1, value2) {
if (value1 < value2) {
return -1
} else if (value1 > value2) {
return 1
} else {
return 0
}
}
var arr = [10, 2, 4, 1, 7]
arr.sort(compare) // 將寫好的 compare 方法傳入 sort() 中，則進行正序或倒序排序，具體情況根據 compare 中返回值決定
alert(arr) // 顯示 1,2,4,7,10
reverse
- 對陣列中的內容進行反向輸出
var arr = [10, 2, 4, 1, 7]
arr.reverse() // 直接將陣列中的內容反向輸出，而不是倒序
alert(arr) // 顯示 7,1,4,2,10
indexOf(value)
- 在指定陣列中從第一個元素開始查詢傳入值的索引位置
- 返回值為 -1 表示未找到對應值的索引
var arr = [1, 2, 3, 4, 5, 4, 3, 2, 1]
var index = arr.indexOf(4) // 在陣列 arr 中查詢數值 4 的索引位置，從第一個元素（索引為 0）開始計算，並返回索引值
alert(index) // 顯示 3
indexOf(startIndex, value)
- 從指定的索引開始，在指定數值中查詢傳入值的索引位置
- startIndex 開始查詢的索引
- value 傳入值
var arr = [1, 2, 3, 4, 5, 4, 3, 2, 1]
var index = arr.indexOf(4, 4) // 在陣列 arr 中，從第 4 個索引開始，查詢數值 4 的索引位置，並返回索引值
alert(index) // 顯示 5
lastIndexOf(value)
- 在指定陣列中從最後一個元素開始查詢傳入值得索引位置
var arr = [1, 2, 3, 4, 5, 4, 3, 2, 1]
var index = arr.lastIndexOf(2) // 在陣列 arr 中從最後一個元素開始查詢數值 2 的索引位置，並返回索引值
alert(index) // 顯示 7
lastIndexOf(startIndex, value)
- 從指定的索引開始，在指定陣列中從最後一個元素開始查詢傳入值的索引位置
- startIndex 開始查詢的索引
- value 傳入值
var arr = [1, 2, 3, 4, 5, 4, 3, 2, 1]
var index = arr.lastIndexOf(2, 2) // 在陣列 arr 中從倒數第 2 個索引開始，查詢數值 2 的索引位置，並返回索引值
alert(index) // 顯示 1
every(function(item, index, array) { … })
- 對陣列中的每個元素進行函式運算，並將總結果返回
- 如果每個值得運算結果都返回 true ，則整體返回 true
- 如果存在一個值運算結果返回 false ，則整體返回 false
var arr = [1, 2, 3, 4, 5, 4, 3, 2, 1]
// 方法體記憶體在一個回撥函式
// item 為數值中當期元素
// index 為當前索引值
// array 為指定陣列
var result = arr.every(function(item, index, array) {
// 判斷陣列中的當前元素是否大於 2 ，結果返回 true 或 false
return item > 2
})
alert(result) // 顯示 false
filter(function(item, index, array) { … })
- 對陣列中的每個元素進行函式運算，並將過濾後的結果返回
var arr = [1, 2, 3, 4, 5, 4, 3, 2, 1]
var result = arr.filter(function(item, index, array) {
// 判斷陣列中的當前元素是否大於 2 ，不滿足條件則過濾掉
return item > 2
})
alert(result) // 顯示 3,4,5,4,3
forEach(function(item, index, array) { … })
- 對陣列中的每個元素進行遍歷，並可在其中執行一個方法
var arr = [1, 2, 3, 4, 5, 4, 3, 2, 1]
// for 迴圈的升級版
arr.forEach(function(item, index, array) {
alert(item) // 迴圈顯示 1 2 3 4 5 4 3 2 1
})
map(function(item, index, array) { … })
- 對陣列中的每個元素進行函式運算，並返回新的陣列
var arr = [1, 2, 3, 4, 5, 4, 3, 2, 1]
var result = arr.map(function(item, index, array) {
// 將陣列中每個元素都乘以 2
return item * 2
})
alert(result) // 顯示 2,4,6,8,10,8,6,4,2
some(function(item, index, array) { … })
- 對陣列中的每個元素進行函式運算，並將總結果返回
- 如果存在一個得運算結果都返回 true ，則整體返回 true
- 如果所有值運算結果返回 false ，則整體返回 false
- 與 every() 邏輯正好相反
var arr = [1, 2, 3, 4, 5, 4, 3, 2, 1]
var result = arr.some(function(item, index, array) {
// 判斷陣列當前元素是否大於等於 5 ，返回 true 或 false
return item >= 5
})
alert(result) // 顯示 true
reduce(function(prev, cur, index, array) { … })
- 從左遍歷陣列的每個元素進行函式運算，並將總結果返回
- prev 當前值的前一個值
- cur 當前值
- index 當前值的索引值
- array 當前陣列
var arr = [1, 2, 3, 4, 5, 4, 3, 2, 1]
var result = arr.reduce(function(prev, cur, index, array) {
// 當前值的前一個值 + 當前值 ，全部遍歷結束後，再返回總和
// 0 + 1 + 2 + 3 + 4 + 5 + 4 + 3 + 2 + 1
return prev + cur
})
alert(result) // 顯示 25
reduceRight(function(prev, cur, index, array) { … })
- 從右遍歷陣列的每個元素進行函式運算，並將總結果返回
- prev 當前值的前一個值
- cur 當前值
- index 當前值的索引值
- array 當前陣列
var arr = [1, 2, 3, 4, 5, 4, 3, 2, 1]
var result = arr.reduceRight(function(prev, cur, index, array) {
// 當前值的前一個值 + 當前值 ，全部遍歷結束後，再返回總和
// 0 + 1 + 2 + 3 + 4 + 5 + 4 + 3 + 2 + 1
return prev + cur
})
alert(result) // 顯示 25