Array --JavaScript內置對象 描述 可以用一個變數存儲多種數據類型的Array對象,Array不是關聯數組,不能使用字元串作為索引訪問數組元素,需要使用非負整數的下標訪問數組中的元素。 和對象的某些特征很相似,例如:屬性訪問器一半相似,衍生出的使用 .call() 或者 .apply ...
Array --JavaScript內置對象
描述
可以用一個變數存儲多種數據類型的Array對象,Array不是關聯數組,不能使用字元串作為索引訪問數組元素,需要使用非負整數的下標訪問數組中的元素。
和對象的某些特征很相似,例如:屬性訪問器一半相似,衍生出的使用 .call()
或者 .apply()
將數組方法賦予對象。
較為常用的幾個方法
有的是通過改變原數組,又或是返回一個新數組的形式。方便記憶可以劃分為:增刪改查,排序,遍歷,數據和數據集功能。
陳舊的:
此區域為增刪區域
\1. push()
- 在數組末尾添加一個或多個元素,並返回新的長度。
\2. pop()
- 刪除並返回數組的最後一個元素。
\3. shift()
- 刪除並返回數組的第一個元素。
\4. unshift()
- 在數組的開頭添加一個或多個元素,並返回新的長度。
此區域為修改區域(合併)
\5. splice()
- 通過刪除或替換現有元素或者原地添加新的元素來修改數組,並以數組形式返回被修改的內容。
\6. slice()
- 返回一個新的數組對象,這一對象是一個由 begin 和 end 決定的原數組的淺拷貝。
\7. concat()
- 返回一個由當前數組和其它若幹個數組或者若幹個非數組值組合而成的新數組。
\8. join()
- 將數組(或一個類數組對象)的所有元素連接成一個字元串並返回這個字元串。
此區域為排序查找
\9. reverse()
- 顛倒數組中元素的順序。
\10. sort()
- 對數組的元素進行排序。
\11. indexOf()
- 返回在數組中可以找到一個給定元素的第一個索引,如果不存在,則返回-1。
\12. lastIndexOf()
- 返回一個指定的元素在數組中最後出現的位置,如果不存在,則返回-1。
此區域為遍歷
\13. forEach()
- 對數組的每個元素執行一次提供的函數。
\14. map()
- 創建一個新數組,其結果是該數組中的每個元素都調用一個提供的函數後返回的結果。
\15. filter()
- 創建一個新數組, 其包含通過所提供函數實現的測試的所有元素。
\16. reduce()
- 對數組中的所有元素執行一個由您提供的reducer函數(升序執行),將其結果彙總
新穎的:
此區域為數據和數據集功能
at()
- 通過下標訪問數組元素,區別於直接用方括弧訪問,可以使用負數訪問。
flat()
- 將數組扁平化,深度為1。通過傳遞一個數字參數修改深度。
flatMap()
- flat() 和 map() 的結合,先扁平(深度1)再遍歷。
Array.from()
- 類似數組或可迭代對象創建一個新的,淺拷貝的數組實例。例如字元串,map和set
Array.of()
- 創建一個數組,區別於直接使用 Array()
創建數組,括弧內的內容是數組的實際數據。假如你想創建一個長度為7的數組應該使用 Array(7)
而不是 Array.of(7)
,因為後者會創建一個[7]的數組。
entries()
- 返回一個Array迭代器對象。
Array.length
array.length 改變length屬性會發生的情況,假如length小於數組最大的下標,會將length之後的元素清除。
數組的長度跟許多方法是掛鉤的,例如 entries()
方法,會通過獲取數組長度訪問每個整數索引。可以簡單的通過 .call()
方法驗證:
const arrayLike = {
length: 3,
0: "a",
1: "b",
2: "c",
};
for (const entry of Array.prototype.entries.call(arrayLike)) {
console.log(entry);
}
// [ 0, 'a' ]
// [ 1, 'b' ]
// [ 2, 'c' ]
可以以此倆想到樓下的通用數組方法,只訪問 length
屬性和索引訪問數組元素。
空槽和數組方法
可以使用 Array(n)
創建一個長度為n的空槽數組。
對於空槽而言,許多數組方法都會照顧一下。例如 concat()
方法就會將空槽省去。亦或是將空槽視為 undefined
例如你能想到的 values()
數組遍歷
forEach()
和 for...in
兩者在特殊情況下的不同效果
for...in可能會迭代對象的原型鏈上的屬性,而array.forEach不會迭代數組的原型鏈上的屬性。此外,array.forEach可以使用break和continue語句來控制迭代。而for...in不能。
const arr1 = [1, 2, 3];
arr1.name = "shit"
arr1.forEach((i) => {
console.log(i);
}); // 1, 2, 3
for (const i in arr1) {
console.log(arr1[i]);
}; // 1, 2, 3, shit
數組複製
深拷貝,淺拷貝 主要比較對象的引用是否一致。例如對象和數組這類數據類型可以想象成保存的是指向數據的地址,淺拷貝的本質是兩個數組或者對象中的數據指向了同一個目標。而深拷貝則是兩個完全不同的數據指向。
自帶的一個淺拷貝 slice()
。
簡單的完成一個深拷貝可以使用 JSON
提供的 stringify
和 parse
方法,通過轉成 JSON
對象再轉回數組的方式。
通用數組方法
指數組的不訪問數組對象的任何內部數據,只訪問 length
屬性和索引訪問數組元素。可以使用call方法在類數組對象上調用。
const arrayLike = {
0: "a",
1: "b",
length: 2,
};
console.log(Array.prototype.join.call(arrayLike, "+")); // 'a+b'
由此來看,數組和對象的相似性還是蠻大的,又或者是較簡單的數據形式,提供的簡單方法能夠讓開發者更便捷的對數據集進行操作。