JavaScript數組API彙總
0一、push()：將value添加到數組的最後，返回新數組的長度(改變原數組)
// Base
let a = [1, 2, 3, 4, 5]
let result = a.push(1)
console.log(result) // 6
console.log(a) // [1, 2, 3, 4, 5, 1]
// More
result = a.push('a', 'b') // 可一次添加多個值
console.log(result) // 8
console.log(a) // [1, 2, 3, 4, 5, 1, 'a', 'b']
複製代碼
0二、unshift()：添加元素到數組的開頭，返回新數組的長度(改變原數組)
// Base
let a = [1, 2, 3, 4, 5]
let result = a.unshift(1)
console.log(result) // 6
console.log(a) // [1, 1, 2, 3, 4, 5]
// More
result = a.unshift('a', 'b') // 可一次添加多個值
console.log(result) // 8
console.log(a) // ['a', 'b', 1, 1, 2, 3, 4, 5]
複製代碼
0三、pop()：刪除數組中最後一個元素，返回被刪除的元素(改變原數組)
// Base
let a = [5]
let result = a.pop()
console.log(result) // 5
console.log(a) // []
// More
result = a.pop() // 數組爲空數組後，執行pop()方法，返回undefined
console.log(result) // undefined
console.log(a) // []
複製代碼
0四、shift()：刪除數組第一個元素，返回被刪除的元素(改變原數組)
// Base
let a = [5]
let result = a.shift()
console.log(result) // 5
console.log(a) // []
// More
result = a.shift() // 數組爲空數組後，執行pop()方法，返回undefined
console.log(result) // undefined
console.log(a) // []
複製代碼
0五、join(value)：將數組用value鏈接爲字符串，返回被鏈接後的字符串(不改變原數組)
// Base
let a = [1, 2, 3, 4, 5]
let result = a.join()
console.log(result) // 1,2,3,4,5
result = a.join('')
console.log(result) // 12345
result = a.join(',')
console.log(result) // 1,2,3,4,5
result = a.join('&')
console.log(result) // 1&2&3&4&5
// More
let obj = {
toString: function () {
console.log('調用了toString()方法！')
return 'a'
},
toValue: function () {
console.log('調用了toValue()方法！')
return 'b'
}
}
result = a.join(obj) // 使用對象時會調用對象自身的toString方法，咱們這裏重寫了toString
// 調用了toString()方法
console.log(result) // 1a2a3a4a5
console.log(a) // [1, 2, 3, 4, 5]
// 數組中的join()方法相對的一個方法是字符串的split()方法
console.log(result.split('a')) // [1, 2, 3, 4, 5]
複製代碼
0六、reverse()：反轉數組，返回反轉後的新數組(改變原數組)
// Base
let a = [1, 2, ,3, ,4, 5]
let result = a.reverse()
console.log(result) // [5, 4 ,3 ,2 ,1]
console.log(a) // [5, 4 ,3 ,2 ,1]
// More
a = [1, [2, 3], [4, 5]]
result = a.reverse()
console.log(result) // [[4, 5], [2, 3], 1]
console.log(a) // [[4, 5], [2, 3], 1]
// 能夠看到這裏的反轉只是基於數組的第一層，屬於淺反轉
// 一個簡單的深反轉須要使用遞歸實現
const deepReverse = (array) => {
let temp = array.reverse()
temp.forEach(v => {
if (Object.prototype.toString.call(v) === '[object Array]') {
deepReverse(v)
}
})
return temp
}
a = [1, [2, 3], [4, 5]]
result = deepReverse(a)
console.log(result) // [[5, 4], [3, 2], 1]
複製代碼
0七、slice(start, end)：獲取子數組，包含原數組索引start的值到索引end的值，不包含end，返回獲取的子數組(不改變原數組)
// Base
let a = [1, 2, 3, 4, 5]
let result = a.slice(2, 4)
console.log(result) // [3, 4]
console.log(a) // [1, 2, 3, 4, 5]
// More
console.log(a.slice(1)) // [2, 3, 4, 5] 只有一個參數且不小於0時，則今後索引開始截取到數組的末尾
console.log(a.slice(-1)) // [5] 只有一個參數且小於0時，則從倒數|start|位截取到數組的末尾
console.log(a.slice(-1, 1)) // [] 反向截取，不合法，返回空數組
console.log(a.slice(1, -1)) // [2, 3, 4] 從第1位截取到倒數第1位
console.log(a.slice(-1, -2)) // [] 反向截取，不合法，返回空數組
console.log(a.slice(-2, -1)) // [4] 倒數第2位截取到倒數第1位
複製代碼
0八、splice(index, count, value1, value2....)：從索引位index處刪除count個元素，插入value1, value2等元素，返回被刪除的元素組成的新數組(改變原數組)
// Base
let a = [1, 2, 3, 4, 5]
let result = a.splice(1, 2, 0)
console.log(result) // [2, 3]
console.log(a) // [1, 0, 4, 5]
// More
a = [1, 2, 3, 4, 5]
console.log(a.splice(-2)) // [4, 5] 當參數爲單個且小於0時，將截取從倒數|index|位到數組的末尾
console.log(a) // [1, 2, 3]
a = [1, 2, 3, 4, 5]
console.log(a.splice(-1)) // [5] 當參數爲單個且小於0時，將截取從倒數|index|位到數組的末尾
console.log(a) // [1, 2, 3, 4]
a = [1, 2, 3, 4, 5]
console.log(a.splice(0)) // [1, 2, 3, 4, 5] 當參數爲單個且不小於0時，將截取從index位到數組的末尾
console.log(a) // []
a = [1, 2, 3, 4, 5]
console.log(a.splice(1)) // [2, 3, 4, 5] 當參數爲單個且不小於0時，將截取從index位到數組的末尾
console.log(a) // [1]
a = [1, 2, 3, 4, 5]
console.log(a.splice(-1, 2)) // [5] 從倒數第1位開始截取兩個元素
console.log(a) // [1, 2, 3, 4]
a = [1, 2, 3, 4, 5]
console.log(a.splice(0, 2, 'a', 'b', 'c')) // [1, 2]
console.log(a) // ['a', 'b', 'c', 3, 4, 5] 截取後將value值依次填充到截取位置處，舊值被向後順移
複製代碼
0九、sort()：對數組元素進行排序，返回排序後的新數組(改變原數組)
// Base
let a = [31, 22, 27, 1, 9]
let result = a.sort()
console.log(result) // [1, 22, 27, 31, 9]
console.log(a) // [1, 22, 27, 31, 9]
// More
a = ['c', 'ac', 'ab', 'A1', '1c', 13, 12, '13', '12', '3', '2', '1b', '1a', 1, 'aa', 'a', 3, 'b', 2]
a.sort()
console.log(a) // [1, 12, "12", 13, "13", "1a", "1b", "1c", "2", 2, "3", 3, "A1", "a", "aa", "ab", "ac", "b", "c"]
// 能夠看出sort排序是根據每一個字符對應的ASCII碼值進行排序的，而非值的大小。
// 先比較第一位的ASCII碼值，若是第一位的ASCII碼值相同，則開始比較第二位的ASCII碼值，以此類推
// ASCII碼錶(http://tool.oschina.net/commons?type=4 + K)
a = [31, 22, 27, 1, 9]
a.sort((a, b) => {
return a - b
})
console.log(a) // [1, 9, 22, 27, 31] 按數值大小正序排列
a = [31, 22, 27, 1, 9]
a.sort((a, b) => {
return b - a
})
console.log(a) // [31, 27, 22, 9, 1] 按數值大小倒序排列
複製代碼
十、toString()：將數組中的元素用逗號拼接成字符串，返回拼接後的字符串(不改變原數組)
// Base
let a = [1, 2, 3, 4, 5]
let result = a.toString()
console.log(result) // 1,2,3,4,5
console.log(a) // [1, 2, 3, 4, 5]
// 除了toString()方法以外，String()方法也能夠將數組轉換成字符串
result = String(a)
console.log(result) // 1,2,3,4,5
複製代碼
十一、indexOf(value)：從索引爲0開始，檢查數組中是否包含有value，有則返回匹配到的第一個索引，沒有則返回-1(不改變原數組)
// Base
let a = [1, 2, 3, 4, 5]
let result = a.indexOf(2)
console.log(result) // 1
console.log(a) // [1, 2, 3, 4, 5]
result = a.indexOf(6)
console.log(result) // -1
console.log(a) // [1, 2, 3, 4, 5]
複製代碼
十二、lastIndexOf(value)：從最後的索引開始，檢查數組找那個是否包含value，有則返回匹配到的第一個索引，沒有返回-1(不改變原數組)
// Base
let a = [1, 2, 3, 2, 5]
let result = a.lastIndexOf(2)
console.log(result) // 3
console.log(a) // [1, 2, 3, 4, 5]
result = a.lastIndexOf(6)
console.log(result) // -1
console.log(a) // [1, 2, 3, 4, 5]
複製代碼
1三、concat(value)：將數組和(或)值鏈接成新數組，返回新數組(不改變原數組)
// Base
let a = [1, 2], b = [3, 4], c = 5
let result = a.concat(b, c)
console.log(result) // [1, 2, 3, 4, 5]
console.log(a) // [1, 2]
// More
b = [3, [4]]
result = a.concat(b, c)
console.log(result) // [1, 2, 3, [4], 5] concat對於嵌套數組沒法拉平
console.log(a) // [1, 2]
複製代碼
1四、forEach()：對數組進行遍歷循環，對數組中每一項運行給定函數，參數都是function類型，默認有傳參，參數分別爲：遍歷數組內容、對應的數組索引、數組自己。沒有返回值
var arr = [1, 2, 3, 4, 5]
arr.forEach(function (item, index, a) {
console.log(item + '|' + index + '|' + (a === true))
})
// 輸出爲：
// 1|0|true
// 2|1|true
// 3|2|true
// 4|3|true
// 5|4|true
複製代碼
1五、map()：指「映射」，對數組中的每一項運行給定函數，返回每次函數調用的結果組成的新數組
var arr = [1, 2, 3, 4, 5]
var arr1 = arr.map(function (item, index, a) {
return item * item
})
console.log(arr1) // [1, 4, 9, 16, 25]
複製代碼
1六、filter()：「過濾」功能，數組中的每一項運行給定函數，返回知足過濾條件組成的數組
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
var arr1 = arr.filter(function (item, index, a) {
return index % 3 === 0 || item >= 8
})
console.log(arr1) // [1, 4, 7, 8, 9, 10]
複製代碼
1七、every()：判斷數組中每一項都是否知足條件，只有全部項都知足條件，纔會返回true
var arr = [1, 2, 3, 4, 5]
var arr1 = arr.every(function (item, index, a) {
return item < 10
})
console.log(arr1) // true
var arr2 = arr.every(function (item, index, a) {
return item < 3
})
console.log(arr2) // false
複製代碼
1八、some()：判斷數組中是否存在知足條件的項，只要有一項知足條件，就會返回true
var arr = [1, 2, 3, 4, 5]
var arr1 = arr.some(function (item, index, a) {
return item < 3
})
console.log(arr1) // true
var arr2 = arr.some(function (item, index, a) {
return item < 1
})
console.log(arr2) // false
複製代碼
綜上可知，改變原數組的API以下：
- push()、unshift()、pop()、shift()、reverse()、splice()、sort()
相關文章
- 1. JavaScript 數組去重 方法彙總
- 2. JavaScript中數組去重彙總
- 3. Javascript中數組方法彙總
- 4. JavaScript 數組操做方法彙總
- 5. JavaScript：我總結的數組API
- 6. JavaScript數組以及數組API學習總結
- 7. JavaScript之數組常用API
- 8. JavaScript數組API大合集
- 9. unity3d API彙總
- 10. JavaScript之數組API、對象API
- 更多相關文章...
- • Docker 資源彙總 - Docker教程
- • JavaScript 指南 - 網站建設指南
- • Flink 數據傳輸及反壓詳解
- • 互聯網組織的未來：剖析GitHub員工的任性之源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
