インデックス登録されたコレクション

インデックス付きコレクションは、要素が保存され、 インデックスを使用してアクセスします。インデックス付きコレクションに格納される値は、 0 から始まる番号付きインデックスが割り当てられています。これは「ゼロ インデックス」と呼ばれるパターンです。 インデックス付きコレクションに格納された値には、 公開します。

配列

配列は、任意のデータ型の 0 個以上の値を保持できるコンテナです。 これには複雑なオブジェクトやその他の配列が含まれます。配列に格納される値は、 「要素」とも呼ばれる返されます。

配列を作成する

プリミティブ データ型と同様に、配列を作成するには次の 2 つの方法があります。 配列リテラル。または JavaScript の組み込み Array() コンストラクタを呼び出して使用します。 new Array() に置き換えます。配列を変数に代入すると、 iterable な方法で 単一の識別子に割り当てることができます。

配列リテラル構文では、ゼロ以上の角かっこを角かっこで囲みます（[]）。 カンマ区切りのデータ値:

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 ]

1 つの数値を 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 []

2 つの結果が同一であり、配列リテラルの構文の方が簡潔であるため 代わりに、常に配列リテラル構文を使用することを強くおすすめします。 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

割り当ての分解

割り当ての分解は、特定のプロパティから値の範囲を簡単に抽出 配列またはオブジェクトを 「展開」とも呼ばれる元のデータ構造 元の配列やオブジェクトは変更されません。

割り当ての分解では、識別子の配列型またはオブジェクト型のリストを使用して、 価値を追跡するバインディング パターンと呼ばれる最もシンプルな形式 配列またはオブジェクトからそれぞれの値が展開され、 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

配列の分解は、左から右に順番に行われます。各 の要素に対応する場合、 同じインデックスを持つ配列:

const myArray = [ 1, 2, 3 ];
const [ myElement, mySecondElement, myThirdElement ] = myArray;

myElement;
> 1

mySecondElement;
> 2

myThirdElement;
> 3

これは、オブジェクトを分解する際のデフォルトの動作でもあります。ただし、 使用された識別子が、オブジェクトのキーと一致する場合、 場合、これらの識別子には、対応するプロパティが入力されます。 値はすべて、次の値で指定される順序に関係なく

const myObject = { firstValue: 1, secondValue: 2, thirdValue 3 };
const { secondValue, thirdValue, firstValue } = myObject;

firstValue;
> 1

secondValue;
> 2

thirdValue;
> 3

要素は識別子を省略することでスキップできます。

const myArray = [ 1, 2, 3 ];
const [ firstValue,, secondValue ] = myArray;

firstValue;
> 1

secondValue;
> 3

分離構文を使用すると、分離されたモデルが value は、疎配列のように空のスロットか、 undefined の値。

const myArray = [ true, ];
const [ firstValue = "Default string.", secondValue = "Default string." ] = myArray;

firstValue;
> true

secondValue;
> "Default string."

分解は値を特定の型に強制変換しません。つまり "falsy" 値（empty など） 文字列（""）または 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

スプレッド演算子

ES6 で導入されたスプレッド演算子（...）を使用してイテラブル データを拡張する 配列、文字列、オブジェクト リテラルなどの構造体を個々の要素に分解できます。 スプレッド演算子の直後に展開対象のデータ構造が続きます。 そのデータ構造を含む変数の識別子です。

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 ]

スプレッド構文は次のコンテキストでのみ使用できます。

配列と文字列の場合、0 個以上の引数がある場合のみ、スプレッド構文が適用されます。 配列内の要素だけが期待されます。最初の例は このセクションのスプレッド演算子の構文は、...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 ]

2 つ以上の配列を構成する要素を 1 つの配列に結合するには:

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 }

スプレッド演算子は「浅い」コピーされます。つまり、 元のオブジェクトのプロトタイプと non-enumerable プロパティです。

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 { … }

配列とオブジェクトは同じ意味で使用できないことに注意してください。できないこと オブジェクトを 1 つの配列に、または配列を 1 つのオブジェクトに分割します。

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 ];` の場合、`myArray[1]` はどうなりますか？ 戻りますか？

50
30
70

`myArray` に 3 つの値がある場合、`myArray[9]` は何を返しますか。

Undefined
エラー メッセージ
9
Null