정보실

웹학교

정보실

javascript JavaScript에서 배열 이해 - JavaScript guide

본문

목차​

  1. JavaScript 개발자 콘솔을 사용하는 방법
  2. HTML에 JavaScript를 추가하는 방법
  3. JavaScript에서 구문 및 코드 구조 이해
  4. JavaScript로 주석을 작성하는 방법
  5. JavaScript에서 데이터 유형 이해
  6. JavaScript에서 문자열로 작업하는 방법
  7. JavaScript에서 문자열을 인덱싱, 분할 및 조작하는 방법
  8. JavaScript에서 데이터 유형을 변환하는 방법
  9. JavaScript에서 변수, 범위 및 게양 이해
  10. 연산자를 사용하여 JavaScript에서 수학을 수행하는 방법
  11. JavaScript에서 배열 이해
  12. JavaScript에서 배열 메서드를 사용하는 방법 : Mutator 메서드
  13. JavaScript에서 배열 메서드를 사용하는 방법 : Accessor 메서드
  14. JavaScript에서 배열 메서드를 사용하는 방법 : Iteration 메서드
  15. JavaScript에서 객체 이해
  16. JavaScript에서 날짜 및 시간 이해
  17. JavaScript에서 이벤트 이해
  18. JavaScript에서 JSON으로 작업하는 방법
  19. JavaScript로 조건문을 작성하는 방법
  20. JavaScript에서 Switch 문을 사용하는 방법
  21. JavaScript에서 While 및 Do ... While 루프 사용
  22. JavaScript에서 For 루프를 생성하는 방법
  23. JavaScript에서 함수를 정의하는 방법
  24. JavaScript의 프로토 타입 및 상속 이해
  25. JavaScript에서 클래스 이해
  26. JavaScript에서 객체 메소드를 사용하는 방법
  27. JavaScript에서 This, Bind, Call 및 Apply 이해

JavaScript에서 배열 이해 


소개 


JavaScript의 배열은 데이터를 저장하는 데 사용되는 전역 객체 유형입니다. 배열은 0 개 이상의 데이터 유형을 포함하는 정렬 된 컬렉션 또는 목록으로 구성되며 0부터 시작하는 번호가 지정된 인덱스를 사용하여 특정 항목에 액세스합니다.


배열은 단일 변수에 여러 값을 저장하므로 코드를 압축하고 구성하여 더 읽기 쉽고 유지 관리가 가능하므로 매우 유용합니다. 배열에는 숫자, 문자열 및 객체를 포함한 모든 데이터 유형이 포함될 수 있습니다.


배열이 어떻게 유용 할 수 있는지 보여주기 위해 세계의 5 개 대양을 자신의 변수에 할당하는 것을 고려하십시오.


https://www.digitalocean.com/community/tutorials/understanding-arrays-in-javascript 


oceans.js
// Assign the five oceans to five variables
const ocean1 = "Pacific";
const ocean2 = "Atlantic";
const ocean3 = "Indian";
const ocean4 = "Arctic";
const ocean5 = "Antarctic";

이 방법은 매우 장황하며 유지 관리 및 추적이 어려워 질 수 있습니다.


배열을 사용하면 데이터를 단순화 할 수 있습니다.


oceans.js
// Assign the five oceans
let oceans = [
    "Pacific",
    "Atlantic",
    "Indian",
    "Arctic",
    "Antarctic",
];

5 개의 개별 변수를 만드는 대신 이제 5 개의 요소를 모두 포함하는 하나의 변수가 있습니다. 배열을 만들기 위해 대괄호 ([])를 사용했습니다.


특정 항목에 액세스하려면 해당 색인을 변수에 추가하십시오.

// Print out the first item of the oceans array
oceans[0];
Output
Pacific

이 자습서에서는 배열을 만드는 방법을 배웁니다. 그것들이 어떻게 색인 되는지; 배열에서 항목을 추가, 수정, 제거 또는 액세스하는 방법; 배열을 반복하는 방법.


배열 만들기 


JavaScript에서 배열을 만드는 방법에는 두 가지가 있습니다.

  • 대괄호를 사용하는 배열 리터럴입니다.
  • 새 키워드를 사용하는 배열 생성자

[]로 초기화 된 배열 리터럴을 사용하여 상어 종 배열을 만드는 방법을 보여 드리겠습니다.


sharks.js
// Initialize array of shark species with array literal
let sharks = [
    "Hammerhead",
    "Great White",
    "Tiger",
];

이제 배열 생성자로 만든 동일한 데이터가 있으며 여기에는 new Array()로 초기화됩니다.

sharks.js
// Initialize array of shark species with array constructor
let sharks = new Array(
    "Hammerhead",
    "Great White",
    "Tiger",
);

두 방법 모두 배열을 만듭니다. 그러나 새 Array() 생성자 메서드에 불일치가 발생하고 예기치 않은 결과가 발생할 수 있으므로 배열 리터럴 (대괄호) 메서드가 훨씬 일반적이고 선호 됩니다. 배열 생성자가 줄을 밟을 경우를 대비하여 유용합니다.

전체 배열을 인쇄하여 입력과 동일하게 표시 할 수 있습니다.

// Print out the entire sharks array
sharks;
Output
[ 'Hammerhead', 'Great White', 'Tiger' ]

배열은 종종 유사한 데이터 유형의 목록을 그룹화 하는 데 사용되지만 기술적으로 다른 배열을 포함하여 모든 값 또는 여러 값을 포함 할 수 있습니다.


// Initialize array of mixed datatypes
let mixedData = [
    "String",
    null,
    7,
    [
        "another",
        "array",
    ],
];

배열을 만든 후에는 여러 가지 방법으로 배열을 조작 할 수 있지만 먼저 배열의 색인 생성 방법을 이해해야 합니다.


참고 : 마지막 쉼표가 있거나 없는 배열의 마지막 항목이 표시 될 수 있습니다. 이것을 후행 쉼표라고 합니다. 그것들을 생략하는 것이 일반적이지만, 일반적으로 코드에 그것들을 포함 시키는 것이 선호 됩니다. 버전 관리 차이를 보다 명확하게 하고 오류 없이 항목을 쉽게 추가하고 제거 할 수 있기 때문입니다. JSON 파일에서는 후행 쉼표를 사용할 수 없습니다.


인덱싱 배열 


JavaScript에서 문자열 인덱싱 및 조작에 대해 배운 경우 문자열이 배열과 유사하므로 이미 배열 인덱싱 개념에 익숙 할 수 있습니다.


배열에는 이름 / 값 쌍이 없습니다. 대신 0으로 시작하는 정수 값으로 색인화 됩니다. 다음은 seaCreatures에 지정된 배열 예입니다.


seacreatures.js
let seaCreatures = [
    "octopus",
    "squid",
    "shark",
    "seahorse",
    "starfish",
];

다음은 seaCreatures 배열의 각 항목이 색인 되는 방법에 대한 분석입니다.

octopussquidsharkseahorsestarfish
01234

배열의 첫 번째 항목은 낙지이며 0으로 색인됩니다. 마지막 항목은 불가사리이며 4로 색인됩니다. 계산은 인덱스로 0으로 시작하며 자연적인 직관에 반하여 1부터 계산을 시작하므로 특별한 주의가 필요합니다. 자연스러워 질 때까지 이것을 기억해야 합니다.


length 속성을 가진 배열에 몇 개의 항목이 있는지 확인할 수 있습니다.


seaCreatures.length;
Output
5

seaCreatures의 인덱스는 0 ~ 4로 구성되지만 length 속성은 1부터 시작하여 배열의 실제 항목 수를 출력합니다.


If we want to find out the index number of a specific item in an array, such as seahorse, we can use the indexOf() method.


seaCreatures.indexOf("seahorse");
Output
3

존재하지 않는 값과 같은 색인 번호를 찾지 못하면 콘솔은 -1을 리턴 합니다.

seaCreatures.indexOf("seahorse");
Output
3

존재하지 않는 값과 같은 색인 번호를 찾지 못하면 콘솔은 -1을 리턴 합니다.

seaCreatures.indexOf("seahorse");
Output
3

존재하지 않는 값과 같은 색인 번호를 찾지 못하면 콘솔은 -1을 리턴 합니다.

seaCreatures.indexOf("cuttlefish");
Output
-1

배열 내 항목에 해당하는 색인 ​​번호를 사용하면 해당 항목을 다루기 위해 개별적으로 각 항목에 액세스 할 수 있습니다.


배열의 항목에 액세스 


JavaScript 배열의 항목은 대괄호로 묶은 항목의 색인 번호를 참조하여 액세스합니다.

seaCreatures[1];
Output
squid

0은 항상 배열의 첫 번째 항목을 출력한다는 것을 알고 있습니다. length 속성에 대한 작업을 수행하고 이를 새 인덱스 번호로 적용하여 배열에서 마지막 항목을 찾을 수도 있습니다.

const lastIndex = seaCreatures.length - 1;

seaCreatures[lastIndex];
Output
starfish

존재하지 않는 항목에 액세스하려고 하면 정의되지 않은 상태로 반환 됩니다.

seaCreatures[10];
Output
undefined

중첩 배열의 항목에 액세스하려면 내부 배열에 해당하는 다른 인덱스 번호를 추가합니다.

let nestedArray = [
    [
        "salmon",
        "halibut",
    ],
    [
        "coral",
        "reef",
    ]
];

nestedArray[1][0];
Output
coral

위의 예에서, nestedArray 변수의 위치 1에있는 배열에 액세스 한 다음 내부 배열의 위치 0에있는 항목에 액세스했습니다.


배열에 항목 추가 


seaCreatures 변수에는 0에서 4까지의 인덱스로 구성된 5 개의 항목이 있었습니다. 배열에 새 항목을 추가하려면 다음 색인에 값을 할당 할 수 있습니다.

seaCreatures[5] = "whale";

seaCreatures;
Output
[ 'octopus', 'squid', 'shark', 'seahorse', 'starfish', 'whale' ]

항목을 추가하고 실수로 색인을 건너 뛰면 배열에 정의되지 않은 항목이 생성됩니다.


seaCreatures[7] = "pufferfish";

seaCreatures;
Output
[ 'octopus', 'squid', 'shark', 'seahorse', 'starfish', 'whale', , 'pufferfish' ]

추가 배열 항목에 액세스하려고 하면 정의되지 않은 상태로 반환 됩니다.

seaCreatures[6]
Output
undefined

이와 같은 문제는 push() 메서드를 사용하여 피할 수 있습니다.이 메서드는 배열 끝에 항목을 추가합니다.


// Append lobster to the end of the seaCreatures array
seaCreatures.push("lobster");

seaCreatures;
Output
[ 'octopus', 'squid', 'shark', 'seahorse', 'starfish', , 'whale', 'pufferfish', 'lobster' ]

스펙트럼의 다른 쪽 끝에서 unshift() 메서드는 배열의 시작 부분에 항목을 추가합니다.


// Append dragonfish to the beginning of the seaCreatures array
seaCreatures.unshift("dragonfish");

seaCreatures;
Output
[ 'dragonfish', 'octopus', 'squid', 'shark', 'seahorse', 'starfish', 'whale', , 'pufferfish', 'lobster' ]

push()와 unshift() 사이에서 배열의 시작과 끝에 항목을 추가 할 수 있습니다.


배열에서 항목 제거 


배열에서 특정 항목을 제거하려면 splice() 메서드를 사용합니다. seaCreatures 배열에서 실수로 미리 정의되지 않은 배열 항목을 만들었으므로 이제 제거하겠습니다.


seaCreatures.splice(7, 1);

seaCreatures;
Output
[ 'dragonfish', 'octopus', 'squid', 'shark', 'seahorse', 'starfish', 'whale', 'pufferfish', 'lobster' ]

splice() 메서드에서 첫 번째 매개 변수는 제거 할 인덱스 번호 (이 경우 7)를 나타내고 두 번째 매개 변수는 제거 할 항목 수입니다. 우리는 1을 넣습니다. 이는 하나의 항목 만 제거됨을 나타냅니다.


splice() 메소드는 원래 변수를 변경합니다. 원래 변수를 변경하지 않으려면 slice()를 사용하여 결과를 새 변수에 지정하십시오.


let newArray = slice(7, 1);

pop() 메소드는 배열의 마지막 항목을 제거합니다.


// Remove the last item from the seaCreatures array
seaCreatures.pop();

seaCreatures;
Output
[ 'dragonfish', 'octopus', 'squid', 'shark', 'seahorse', 'starfish', 'whale', 'pufferfish' ]

랍스터는 배열의 마지막 항목으로 제거되었습니다. 배열의 첫 번째 항목을 제거하기 위해 shift () 메소드를 사용합니다.


// Remove the first item from the seaCreatures array
seaCreatures.shift();

seaCreatures;
Output
[ 'octopus', 'squid', 'shark', 'seahorse', 'starfish', 'whale', 'pufferfish' ]

pop()과 shift()를 사용하여 배열의 시작과 끝에서 항목을 제거 할 수 있습니다. 배열의 나머지 항목은 원래 색인 번호를 유지하므로 가능한 경우 pop()을 사용하는 것이 좋습니다.


배열에서 항목 수정 


일반 변수를 사용하는 것처럼 대입 연산자를 사용하여 새 값을 할당하여 배열의 모든 값을 덮어 쓸 수 있습니다.


// Assign manatee to the first item in the seaCreatures array
seaCreatures[0] = "manatee";

seaCreatures;
Output
[ 'manatee', 'squid', 'shark', 'seahorse', 'starfish', 'whale', 'pufferfish' ]

값을 수정하는 또 다른 방법은 새 매개 변수와 함께 splice() 메서드를 사용하는 것입니다. 인덱스 3의 항목 인 해마의 값을 변경하려면 해당 항목을 제거하고 대신 새 항목을 추가 할 수 있습니다.

// Replace seahorse with sea lion using splice method
seaCreatures.splice(3, 1, "sea lion");

seaCreatures();
Output
[ 'manatee', 'squid', 'shark', 'sea lion', 'starfish', 'whale', 'pufferfish' ]

위의 예에서, 우리는 배열에서 해마를 제거하고 인덱스 3에 새로운 값을 넣었습니다.


배열을 통한 루핑 


length 속성을 활용하여 for 키워드를 사용하여 배열 전체를 반복 할 수 있습니다. 이 예에서는 조개류 배열을 만들고 각 색인 번호와 각 값을 콘솔에 인쇄 할 수 있습니다.


// Create an array of shellfish species
let shellfish = [
    "oyster",
    "shrimp",
    "clam",
    "mussel",
];

// Loop through the length of the array
for (let i = 0; i < shellfish.length; i++) {
  console.log(i, shellfish[i]);
}
Output
0 'oyster' 1 'shrimp' 2 'clam' 3 'mussel'

JavaScript의 새로운 기능인 for ... of 루프를 사용할 수도 있습니다.

// Create an array of aquatic mammals
let mammals = [
    "dolphin",
    "whale",
    "manatee",
];

// Loop through each mammal
for (let mammal of mammals) {
    console.log(mammal);
}
Output
dolphin whale manatee

for ... of 루프는 배열에 있는 요소의 인덱스 번호를 검색하지 않지만 일반적으로 배열을 반복하는 더 간단하고 간결한 방법입니다. 


루프를 사용하면 웹 사이트의 데이터베이스에서 항목을 표시 할 때와 같이 배열의 전체 값을 인쇄하는 데 매우 유용합니다.


결론 


배열은 JavaScript 프로그래밍에서 매우 다양하고 기본적인 부분입니다. 이 학습서에서는 배열 작성 방법, 배열 색인 작성 방법 및 항목 작성, 제거 및 수정과 같이 배열에서 작업하는 가장 일반적인 몇 가지 태스크를 학습했습니다. 또한 배열을 반복하는 두 가지 방법을 배웠는데, 이는 데이터를 표시하는 일반적인 방법으로 사용됩니다.



페이지 정보

조회 63회 ]  작성일19-10-27 18:04

웹학교