• 회원가입
  • 로그인
  • 구글아이디로 로그인

[JS-엘리] JS 9강 - 유용한 10가지 배열 함수들. Array APIs 총정리 | ( JavaScript ES6)

1,025  

동영상 수강 및 본문 읽기 전 아래 좌표 먼저 풀어보세요.

https://drive.google.com/file/d/1smYHFS5fbgdyGHjBmXx2P-IyY3VWJ9tm/view

 

※ 특정 메서드가 배열 자체를 변화시키는지 아니면 새 배열 생성하는지 여부에 주의 !!

 

02:04

Q1. make a string out of an array 

arr.join() : (array → string) 변환.


// Q1. make a string out of an array

{

  const fruits = ['apple', 'banana', 'orange'];

  const res1 = fruits.join();

  console.log(res1);

  const res2 = fruits.join('|');

  console.log(res2);

}

 

결과보기

 

05:07

Q2. make an array out of a string 

str.split() : (string → array) 변환.


// Q2. make an array out of a string

{

  const fruits = 'apple, kiwi, banana, cherry';

  

  const res1 = fruits.split(',');

  console.log(res1); // ["apple", " kiwi", " banana", " cherry"]

  

  const res2 = fruits.split(',', 2);

  console.log(res2); // ["apple", " kiwi"]


  const res3 = fruits.split();

  console.log(res3); // ["apple, kiwi, banana, cherry"]

}

 

결과보기

 

07:33

Q3. make this array look like this: [5, 4, 3, 2, 1] 

arr.reverse() : 배열 자체의 순서 뒤집기

 

// Q3. make this array look like this: [5, 4, 3, 2, 1]

{

  const array = [1, 2, 3, 4, 5];

  const res = array.reverse();

  console.log(res); // [5, 4, 3, 2, 1]

  console.log(array); // [5, 4, 3, 2, 1]

}

 

결과보기

 

08:32

Q4. make new array without the first two elements 

arr.splice() : 배열 자체는 변화 O

arr.slice() : 배열 자체는 변화 X  (∴ 이것을 사용해야 함.)

 

// Q4. make new array without the first two elements

{

  const array = [1, 2, 3, 4, 5];

  /*

  const res1 = array.splice(0, 2);

  console.log(res1); // [1, 2]

  console.log(array); // [3, 4, 5]

  */

  const res2 = array.slice(2, 5);

  console.log(res2); // [3, 4, 5]

  console.log(array); // [1, 2, 3, 4, 5]

}

 

결과보기

 

 

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

];

 

11:48

Q5. find a student with the score 90

 

arr.find() :  

 

// Q5. find a student with the score 90

{

  /*

  const res = students.find(function (student,index) {

   // console.log(student,index);

   return student.score === 90;

  });

  */

  const res = students.find((student) => student.score === 90);

  console.log(res);

}

 

결과보기

 

18:05

Q6. make an array of enrolled students

 


// Q6. make an array of enrolled students

{

}

 


 


// Q7. make an array containing only the students' scores

// result should be: [45, 80, 90, 66, 88]

{

}

 


 


// Q8. check if there is a student with the score lower than 50

{

}

 


 


// Q9. compute students' average score

{

}

 


 


// Q10. make a string containing all the scores

// result should be: '45, 80, 90, 66, 88'

{

}

 


// Bonus! do Q10 sorted in ascending order

// result should be: '45, 66, 80, 88, 90'

{

}


분류 제목
JS-생코 JS 46강 - UI,API 그리고 문서 (1/2) : 수업소개
JS-생코 JS 45강 - 모듈 (5/5) : 라이브러리의 사용
JS-생코 JS 44강 - 모듈 (4/5) : 라이브러리란?
JS-생코 JS 43강 - 모듈 (3/5) : Node.js의 모듈화
JS-생코 JS 42강 - 모듈 (2/5) : 모듈화
JS-생코 JS 41강 - 모듈 (1/5) : 모듈이란?
JS-생코 JS 40강 - 객체 (3/3) : 객체지향 프로그래밍
JS-생코 JS 39강 - 객체 (2/3) : 객체와 반복문의 조우
JS-생코 JS 38강 - 객체 (1/3) : 객체의 문법
JS-생코 JS 37강 - 배열 (5/5) : 제거와 정렬
JS-생코 JS 36강 - 배열 (4/5) : 데이터의 추가
JS-생코 JS 35강 - 배열 (3/5) : 배열과 반복문의 조우
JS-생코 JS 34강 - 배열 (2/5) : 배열의 효용
JS-생코 JS 33강 - 배열 (1/5) : 배열의 문법
JS-생코 JS 32강 - 함수 (5/5) : 다양한 정의 방법
JS-생코 JS 31강 - 함수 (4/5) : 출력
JS-생코 JS 30강 - 함수 (3/5) : 입력
JS-생코 JS 29강 - 함수 (2/5) : 함수의 효용
JS-생코 JS 28강 - 함수 (1/5) : 함수란?
JS-생코 JS 27강 - 반복 (6/6) : 반복문의 중첩 (= 이중 반복문) ★★★★★
25/35
목록
찾아주셔서 감사합니다. Since 2012