JavaScript 배열 메서드 예제: 종합 가이드(메서드)

모든 주요 JavaScript 배열 메소드의 완전한 예입니다.

배열 방법 범주:

1. 수정 방법(원본 배열 수정)

• push(), pop(), Shift(), unshift(), reverse(), sort(), splice(), fill()

2. 수정하지 않는 방법(새 배열/값 반환)

• map(), filter(), concat(), Slice(), toReversed(), toSorted(), toSpliced()

3. 검색방법

• indexOf(), include(), find(), findIndex(), findLast(), findLastIndex()

4. 반복 방법

• forEach(), map(), filter(), Reduce(), Every(), some()

5. 배열 생성 방법

• Array.from(), Array.of(), Array.fromAsync()

6. 기타 유틸리티 방법

• join(), flat(), flatMap(), 항목(), 값(), with()

아래 31가지 방법의 예:

1. concat() - 두 개 이상의 배열을 병합합니다.

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

2. Join() - 배열 요소에서 문자열을 생성합니다.

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

3. fill() - 배열 요소를 정적 값으로 채웁니다.

const numbers = [1, 2, 3, 4];
console.log(numbers.fill(0)); // Output: [0, 0, 0, 0]

4. include() - 배열에 특정 요소가 포함되어 있는지 확인합니다.

const colors = ['red', 'blue', 'green'];
console.log(colors.includes('blue')); // Output: true

5. indexOf() - 요소의 첫 번째 인덱스를 찾습니다.

const numbers2 = [1, 2, 3, 2];
console.log(numbers2.indexOf(2)); // Output: 1

6. reverse() - 배열 요소를 반대로 바꿉니다.

const letters = ['a', 'b', 'c'];
console.log(letters.reverse()); // Output: ['c', 'b', 'a']

7. sort() - 배열 요소를 정렬합니다.

const unsorted = [3, 1, 4, 1, 5];
console.log(unsorted.sort()); // Output: [1, 1, 3, 4, 5]

8. splice() - 배열에서 요소를 추가/제거합니다.

const months = ['Jan', 'March', 'April'];
months.splice(1, 0, 'Feb');
console.log(months); // Output: ['Jan', 'Feb', 'March', 'April']

9. at() - 지정된 인덱스의 요소를 반환합니다.

const array1 = [5, 12, 8, 130, 44];
console.log(array1.at(2)); // Output: 8

10. copyWithin() - 배열 요소를 다른 위치에 복사합니다.

const array2 = ['a', 'b', 'c', 'd', 'e'];
console.log(array2.copyWithin(0, 3, 4)); // Output: ['d', 'b', 'c', 'd', 'e']

11. flat() - 하위 배열 요소가 연결된 새 배열을 만듭니다.

const arr3 = [1, 2, [3, 4, [5, 6]]];
console.log(arr3.flat(2)); // Output: [1, 2, 3, 4, 5, 6]

12. Array.from() - 배열 유사 객체에서 배열을 생성합니다.

console.log(Array.from('hello')); // Output: ['h', 'e', 'l', 'l', 'o']

13. findLastIndex() - 조건을 만족하는 마지막 인덱스를 반환합니다.

const numbers3 = [5, 12, 8, 130, 44, 8];
console.log(numbers3.findLastIndex(num => num === 8)); // Output: 5

14. forEach() - 각 배열 요소에 대한 함수를 실행합니다.

const numbers4 = [1, 2, 3];
numbers4.forEach(num => console.log(num * 2)); // Output: 2, 4, 6

15. Every() - 모든 요소가 조건을 통과하는지 테스트합니다.

const numbers5 = [1, 2, 3, 4, 5];
console.log(numbers5.every(num => num > 0)); // Output: true

16. 항목() - 키/값 쌍이 있는 배열 반복자를 반환합니다.

const fruits2 = ['Apple', 'Banana'];
const iterator = fruits2.entries();
console.log([...iterator]); // Output: [[0, 'Apple'], [1, 'Banana']]

17. 값() - 값이 포함된 배열 반복자를 반환합니다.

const fruits3 = ['Apple', 'Banana'];
const values = [...fruits3.values()];
console.log(values); // Output: ['Apple', 'Banana']

18. toReversed() - 새로운 역방향 배열을 반환합니다.

const arr4 = [1, 2, 3];
console.log(arr4.toReversed()); // Output: [3, 2, 1]
console.log(arr4); // Original array unchanged: [1, 2, 3]

19. toSorted() - 새로운 정렬된 배열을 반환합니다.

const arr5 = [3, 1, 2];
console.log(arr5.toSorted()); // Output: [1, 2, 3]
console.log(arr5); // Original array unchanged: [3, 1, 2]

20. toSpliced() - 스플라이스 작업으로 새 배열을 반환합니다.

const arr6 = [1, 2, 3];
console.log(arr6.toSpliced(1, 1, 'two')); // Output: [1, 'two', 3]
console.log(arr6); // Original array unchanged: [1, 2, 3]

21. with() - 요소가 교체된 새 배열을 반환합니다.

const arr7 = [1, 2, 3];
console.log(arr7.with(1, 'two')); // Output: [1, 'two', 3]
console.log(arr7); // Original array unchanged: [1, 2, 3]

22. Array.fromAsync() - 비동기 반복 가능에서 배열을 생성합니다.

async function* asyncGenerator() {
  yield 1;
  yield 2;
}
Array.fromAsync(asyncGenerator()).then(array => console.log(array)); // Output: [1, 2]

23. Array.of() - 인수로부터 배열을 생성합니다.

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

24. map() - 콜백 결과로 새 배열을 생성합니다.

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

25. flatMap() - 결과를 매핑하고 평면화합니다.

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

26. Reduce() - 배열을 단일 값으로 줄입니다(왼쪽에서 오른쪽으로)

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

27. ReduceRight() - 배열을 단일 값으로 줄입니다(오른쪽에서 왼쪽으로)

const numbers8 = [1, 2, 3, 4];
console.log(numbers8.reduceRight((acc, curr) => acc + curr, 0)); // Output: 10

28. some() - 최소한 하나의 요소가 조건을 통과하는지 테스트합니다.

const numbers9 = [1, 2, 3, 4, 5];
console.log(numbers9.some(num => num > 4)); // Output: true

29. find() - 조건을 통과한 첫 번째 요소를 반환합니다.

const numbers10 = [5, 12, 8, 130, 44];
console.log(numbers10.find(num => num > 10)); // Output: 12

30. findIndex() - 조건을 통과한 첫 번째 인덱스를 반환합니다.

const numbers11 = [5, 12, 8, 130, 44];
console.log(numbers11.findIndex(num => num > 10)); // Output: 1

31. findLast() - 조건을 통과한 마지막 요소를 반환합니다.

const numbers12 = [5, 12, 8, 130, 44];
console.log(numbers12.findLast(num => num > 10)); // Output: 44

핵심 사항:

• 각 방법에는 정렬, 역순, 배열 요소 찾기 등의 특정 작업이 있습니다.
• sort() 및 reverse()와 같은 일부 메소드는 원래 배열을 수정합니다.
• map() 및 filter()와 같은 일부 메소드는 새 배열을 반환합니다.
• toSorted() 및 toReversed()와 같은 일부 최신 메서드는 원래 배열을 변경하지 않고 유지하고 새 배열을 반환합니다.

? LinkedIn에서 나와 연결하세요:

저는 JavaScript, Node.js, React, Next.js, 소프트웨어 엔지니어링, 데이터 구조, 알고리즘 등에 대한 통찰력을 정기적으로 공유합니다. 함께 연결하고, 배우고, 성장해 보세요!

팔로우: 노지불 이슬람

위 내용은 JavaScript 배열 메서드 예제: 종합 가이드(메서드)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!