색인이 생성된 컬렉션

색인이 생성된 컬렉션은 요소가 저장되고 번호가 지정된 색인을 사용하여 액세스할 수 있습니다. 색인이 생성된 컬렉션에 저장된 값은 '0-색인 생성'이라는 패턴인 0부터 번호가 매겨진 색인이 할당됩니다. 그런 다음 다음을 참조하여 색인이 생성된 컬렉션에 저장된 값에 액세스할 수 있습니다. 색인을 생성합니다.

배열

배열은 모든 데이터 유형의 값을 0개 이상 보유할 수 있는 컨테이너입니다. 다른 배열도 포함됩니다. 배열에 저장된 값은 '요소'라고도 함 입니다.

배열 만들기

원시 데이터 유형과 마찬가지로 배열을 만드는 방법에는 두 가지가 있습니다. 배열 리터럴 또는 JavaScript의 내장 Array() 생성자 호출 new Array(). 배열을 변수에 할당하면 반복 가능한 방법으로 여러 값을 단일 식별자로 전달합니다.

배열 리터럴 구문은 0개 이상을 묶는 대괄호 세트 ([])를 사용합니다. 쉼표로 구분된 데이터 값:

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

디스트럭처링 할당

디스트럭처링 할당은 데이터에서 다양한 값을 추출하는 간결한 방법입니다. 객체를 만들어 이를 일련의 객체에 할당합니다. 이 과정을 '압축해제'라고도 합니다. 원래 데이터 구조, 원본 배열이나 객체는 수정하지 않습니다.

디스트럭처링 할당은 배열 또는 객체와 유사한 식별자 목록을 사용하여 추적하지 않아도 됩니다 결합 패턴이라고 하는 가장 단순한 형태 각 값은 배열 또는 객체에서 압축해제되어 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

디스트럭처링 문법을 사용하면 디스트럭처링이 되지 않는 경우 값은 희소 배열의 경우와 같이 빈 슬롯이거나 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 ]

둘 이상의 배열을 구성하는 요소를 단일 배열로 병합하는 방법:

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 }

분산 연산자는 '얕은' 복사됩니다. 즉, 배포의 원본 객체의 프로토타입 및 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 { … }

배열과 객체는 서로 바꿔서 사용할 수 없다는 점에 유의하세요. 할 수 없습니다. 객체를 배열로 분산하거나 배열을 객체로 분산할 수 있습니다.

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.

기호와 마찬가지로 %TypedArray%는 내장 함수 (일반적으로 %TypedArray% 또는 @@TypedArray로 문서화됨) 전역 속성으로 오인될 수 없도록)는 일반적인 의미로 new로 호출하거나 직접 호출할 수 없습니다. 대신 %TypedArray%는 개별 항목의 상위 슈퍼클래스를 나타냅니다. 생성자는 각각 특정 바이너리 데이터 형식으로 작동합니다. 이 고유한 %TypedArray% 슈퍼클래스는 모든 %TypedArray% 생성자 서브클래스와 인스턴스가 상속합니다.

이해도 확인

`const myArray = [ 30, 50, 70 ];` 일 때 `myArray[1]`은 무엇인가요? 반품하시겠습니까?

50
30
70

`myArray에 값이 3개인 경우 `myArray[9]`는 무엇을 반환하나요?

Undefined
오류 메시지
9
Null