JavaScript에서 배열의 첫 번째 요소 가져오기

1. JavaScript에서 find()를 사용하여 첫 번째 배열 요소 가져오기
2. JavaScript에서 array[index]를 사용하여 첫 번째 배열 요소 가져오기
3. JavaScript에서 shift()를 사용하여 첫 번째 배열 요소 가져오기
4. JavaScript에서 filter()를 사용하여 첫 번째 배열 요소 가져오기
5. JavaScript에서 구조 분해 할당을 사용하여 첫 번째 배열 요소 가져오기

배열은 정렬 방식으로 많은 요소를 보유하기 때문에 모든 프로그래밍 언어의 필수적인 부분입니다. 이러한 모든 요소는 인덱스를 통해 액세스됩니다. JavaScript에서 배열은 특정 키, 즉 숫자 키의 값을 보유하는 일반 객체입니다. 이 기사에서는 JavaScript에서 배열의 첫 번째 요소를 가져오는 방법을 소개합니다.

JavaScript는 첫 번째 요소를 가져오는 다양한 방법을 제공합니다. 그 방법들을 배워봅시다.

JavaScript에서 find()를 사용하여 첫 번째 배열 요소 가져오기

지정된 조건과 값이 일치하는 요소를 찾는 JavaScript에서 제공하는 내장 배열 메서드입니다.

JavaScript에서 find() 구문

Array.prototype.find(element => $condition)

매개변수

• $condition: 필수 매개변수입니다. 사용자는 배열 요소와 관련된 모든 조건을 전달할 수 있으며 조건을 만족하는 첫 번째 일치 요소를 찾으려고 시도합니다.

반환 값

주어진 조건과 일치하는 첫 번째 값을 반환합니다. 조건이 일치하지 않으면 undefined가 반환됩니다.

예제 코드:

const arrayElements = [5, 10, 0, 20, 45];
const firstElement = arrayElements.find(element => element != undefined);
console.log(firstElement);

출력:

5

JavaScript에서 array[index]를 사용하여 첫 번째 배열 요소 가져오기

앞에서 설명한 것처럼 각 배열 요소에는 고유한 인덱스가 할당되어 있습니다. 배열 내부의 숫자 key/index는 0으로 시작합니다. 이 인덱스를 사용하여 JavaScript에서 배열의 첫 번째 요소를 검색할 수 있습니다.

JavaScript에서 array[index] 구문

Array.prototype[$index]

매개변수

• $index: 검색할 요소의 인덱스를 지정하는 정수 값만 허용하는 필수 매개변수입니다.

반환 값

인덱스가 지정된 요소를 반환합니다.

예제 코드:

const arrayElements = [5, 10, 0, 20, 45];
const firstElement = arrayElements[0];
console.log(firstElement);

출력:

5

JavaScript에서 shift()를 사용하여 첫 번째 배열 요소 가져오기

JavaScript에서 제공하는 내장 배열 메서드로 배열의 첫 번째 요소를 제거하고 제거된 요소를 반환합니다. 이 배열 방법의 유일한 문제는 원래 배열을 변경/수정한다는 것입니다.

JavaScript의 shift() 구문

Array.prototype.shift()

반환 값

원래 배열에서 제거된 배열의 첫 번째 요소를 반환합니다. 배열이 빈 배열이면 undefined를 반환합니다.

예제 코드:

const arrayElements = [5, 10, 0, 20, 45];
const firstElement = arrayElements.shift(0);
console.log(firstElement);
console.log(arrayElements);

출력:

5
Array [10, 0, 20, 45]

JavaScript에서 filter()를 사용하여 첫 번째 배열 요소 가져오기

주어진 조건을 만족하는 모든 요소를 ​​걸러내는 JavaScript 내장 배열 방법입니다. 일치하는 요소 배열의 복사본을 만듭니다. find()와 filter()의 유일한 차이점은 일치하는 첫 번째 요소가 발견되자마자 먼저 순회를 중지하고 나중에 배열의 마지막 요소까지 계속한다는 점입니다. 순회 속성 때문에 배열 크기가 더 크면 덜 효율적입니다.

JavaScript의 filter() 구문

Array.prototype.filter(element => $condition)

매개변수

• $condition: 필수 매개변수입니다. 사용자는 배열 요소와 관련된 모든 조건을 전달할 수 있으며 조건을 만족하는 모든 일치 요소를 찾으려고 시도합니다.

반환 값

주어진 조건과 일치하는 요소를 포함하는 새 배열을 반환합니다.

예제 코드:

const arrayElements = [5, 10, 0, 20, 45];
const firstElement =
    arrayElements.filter(element => element != undefined).shift();
console.log(firstElement);
console.log(arrayElements);

출력:

5
Array [5, 10, 0, 20, 45]

JavaScript에서 구조 분해 할당을 사용하여 첫 번째 배열 요소 가져오기

할당을 파괴하는 것은 배열의 요소를 풀거나 개체의 속성을 고유한 변수로 가져올 수 있도록 하는 JavaScript에서 사용할 수 있는 매우 강력한 구문입니다.

JavaScript의 구조 분해 할당 구문

[$variable1, $variable2, ...$restVariables] = [10, 20, 30, 40];
{$variable1} = {key: value};

반환 값

배열 또는 개체의 값에 액세스할 수 있는 새 변수를 반환합니다.

예제 코드:

const arrayElements = [5, 10, 0, 20, 45];
let [firstElement] = arrayElements;
console.log(firstElement);

출력:

5