Computer >> 컴퓨터 >  >> 프로그램 작성 >> JavaScript

JavaScript 배열:초보자를 위한 가이드

과일 목록을 만들어 봅시다. 목록을 "과일"이라고 부르고 바나나, 멜론, 포도 값을 추가합니다. 아, 내가 과일을 얼마나 좋아하는지! 이것은 쇼핑 목록에 대한 자습서처럼 들릴 수 있지만 실제로는 배열을 직접 만들었습니다.

이 가이드에서는 배열이 무엇인지, 어떻게 작동하는지, 코드에서 배열을 사용해야 하는 이유를 살펴보겠습니다. JavaScript 배열 닌자가 될 수 있도록 작동 중인 배열의 몇 가지 예를 논의할 것입니다!

배열이란 무엇입니까?

배열은 데이터를 저장하는 객체입니다. 배열은 정렬된 항목 모음을 포함하며 0개 이상의 항목을 저장할 수 있습니다. 배열은 하나의 변수에 유사한 값을 저장할 수 있기 때문에 프로그래밍에 유용합니다.

예를 들어, 좋아하는 과일을 나열하기 위해 10개의 단일 변수를 작성할 필요가 없습니다. 배열을 사용하면 좋아하는 모든 과일을 하나의 변수에 추가할 수 있습니다.

다음 예를 고려하십시오.

let fruits = [
	"Banana",
	"Grapes",
	"Melon"
];

여기에서 "fruits"라는 배열을 만들었습니다. 그것은 세 가지 다른 값을 저장하며, 각각은 식료품점에서 사고 싶은 과일을 반영합니다. 배열을 선언하기 위해 항목 목록을 대괄호로 묶었습니다.

배열 선언

배열을 선언하는 방법에는 두 가지가 있습니다. 대부분의 사람들이 보는 방식은 이전에 했던 것처럼 항목 목록을 대괄호로 묶는 것입니다.

let berries = [
	"Strawberry",
	"Blueberry",
	"Gooseberry"
];

이 예제에서는 3개의 값이 있는 배열을 선언했습니다. new를 사용하는 배열 생성자를 사용할 수도 있습니다. 배열을 선언하는 키워드:

참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

let berries = new Array(
	"Strawberry",
	"Blueberry",
	"Gooseberry"
);

이러한 코드 조각은 동일한 배열을 생성하지만 다른 방법을 사용합니다. 두 번째 예에서 우리는 배열을 선언하기 위해 원형 괄호를 사용했음을 주목하십시오. 또한 new Array를 사용해야 했습니다. 배열을 선언하는 생성자. 대부분의 사람들이 첫 번째 방법을 선호하는 이유입니다. 대괄호는 훨씬 기억하기 쉽고 빠르게 입력할 수 있습니다.

배열은 동일한 데이터 유형을 포함할 필요가 없습니다. 우리의 배열은 다양한 데이터 유형을 저장할 수 있습니다.

let berries = [
	"Strawberry",
	1.50,
	true
];

이 배열은 문자열, 숫자 및 부울의 세 가지 다른 유형의 데이터를 저장합니다. 배열을 선언하는 방법에 익숙해졌으므로 배열의 내용에 액세스할 준비가 되었습니다.

배열 읽기

배열의 값을 읽을 수 없다면 배열은 그다지 유용하지 않을 것입니다. 이것이 인덱싱이 존재하는 이유입니다. 인덱싱은 목록과 같은 반복 가능한 개체의 개별 항목에 액세스하는 방법입니다.

배열에 있는 배열의 모든 요소에는 고유한 인덱스 번호가 지정됩니다. 이 숫자는 0으로 시작하며 배열의 개별 항목에 액세스하는 데 사용할 수 있습니다. "과일" 배열을 기억하십니까?

let fruits = [
	"Banana",
	"Grapes",
	"Melon"
];

이 배열에 할당된 인덱스 값은 다음과 같습니다.

  • 0:바나나
  • 1:포도
  • 2:멜론

이 번호를 사용하여 목록의 개별 항목에 액세스할 수 있습니다. 배열에서 인덱스 위치 1에 있는 과일을 식별하려고 한다고 가정해 보겠습니다. 배열 이름 뒤에 대괄호 안에 인덱스 값을 명시하면 됩니다.

fruits[1];

코드는 다음을 반환합니다. Grapes. "Grapes" 값을 저장하는 인덱스 위치 1을 참조합니다. 값 0을 전달하면 "Banana"가 반환됩니다. 존재하지 않는 항목에 액세스하려고 하면 "undefined"가 반환됩니다.

fruits[10];

출력:정의되지 않음. 인덱싱이 특히 유용한 경우는 배열의 항목을 반복할 때입니다. 어레이의 모든 과일을 콘솔에 출력하고 싶다고 가정해 봅시다. 다음과 같은 for 루프를 사용하여 그렇게 할 수 있습니다.

for (var i = 0; i < fruits.length; i++) {
	console.log(fruits[i]);
}

이 코드는 다음을 반환합니다.

Banana
Grapes
Melon

코드는 목록의 모든 항목을 반복한 다음 각 항목을 콘솔에 출력합니다. 또한 length 재산. 이것은 우리 목록의 길이를 반환합니다.

배열에 항목 추가

대부분의 경우 처음에 배열을 선언한 후 배열에 새 값을 추가하고 싶을 것입니다. push()를 사용하여 그렇게 할 수 있습니다. 배열 방식.

과일 목록에 "딸기"를 추가하는 것을 잊었습니다. 안 돼! 걱정하지 마세요. 항상 push()를 사용하여 추가할 수 있습니다. 방법:

let fruits = [
	"Banana",
	"Grapes",
	"Melon"
];

fruits.push("Strawberry");
console.log(fruits);

이제 이 코드를 실행했으므로 배열은 다음과 같습니다.

바나나 포도 멜론 딸기
1 2 3

unshift()를 사용하여 배열의 시작 부분에 데이터를 추가할 수 있습니다. . 딸기는 쇼핑 목록에서 매우 중요하기 때문에 가장 먼저 표시되기를 바랍니다.

let fruits = [
	"Banana",
	"Grapes",
	"Melon"
];

fruits.push("Strawberry");
console.log(fruits);

이렇게 하면 원래 "과일" 목록이 다음과 같이 표시됩니다.

딸기 바나나 포도 멜론
1 2 3

배열에서 항목 제거

집에 이미 멜론이 있어서 쇼핑할 필요가 없습니다. 다른 멜론을 사는 것이 무슨 의미가 있겠습니까? 멜론은 목록 끝에 있으므로 제거할 수 있는 두 가지 옵션이 있습니다.

  • splice() :인덱스 번호로 요소를 제거합니다.
  • pop() :배열의 끝에서 요소를 제거합니다.

splice()를 사용합시다. 예를 들면:

let fruits = [
	"Banana",
	"Grapes",
	"Melon"
];

fruits.splice(3, 1);
console.log(fruits);

코드 반환:

Strawberry
Banana
Grapes

splice() 두 개의 매개변수를 허용합니다. 첫 번째는 배열에서 제거할 인덱스 번호이고 두 번째는 제거할 항목의 수입니다. 이 경우 인덱스 값이 3인 항목을 제거하고 싶었으므로 "3, 1"을 매개변수로 지정했습니다.

pop() 매개변수를 허용하지 않습니다. 목록의 마지막 항목만 제거합니다.

let fruits = [
	"Banana",
	"Grapes",
	"Melon"
];

fruits.pop();
console.log(fruits);

코드 반환:

Banana
Grapes

shift()를 사용할 수도 있습니다. 목록의 시작 부분에서 항목을 제거하려면:

let fruits = [
	"Banana",
	"Grapes",
	"Melon"
];

fruits.shift();
console.log(fruits);

코드 반환:

Grapes
Melon

push() 및 unshift() 목록에 항목을 추가합니다. pop() 및 shift() 목록에서 항목을 제거합니다. splice 메서드는 인덱스 값을 기반으로 목록에서 항목을 제거하는 데 사용할 수도 있습니다.

배열의 항목 변경

바나나는 맛있는 과일이지만 종종 너무 커서 속이 조금 불편할 때 간식으로 먹기 힘든 경우가 많습니다. 아기 바나나는 먹기가 더 쉽습니다.

이제 "과일" 목록을 변경하여 일반 바나나 대신 아기 바나나를 쇼핑한다고 가정해 보겠습니다. 다른 변수와 마찬가지로 할당 연산자를 사용하여 그렇게 할 수 있습니다.

fruits[0] = "Baby bananas";
console.log(fruits);

코드 반환:

Baby bananas
Grapes
Melon

인덱스 위치 0에 있는 항목을 수정하여 "Baby bananas" 값을 저장했습니다. 이 변경을 수행하기 위해 특별한 방법을 사용할 필요는 없습니다. 할당 연산자는 배열의 값을 변경하는 데 사용됩니다.

결론

이것이 JavaScript 배열에 대해 알아야 할 기본 사항입니다. 배울 것이 더 많지만 그것이 프로그래밍을 재미있게 만드는 것입니다. 항상 해결해야 할 새로운 도전이 있습니다. 다른 건 몰라도 내가 가장 좋아하는 과일에 대해 배웠습니다. 비록 나는 이 튜토리얼에서 언급하지 않은 블랙커런트를 사랑한다고 말하고 싶습니다.

이제 전문가처럼 JavaScript 배열 작업을 시작할 준비가 되었습니다!