TIL : Javascript Array(2)

군밤먹으면서코딩·2021년 5월 21일
0

javascript

목록 보기
9/16
post-thumbnail

Splice() vs Slice()

    const array = [1, 2, 3, 4, 5];
    const array2 = [1, 2, 3, 4, 5];
    array.slice(2);
    array.splice(2);

    console.log(array + " " + "slice");
    console.log(array2 + " " + "splice");
  • splice로 짤라내면 배열까지 잘라버린다!!
  • slice로 짤라내면 본 배열의 요소들은 유지 시키고 잘라온다!

split()

String -> array로 바꿔주기

const fruits = "🍎, 🥝, 🍌, 🍒";
const result = fruits.split(",");
    console.log(result);
  • 뭘 기준으로 쪼개줄 것인가!
    - 여기서는 " , "를 기준으로 배열내 요소를 구분해준 것.

find()

배열의 요소를 돌면서 callback 함수를 통과한 요소만 통과시켜 리턴한다!

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),
];

 const result = students.find((student) => {
        //배열의 요소들을 돌면서 콜백을 통과한 요소만 리턴한다.
        return student.score === 90;
    });
    console.log(result);

filter()

filter도 배열의 요소들을 돌면서 콜백함수의 조건이 true인 요소를 반환한다.

 const result = students.filter((student) => {
        //조건을 충족하는 배열을 return한다.
        return student.enrolled;
    });

그렇다면 filter()와 find()의 차이점은 무엇일까?

  • find는 or연산자(|)와 비슷하다.
    -배열을 순회하다 조건이 충족되는 요소를 찾으면 해당 요소만 출력하고 종료된다! 혹은 if문이 true이면 break 되는 방식이라 이해해보쟈 (제일 앞에 있는 참인 요소만 반환!)
  • 반면 filter는 배열을 순회하다 콜백함수가 true인 요소 전부를 return한다!

map()

배열이 callback 함수를 거쳐 '새로운 배열을 return 한다'

  const result = students.map((student) => {  // 배열이 함수를 거쳐 새로운 배열을 return
        return student.score;
    });
  • 배열을 내 입맛대로 가공하기 쉽다!! 가장 많이 사용할 것 같다! filter()와 더불어 잘 알아두쟈!

some()

배열의 각 요소들을 순회하며 어느 하나라도 true라면 T/F 반환

every()

모든 요소가 충족되어야 True

   const result = students.some((student) => {
        //some은 배열의 각각의 요소들이 콜백 함수를 통과하는지 여부를 check (하나라도 충족되면 true)
        console.clear();
        return student.score < 50;
    });
  

    const result2 = students.every((student) => {
        // every는 모든 요소가 충족되어야 true
        return student.score < 50;
    });
    console.log(result);
    console.log(result2);

reduce()

누적이라 생각하면 된다! => 이해하기 조금 어려웠다...ㅠㅡ

reduce<U>(callbackfn: (previousValue: U, currentValue: T, currentIndex: number, array: T[]) => U, initialValue: U): U;
  • 파라미터로 현재값(currentValue)을 리턴해 이전값(previousValue)에 들어간다.

  • 이전값(previousValue)과 현재값(currentValue)값이 연산되고 연산된 값이 return

  • 연산된 return값 다시 이전값(previousValue)으로 이동, 현재값(currentValue)과 연산하고 연산된값 return 반복

  • 또한 맨 처음 initialValue값을 지정해 줄 수 있다!( 첫번째 currentvalue 값과 연산될 previousValue 지정해 주는 것! )

//평균 구하기
const result = students.reduce((prev, curr) => {
        //reduce는 누적이라 생각하면 된다.
        return prev + curr.score; //이전에 return된 값이 prev로 가고, curr값과 연산이 되면서 계속 반복
    }, 0); //초기 prev값을 설정해 줄 수 있다.
    console.log(result / students.length);

0개의 댓글