rhanziy

javascript. Array배열2(filter, map, reduce, ...) 본문

Html_css_js

javascript. Array배열2(filter, map, reduce, ...)

rhanziy 2022. 1. 23. 00:05
'use strict';

{
    // 배열 값을 join하여 출력, join(seperator)는 optional
    // 배열의 모든 요소를 연결해 하나의 문자열로 만든다.
    const fruits = ['apple','banana','orange'];
    const result = fruits.join(' and ');
    console.log(result);
}
{ 
    // make an array out of a string 문자열을 배열로 변환
    // seperator 필수! 어떤걸 기준으로 쪼갤지
    // limit은 optional > 출력 개수
    const fruits = '🍕,🍔,🍟,🌭'; 
    const result = fruits.split(',');
    console.log(result);
}
{
    // make this array reverse
    const array = [1, 2, 3, 4, 5];
    console.log(array.reverse());
    console.log(array); // -> 결과값도 역순으로 나온다.
}
{
    // make new array without the first two elements
    const array = [1, 2, 3, 4, 5];
    const result = array.slice(2,5);
    // This is exclusive of the element at the index 'end'.
    // endnum 은 optional, 마지막 번호는 배제됨!
    console.log(result);
    console.log(array);
    // *splice는 배열 자체를 수정, slice는 배열에서 원하는 부분만 받아올수있다.
}

class Student {
    constructor(name, age, enrolled, score){
        this.name = name;
        this.age = age;
        this.enrolled = enrolled;
        this.score = score;
    }
}
const students = [
    new Student('A', 29, true, 45),
    new Student('B', 28, false, 80),
    new Student('C', 30, true, 90),
    new Student('D', 40, false, 66),
    new Student('E', 18, true, 88),
];
{
    // find a student with the core 90
    // Returns the value of the first element in the array where predicate is true
    const result = students.find((student) => student.score == 90);
    console.log(result);
}
{
    // make an array of enrolled students
    const result = students.filter((student) => student.enrolled);
    console.log(result);
}
{
    // make an array containing only the students' scores
    // 지정된 콜뱀함수를 호출하면서 새로운 값으로 mapping
    // 콜백함수로 전달되는 인자는 맘대로 적어도 되지만... 이해하기 쉽게 적기!
    const result = students.map((student) => student.score);
    console.log(result);
}
{
    //check if there is a student with the score lower than 50
    // 하나라도 조건에 만족되는 사람이 있으면 some, 결과 값은 boolean
    const result = students.some((student) => student.score < 50);
    console.log(result);

    // 모든 학생들의 점수가 50점보다 낮으면 true
    const result2 = students.every((student) => student.score < 50);
    console.log(result2);
}
{
    //compute students' average score
    // 배열을 돌며 배열의 값을 누적할 때 사용, prev는 return이 필요
    // , 0 은 0부터 시작한다는 뜻!
    // reduceRight은 배열의 뒤에서부터 시작
    const result = students.reduce((prev, curr) => prev + curr.score
    , 0);
    console.log(result / 5);
}
{
    // make a string containing all the scores
    const result = students
    .map(student => student.score) // 학생들을 점수로 mapping
    .filter(score => score >= 50) // 50점 이상인 score filtering
    .join();
    console.log(result);
}
{
    // sorted in ascending order  result should be:'45, 66, 80, 88, 90'
    // sort 콜백함수엔 a(이전값), b(현재값)가 전달 -값을 리턴하게되면 
    // a가 b값보다 작다는걸로 간주되어 정렬됨.
    const result = students
    .map((student)=> student.score)
    .sort((a, b)=> a - b) 
    .join();
    console.log(result);
}

'Html_css_js' 카테고리의 다른 글

javascript. Promise API  (0) 2022.01.29
javascript. Promise  (0) 2022.01.28
javascript. Array배열1  (0) 2022.01.21
javascript. Object객체  (0) 2022.01.21
css. 미디어쿼리 분기점  (0) 2022.01.20
Comments