Java스크립트 배열 방법: 예제를 사용하여 생성
제임스 하트만
⚡ 스마트 요약
Java스크립트 배열 메서드를 사용하면 개발자는 단일 객체를 통해 순서가 지정된 값 모음을 저장, 검색 및 변환할 수 있습니다. 이 문서에서는 배열 생성, 인덱스 접근, 내장 메서드 모음, 반복 기법, 다차원 구조 및 예상 출력과 함께 실행 가능한 예제를 설명합니다.
배열이란 무엇인가요? Java스크립트?
배열은 데이터를 저장할 수 있는 객체입니다. 항목 모음배열은 동일한 유형의 데이터를 대량으로 저장해야 할 때 매우 유용합니다. 예를 들어 500명의 직원 정보를 저장해야 한다고 가정해 보겠습니다. 변수를 사용한다면 500개의 변수를 만들어야 하지만, 배열 하나만으로는 같은 작업을 수행할 수 있습니다. 배열의 항목은 해당 배열의 요소를 참조하여 접근할 수 있습니다. 색인 번호배열의 첫 번째 요소의 인덱스는 0입니다.
엄격한 타입 언어의 배열과는 달리, Java스크립트 배열은 동적입니다. 새 요소가 할당될 때마다 길이가 자동으로 증가하며, 하나의 배열에 문자열, 숫자, 불리언, 객체, 심지어 다른 배열까지 동시에 저장할 수 있습니다. 이러한 유연성 덕분에 배열은 브라우저 스크립트와 서버 측 코드 모두에서 목록 데이터를 담는 기본 컨테이너로 사용됩니다.
배열을 만드는 방법 Java스크립트
에서 배열을 만들 수 있습니다. JavaScript 아래와 같이.
var students = ["John", "Ann", "Kevin"];
여기서는 "John", "Ann" 및 "Kevin" 값으로 배열이 생성될 때 배열을 초기화합니다. “John”, “Ann”, “Kevin”의 인덱스는 각각 0, 1, 2입니다. 학생 배열에 더 많은 요소를 추가하려면 다음과 같이 할 수 있습니다.
students[3] = "Emma"; students[4] = "Rose";
다음과 같이 Array 생성자를 사용하여 배열을 만들 수도 있습니다.
var students = new Array("John", "Ann", "Kevin");
OR
var students = new Array(); students[0] = "John"; students[1] = "Ann"; students[2] = "Kevin";
배열 요소에 접근하고 수정하는 방법
각 요소는 번호가 매겨진 위치에 있습니다. 대괄호 표기법은 값을 읽거나, 새 값을 할당하거나, 인덱스가 현재 길이와 같을 때 새 항목을 추가합니다.
let students = ["John", "Ann", "Kevin"]; console.log(students[0]); // John - first element console.log(students[students.length - 1]); // Kevin - last element students[1] = "Anna"; // replace an existing value students[3] = "Emma"; // append a new value console.log(students); // ["John", "Anna", "Kevin", "Emma"] console.log(students.length); // 4 console.log(students[9]); // undefined - index does not exist
⚠️ 경고: 현재 길이보다 훨씬 먼 인덱스에 값을 할당하면 빈 슬롯으로 채워진 희소 배열이 생성됩니다. 사용 방법 push() 인덱스를 건너뛰는 대신 배열이 밀집되고 예측 가능한 상태를 유지하도록 합니다.
Java스크립트 배열 방법
Array 객체에는 개발자가 배열을 쉽고 효율적으로 처리하는 데 도움이 되는 많은 속성과 메서드가 있습니다. arrayname.property를 지정하여 속성 값을 가져올 수 있고 arrayname.method()를 지정하여 메서드의 출력을 가져올 수 있습니다.
- 길이 속성 –> 배열의 요소 수를 알고 싶다면 length 속성을 사용할 수 있습니다.
- 프로토타입 속성 –> 새로운 속성과 메소드를 추가하려면 프로토타입 속성을 사용하면 됩니다.
- 역 방법 –> reverse 메소드를 사용하여 배열의 항목 순서를 반대로 바꿀 수 있습니다.
- 정렬 방법 –> sort 메서드를 사용하면 배열의 항목을 정렬할 수 있습니다.
- 팝 방식 –> 팝 메소드를 사용하여 배열의 마지막 항목을 제거할 수 있습니다.
- 교대 방법 -> shift 메서드를 사용하면 배열의 첫 번째 항목을 제거할 수 있습니다.
- 푸시 방법 –> 배열의 마지막 항목으로 값을 추가할 수 있습니다.
아래 참조표는 가장 자주 사용되는 메서드들을 그룹화하여, 어떤 메서드가 원래 배열을 변경하고 어떤 메서드가 새로운 값을 반환하는지 한눈에 확인할 수 있도록 정리했습니다.
| 방법 | 목적 | 반품 | 원래 배열을 변경합니다 |
|---|---|---|---|
| 푸시() | 끝에 하나 이상의 항목을 추가하세요 | 새로운 길이 | 가능 |
| 팝() | 마지막 항목을 제거하세요 | 제거된 항목 | 가능 |
| 쉬프트() | 맨 앞에 하나 이상의 항목을 추가하세요 | 새로운 길이 | 가능 |
| 옮기다() | 첫 번째 항목을 제거하세요 | 제거된 항목 | 가능 |
| 접착() | 어느 위치에서든 항목을 삽입하거나 삭제할 수 있습니다. | 제거된 항목 배열 | 가능 |
| 종류() | 상품을 주문하세요 | 정렬된 배열 | 가능 |
| 역전() | 항목 순서를 반대로 하세요 | 역순 배열 | 가능 |
| 일부분() | 배열의 일부를 복사합니다. | 새로운 배열 | 아니 |
| 연결() | 두 개 이상의 배열을 결합합니다 | 새로운 배열 | 아니 |
| 어울리다() | 여러 항목을 문자열로 결합합니다. | 끈 | 아니 |
| indexOf () | 값의 위치를 찾으세요 | 인덱스 또는 -1 | 아니 |
| 포함() | 값이 존재하는지 테스트합니다. | 참 또는 거짓 | 아니 |
요소 추가 및 제거
let fruits = ["apple", "banana"]; fruits.push("cherry"); // ["apple", "banana", "cherry"] fruits.unshift("mango"); // ["mango", "apple", "banana", "cherry"] fruits.pop(); // ["mango", "apple", "banana"] fruits.shift(); // ["apple", "banana"] // splice(startIndex, deleteCount, ...itemsToInsert) fruits.splice(1, 0, "kiwi"); // ["apple", "kiwi", "banana"] console.log(fruits);
검색, 복사 및 병합
let colors = ["red", "green", "blue", "green"]; console.log(colors.indexOf("green")); // 1 - first match only console.log(colors.lastIndexOf("green")); // 3 console.log(colors.includes("pink")); // false console.log(colors.slice(1, 3)); // ["green", "blue"] console.log(colors.join(" | ")); // red | green | blue | green console.log(colors.concat(["black"])); // new array, colors unchanged
반복 방법: forEach, map, filter, reduce
현대 Java스크립트는 메서드 이름에 작업의 목적이 직접 명시되어 있기 때문에 수동 인덱스 루프보다 콜백 기반 메서드를 선호합니다.
const scores = [45, 72, 88, 31, 95]; scores.forEach(s => console.log(s)); // prints each score const doubled = scores.map(s => s * 2); // [90, 144, 176, 62, 190] const passed = scores.filter(s => s >= 50); // [72, 88, 95] const total = scores.reduce((sum, s) => sum + s, 0); // 331 const first = scores.find(s => s > 80); // 88 console.log(doubled, passed, total, first);
💡 팁: 기본값은 sort() 요소를 문자열로 변환합니다. [10, 9, 100].sort() 반품 [10, 100, 9]비교 연산자를 전달합니다. sort((a, b) => a - b) 숫자를 올바르게 정렬하기 위해.
Java스크립트 배열 예제 (소스 코드 포함) Code
아래 스크립트는 학생 배열을 생성하고, 프로토타입 속성을 통해 사용자 지정 표시 메서드를 추가한 다음, 길이, 정렬, 역순 정렬, 팝, 추가 기능을 순서대로 보여줍니다. 직접 실행해 보세요.
<html>
<head>
<title>Arrays!!!</title>
<script type="text/javascript">
var students = new Array("John", "Ann", "Aaron", "Edwin", "Elizabeth");
Array.prototype.displayItems=function(){
for (i=0;i<this.length;i++){
document.write(this[i] + "<br />");
}
}
document.write("students array<br />");
students.displayItems();
document.write("<br />The number of items in students array is " + students.length + "<br />");
document.write("<br />The SORTED students array<br />");
students.sort();
students.displayItems();
document.write("<br />The REVERSED students array<br />");
students.reverse();
students.displayItems();
document.write("<br />THE students array after REMOVING the LAST item<br />");
students.pop();
students.displayItems();
document.write("<br />THE students array after PUSH<br />");
students.push("New Stuff");
students.displayItems();
</script>
</head>
<body>
</body>
</html>
예상 출력 :
students array John Ann Aaron Edwin Elizabeth The number of items in students array is 5 The SORTED students array Aaron Ann Edwin Elizabeth John The REVERSED students array John Elizabeth Edwin Ann Aaron THE students array after REMOVING the LAST item John Elizabeth Edwin Ann THE students array after PUSH John Elizabeth Edwin Ann New Stuff
sort 명령어가 대문자와 소문자를 문자 코드로 비교하기 때문에 "Aaron"을 "Ann" 앞에 배치한다는 점에 주목하세요. 또한 pop 명령어가 역순 배열에서 "Aaron"을 제거하는 것을 보면 sort와 reverse 명령어 모두 원래 배열을 제자리에서 변경한다는 것을 알 수 있습니다.
반복문을 사용하는 방법 Java스크립트 배열
화장실 네 개ping 다양한 스타일이 있으며, 각 스타일은 서로 다른 상황에 적합합니다. 일반적인 for 루프는 인덱스를 완벽하게 제어할 수 있게 해주고, for…of는 값을 직접 읽어오며, forEach는 의도를 명확하게 표현하고, for…in은 객체의 속성을 읽을 때 사용해야 합니다.
const cities = ["Paris", "Tokyo", "Cairo"]; // 1. Classic for loop - index is available for (let i = 0; i < cities.length; i++) { console.log(i + ": " + cities[i]); } // 2. for...of loop - value is available for (const city of cities) { console.log(city); } // 3. forEach with index parameter cities.forEach((city, index) => console.log(index, city)); // 4. entries() when both index and value are needed for (const [index, city] of cities.entries()) { console.log(index, city); }
while 및 do…while을 포함한 반복문 구문에 대한 더 자세한 내용은 다음 문서에서 확인할 수 있습니다. 반복문을 사용하는 방법 Java스크립트.
다차원 배열 Java스크립트
Java스크립트에는 별도의 행렬 유형이 없습니다. 그리드는 단순히 요소 자체가 배열인 배열이며, 두 개의 인덱스 표현식을 사용하여 단일 셀에 접근합니다.
const matrix = [ [1, 2, 3], [4, 5, 6], [7, 8, 9] ]; console.log(matrix[1][2]); // 6 - row index 1, column index 2 for (const row of matrix) { console.log(row.join(" ")); } // flatten a nested array into a single level console.log(matrix.flat()); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
출력:
6 1 2 3 4 5 6 7 8 9 [1, 2, 3, 4, 5, 6, 7, 8, 9]
배열은 폼 유효성 검사부터 데이터 렌더링에 이르기까지 거의 모든 실제 스크립트에서 나타납니다. 계속 읽어보세요. 실용적인 Java스크립트 코드 예시, 검토 Java스크립트 문자열 텍스트 처리에 대해서는 다음을 참조하십시오. 내부적 인 그리고 외부적인 Java스크립트 이러한 스크립트가 페이지의 어느 위치에 배치되어야 하는지 결정해야 합니다. 배열 내용에 대한 정적 타입 검사를 원하는 개발자는 다음 단계로 넘어갈 수 있습니다. TypeScript 지도 시간.
