오늘 마스터해야 하는 15가지 JavaScript 배열 메서드

신인 프로그래머에서 코딩 전문가에 이르기까지 모든 기술 수준의 웹 개발자는 최신 웹 사이트 개발에서 JavaScript의 중요성을 알게 됩니다. JavaScript는 너무 지배적이어서 웹 앱을 만들지 여부를 아는 것이 필수 기술입니다.

JavaScript 언어에 내장된 가장 강력한 빌딩 블록 중 하나는 배열입니다. 배열은 일반적으로 많은 프로그래밍 언어에서 발견되며 데이터를 저장하는 데 유용합니다.

JavaScript에는 배열 메서드라는 유용한 기능도 포함되어 있습니다. 개발자로서의 기술을 키우기 위해 자세히 살펴봐야 할 15가지가 있습니다.

배열 방법이란 무엇입니까?

배열 메서드 배열에 적용할 수 있는 JavaScript에 내장된 함수입니다. 각 메소드에는 어레이에서 변경 또는 계산을 수행하는 고유한 기능이 있어 공통 기능을 처음부터 코딩할 필요가 없습니다.

JavaScript의 배열 메서드는 배열 변수에 첨부된 점 표기법을 사용하여 실행됩니다. JavaScript 함수이기 때문에 항상 선택적 인수를 포함할 수 있는 괄호로 끝납니다. 다음은 이라는 간단한 배열에 연결된 메서드입니다. myArray .

let myArray = [1,2,3]; myArray.pop();

이 코드는 팝 배열에.

예제 배열

각 예에 대해 다음과 같이 호출할 샘플 배열을 사용합니다. myArray , 에 대한 방법을 수행합니다. 콘솔과 코드를 자유롭게 사용하십시오.

let myArray = [2,4,5,7,9,12,14];

이 예에서는 다음의 기초를 알고 있다고 가정합니다. JavaScript가 무엇이며 어떻게 작동하는지 . 그렇지 않다면 우리는 모두 배우고 성장하기 위해 여기에 있습니다.

이 15가지 강력한 배열 방법에 대해 자세히 알아보십시오!

1. Array.push()

그것이 하는 일: 푸시() 배열을 가져와 배열 끝에 하나 이상의 요소를 추가한 다음 배열의 새 길이를 반환합니다. 이 방법은 기존 어레이를 수정합니다.

다음을 실행하여 배열에 숫자 20을 추가합니다. 푸시() , 20을 인수로 사용합니다.

let myArray = [2,4,5,7,9,12,14];  
myArray.push(20);

작동했는지 확인하십시오.

console.log(myArray); [2,4,5,7,9,12,14,20]

실행 푸시() myArray의 메소드가 인수에 지정된 값을 배열에 추가했습니다. 이 경우 20. 콘솔에서 myArray를 확인하면 값이 이제 배열 끝에 추가된 것을 볼 수 있습니다.

2. Array.concat()

그것이 하는 일: 연결() 두 개 이상의 배열을 새 배열로 병합할 수 있습니다. 기존 배열을 수정하지 않고 새 배열을 만듭니다.

가져 가다 myArray 라는 배열을 병합합니다. 새로운 배열 그것에.

let myArray = [2,4,5,7,9,12,14];  
let newArray = [1,2,3];  
let result = myArray.concat(newArray);

console.log(result); [2,4,5,7,9,12,14,1,2,3]

이 방법은 여러 배열이나 결합해야 하는 값을 처리할 때 훌륭하게 작동합니다. 이 모든 것은 변수를 사용할 때 매우 간단한 한 단계로 이루어집니다.

3. Array.join()

그것이 하는 일: 가입하다() 배열을 가져와 쉼표로 구분하여 배열의 내용을 연결합니다. 결과는 문자열에 배치됩니다. 쉼표 대신 사용하려는 경우 구분 기호를 지정할 수 있습니다.

myArray를 사용하여 이것이 어떻게 작동하는지 살펴보십시오. 먼저 쉼표를 사용하는 구분자 인수가 없는 기본 방법을 사용합니다.

let myArray = [2,4,5,7,9,12,14];  
myArray.join();

'2,4,5,7,9,12,14'

JavaScript는 배열의 각 값이 쉼표로 구분된 문자열을 출력합니다. 함수에서 인수를 사용하여 구분 기호를 변경할 수 있습니다. 단일 공백과 문자열의 두 가지 인수로 이를 관찰하십시오.

myArray.join(' ');  
'2 4 5 7 9 12 14'

myArray.join(' and ');  
'2 and 4 and 5 and 7 and 9 and 12 and 14'

첫 번째 예는 쉽게 읽을 수 있는 문자열을 만드는 공백입니다.

두 번째 예는 다음을 사용합니다. (' 그리고 ') , 그리고 여기서 알아야 할 두 가지 사항이 있습니다.

먼저 'and'라는 단어를 사용하여 값을 구분합니다. 둘째, '그리고'라는 단어의 양쪽에 공백이 있습니다. 사용할 때 주의해야 할 중요한 사항입니다. 가입하다() . JavaScript는 인수를 문자 그대로 읽습니다. 따라서 이 공간을 생략하면 모든 것이 함께 처리됩니다(예: '2and4and5...' 등). 읽기 쉬운 출력이 아닙니다!

4. Array.forEach()

그것이 하는 일: 각각() (대소문자 구분!) 배열의 각 항목에 대해 기능을 수행합니다. 이 함수는 'for' 루프를 사용하여 배열에 함수를 적용하는 것과 유사하지만 코드 작업이 훨씬 적은 사용자가 만드는 모든 함수입니다.

조금 더 있습니다 각각() ; 구문을 살펴본 다음 간단한 기능을 수행하여 시연합니다.

  
myArray.forEach(function(item){  
//code  
});

우리는 사용하고 있습니다 myArray , 각각() 점 표기법이 적용됩니다. 사용하려는 함수를 인수 괄호 안에 넣습니다. 기능(항목) 예에서.

보세요 기능(항목) . 이것은 forEach() 내부에서 실행되는 함수이며 자체 인수가 있습니다. 우리는 주장을 부르고 있습니다 안건 . 이 주장에 대해 알아야 할 두 가지 사항이 있습니다.

forEach()가 배열을 반복할 때 이 인수에 코드를 적용합니다. 현재 요소를 보유하는 임시 변수로 생각하십시오.
인수의 이름을 선택하면 원하는 이름을 지정할 수 있습니다. 일반적으로 '항목' 또는 '요소'와 같이 이해하기 쉽게 이름이 지정됩니다.

이 두 가지를 염두에 두고 이 간단한 예를 확인하십시오. 모든 값에 15를 더하고 콘솔에 결과를 표시합니다.

  
myArray.forEach(function(item){  
 console.log(item + 15);  
});

우리는 사용하고 있습니다 안건 이 예에서는 변수로 사용하므로 함수는 다음을 통해 각 값에 15를 더하도록 작성됩니다. 안건 . 그런 다음 콘솔에서 결과를 인쇄합니다. 다음은 Google 크롬 콘솔에서 보이는 것입니다.

결과는 배열의 모든 숫자이지만 15가 추가됩니다!

5. Array.map()

그것이 하는 일: 지도() 배열의 모든 요소에 대해 기능을 수행하고 결과를 새 배열에 배치합니다.

모든 요소에서 함수를 실행하는 것은 forEach()처럼 들립니다. 여기서 차이점은 지도() 실행할 때 새 배열을 만듭니다. forEach()는 새 배열을 자동으로 생성하지 않으므로 그렇게 하려면 특정 함수를 코딩해야 합니다.

map()을 사용하여 myArray의 모든 요소 값을 두 배로 늘리고 새 배열에 배치합니다. 당신은 같은 것을 볼 것입니다 기능(항목) 조금 더 연습하기 위한 구문입니다.

let myArray = [2,4,5,7,9,12,14];

let doubleArray = myArray.map(function(item){  
return item * 2;  
});

콘솔에서 결과를 확인하십시오.

console.log(doubleArray); [4,8,10,14,18,24,28]

myArray 변경되지 않습니다:

console.log(myArray); [2,4,5,7,9,12,14]

6. Array.unshift()

기능: push() 메서드가 작동하는 방식과 유사하게, unshift() 이 메서드는 배열을 가져와 배열의 끝이 아닌 시작 부분에 하나 이상의 요소를 추가하고 배열의 새 길이를 반환합니다. 이 방법은 기존 어레이를 수정합니다.

let myArray = [2,4,5,7,9,12,14];  
myArray.unshift(0);

어레이를 콘솔에 기록할 때 어레이 시작 부분에 숫자 0이 표시되어야 합니다.

console.log(myArray); [0, 2,4,5,7,9,12,14]

7. Array.sort()

기능: 정렬은 배열에서 수행되는 가장 일반적인 작업 중 하나이며 매우 유용합니다. 자바스크립트 종류() array 메서드는 한 줄의 코드로 숫자 또는 문자열 배열을 정렬하는 데 사용할 수 있습니다. 이 작업은 제자리에 있으며 초기 배열을 수정하여 정렬된 배열을 반환합니다. 에 대해 다른 숫자 집합을 가져옵니다. myArray 이 시간.

let myArray = [12, 55, 34, 65, 10];  
myArray.sort((a,b) => a - b);

정렬이 제자리에서 이루어지므로 정렬된 배열에 대해 별도의 변수를 선언할 필요가 없습니다.

console.log(myArray); [10, 12, 34, 55, 65]

기본적으로 배열은 오름차순으로 정렬되지만 선택적으로 사용자 정의 함수를 종류() 원하는 방식으로 배열을 정렬하는 방법입니다. 이 경우 관습을 통과했습니다. 화살표 기능 배열을 오름차순으로 숫자로 정렬합니다.

8. Array.reverse()

기능: 이름에서 알 수 있듯이 뒤집다() 메서드는 배열의 요소 순서를 반대로 하는 데 사용됩니다. 이것은 배열의 내용을 뒤집는 것이 아니라 순서 자체를 뒤집는 것입니다. 이 방법을 더 잘 이해하기 위한 예는 다음과 같습니다.

let myArray = [2,4,5,7,9,12,14];  
myArray.reverse()

콘솔에 출력을 기록하여 작업을 확인합니다.

console.log(myArray); [14, 12, 9, 7, 5, 4, 2]

보시다시피 요소의 순서가 반대입니다. 이전에는 마지막 인덱스의 요소(인덱스 6의 요소 14)가 이제 0번째 인덱스의 요소가 되는 식입니다.

9. Array.slice()

그것이 하는 일: 일부분() 배열의 일부에 대한 얕은 복사본을 검색하는 데 사용됩니다. 간단히 말해서 이 방법을 사용하면 배열에서 인덱스로 특정 요소를 선택할 수 있습니다. 검색하려는 요소의 시작 인덱스와 요소 및 선택적으로 끝 인덱스도 전달할 수 있습니다.

끝 인덱스를 제공하지 않으면 시작 인덱스부터 배열 끝까지의 모든 요소가 검색됩니다. 이 메서드는 새 배열을 반환하고 기존 배열을 수정하지 않습니다.

let myArray = [2,4,5,7,9,12,14];  
let slicedArray = myArray.slice(2);

위의 코드에서 end index 매개변수가 전달되지 않았기 때문에 두 번째 인덱스부터 마지막 인덱스까지의 모든 요소가 검색됩니다. 두 어레이를 콘솔에 기록합니다.

console.log(myArray);  
console.log(slicedArray);

[2, 4, 5, 7, 9, 12, 14]  
[5, 7, 9, 12, 14]

분명히 초기 배열은 slice() 메서드에 의해 수정되지 않고 대신에 저장된 새 배열을 반환합니다. 슬라이스 배열 변하기 쉬운. 다음은 end index 매개변수가 일부분() 방법.

let myArray = [2,4,5,7,9,12,14];  
let slicedArray = myArray.slice(1, 3);  
console.log(slicedArray);

[4, 5]

10. Array.splice()

그것이 하는 일: 접착() 배열의 요소를 제자리에서 제거하거나 교체하는 데 사용되는 유용한 배열 방법입니다. 삭제할 요소의 인덱스와 개수를 지정하여 배열을 수정합니다.

let myArray = [2,4,5,7,9,12,14];  
myArray.splice(2, 3);  
console.log(myArray);

위의 예에서, myArray 배열이 인덱스 2에서 연결되고 3개의 요소가 제거됩니다. 이제 어레이는 다음으로 구성됩니다.

[2, 4, 12, 14]

요소를 삭제하는 대신 대체하려면 다음과 같이 대체할 요소와 함께 선택적 매개변수를 원하는 만큼 전달할 수 있습니다.

두 얼굴을 온라인에서 무료로 모핑

let myArray = [2,4,5,7,9,12,14];  
myArray.splice(2, 3, 1, 2, 3);  
console.log(myArray);

[2, 4, 1, 2, 3, 12, 14]

11. Array.filter()

그것이 하는 일: 필터() 메서드는 테스트를 포함하는 함수를 사용하고 해당 테스트를 통과하는 모든 요소가 포함된 새 배열을 반환하는 유용한 배열 메서드입니다. 이름 그대로 이 방법은 다른 요소에서 필요한 요소를 필터링하는 데 사용됩니다. 필터링은 부울 값을 반환하는 함수를 사용하여 수행됩니다.

다음은 의 예입니다. 필터() 배열에서 2로 나눌 수 있는 요소만 가져오는 데 사용되는 메서드입니다.

let myArray = [2,4,5,7,9,12,14];  
let divisibleByTwo = myArray.filter((number) => number % 2 === 0);  
console.log(divisibleByTwo);

위의 예에서 화살표 함수는 원래 배열에서 각 숫자를 가져와 모듈로( % ) 그리고 평등 ( === ) 운영자. 출력은 다음과 같습니다.

[2, 4, 12, 14]

12. Array.reduce()

그것이 하는 일: 줄이다() 리듀서 함수를 받아 각 배열 요소에서 실행하여 반환하는 동안 단일 값을 출력하는 배열 메서드입니다. 누산기 변수와 현재 요소 변수를 필수 매개변수로 사용하는 감속기 기능을 사용합니다. 누산기의 값은 모든 반복에서 기억되며 최종 반복 후에 궁극적으로 반환됩니다.

이 방법의 인기 있는 사용 사례는 배열에 있는 모든 요소의 합을 계산하는 것입니다. 이 기능의 구현은 다음과 같습니다.

let myArray = [2,4,5,7,9,12,14];  
let sumOfNums = myArray.reduce((sum, currentNum) => sum + currentNum, 0);

0은 위의 예에서 두 번째 매개변수로 전달되며, 이는 누산기 변수의 초기값으로 사용됩니다. NS 합계 변수에는 반환 값이 포함됩니다. 줄이다() 배열에 있는 모든 요소의 합으로 예상되는 메서드입니다.

console.log(sumOfNums); 53

13. Array.includes()

기능: 배열에서 요소가 있는지 확인하기 위해 검색하는 것은 매우 자주 사용되는 작업이므로 JavaScript에는 다음과 같은 형식의 내장 메서드가 있습니다. 포함() 배열 방식. 사용 방법은 다음과 같습니다.

let myArray = [2,4,5,7,9,12,14];  
console.log(myArray.includes(4));  
console.log(myArray.includes(2, 1));  
console.log(myArray.includes(12, 2));  
console.log(myArray.includes(18));

이 메서드는 검색할 요소인 필수 매개변수와 검색을 시작할 배열 인덱스인 선택적 매개변수를 사용합니다. 해당 요소가 있는지 여부에 따라 반환됩니다. 진실 또는 거짓 각기. 따라서 출력은 다음과 같습니다.

true  
false  
true  
false

14. Array.indexOf()

그것이 하는 일: indexOf() 메소드는 지정된 요소가 배열에서 처음 발견되는 인덱스를 찾는 데 사용됩니다. Include() 메서드와 유사하지만 이 메서드는 숫자 인덱스를 반환하거나 요소가 배열에 없으면 -1을 반환합니다.

let myArray = [2,4,5,7,9,12,14];  
console.log(myArray.indexOf(4));  
console.log(myArray.indexOf('4'));  
console.log(myArray.indexOf(9, 2));

indexOf() 메소드는 요소가 존재하는지 확인하기 위해 엄격한 동등성을 사용합니다. 이는 값과 데이터 유형이 동일해야 함을 의미합니다. 선택적 두 번째 매개변수는 검색을 시작할 인덱스를 사용합니다. 이러한 기준에 따라 출력은 다음과 같습니다.

1  
-1  
4

15. Array.fill()

기능: 종종 배열의 모든 값을 0과 같은 정적 값으로 설정해야 할 수도 있습니다. 루프를 사용하는 대신 다음을 시도할 수 있습니다. 채우다() 같은 목적을 위한 방법. 1개의 필수 매개변수(배열을 채울 값과 2개의 선택적 매개변수: 사이를 채울 시작 및 끝 인덱스)가 있는 배열에서 이 메서드를 호출할 수 있습니다. 이 메서드는 기존 배열을 수정합니다.

let myArray = [2,4,5,7,9,12,14];  
let array1 = myArray.fill(0);  
myArray = [2,4,5,7,9,12,14];  
let array2 = myArray.fill(0, 2);  
myArray = [2,4,5,7,9,12,14];  
let array3 = myArray.fill(0, 1, 3);

콘솔에 출력을 기록하면 다음이 표시됩니다.

console.log(array1);  
console.log(array2);  
console.log(array3);

[0, 0, 0, 0, 0, 0, 0]  
[2, 4, 0, 0, 0, 0, 0]  
[2, 0, 0, 7, 9, 12, 14]

JavaScript 여정의 다음 단계

배열은 JavaScript 언어의 강력한 부분입니다. 그렇기 때문에 개발자로서의 삶을 더 쉽게 만들어주는 많은 메서드가 내장되어 있습니다. 이 15가지 방법을 마스터하는 가장 좋은 방법은 연습하는 것입니다.

자바스크립트를 계속 배우다 보면, MDN은 훌륭한 리소스입니다. 자세한 문서. 콘솔에 익숙해진 다음 프로그래머를 위한 최고의 JavaScript 편집기를 사용하여 기술을 한 단계 높이십시오. JavaScript로 웹사이트를 구축할 준비가 되셨습니까? 고려할 수 있는 몇 가지 프레임워크를 살펴보십시오.

공유하다 공유하다 트위터 이메일 배울 가치가 있는 6가지 JavaScript 프레임워크

개발에 도움이 되는 많은 JavaScript 프레임워크가 있습니다. 여기 당신이 알아야 할 몇 가지가 있습니다.

다음 읽기 관련 항목

프로그램 작성
자바스크립트
코딩 팁

저자 소개 니틴 랑가나트(31건 게재)

Nitin은 열렬한 소프트웨어 개발자이자 JavaScript 기술을 사용하여 웹 애플리케이션을 개발하는 컴퓨터 공학도입니다. 그는 프리랜서 웹 개발자로 일하며 여가 시간에는 Linux 및 프로그래밍에 대한 글을 쓰는 것을 좋아합니다.

Nitin Ranganath가 참여한 작품 더보기

뉴스레터 구독

뉴스레터에 가입하여 기술 팁, 리뷰, 무료 전자책 및 독점 거래를 확인하십시오!

구독하려면 여기를 클릭하세요.