마스터 JavaScript 배열 가이드-JS 튜토리얼-php.cn

A Guide to Master JavaScript Arrays

배열은 JavaScript에서 가장 일반적으로 사용되는 데이터 구조 중 하나입니다. 이를 통해 단일 변수에 여러 값을 저장할 수 있으며 데이터를 간단하고 효율적으로 조작하고 작업할 수 있는 풍부한 내장 함수 세트가 함께 제공됩니다. 이 기사에서는 JavaScript 배열 함수를 자세히 살펴보고 이를 익히는 데 도움이 되는 설명, 예 및 설명을 제공합니다.

JavaScript 배열 소개

배열은 숫자, 문자열, 객체 및 기타 배열을 포함하여 다양한 유형의 데이터를 담을 수 있는 항목의 정렬된 컬렉션입니다.

let fruits = ["Apple", "Banana", "Cherry"];
let numbers = [1, 2, 3, 4, 5];
let mixed = [1, "Apple", true, {name: "John"}, [1, 2, 3]];

로그인 후 복사

배열 만들기

배열 리터럴이나 배열 생성자를 사용하여 배열을 만들 수 있습니다.

let arr1 = [1, 2, 3];
let arr2 = new Array(1, 2, 3);
console.log(arr1); // Output: [1, 2, 3]
console.log(arr2); // Output: [1, 2, 3]

로그인 후 복사

배열 속성

length: 배열의 요소 수를 반환합니다.

let arr = [1, 2, 3, 4, 5];
console.log(arr.length); // Output: 5

로그인 후 복사

배열 방법

1. 푸시()

배열 끝에 하나 이상의 요소를 추가하고 새 길이를 반환합니다.

let arr = [1, 2, 3];
arr.push(4);
console.log(arr); // Output: [1, 2, 3, 4]

로그인 후 복사

2.팝()

배열에서 마지막 요소를 제거하고 해당 요소를 반환합니다.

let arr = [1, 2, 3];
let last = arr.pop();
console.log(arr); // Output: [1, 2, 3]
console.log(last); // Output: 3

로그인 후 복사

3. 교대()

배열에서 첫 번째 요소를 제거하고 해당 요소를 반환합니다.

let arr = [1, 2, 3];
let first = arr.shift();
console.log(arr); // Output: [2, 3]
console.log(first); // Output: 1

로그인 후 복사

4. 쉬프트 해제()

배열의 시작 부분에 하나 이상의 요소를 추가하고 새 길이를 반환합니다.

let arr = [2, 3];
arr.unshift(1);
console.log(arr); // Output: [1, 2, 3]

로그인 후 복사

5. 연결()

두 개 이상의 배열을 병합하고 새 배열을 반환합니다.

let arr1 = [1, 2];
let arr2 = [3, 4];
let merged = arr1.concat(arr2);
console.log(merged); // Output: [1, 2, 3, 4]

로그인 후 복사

6. 조인()

배열의 모든 요소를 문자열로 결합합니다.

let arr = [1, 2, 3];
let str = arr.join("-");
console.log(str); // Output: "1-2-3"

로그인 후 복사

7. 역방향()

배열 요소의 순서를 반대로 바꿉니다.

let arr = [1, 2, 3];
arr.reverse();
console.log(arr); // Output: [3, 2, 1]

로그인 후 복사

8. 슬라이스()

배열 일부의 얕은 복사본을 새 배열 객체로 반환합니다.

let arr = [1, 2, 3, 4, 5];
let sliced = arr.slice(1, 3);
console.log(sliced); // Output: [2, 3]

로그인 후 복사

9. 스플라이스()

요소를 제거, 교체, 추가하여 배열의 내용을 변경합니다.

let arr = [1, 2, 3, 4, 5];
arr.splice(1, 2, "a", "b");
console.log(arr); // Output: [1, "a", "b", 4, 5]

로그인 후 복사

10. 정렬()

배열의 요소를 제자리에 정렬하고 정렬된 배열을 반환합니다.

let arr = [3, 1, 4, 1, 5, 9];
arr.sort((a, b) => a - b);
console.log(arr); // Output: [1, 1, 3, 4, 5, 9]

로그인 후 복사

11. 필터()

제공된 함수로 구현된 테스트를 통과한 모든 요소로 새 배열을 생성합니다.

let arr = [1, 2, 3, 4, 5];
let filtered = arr.filter(x => x > 2);
console.log(filtered); // Output: [3, 4, 5]

로그인 후 복사

12. 지도()

호출 배열의 모든 요소에 대해 제공된 함수를 호출한 결과로 새 배열을 생성합니다.

let arr = [1, 2, 3];
let mapped = arr.map(x => x * 2);
console.log(mapped); // Output: [2, 4, 6]

로그인 후 복사

13. 감소()

누산기와 배열의 각 요소에 함수를 적용하여 단일 값으로 줄입니다.

let arr = [1, 2, 3, 4];
let sum = arr.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // Output: 10

로그인 후 복사

14. 찾기()

제공된 테스트 함수를 만족하는 배열의 첫 번째 요소 값을 반환합니다.

let arr = [1, 2, 3, 4, 5];
let found = arr.find(x => x > 3);
console.log(found); // Output: 4

로그인 후 복사

15. 찾기인덱스()

제공된 테스트 함수를 만족하는 배열의 첫 번째 요소의 인덱스를 반환합니다.

let arr = [1, 2, 3, 4, 5];
let index = arr.findIndex(x => x > 3);
console.log(index); // Output: 3

로그인 후 복사

16. 모든()

배열의 모든 요소가 제공된 함수에 의해 구현된 테스트를 통과하는지 테스트합니다.

let arr = [1, 2, 3, 4, 5];
let allBelowTen = arr.every(x => x < 10);
console.log(allBelowTen); // Output: true

로그인 후 복사

17. 좀()

배열에 있는 하나 이상의 요소가 제공된 함수에 의해 구현된 테스트를 통과하는지 테스트합니다.

let arr = [1, 2, 3, 4, 5];
let anyAboveThree = arr.some(x => x > 3);
console.log(anyAboveThree); // Output: true

로그인 후 복사

18. 포함()

배열의 항목 중 특정 값이 포함되어 있는지 확인합니다.

let arr = [1, 2, 3, 4, 5];
let hasThree = arr.includes(3);
console.log(hasThree); // Output: true

로그인 후 복사

19. 인덱스오브()

배열에서 특정 요소를 찾을 수 있는 첫 번째 인덱스를 반환하거나 해당 요소가 없으면 -1을 반환합니다.

let arr = [1, 2, 3, 4, 5];
let index = arr.indexOf(3);
console.log(index); // Output: 2

로그인 후 복사

20. 라스트인덱스오프()

배열에서 특정 요소를 찾을 수 있는 마지막 인덱스를 반환하거나 해당 요소가 없으면 -1을 반환합니다.

let arr = [1, 2, 3, 4, 5, 3];
let index = arr.lastIndexOf(3);
console.log(index); // Output: 5

로그인 후 복사

21. 플랫()

지정된 깊이까지 모든 하위 배열 요소가 반복적으로 연결된 새 배열을 생성합니다.

let arr = [1, [2, [3, [4]]]];
let flattened = arr.flat(2);
console.log(flattened); // Output: [1, 2, 3, [4]]

로그인 후 복사

22. 플랫맵()

먼저 매핑 함수를 사용하여 각 요소를 매핑한 다음 결과를 새 배열로 평면화합니다.

let arr = [1, 2, 3];
let flatMapped = arr.flatMap(x => [x, x * 2]);
console.log(flatMapped); // Output: [1, 2, 2, 4, 3, 6]

로그인 후 복사

23. 에서()

같은 배열 또는 반복 가능한 객체에서 얕은 복사된 새로운 배열 인스턴스를 만듭니다.

let str = "Hello";
let arr = Array.from(str);
console.log(arr); // Output: ["H", "e", "l", "l", "o"]

로그인 후 복사

24. isArray()

전달된 값이 배열인지 확인합니다.

console.log(Array.isArray([1, 2, 3])); // Output: true
console.log(Array.isArray("Hello")); // Output: false

로그인 후 복사

25. of()

만들기

인수의 개수나 유형에 관계없이 가변적인 개수의 인수가 있는 새로운 Array 인스턴스.

let arr = Array.of(1, 2, 3);
console.log(arr); // Output: [1, 2, 3]

로그인 후 복사

Practical Examples

Example 1: Removing Duplicates from an Array

let arr = [1, 2, 3, 3, 4, 4, 5];
let unique = [...new Set(arr)];
console.log(unique); // Output: [1, 2, 3, 4, 5]

로그인 후 복사

Example 2: Summing All Values in an Array

let arr = [1, 2, 3, 4, 5];
let sum = arr.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // Output: 15

로그인 후 복사

Example 3: Flattening a Deeply Nested Array

let arr = [1, [2, [3, [4, [5]]]]];
let flattened = arr.flat(Infinity);
console.log(flattened); // Output: [1, 2, 3, 4, 5]

로그인 후 복사

Example 4: Finding the Maximum Value in an Array

let arr = [1, 2, 3, 4, 5];
let max = Math.max(...arr);
console.log(max); // Output: 5

로그인 후 복사

Example 5: Creating an Array of Key-Value Pairs

let obj = { a: 1, b: 2, c: 3 };
let entries = Object.entries(obj);
console.log(entries); // Output: [["a", 1], ["b", 2], ["c", 3]]

로그인 후 복사

Conclusion

Arrays are an essential part of JavaScript, providing a powerful way to manage collections of data. By mastering array functions, you can perform complex data manipulations with ease and write more efficient and readable code. This comprehensive guide has covered the most important array functions in JavaScript, complete with detailed examples and explanations. Practice using these functions and experiment with different use cases to deepen your understanding and enhance your coding skills.

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