분류 javascript

😬 10가지 자바스크립트 배열 방법

컨텐츠 정보

  • 조회 13 (작성일 )

본문

이 기사에서는 자바 스크립트 프로젝트의 거의 모든 곳에 필요한 10 가지 중요한 자바 스크립트 배열 메소드를 살펴 봅니다. 예를 들어 각 방법을 빠르게 살펴 보겠습니다. 다음은 처음 8 개 방법의 예를 들어 작업 할 데이터입니다.


const studentData = [
    { name: 'John', marks: 634, passed: true },
    { name: 'Mark', marks: 467, passed: true },
    { name: 'Randy', marks: 390, passed: true },
    { name: 'Leo', marks: 149, passed: false },
    { name: 'Chris', marks: 564, passed: true },
    { name: 'Apu', marks: 456, passed: true },
    { name: 'Naty', marks: 567, passed: true },
    { name: 'James', marks: 98, passed: false },
    { name: 'Andy', marks: 478, passed: true },
    { name: 'Frank', marks: 180, passed: false },
    { name: 'Don', marks: 123, passed: false }
];


filter() 


filter() 메서드는 제공된 함수에 의해 구현 된 테스트를 통과하는 모든 요소로 새 배열을 만듭니다. 합격한 학생들만 모아야 한다고 합시다. 따라서 아래와 같이 필터링 합니다.


const passedStudents = studentData.filter((student) => {
    return student.passed;
});
console.log(passedStudents);


Output : 

[
{ name: 'John', marks: 634, passed: true },
{ name: 'Mark', marks: 467, passed: true },
{ name: 'Randy', marks: 390, passed: true },
{ name: 'Chris', marks: 564, passed: true },
{ name: 'Apu', marks: 456, passed: true },
{ name: 'Naty', marks: 567, passed: true },
{ name: 'Andy', marks: 478, passed: true }
]


map() 


map() 메서드는 호출 배열의 모든 요소에 대해 제공된 함수를 호출 한 결과로 채워진 새 배열을 만듭니다. 모든 학생의 이름 배열을 얻고 싶다고 가정하십시오. 그래서 우리는 다음과 같이 얻을 수 있습니다.


const studentNames = studentData.map((student) => {
    return student.name;
});
console.log(studentNames);


Output: 

[
'John', 'Mark',
'Randy', 'Leo',
'Chris', 'Apu',
'Naty', 'James',
'Andy', 'Frank',
'Don'
]


find() 


find() 메서드는 제공된 테스트 함수를 충족하는 제공된 배열의 첫 번째 요소 값을 반환합니다. 테스트 함수를 충족하는 값이 없으면 undefined가 반환됩니다. 이름이 '레오'인 학생의 데이터를 얻고 싶다고 하면


const dataOfLeo = studentData.find((student) => {
    return student.name === 'Leo';
});
console.log(dataOfLeo);


Output: 

{ name: 'Leo', marks: 149, passed: false }


reduce() 


reduce() 메서드는 배열의 각 요소에 대해 사용자가 제공하는 reducer 함수를 실행하여 단일 출력 값을 생성합니다. reducer 함수로 첫 번째 매개 변수를 취하고 두 번째 매개 변수는 초기 값입니다. 모든 학생의 점수 합계를 계산하고 싶다고 가정 해 보겠습니다.


const totalMarksOfAll = studentData.reduce((currentTotal, student) => {
    return student.marks + currentTotal;
}, 0);
console.log(totalMarksOfAll);


Output: 

4106


findIndex() 


findIndex() 메서드는 제공된 테스트 함수를 충족하는 배열에서 첫 번째 요소의 인덱스를 반환합니다. 그렇지 않으면 -1을 반환하여 테스트를 통과 한 요소가 없음을 나타냅니다. Leo's Data의 색인을 찾고 싶다고 가정 해 보겠습니다.


const indexOfLeo = studentData.findIndex((student) => student.name === 'Leo');
console.log(indexOfLeo);


Output: 

3


forEach() 


forEach() 메서드는 각 배열 요소에 대해 제공된 함수를 한 번씩 실행합니다. for 루프와 유사하게 작동합니다. 각 학생의 결과 상태를 인쇄하고 싶다고 가정합니다.


studentData.forEach((student) => {
    console.log(
        `${student.name} has ${
            student.passed ? 'passed' :
            'failed'} !`
    );
});


Output: 

John has passed !
Mark has passed !
Randy has passed !
Leo has failed !
Chris has passed !
Apu has passed !
Naty has passed !
James has failed !
Andy has passed !
Frank has failed !
Don has failed !


some() 


some() 메서드는 배열의 하나 이상의 요소가 제공된 함수로 구현 된 테스트를 통과하는지 테스트합니다. 배열에서 제공된 함수가 true를 반환하는 요소를 찾으면 true를 반환합니다. 그렇지 않으면 거짓을 반환합니다. 배열을 수정하지 않습니다. 데이터에 실패한 학생이 있는지 여부를 알고 싶다고 가정 해 보겠습니다.


const hasFailedStudents = studentData.some((student) => {
    return !student.passed;
});
console.log(hasFailedStudents);


Output: 

true


every() 


every() 메서드는 배열의 모든 요소가 제공된 함수에 의해 구현 된 테스트를 통과하는지 테스트합니다. 부울 값을 반환합니다. some () 메서드와 비슷하지만, 유일한 차이점은 어떤 조건자가 참이면 some() 메서드가 true를 반환하고 모든 조건자가 참이면 every() 메서드가 참을 반환한다는 것입니다. 모든 학생의 합격 여부를 확인하고 싶다고 해봅시다.



const hasAllPassed = studentData.every((student) => {
    return student.passed;
});
console.log(hasAllPassed);


Output: 

false


New Data 


이제 나머지 두 가지 방법에 대해 아래 데이터를 사용할 수 있습니다.


const languages = [
    'java',
    'cpp',
    'python',
    'javascript'
];


includes() 


includes() 메서드는 배열이 항목 사이에 특정 값을 포함하는지 여부를 확인하여 적절하게 true 또는 false를 반환합니다. 파이썬과 루비가 위 언어 배열에 있는지 확인하고 싶다고 가정 해 보겠습니다.


const includesRuby = languages.includes('ruby');
console.log(includesRuby)
const includesPython = languages.includes('python');
console.log(includesPython);


Output: 

false
true


indexOf() 


indexOf() 메서드는 배열에서 주어진 요소를 찾을 수 있는 첫 번째 인덱스를 반환하거나 존재하지 않는 경우 -1을 반환합니다. 파이썬의 색인을 찾고 싶다고 가정하십시오.



const indexOfPython = languages.indexOf('python');
console.log(indexOfPython);


Output: 

2


https://dev.to/satishnaikawadi2001/10-must-know-javascript-array-methods-bp5