코딩동강

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

849

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

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 80~82강 - 자바스크립트 객체 클래스
JS-바위 JS 77~79강 - 자바스크립트 모듈 활용 (Javascript Module)
JS-바위 JS 73~76강 - 테이블 페이지네이션 (Table Pagination)
JS-바위 JS 72강 - AOS 라이브러리 - 슝슝 나타나는 스크롤 애니메이션
JS-바위 JS 69~71강 - 숫자 그래프 애니메이션 (Number Animation)
JS-바위 JS 68강 - animate.css 라이브러리 - 스크롤이벤트 적용
JS-바위 JS 64~67강 - tailwindcss (node js - CSS framework) - CSS 없이 스…
JS-바위 JS 61~63강 - 최신 JS 문법 (ECMA SCRIPT 6) - 변수선언 키워드 let, const, …
JS-바위 JS 60강 - 인스타그램 (instagram) API - 인스타그램 피드를 웹사이트에 출력
JS-바위 JS 56~59강 - 쿠키 (Cookie) 이용해 「오늘 하루 안보기 팝업창 띄우기」 생성
JS-바위 JS 52~55강 - 멀티플 슬라이드 (Multiple Slideshow)
JS-바위 JS 51강 - 스크롤트리거 (scrollTrigger) - 스크롤 애니메이션 구현
JS-바위 JS 46~50강 - 필터링 반응형 갤러리 (Fitered Gallery)
JS-바위 JS 45강 - 하이라이트 무빙 탭 애니메이션 (Highlight Moving Tab animation)
JS-바위 JS 42~44강 - 풀스크린 슬라이드 (FullScreen Slide) 1 - CSS로만 구현
1/47
목록
  • 채팅방
  • 필독
1. 채팅창 헤드에서 접속자 확인 2. 닉네임 클릭해 1:1 채팅 가능 3. 닉네임 클릭해 귓속말 가능 4. 닉네임 클릭해 호출하기 가능 5. 우하단 클릭해 환경 설정 가능 6. 의뢰글 작성 후 의뢰 상담 가능 7. 질문글 작성 후 질문 상담 가능 8. 채팅방에 개인정보 입력 금지 9. 채팅방에 광고 욕설 비방 금지
 홈  PC버전 로그인 일본어
웹디자인언어
서버관리언어
고급코딩언어
그누보드
제작의뢰
Q&A
커뮤니티
웹유틸
회원센터
홈짱 PC버전 로그인