> 웹 프론트엔드 > JS 튜토리얼 > 자바스크립트 배열 이해

자바스크립트 배열 이해

Barbara Streisand
풀어 주다: 2025-01-06 22:35:41
원래의
506명이 탐색했습니다.

Understanding Javascript Arrays

배열은 JavaScript의 가장 강력하고 널리 사용되는 데이터 구조 중 하나입니다. 마치 마술 상자처럼 작동하여 단일 변수에 많은 값을 저장할 수 있습니다. 기본 앱을 개발하든 복잡한 프로젝트를 진행하든 어레이는 꼭 필요한 도구입니다.

간단한 예와 실제 사용 사례를 사용하여 배열을 단계별로 살펴보겠습니다. ?

? 배열이란 무엇입니까?

배열은 두 개 이상의 값을 보유할 수 있는 특수 변수입니다.

❓ 배열은 어떻게 생성하나요?
배열 리터럴을 사용하는 것이 JavaScript 배열을 생성하는 가장 쉬운 방법입니다.
⭐ 구문:

 const array_name = [value1, value2, ...];       
로그인 후 복사
로그인 후 복사

? 예:

const languages = ["JavaScript", "PHP", "Python"];
로그인 후 복사
로그인 후 복사

✍️ 설명:

  • 언어는 배열입니다.
  • "JavaScript", "PHP", "Python"의 세 가지 값을 갖습니다.
  • 각 값에는 위치(인덱스라고 함)가 있습니다.

? 배열 인덱스 이해
배열 인덱스는 0부터 시작합니다. 요소에 액세스하는 방법은 다음과 같습니다.

console.log(languages[0]); // Output: JavaScript
console.log(languages[1]); // Output: PHP
console.log(languages[2]); // Output: Python
로그인 후 복사

? 배열 반복

루프를 사용하여 배열의 모든 요소를 ​​탐색할 수 있습니다. forEach() 메서드는 쉽고 초보자에게 친숙합니다.
? 예:

languages.forEach(function(language, index) {
  console.log(index +" => "+ language);
});
/* Output:
0 => JavaScript
1 => PHP
2 => Python
*/
로그인 후 복사

? 배열 방법 및 속성

다음은 배열을 다룰 수 있는 몇 가지 멋진 방법과 속성입니다.
1️⃣ 길이 속성
배열의 항목 수인 배열의 길이를 반환합니다.
? 예:

let length = languages.length; 
console.log(length); // Output: 3
로그인 후 복사

2️⃣ push() 메소드
마지막에 새 요소를 추가합니다.
? 예:

languages.push("Java");
console.log(languages); // Output: ['JavaScript', 'PHP', 'Python', 'Java']
로그인 후 복사

3️⃣ unshift() 메소드
처음에 새로운 요소를 추가합니다.
? 예:

languages.unshift("C");
console.log(languages); // Output: ['C', 'JavaScript', 'PHP', 'Python', 'Java']
로그인 후 복사

4️⃣ pop() 메소드
마지막 요소를 제거하려면
? 예:

languages.pop();
console.log(languages); // Output: ['C', 'JavaScript', 'PHP', 'Python']
로그인 후 복사

5️⃣ Shift() 메소드
첫 번째 요소를 제거하려면
? 예:

languages.shift();
console.log(languages); //  Output: ['JavaScript', 'PHP', 'Python']
로그인 후 복사

6️⃣ toString() 메서드
배열을 쉼표로 구분된 배열 값의 문자열로 변환합니다.
? 예:

let arrString = languages.toString();
console.log(arrString); //  Output: JavaScript,PHP,Python
로그인 후 복사

7️⃣ at() 메소드
정수 값을 허용하고 해당 인덱스의 항목을 반환하며 양수와 음수를 모두 허용합니다. 음의 정수는 배열의 마지막 항목부터 역순으로 계산됩니다.
? 예:

let value1 = languages.at(2);
console.log(value1); // Output: Python
let value2 = languages.at(-1);
console.log(value2); // Output: Python
로그인 후 복사

8️⃣ Join() 메소드
모든 요소를 ​​문자열로 결합합니다. 구분 기호를 제공할 수도 있다는 점을 제외하면 toString()과 정확히 동일하게 작동합니다.
? 예:

let arrJoin = languages.join(" | ");
console.log(arrJoin); // Output: JavaScript | PHP | Python
로그인 후 복사

9️⃣ find() 메소드
그러면 지정된 조건을 통과하는 배열의 첫 번째 항목이 반환됩니다. 조건을 만족하는 값이 하나도 없으면 정의되지 않은 값이 반환됩니다.
? 예:

 const array_name = [value1, value2, ...];       
로그인 후 복사
로그인 후 복사

? sort() 메소드
배열 요소를 정렬합니다.
? 예:

const languages = ["JavaScript", "PHP", "Python"];
로그인 후 복사
로그인 후 복사

사용 가능한 추가 배열 방법이 많이 있습니다. 검색 엔진의 도움을 받아 스스로 탐색하고 실험해보세요. 재미있겠죠!?

⁉️ 왜 배열을 배워야 할까요?

배열은 JavaScript의 모든 곳에 있습니다! 배열을 이해하면 앱의 데이터 관리부터 API 처리에 이르기까지 개발자에게 새로운 기회가 열릴 것입니다.

결론

배열은 많은 값을 처리할 때 가장 좋은 친구입니다. 논의한 개념을 연습하고 작은 프로젝트에서 배열을 사용해 보세요.
즐거운 코딩하세요!✨

위 내용은 자바스크립트 배열 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿