JavaScript의 배열 이해-JS 튜토리얼-php.cn

JavaScript의 배열 이해

Susan Sarandon

풀어 주다： 2024-12-21 19:48:21

원래의

495명이 탐색했습니다.

Understanding Arrays in JavaScript

JavaScript의 배열

JavaScript에서 배열은 순서가 지정된 데이터 컬렉션을 저장하는 데 사용되는 특수한 유형의 개체입니다. 배열은 숫자, 문자열, 객체 또는 기타 배열을 포함하여 다양한 데이터 유형의 여러 값을 보유할 수 있습니다.

1. 배열 생성

아. 배열 리터럴 사용

배열을 만드는 가장 일반적인 방법은 대괄호 []를 사용하는 것입니다.

예:

const fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits); // Output: ["Apple", "Banana", "Cherry"]

로그인 후 복사

베. 새로운 Array() 생성자 사용

이 방법은 빈 배열이나 지정된 요소가 있는 배열을 만듭니다.

예:

const numbers = new Array(5); // Creates an array with 5 empty slots
console.log(numbers.length); // Output: 5
const colors = new Array("Red", "Green", "Blue");
console.log(colors); // Output: ["Red", "Green", "Blue"]

로그인 후 복사

2. 배열 요소 액세스

배열 요소는 0부터 시작하는 인덱싱을 사용하여 액세스합니다.

예:

const fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits); // Output: ["Apple", "Banana", "Cherry"]

로그인 후 복사

요소 업데이트:

const numbers = new Array(5); // Creates an array with 5 empty slots
console.log(numbers.length); // Output: 5
const colors = new Array("Red", "Green", "Blue");
console.log(colors); // Output: ["Red", "Green", "Blue"]

로그인 후 복사

3. 일반적인 배열 방법

아. 요소 추가 및 제거

push(): 배열 끝에 요소를 추가합니다.

const fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits[0]); // Output: Apple
console.log(fruits[2]); // Output: Cherry

로그인 후 복사

pop(): 마지막 요소를 제거합니다.

fruits[1] = "Blueberry";
console.log(fruits); // Output: ["Apple", "Blueberry", "Cherry"]

로그인 후 복사

unshift(): 시작 부분에 요소를 추가합니다.

fruits.push("Mango");
console.log(fruits); // Output: ["Apple", "Banana", "Cherry", "Mango"]

로그인 후 복사

shift(): 첫 번째 요소를 제거합니다.

fruits.pop();
console.log(fruits); // Output: ["Apple", "Banana"]

로그인 후 복사

베. 요소 찾기

indexOf(): 요소의 인덱스를 찾습니다.

fruits.unshift("Strawberry");
console.log(fruits); // Output: ["Strawberry", "Apple", "Banana"]

로그인 후 복사

includes(): 배열에 요소가 있는지 확인합니다.

fruits.shift();
console.log(fruits); // Output: ["Apple", "Banana"]

로그인 후 복사

ㄷ. 배열 변환

map(): 각 요소를 변환하여 새 배열을 만듭니다.

console.log(fruits.indexOf("Banana")); // Output: 1

로그인 후 복사

filter(): 테스트를 통과한 요소로 새 배열을 만듭니다.

console.log(fruits.includes("Cherry")); // Output: false

로그인 후 복사

reduce(): 배열을 단일 값으로 줄입니다.

const numbers = [1, 2, 3];
const squared = numbers.map((num) => num ** 2);
console.log(squared); // Output: [1, 4, 9]

로그인 후 복사

디. 배열 결합 및 슬라이싱

concat(): 두 개 이상의 배열을 결합합니다.

const evenNumbers = numbers.filter((num) => num % 2 === 0);
console.log(evenNumbers); // Output: [2]

로그인 후 복사

slice(): 배열의 일부를 반환합니다.

const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // Output: 6

로그인 후 복사

splice(): 배열에서 요소를 추가하거나 제거합니다.

const moreFruits = ["Peach", "Grape"];
const allFruits = fruits.concat(moreFruits);
console.log(allFruits); // Output: ["Apple", "Banana", "Peach", "Grape"]

로그인 후 복사

4. 배열 반복

for 루프:

const sliced = allFruits.slice(1, 3);
console.log(sliced); // Output: ["Banana", "Peach"]

로그인 후 복사

for...of 루프:

allFruits.splice(1, 1, "Orange");
console.log(allFruits); // Output: ["Apple", "Orange", "Peach", "Grape"]

로그인 후 복사

forEach() 메서드:

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

로그인 후 복사

5. 다차원 배열

배열은 다른 배열을 포함하여 행렬 또는 다차원 구조를 만들 수 있습니다.

예:

for (let fruit of fruits) {
  console.log(fruit);
}

로그인 후 복사

6. 배열 정렬 및 역전

sort(): 배열을 제자리에 정렬합니다.

fruits.forEach((fruit) => console.log(fruit));

로그인 후 복사

reverse(): 요소의 순서를 반대로 바꿉니다.

const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];
console.log(matrix[1][2]); // Output: 6

로그인 후 복사

7. 배열 파괴

구조 분해를 사용하면 배열의 값을 변수로 추출할 수 있습니다.

예:

const fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits); // Output: ["Apple", "Banana", "Cherry"]

로그인 후 복사

8. 요약

배열은 JavaScript에서 정렬된 데이터 컬렉션을 저장하는 데 사용됩니다.
색인을 사용하여 요소에 액세스합니다.
조작 및 변환을 위해 push(), map(), filter() 및 Reduce()와 같은 배열 메서드를 사용하세요.
배열은 JavaScript에서 동적 데이터 컬렉션을 처리하는 데 다목적이며 필수적입니다.

안녕하세요. 저는 Abhay Singh Kathayat입니다!
저는 프론트엔드와 백엔드 기술 모두에 대한 전문 지식을 갖춘 풀스택 개발자입니다. 저는 효율적이고 확장 가능하며 사용자 친화적인 애플리케이션을 구축하기 위해 다양한 프로그래밍 언어와 프레임워크를 사용하여 작업합니다.
제 비즈니스 이메일(kaashshorts28@gmail.com)로 언제든지 연락주세요.

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