淺談Array --JavaScript內建物件

WaterRec發表於2023-03-29
JavaScript物件

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'

由此來看，陣列和物件的相似性還是蠻大的，又或者是較簡單的資料形式，提供的簡單方法能夠讓開發者更便捷的對資料集進行操作。

相關文章