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

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

1,427  

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

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-서기 JQ 4강 - 허버메뉴
JS-서기 JQ 3강 - 이벤트, 이펙트 (=메서드)
JS-서기 JQ 2강 - JQUERY (제이쿼리) 다운로드, 외부링크, 기본구문
JS-서기 JQ 1강 - JQUERY (제이쿼리) 개념, CSS 선택자
JS-서기 JS 17강 - 허버메뉴만들기
JS-서기 JS 16강 - this객체, 조건분기, 속성설정
JS-서기 JS 15강 - CSS 선택자
JS-서기 JS 14강 - HTML CSS JS 혼용하기 (=getElementsBy 시리즈 = JS선택자) ★★★★★
JS-서기 JS 13강 - DOM (돔: Document Object Model 문서객체모델)
JS-서기 JS 12강 - 이벤트핸들러2 (event handler) - onload, onunload, / confi…
JS-서기 JS 11강 - 이벤트핸들러1 (event handler)
JS-서기 JS 10강 - 사용자정의함수 (조건, 경고창, 페이지이동) (function, if, alert, url,…
JS-서기 JS 9강 - 함수 제작 (= 사용자정의함수)
JS-서기 JS 8강 - for문 안쪽에 if문 사용 (= 행렬 표만들기 = 줄바꿈 = 줄바꾸기 = 줄변경 = 라인변…
JS-서기 JS 7강 - 모든 구구단 (= 중첩포문 = 이중포문 = 이단포문) (for double loop)
JS-서기 JS 6강 - 특정 구구단
JS-서기 JS 5강 - for반복문 흐름, 1~100 출력 및 합산 3
JS-서기 JS 4강 - else if 조건문, && 기호 의미
JS-서기 JS 3강 - 변수선언, prompt() 입력함수, if조건문, 사이트 이동 ★
JS-서기 JS 2강 - 변수 선언 및 출력
11/35
목록
찾아주셔서 감사합니다. Since 2012