자바 배열. 10개의 블로그 게시물에서 초급에서 고급까지의 파트 6 JavaScript 과정

이것은 초급에서 고급으로 안내하는 JavaScript 블로그 게시물 시리즈의 6부입니다. 이 시리즈가 끝나면 JavaScript로 코딩을 시작하기 위해 알아야 할 모든 기본 사항을 알게 될 것입니다. 더 이상 고민하지 않고 여섯 번째 튜토리얼을 시작하겠습니다.

자바 배열 – 목차:

1. 배열 – 기본 정보
2. 자바 배열에 항목 추가하기
3. 배열에서 항목 제거
4. 배열에서 길이 찾기
5. 배열 정렬
6. 배열의 요소 반전
7. 각각
8. 배열에 포함

이 자습서에서는 코딩 환경이 이미 설정되어 있다고 가정합니다. 이전 자습서를 따랐다면 이미 열려 있어야 합니다. 어떤 이유로 설정을 종료했다면 이 시리즈의 파트 4에서 전체 설정 지침을 찾을 수 있습니다. 이 자습서에서는 코딩을 위해 Google Chrome Snippets 환경을 설정하는 방법을 안내합니다.

Google Chrome을 사용하는 데 어느 정도 익숙하다면 이 튜토리얼을 설정하는 빠른 방법이 있습니다. 그렇지 않으면 코딩 환경을 설정하는 방법에 대한 단계별 지침의 전체 세트에 대해 파트 4를 확인할 수 있습니다.

Mac을 사용하는 경우 콘솔을 여는 키보드 단축키는 Chrome을 연 후 "Option + Command + J"를 누르는 것입니다. Windows 장치를 사용하는 경우 "Control + Shift + J"의 키보드 단축키를 사용하여 Chrome을 연 후 JavaScript 콘솔을 열 수 있습니다. 또는 상단 메뉴로 이동하여 보기 -> 개발자 -> JavaScript 콘솔로 이동할 수도 있습니다. 콘솔이 열리면 "콘솔" 바로 옆에 있는 "소스" 탭을 클릭할 수 있습니다. 이제 Snippets가 표시됩니다. 이전에 이미 사용하기 시작한 스니펫에서 계속 코딩하거나 "+ 새 스니펫" 버튼을 클릭하여 새 스니펫을 만들 수 있습니다. 연습할 수 있는 이 자습서에 대한 코딩 설정이 있는 한 계속할 수 있습니다.

Java 배열 - 기본 정보

배열은 많은 프로그래밍 언어에서 많이 사용되며 JavaScript도 예외는 아닙니다. 그리고 그것은 좋은 이유가 있습니다. 하지만 배열이 무엇부터 시작해야 하는지 궁금할 것입니다. 배열은 본질적으로 특정 정의된 방법으로 액세스하고 조작할 수 있는 관련 데이터의 모음입니다. 보다 완전한 이해를 위해 배열에 대한 몇 가지 예를 살펴보겠습니다.

const numbersUntilTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const testAnswers = [true, true, false, false, true];
const pets = ["dogs", "cats", "birds", "fishes"];

자바 배열을 사용하여 여러 종류의 데이터를 저장할 수 있습니다. 예를 들어, 위의 코드에서 일부 숫자, 부울 및 문자열 데이터 유형을 저장했습니다.

다른 변수를 생성하는 것처럼 자바 배열을 생성할 수 있습니다. 왼쪽에는 const 또는 let 키워드가 있고 방정식의 오른쪽에는 배열의 내용이 있습니다. 주의해야 할 한 가지는 배열을 만들 때 위의 코드에서와 같이 항목을 둘러싸기 위해 대괄호를 사용한다는 것입니다. 또한 데이터 유형에 관계없이 각 항목을 쉼표로 구분합니다.

이 자습서에서는 이 자습서의 모든 내용을 순차적으로 복사하여 붙여넣거나 모든 내용을 Chrome의 JavaScript 스니펫에 입력할 수 있는 방식으로 코드를 작성하고, 순서를 따르면 예상대로 작동합니다. 예를 들어 이것이 의미하는 바는 튜토리얼에서 const 키워드로 변수를 한 번 정의하는 경우 일반적으로 정확히 같은 이름을 가진 다른 변수를 다시 정의할 수 없다는 것입니다. 그렇기 때문에 코드의 일부를 부분적으로 복사하여 붙여넣으려는 경우 코드에서도 해당 변수를 정의하는 것이 좋습니다. 튜토리얼이 제시되는 순서대로 따른다면 문제가 되지 않습니다.

Java 배열에 대해 알아야 할 첫 번째 사항 중 하나는 배열을 만든 후에는 해당 요소에 액세스해야 한다는 것입니다. 배열에는 "번호가 매겨진 인덱스"라는 것이 있으며 이것이 실제로 의미하는 바는 JavaScript에서 생성하는 모든 요소에는 왼쪽에서 오른쪽으로, 0에서 Java 배열의 길이까지 연결된 숫자가 있다는 것입니다. 마이너스 1.

예를 들어 위의 애완 동물 코드에서 변수 이름을 적고 대괄호를 열고 액세스하려는 항목의 인덱스를 입력하고 대괄호를 닫음으로써 "개"의 첫 번째 요소에 액세스할 수 있습니다. :

alert(pets[0]);

마찬가지로 더 높은 숫자를 입력하면 표시 중인 경고 상자에 다른 요소가 표시됩니다.

alert(pets[1]);
alert(pets[2]);
alert(pets[3]);

Pets 배열에 4개의 요소가 있고 인덱스를 0부터 시작했기 때문에 배열의 마지막 항목은 배열의 전체 길이보다 1 작은 pet[3]으로 액세스됩니다. 이 시점에서 배열을 만들고 해당 배열의 항목에 액세스할 수 있으므로 해당 배열을 수정하는 것은 어떻습니까? 새 항목을 추가하거나 기존 항목을 변경하거나 항목을 삭제하는 것은 어떻습니까? 음, 단계별로 수행하고 배열에 새 항목을 추가하는 것으로 시작하겠습니다.

자바 배열에 항목 추가하기

배열에 다른 항목을 추가할 수 있는 여러 가지 방법이 있습니다. 배열의 끝에 새 항목을 추가하려는 경우 "푸시" 방법을 사용할 수 있습니다. 이것은 새 항목을 배열로 밀어넣기라고도 합니다. 푸시된 항목은 배열의 끝에 옵니다. 예를 들어:

pets.push("snakes");
// lets verify that we have snakes as the last item
// by displaying the array contents
alert(pets);

Java 배열에 항목을 첫 번째 요소로 특별히 추가하려는 경우 "unshift" 키워드를 사용할 수 있습니다. 예를 들어 살펴보겠습니다.

//running this code will shift all the values
// to one side and will add the first pet of dragon
pets.unshift(“dragons”); 
//lets verify this by displaying the contents of the array
alert(pets);

배열의 끝이나 배열의 시작 부분에 항목을 추가할 수 있다는 것은 좋은 일이지만 어떤 이유로 배열의 특정 위치에 항목을 삽입하고 싶다면 어떻게 해야 할까요? 거북이를 세 번째 위치에 추가하고 싶다고 가정해 보겠습니다. 그게 가능할까요? 예, 그렇습니다. 배열에 항목을 삽입하기 위해 배열의 해당 부분을 만들고 배열의 특정 부분에 값을 할당하는 것처럼 정의할 수 있습니다. 또한 값을 삽입할 때 인덱스 값을 사용하는 것을 잊지 마십시오. 실용적인 관점에서 보면 다음과 같습니다.

pets[2] = "turtles";
// lets verify that we have turtles as the third item
// by displaying the contents of the array
alert(pets);

배열에서 항목 제거

이 시점에서 배열에서 항목을 제거하는 것은 어떻습니까? 그 방법도 여러 가지가 있습니다. 아마도 가장 유명한 것은 "팝" 방식을 사용하는 것입니다. 이렇게 하면 배열에서 마지막 항목이 튀어 나옵니다. // 배열의 마지막 항목을 제거합니다.pets.pop(); // 배열 내용을 표시하여 결과를 확인하자 alert(pets);

보시다시피 pop 메서드를 사용하여 애완 동물 배열에서 뱀의 마지막 애완 동물 항목을 제거했습니다.

자바 배열에서 항목을 제거하는 또 다른 방법은 "shift" 키워드를 사용하는 것입니다. shift를 사용하면 첫 번째 요소가 삭제되고 나머지 인덱스 값이 이에 맞게 조정됩니다. 예를 들어:

// this will delete the first item
// and will shift the other items into their new index values
// which will be one lower than the previous index values
pets.shift();
// let's also verify this by displaying the array
alert(pets);

"shift"라는 이름은 실제로 컴퓨터 메모리에서 메모리 할당이 작동하는 방식에서 비롯됩니다. 따라서 처음에 상대적으로 직관적이지 않은 경우에도 완벽하게 괜찮습니다. 지금은 shift 메서드를 사용하여 배열에서 첫 번째 항목을 제거할 수 있다는 것을 알아야 합니다.

배열에서 길이 찾기

실생활에서 배열을 다룰 때 배열 항목의 수를 세고 싶은 경우가 많이 있을 수 있습니다. 이것은 할 일 목록, 학교 또는 직장의 참가자 목록 등을 포함하여 다양한 장소에서 필요할 수 있습니다. 이를 달성하기 위해 "length"라는 내장 배열 속성이 있으며 배열의 총 길이를 알려줍니다. 예를 들어:

alert(pets.length);

배열 정렬

배열 정렬은 JavaScript에서 매우 일반적인 작업입니다. JavaScript에서 항목을 정렬하기 위한 다양한 특정 구현이 있습니다. 일반적으로 이러한 특정 구현을 정렬 알고리즘이라고 합니다. 다른 정렬 알고리즘은 서로 다른 장점과 단점을 가져올 수 있습니다. 예를 들어 정렬 알고리즘이 다른 알고리즘보다 선택될 수 있습니다. 다른 알고리즘에 비해 코드에서 구현하기가 훨씬 더 쉽기 때문입니다. 비록 약간 더 나은 성능을 보일 수 있지만. 최적화된 성능을 위한 다양한 정렬 알고리즘에 대해 들어보셨을 것입니다. 이 튜토리얼에서는 JavaScript에서 제공하는 내장 정렬 방법을 사용할 것입니다. 정렬은 특히 웹 개발에서 매우 일반적인 문제입니다. 예를 들어 전자 상거래 웹 사이트를 구축하는 경우 사용자가 선택할 수 있는 다양한 정렬 상황을 구현해야 합니다. 청중에게 어떤 옵션과 기능을 제공해야 하는지에 대한 엄격한 규칙은 없지만 웹사이트 빌더로서 기대하는 일반적인 표준이 있습니다. 예를 들어 사용자는 일부 상점 항목을 가격 오름차순 및 내림차순으로 나열할 가능성이 높습니다. 이러한 작업에 대한 정렬을 구현할 때 사용자가 검색 결과를 티셔츠, 모자, 가방 등과 같은 특정 다른 범주로 제한할 수도 있으므로 구현 방법을 염두에 두어야 합니다. 배열 끝에 ".sort()"를 추가하여 배열을 정렬할 수 있습니다.

pets.sort();
alert(pets);

배열의 요소 반전

배열을 뒤집는 것은 아마도 정렬과 결합하는 것이 더 일반적일 것입니다. 이 경우에도 이러한 코드를 위에서 아래로 실행하기 때문에 배열을 정렬한 후 반전도 적용합니다. 끝에 ".reverse()"를 추가하여 반전 및 배열할 수 있습니다. pet.reverse(); 경보(애완동물);

이전 단계에서 배열을 주문했으므로 이제 정렬 및 반전된 배열이 있음을 알 수 있습니다.

각각

배열로 작업할 때 JavaScript는 ".forEach()"를 사용하여 배열 항목을 반복하는 편리한 방법을 제공합니다. 우리가 정말로 원한다면 우리는 여전히 정규 for 루프를 사용하여 배열을 반복할 수 있습니다. 사실 배열을 반복하는 for 루프를 구성하는 방법을 먼저 살펴본 다음 forEach()를 사용하는 방법을 살펴보겠습니다.

// this will alert us 4 times to feed our pet
for (let a = 0; a < pets.length; a++) {
    alert("Time to feed my pet");
}

forEach를 사용하여 동일한 결과를 얻을 수도 있습니다.

pets.forEach(alert("Time to feed my pet"));

for 루프 또는 For each 사용을 비교할 때 선호도와 특정 상황에 따라 둘 중 하나를 다른 것보다 선호할 수 있습니다. 본질적으로 둘 다 코드에서 다른 스타일로 동일한 출력을 달성합니다. ForEach는 상대적으로 더 쉬울 수 있고 읽고 쓰는 코드 한 줄을 절약할 수 있지만 궁극적으로는 선택이 될 것입니다. 지금 당장 그런 선택을 하고 그것을 고수할 필요도 없습니다. 코드를 작성할 때 프로그래밍 여정을 진행하면서 다른 접근 방식을 사용하여 동일한 문제를 해결하는 실험을 할 수 있습니다.

배열에 포함

자바 배열 내부에 항목이 존재하는지 확인할 수도 있습니다. 이 방법의 실생활 사용에 대한 한 가지 예는 비공개 이벤트가 초대 목록에 사람 이름을 포함하는지 여부입니다. 실제 구현도 매우 간단합니다. 먼저 배열의 이름을 씁니다. 이 경우에는 애완 동물 배열로 작업합니다. 그런 다음 다른 배열 속성과 메서드에 액세스하기 위해 점을 넣은 다음 "포함"을 작성한 다음 괄호를 열고 닫고 내부에서 확인하려는 항목의 이름을 입력합니다. 다음은 배열에 존재하는 항목을 확인하는 예입니다.

alert(pets.includes("dogs"));

Java 배열에 존재하지 않는 것으로 알고 있는 항목에 대해서도 동일한 작업을 시도하면 응답으로 false가 수신될 것으로 예상합니다. 예를 들어 그 경우도 살펴보겠습니다.

alert(pets.includes("puppy"));

Pets 배열에 강아지가 없었기 때문에 예상대로 false를 얻습니다. 다음 튜토리얼에서는 프로그래밍 세계와 JavaScript 모두에서 또 다른 주요 개념을 볼 것입니다.

10개의 블로그 게시물에서 초급에서 고급까지 JavaScript 과정:

1. JavaScript에서 코딩을 시작하는 방법은 무엇입니까?
2. 자바스크립트 기본
3. JavaScript의 변수 및 다양한 데이터 유형
4. 스니펫 및 제어 구조
5. while 루프와 for 루프
6. 자바 배열
7. 자바스크립트 함수
8. 자바스크립트 객체
9. JavaScript 메서드 등
10. 자바스크립트 코스 요약