JavaScript의 배열은 단일 변수에 여러 값을 저장하는 데 사용되는 데이터 구조입니다. 다양한 데이터 유형을 보유할 수 있으며 동적 크기 조정이 가능합니다. 요소는 0부터 시작하는 인덱스로 액세스됩니다.
자바스크립트 배열
JavaScript 배열을 만드는 방법에는 두 가지가 있습니다. 배열 생성자를 사용하여 아니면 그 단축 배열 리터럴 구문 , 이는 대괄호일 뿐입니다. 배열은 크기가 유연하므로 요소를 추가하거나 제거함에 따라 늘어나거나 줄어들 수 있습니다.
내용의 테이블
- JavaScript에서 배열이란 무엇입니까?
- JavaScript 배열의 기본 용어
- 배열 선언
- JavaScript 배열의 기본 작업
- JavaScript 배열과 객체의 차이점
- JavaScript 배열과 객체는 언제 사용합니까?
- JavaScript 배열 인식
- JavaScript 배열 전체 참조
- JavaScript 배열 예
- 자바스크립트 치트시트
JavaScript 배열의 기본 용어
- 정렬: 단일 변수에 여러 값을 저장할 수 있는 JavaScript의 데이터 구조입니다.
- 배열 요소: 배열 내의 각 값을 요소라고 합니다. 요소는 해당 인덱스로 액세스됩니다.
- 어레이 인덱스: 배열의 요소 위치를 나타내는 숫자 표현입니다. JavaScript 배열은 인덱스가 0입니다. 즉, 첫 번째 요소는 인덱스 0에 있습니다.
- 배열 길이: 배열의 요소 수입니다. length 속성을 사용하여 검색할 수 있습니다.
배열 선언
기본적으로 배열을 선언하는 방법에는 Array Literal과 Array Constructor의 두 가지 방법이 있습니다.
1. 배열 리터럴을 사용하여 배열 만들기
배열 리터럴을 사용하여 배열을 생성하려면 대괄호 []를 사용하여 배열을 정의하고 초기화해야 합니다. 이 방법은 간결하고 단순성으로 인해 널리 선호됩니다.
통사론:
let arrayName = [value1, value2, ...];>
예:
자바스크립트
// Creating an Empty Array let names = []; console.log(names); // Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React']; console.log(courses);>
산출
[] [ 'HTML', 'CSS', 'Javascript', 'React' ]>
2. 배열 생성자를 사용하여 배열 만들기(JavaScript new 키워드)
배열 생성자란 배열 생성자 함수를 호출하여 배열을 생성하는 방법을 말합니다. 이 접근 방식을 사용하면 동적 초기화가 가능하며 지정된 길이나 요소가 있는 배열을 만드는 데 사용할 수 있습니다.
통사론:
let arrayName = new Array();>
예:
스피커가 뭐야?자바스크립트
// Declaration of an empty array // using Array constructor let names = new Array(); console.log(names); // Creating and Initializing an array with values let courses = new Array('HTML', 'CSS', 'Javascript', 'React'); console.log(courses); // Initializing Array while declaring let arr = new Array(3); arr[0] = 10; arr[1] = 20; arr[2] = 30; console.log(arr);> 산출
[] [ 'HTML', 'CSS', 'Javascript', 'React' ] [ 10, 20, 30 ]>
메모: 위의 두 가지 방법 모두 정확히 동일합니다. 효율성, 가독성 및 속도를 위해 배열 리터럴 방법을 사용하십시오.
JavaScript 배열의 기본 작업
1. 배열 요소에 접근하기
배열의 모든 요소는 인덱스 번호를 사용하여 액세스할 수 있습니다. 배열의 인덱스는 0부터 시작합니다.
자바스크립트 // Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React']; // Accessing Array Elements console.log(courses[0]); console.log(courses[1]); console.log(courses[2]); console.log(courses[3]);>
산출
HTML CSS Javascript React>
2. 배열의 첫 번째 요소에 액세스
배열 인덱싱은 0부터 시작하므로 인덱스 번호를 사용하여 배열의 첫 번째 요소에 액세스할 수 있습니다.
자바스크립트 // Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Accessing First Array Elements let firstItem = courses[0]; console.log('First Item: ', firstItem);> 산출
First Item: HTML>
3. 배열의 마지막 요소에 접근하기
[array.length – 1] 인덱스 번호를 사용하여 마지막 배열 요소에 액세스할 수 있습니다.
자바스크립트 // Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Accessing Last Array Elements let lastItem = courses[courses.length - 1]; console.log('First Item: ', lastItem);> 산출
First Item: React>
4. 배열 요소 수정
배열의 요소는 해당 인덱스에 새 값을 할당하여 수정할 수 있습니다.
자바스크립트 // Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React']; console.log(courses); courses[1]= 'Bootstrap'; console.log(courses);>
산출
[ 'HTML', 'CSS', 'Javascript', 'React' ] [ 'HTML', 'Bootstrap', 'Javascript', 'React' ]>
5. 배열에 요소 추가하기
push() 및 unshift()와 같은 메서드를 사용하여 요소를 배열에 추가할 수 있습니다.
자바스크립트 // Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React']; // Add Element to the end of Array courses.push('Node.js'); // Add Element to the beginning courses.unshift('Web Development'); console.log(courses);> 산출
[ 'Web Development', 'HTML', 'CSS', 'Javascript', 'React', 'Node.js' ]>
6. 배열에서 요소 제거
pop(), Shift() 또는 splice()와 같은 메서드를 사용하여 요소를 제거합니다.
자바스크립트 // Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React', 'Node.js']; console.log('Original Array: ' + courses); // Removes and returns the last element let lastElement = courses.pop(); console.log('After Removed the last elements: ' + courses); // Removes and returns the first element let firstElement = courses.shift(); console.log('After Removed the First elements: ' + courses); // Removes 2 elements starting from index 1 courses.splice(1, 2); console.log('After Removed 2 elements starting from index 1: ' + courses);> 산출
Original Array: HTML,CSS,Javascript,React,Node.js After Removed the last elements: HTML,CSS,Javascript,React After Removed the First elements: CSS,Javascript,React After Removed 2 elements starting from index 1: CSS>
7. 배열 길이
length 속성을 사용하여 배열의 길이를 가져옵니다.
자바스크립트 // Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React', 'Node.js']; let len = courses.length; console.log('Array Length: ' + len);> 산출
Array Length: 5>
8. 배열 길이 늘리기 및 줄이기
JavaScript 길이 속성을 사용하여 배열 길이를 늘리거나 줄일 수 있습니다.
자바스크립트 // Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React', 'Node.js']; // Increase the array length to 7 courses.length = 7; console.log('Array After Increase the Length: ', courses); // Decrease the array length to 2 courses.length = 2; console.log('Array After Decrease the Length: ', courses)> 산출
Array After Increase the Length: [ 'HTML', 'CSS', 'Javascript', 'React', 'Node.js', ] Array After Decrease the Length: [ 'HTML', 'CSS' ]>
9. 배열 요소를 통한 반복
for 및 forEach 루프를 사용하여 배열을 반복하고 배열 요소에 액세스할 수 있습니다.
예: for 루프의 예입니다.
자바스크립트 // Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Iterating through for loop for (let i = 0; i < courses.length; i++) { console.log(courses[i]) }> 산출
HTML CSS JavaScript React>
예: 의 예이다 배열.forEach() 고리.
자바스크립트 // Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Iterating through forEach loop courses.forEach(function myfunc(elements) { console.log(elements); });> 산출
HTML CSS JavaScript React>
10. 배열 연결
concat() 메서드를 사용하여 두 개 이상의 배열을 결합합니다. Ir은 결합된 배열 요소를 포함하는 새 배열을 반환합니다.
자바스크립트 // Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; let otherCourses = ['Node.js', 'Expess.js']; // Concatenate both arrays let concateArray = courses.concat(otherCourses); console.log('Concatenated Array: ', concateArray);> 산출
Concatenated Array: [ 'HTML', 'CSS', 'JavaScript', 'React', 'Node.js', 'Expess.js' ]>
11. 배열을 문자열로 변환
우리는 내장된 메소드를 가지고 있습니다 toString() 배열을 문자열로 변환합니다.
자바스크립트 // Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Convert array ot String console.log(courses.toString());>
산출
HTML,CSS,JavaScript,React>
12. 어레이 유형 확인
자바스크립트 유형 연산자는 배열의 유형을 확인하는 데 사용됩니다. 배열에 대한 객체를 반환합니다.
자바스크립트 // Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Check type of array console.log(typeof courses);>
산출
object>
JavaScript 배열과 객체의 차이점
- JavaScript 배열은 인덱스를 숫자로 사용합니다.
- 객체는 인덱스를 이름으로 사용합니다.
JavaScript 배열과 객체는 언제 사용합니까?
- 배열은 요소 이름을 숫자로 만들고 싶을 때 사용됩니다.
- 객체는 요소 이름을 문자열로 만들고 싶을 때 사용됩니다.
JavaScript 배열 인식
JavaScript 배열을 인식할 수 있는 두 가지 방법이 있습니다.
- 사용하여 Array.isArray() 방법
- 사용하여 대신에 방법
다음은 두 가지 접근 방식을 모두 보여주는 예입니다.
자바스크립트 const courses = ['HTML', 'CSS', 'Javascript']; console.log('Using Array.isArray() method: ', Array.isArray(courses)) console.log('Using instanceof method: ', courses instanceof Array)> 산출
Using Array.isArray() method: true Using instanceof method: true>
메모: 배열을 작성하는 동안 일반적인 오류가 발생합니다.
const numbers = [5] // and const numbers = new Array(5)>자바스크립트
const numbers = [5] console.log(numbers)>
위의 두 진술은 동일하지 않습니다.
트리의 선주문 순회
산출: 이 명령문은 [5] 요소가 있는 배열을 생성합니다.
[5]>자바스크립트
const numbers = new Array(5) console.log(numbers)>
산출
[ ]>
JavaScript 배열 전체 참조
우리는 Javascript Array의 전체 목록을 가지고 있습니다. 이를 확인하려면 다음을 확인하세요. JavaScript 배열 참조 기사. 여기에는 모든 배열 속성 및 방법에 대한 자세한 설명과 예가 포함되어 있습니다.
JavaScript 배열 예
JavaScript Array 예제에는 인터뷰에서 주로 묻는 질문 목록이 포함되어 있습니다. 이 기사를 확인하십시오 JavaScript 배열 예 자세한 내용은.
자바스크립트 치트시트
우리는 Javascript의 모든 중요한 주제를 다루는 Javascript에 대한 치트 시트를 가지고 있으므로 이를 확인하십시오. Javascript 치트 시트 - JavaScript 기본 가이드 .