「已建立索引的集合」是一種資料結構,在其中儲存元素
透過編號索引存取儲存在已建立索引集合中的值如下:
由 0
開始且有編號的索引,稱為「零索引」模式。
接著,您就可以參照
這些屬性的索引
陣列
陣列是一種容器,可容納任何資料類型的零或多個值。 包括複雜的物件或其他陣列儲存在陣列中的值為 有時也稱為「元素」陣列。
建立陣列
與原始資料類型一樣,建立陣列的方法有兩種:
陣列常值,或叫用 JavaScript 的內建 Array()
建構函式
new Array()
。將陣列指派給變數可產生高度可攜性
並以「可疊代」的方式指派
將多個值對應至單一 ID。
陣列常值語法會使用一組括號 ([]
) 圍繞零或多個
以半形逗號分隔的資料值:
const myArray = [];
陣列建構函式語法會使用 JavaScript 內建的 Array
物件做為
建構函式為 new
關鍵字:
const myArray = new Array();
陣列常值和陣列建構函式語法都能讓您填入 但語法稍有不同 陣列常值語法會在 ,這與產生的陣列相同:
const myArray = [ true, null, "String", false ];
myArray;
> [ true, null, "String", false ]
陣列建構函式語法使用逗號分隔值做為引數, 特殊行為例外狀況:
const myArray = new Array( true, null, "String", false );
myArray;
> Array(4) [ true, null, "String", false ]
將單一數字值傳遞至 Array
建構函式時,該值
則未指派到結果陣列中的第 0 名。而是改為陣列
是使用該數量的空白運算單元數量建立而成。這並不代表
陣列限制。新增及移除項目的方式相同
與陣列常值相同
// Firefox:\
const myArray = new Array( 10 );
myArray;
> Array(10) [ <10 empty slots> ]
// Chrome:
const myArray = new Array( 10 );
myArray;
> (10) [empty × 10]
含有空運算單元的陣列 (有時稱為「稀疏陣列」) 是特殊的
用途空白,而不是包含 undefined
或明確的 null
值
版位通常是 (但不一定) 視為undefined
語言。
您可能會不小心使用 建立陣列常值時,省略逗號之間的值:
const myArray = [ true,, true, false ];
myArray;
> Array(4) [ true, <1 empty slot>, true, false ]
在所有情況下都不視為有意義的值,但會顯示空白的運算單元 會計入陣列的總長度,因此可能會 疊代 陣列的值:
const myArray = [ 1,, 3, 4 ];
myArray.length;
> 4
for( const myValue of myArray ) {
console.log( myValue + 10 );
}
> 11
> NaN
> 13
> 14
這些行為是 JavaScript 早期設計決策之一的暫緩。 請避免在現代開發作業中使用稀疏陣列。
和基元一樣,陣列常值
沿用其相應建構函式的屬性和方法。
陣列是特殊的物件形式,因此陣列常值語法和
new Array()
語法會建立函式完全相同的結果:
沿用 Array
建構函式的原型。
const arrayLiteral = [];
const arrayConstructor = new Array();
typeof arrayLiteral;
> "object"
arrayLiteral;
> Array []
length: 0
<prototype>: Array []
typeof arrayConstructor;
> "object"
arrayConstructor;
> Array []
length: 0
<prototype>: Array []
由於這兩個結果相同,且陣列常值語法會更精簡
和常值,我們強烈建議一律使用陣列常值語法,而非
new Array()
語法。
存取陣列值
您可以存取陣列中的個別元素,方法是使用括號標記法、
位於陣列或其識別碼 (內含[]
參照該元素索引的數字:
[ "My string", "My other string" ][ 1 ];
> "My other string"
const myArray = [ "My string", 50, true ];
myArray[ 0 ];
> "My string"
myArray[ 1 ];
> 50
myArray[ 2 ];
> true
JavaScript 中的陣列不具有關聯、 因此您無法使用任意字串做為索引不過,數字 系統會將用於存取陣列元素的值強制轉換為後方的字串值 情境,也就是您可以使用只包含數字的字串值 字元:
const myArray = [ "My string", 50, true ];
myArray[ 2 ];
> true
myArray[ "2" ];
> true
若嘗試存取陣列中定義的元素除外,
undefined
,而不是錯誤:
const myArray = [ "My string", 50, true ];
myArray[ 9 ];
> undefined
解構作業
解構指派作業是輕鬆從多個來源擷取特定範圍的值 陣列或物件,並指派給一組集合 識別碼,有時也稱為「解壓縮」原始資料結構 但不會修改原始陣列或物件
解構指派作業會使用陣列或物件類似的 ID 清單,
持續追蹤價值最簡單的形式稱為「繫結模式」
刪除時,每個值都會從陣列或物件解壓縮,並指派給
對應的變數,使用 let
或 const
(或 var
):
const myArray = [ "A string", "A second string" ];
const [ myFirstElement, mySecondElement ] = myArray;
const myObject = { firstValue: false, secondValue: true };
const { myProp, mySecondProp } = myObject;
myFirstElement;
> "My string"
mySecondElement;
> "Second string"
myProp;
> false
mySecondProp;
> true
請使用大括號 ({}
) 刪除物件,方括號 ([]
) 可
刪除陣列
const myArray = [ false, true ];
const myObject = { firstValue: false, secondValue: true };
const [ myProp, mySecondProp ] = myObject;
> Uncaught TypeError: myObject is not iterable
const { myElement, mySecondElement } = myArray;
myElement
> undefined
mySecondElement;
> undefined
解構陣列時,系統會依照從左到右依序排序。每項 ID 會對應到 具有相同索引的陣列:
const myArray = [ 1, 2, 3 ];
const [ myElement, mySecondElement, myThirdElement ] = myArray;
myElement;
> 1
mySecondElement;
> 2
myThirdElement;
> 3
這是解構物件時的預設行為。不過, 用於解構指派作業的識別碼,與物件的 則這些 ID 會填入相應的屬性 值,無論指定順序為何:
const myObject = { firstValue: 1, secondValue: 2, thirdValue 3 };
const { secondValue, thirdValue, firstValue } = myObject;
firstValue;
> 1
secondValue;
> 2
thirdValue;
> 3
如不使用 ID,則可略過元素:
const myArray = [ 1, 2, 3 ];
const [ firstValue,, secondValue ] = myArray;
firstValue;
> 1
secondValue;
> 3
解構語法還可讓您指派預設值,以在發生解構函式時指派預設值
值會是空白運算單元 (例如稀疏陣列的情況),或是
undefined
的值。
const myArray = [ true, ];
const [ firstValue = "Default string.", secondValue = "Default string." ] = myArray;
firstValue;
> true
secondValue;
> "Default string."
解構工作不會強制將值強制轉換為特定型別。也就是說
"falsy" 值,例如空白
字串 (""
) 或 null
仍視為有意義的拆解值:
const myArray = [ false, null, 0, "",, undefined ];
const [ falseValue = true, nullValue = true, zeroValue = true, emptyStringValue = true, emptySlot = true, undefinedValue = true ] = myArray;
falseValue;
> false;
nullValue;
> null
zeroValue;
> 0
emptyStringValue;
> ""
emptySlot;
> true
undefinedValue;
> true
Spread 運算子
使用 ES6 中導入的分散運算子 (...
) 展開可疊代資料
例如陣列、字串或物件實字,分割成個別元素。
分散運算子緊接著是要擴充的資料結構
或是包含該資料結構的變數 ID
const myArray = [ 1, 2, 3 ];
console.log( ...myArray );
> 1 2 3
擴散語法主要用於複製及合併陣列:
const myArray = [ 4, 5, 6 ];
const mySecondArray = [1, 2, 3, ...myArray ];
mySecondArray;
> Array(6) [ 1, 2, 3, 4, 5, 6 ]
您只能在下列情況下使用分散語法:
如果是陣列和字串,則傳輸語法僅適用於零個或多個引數的位置
函式呼叫中或陣列中的元素預期會出現。第一個範例
本區段運作時之所以適用,是因為這個語法會將 ...myArray
做為
內建 console.log
方法的引數。
舉例來說,您無法將資料分散至外部的變數 另一個陣列:
const myArray = [ 1, 2, 3 ];
const spreadVariable = ...myArray;
> Uncaught SyntaxError: Unexpected token '...'
不過,如要複製陣列,請將原始陣列分散至陣列常值:
const myArray = [ 1, 2, 3 ];
const spreadArray = [ ...myArray ];
spreadArray;
> Array(3) [ 1, 2, 3 ]
如何將由兩個以上陣列的元素合併成單一陣列:
const myArray = [ 1, 2, 3 ];
const mySecondArray = [ 4, 5, 6 ];
const myNewArray = [ ...myArray, ...mySecondArray ];
myNewArray;
> Array(6) [ 1, 2, 3, 4, 5, 6 ]
或者,在函式呼叫中,將陣列的元素做為個別引數傳遞:
const myArray = [ true, false ];
const myFunction = ( myArgument, mySecondArgument ) => {
console.log( myArgument, mySecondArgument );
};
myFunction( ...myArray );
> true false
擴散運算子的使用範圍擴大 ES2018 物件常值。 與陣列一樣,您可以使用分散運算子來複製或合併物件:
const myObj = { myProperty : true };
const mySecondObj = { ...myObj };
mySecondObj;
> Object { myProperty: true }
const myFirstObj = { myProperty : true };
const mySecondObj = { additionalProperty : true };
const myMergedObj = { ...myFirstObj, ...mySecondObj };
myMergedObj;
> Object { myProperty: true, additionalProperty: true }
擴散運算子會建立「淺層」副本。這表示系統不會複製 原始物件的原型,以及非列舉 資源。
const myCustomPrototype = { protoProp: "My prototype." };
const myObj = Object.create( myCustomPrototype, {
myEnumerableProp: {
value: true,
enumerable: true
},
myNonEnumerableProp: {
value: false,
enumerable: false
}
});
const myNewObj = { ...myObj };
myObj;
> Object { myEnumerableProp: true, … }
myEnumerableProp: true
myNonEnumerableProp: false
<prototype>: Object { protoProp: "My prototype." }
myNewObj;
> Object { myEnumerableProp: true }
myEnumerableProp: true
<prototype>: Object { … }
請記住,陣列和物件無法交替使用。禁止事項 將物件散佈到陣列或陣列中。
REST 運算子
雖然運算子本身的語法相同,但其餘運算子 (...
)
就會根據用於結構定義的相反函式來執行相反函式。而不是
將其擴充為個別元素
解構作業,或
函式參數,則可將其他運算子結合
歸入可疊代資料結構中這個名稱來自於
用於收集「其餘」資料值。
與解構指派作業搭配使用時,語法稱為「rest 屬性」。 語法。
const myArray = [ "First", "Second", "Third", "Fourth", "Fifth" ];
[ myFirstElement, mySecondElement, ...remainingElements ] = myArray;
myFirstElement;
> "First"
mySecondElement;
> "Second"
remainingElements;
> Array(3) [ "Third", "Fourth", "Fifth"]
用於向函式提供無限數量的引數時, 語法稱為「rest 參數」語法:
function myFunction( ...myParameters ) {
let result = 0;
myParameters.forEach( ( myParam ) => {
result += myParam;
});
return result;
};
myFunction( 2, 2 );
> 4
myFunction( 1, 1, 1, 10, 5 );
> 18
myFunction( 10, 11, 25 );
> 46
%TypedArray%
型別陣列是 ES6 功能,用途為儲存結構化二進位資料, 例如處理上傳的檔案 WebGL。
和 Symbols 一樣,%TypedArray%
內建函式 (通常記錄為 %TypedArray%
或 @@TypedArray
)
因此不會被誤認為全域屬性)
您無法透過 new
叫用或直接呼叫它。
而是 %TypedArray%
參照個人的父項父類別
建構函式建立而成,每個建構函式都能與特定二進位資料格式搭配運作。
內建 %TypedArray%
父類別提供屬性和公用程式方法
所有 %TypedArray%
建構函式子類別及其執行個體都會繼承。
隨堂測驗
考量到 `const myArray = [ 30, 50, 70 ];` 的情況為何 傳回?
70
如果 `myArray` 有三個值,`myArray[9]` 會傳回什麼?
Undefined
9
Null