已編入索引的集合

「已建立索引的集合」是一種資料結構,在其中儲存元素 透過編號索引存取儲存在已建立索引集合中的值如下: 由 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 清單, 持續追蹤價值最簡單的形式稱為「繫結模式」 刪除時,每個值都會從陣列或物件解壓縮,並指派給 對應的變數,使用 letconst (或 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
50
30

如果 `myArray` 有三個值,`myArray[9]` 會傳回什麼?

錯誤訊息
Undefined
Null
9