자바 스크립트 목록

| | | | | | | | | | | | | | | | | | | | | | | | | | |

우리는 과일 목록을 직접 만들 것입니다. 우리는 목록을 "fruits`"라고 부르고 다음 값을 추가할 것입니다. 바나나, 멜론, 포도. 오, 제가 과일을 정말 좋아합니다! 이것이 쇼핑 목록 튜토리얼처럼 들릴지 모르지만 실제로는 방금 테이블을 만들었습니다.

이 가이드에서는 배열이 무엇인지, 어떻게 작동하는지, 코드에서 배열을 사용해야 하는 이유에 대해 설명합니다. JavaScript 보드 닌자가 될 수 있도록 작동 중인 샘플 보드에 대해 논의할 것입니다!

배열이란 무엇입니까?

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

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

다음 예를 살펴보세요.

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

배열 선언

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

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

이 코드 조각은 동일한 배열을 생성하지만 다른 방법을 사용합니다. 두 번째 예에서는 순환 지원을 사용하여 배열을 선언했습니다. 또한 new Array 생성자를 사용하여 배열을 선언합니다. 이것이 대부분의 사람들이 첫 번째 방법을 선호하는 이유입니다. 대괄호는 기억하기 훨씬 쉽고 빠르게 입력할 수 있습니다.

테이블에 동일한 내용이 포함될 수 없음 데이터 유형 우리 네트워크는 다양한 데이터 유형을 저장할 수 있습니다.

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

배열 읽기

배열은 읽을 수 없다면 그다지 유용하지 않을 것입니다. values. 이것이 색인화가 존재하는 이유입니다. 색인은 개별 요소에 액세스하는 방법입니다. iterable 객체를 목록으로.

배열에 있는 배열의 각 요소에는 인덱스 번호가 할당됩니다. er.이 숫자는 0으로 시작하며 배열의 개별 요소에 전류를 교류하는 데 사용할 수 있습니다. "과일" 테이블을 기억하십니까?

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

이 번호를 사용하여 목록의 다른 항목에 액세스할 수 있습니다. 과일이 배열의 인덱스 위치 1에 있음을 식별하려고 한다고 가정해 보겠습니다. 테이블 이름 뒤에 대괄호로 묶인 인덱스 값을 표시할 수 있습니다.

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

출력: 정의되지 않음. 인덱싱이 특히 유용한 경우는 배열의 요소를 반복할 때입니다. 콘솔에서 스텐실의 각 과일을 인쇄하려고 한다고 가정해 보겠습니다. 다음과 같은 루프를 사용하여 이 작업을 수행할 수 있습니다.

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

코드는 목록의 각 항목을 통과한 다음 각 항목을 콘솔에 인쇄합니다. 또한 길이를 사용했음을 알 수 있습니다. 이 함수는 목록의 길이를 반환합니다.

배열에 요소 추가

대부분의 pa , 처음에 배열을 선언한 후 배열에 새 값을 추가하려는 경우가 있습니다. push () 배열을 사용하면 됩니다.

과일 목록에 "딸기"를 추가하는 것을 잊었습니다. 아뇨! 걱정하지 마세요. 언제든지 push() 를 사용하여 추가할 수 있습니다.

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

< table class = "wp-block table cours-info table"> 바나나 포도 멜론 딸기 1 2 3

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

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

< td > 딸기
바나나 포도 멜론
1 2 3

배열에서 요소 제거

집에 이미 멜론이 있으므로 필요하지 않습니다. 하나를 구입합니다. 멜론을 사는게 무슨 소용이 있겠습니까? 멜론은 목록 끝에 있으므로 제거할 수 있는 두 가지 옵션이 있습니다.

Let 사용 splice()를 예로 들 수 있습니다.

코드 반환:

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

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

우리 코드는 다음을 반환합니다.

shift()를 사용하여 목록의 시작 부분에서 요소를 제거할 수도 있습니다.

코드 반환:

push()unshift() 항목을 목록에 추가합니다. pop()shift() 항목 목록에서 제거합니다. 어셈블리 방법은 인덱스 값

수정 element of a series

바나나는 맛이 좋은 과일이지만 크기가 너무 커서 조금 심심할 때 간식으로 먹기 힘든 경우가 많습니다. 배고파요. 아기 바나나가 더 쉽습니다. 먹습니다.

이제 일반 바나나 대신 아기 바나나를 구매하도록 "과일" 목록을 변경하고 싶다고 가정해 보겠습니다. 할당 연산자를 모든 변수로 사용하여 이 작업을 수행할 수 있습니다.

우리 코드 반환:

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

결론

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

이제 다음과 같은 JavaScript 배열 작업을 시작할 준비가 되었습니다. 전문가!