놓치고 싶지 않은 JavaScript의 가장 인기 있는 배열 메소드입니다!

이 가이드에서는 14가지 필수 JavaScript 배열 방법을 살펴봅니다. 각 방법의 개요를 설명하고 예제를 통해 사용법을 설명하겠습니다.

1. map(): 각 배열 요소를 변환하고 결과와 함께 새 배열을 반환합니다. 원래 배열은 변경되지 않습니다.

<code class="language-javascript">const numbers = [1, 2, 3];
const doubled = numbers.map(x => x * 2); // [2, 4, 6]
const users = [{ name: 'John' }, { name: 'Jane' }];
const names = users.map(user => user.name); // ['John', 'Jane']</code>

2. filter(): 제공된 테스트 함수를 통과하는 요소만 포함하는 새 배열을 만듭니다. 원래 배열은 그대로 유지됩니다.

<code class="language-javascript">const nums = [1, 2, 3, 4, 5, 6];
const evenNums = nums.filter(n => n % 2 === 0); // [2, 4, 6]
const products = [{ price: 10 }, { price: 20 }];
const expensive = products.filter(p => p.price > 15); // [{ price: 20 }]</code>

3. reduce(): 배열 요소에 함수를 누적 적용하여 단일 값으로 줄입니다. 요소를 반복적으로 결합하는 것이라고 생각하세요.

<code class="language-javascript">const sum = [1, 2, 3].reduce((acc, curr) => acc + curr, 0); // 6
const cart = [{ price: 10 }, { price: 20 }];
const total = cart.reduce((sum, item) => sum + item.price, 0); // 30</code>

4. forEach(): 각 배열 요소에 대해 제공된 함수를 한 번씩 실행합니다. 값을 반환하지 않습니다(undefined 반환).

<code class="language-javascript">[1, 2, 3].forEach(n => console.log(n));
['a', 'b'].forEach((item, index) => console.log(`${index}: ${item}`));</code>

5. find(): 제공된 테스트 기능을 만족하는 첫 번째 요소를 반환합니다. 조건을 만족하는 요소가 없으면 undefined.
을 반환합니다.

<code class="language-javascript">const users2 = [{ id: 1, name: 'John' }, { id: 2, name: 'Jane' }];
const john = users2.find(user => user.name === 'John'); // { id: 1, name: 'John' }
const nums2 = [1, 2, 3, 4];
const firstEven = nums2.find(n => n % 2 === 0); // 2</code>

6. findIndex(): 제공된 테스트 함수를 만족하는 첫 번째 요소의 인덱스를 반환합니다. 조건을 만족하는 요소가 없으면 -1를 반환합니다.

<code class="language-javascript">const fruits = ['apple', 'banana', 'cherry'];
const bananaIndex = fruits.findIndex(f => f === 'banana'); // 1
const userIndex = users2.findIndex(u => u.id === 2); // 1</code>

7. some(): 배열에 있는 하나 이상의 요소가 제공된 함수로 구현된 테스트를 통과하는지 테스트합니다. 하나 이상의 요소가 통과하면 true를 반환하고, 그렇지 않으면 false을 반환합니다.

<code class="language-javascript">const hasEven = [1, 2, 3].some(n => n % 2 === 0); // true
const hasExpensive = products.some(p => p.price > 15); // true</code>

8. every(): 배열의 모든 요소가 제공된 함수로 구현된 테스트를 통과하는지 테스트합니다. 모든 요소가 통과하는 경우에만 true를 반환하고, 그렇지 않으면 false.
을 반환합니다.

<code class="language-javascript">const allPositive = [1, 2, 3].every(n => n > 0); // true</code>

9. includes(): 배열의 항목에 특정 값이 포함되어 있는지 확인하고 true 또는 false를 적절하게 반환합니다.

<code class="language-javascript">const numbers2 = [1, 2, 3];
const hasTwo = numbers2.includes(2); // true
const hasZero = numbers2.includes(0); // false</code>

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

<code class="language-javascript">const colors = ['red', 'blue', 'green'];
const blueIndex = colors.indexOf('blue'); // 1
const yellowIndex = colors.indexOf('yellow'); // -1</code>

11. slice(): 배열의 일부를 추출하여 원본을 수정하지 않고 새 배열로 반환합니다.

<code class="language-javascript">const arr = [1, 2, 3, 4, 5];
const middle = arr.slice(1, 4); // [2, 3, 4]
const last = arr.slice(-2); // [4, 5]</code>

12. splice(): 기존 요소를 제거 또는 교체하거나 새 요소를 제자리에 추가하여 배열의 내용을 변경합니다. 원래 배열을 수정합니다.

<code class="language-javascript">const months = ['Jan', 'March', 'April'];
months.splice(1, 0, 'Feb'); // ['Jan', 'Feb', 'March', 'April']
months.splice(2, 1); // ['Jan', 'Feb', 'April']</code>

13. sort(): 배열의 요소를 제자리 정렬합니다. 기본적으로 문자열로 정렬됩니다. 수치정렬을 위해서는 비교기능이 필요합니다.

<code class="language-javascript">const numbers = [1, 2, 3];
const doubled = numbers.map(x => x * 2); // [2, 4, 6]
const users = [{ name: 'John' }, { name: 'Jane' }];
const names = users.map(user => user.name); // ['John', 'Jane']</code>

14. join(): 배열의 모든 요소를 ​​연결하여 새 문자열을 생성하고 반환합니다(지정된 구분자 문자열로 구분).

<code class="language-javascript">const nums = [1, 2, 3, 4, 5, 6];
const evenNums = nums.filter(n => n % 2 === 0); // [2, 4, 6]
const products = [{ price: 10 }, { price: 20 }];
const expensive = products.filter(p => p.price > 15); // [{ price: 20 }]</code>

이러한 방법을 익히면 JavaScript 배열 조작 능력이 크게 향상됩니다.

위 내용은 놓치고 싶지 않은 JavaScript의 가장 인기 있는 배열 메소드입니다!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!