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

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

855  

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

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 14강 - 자바스크립트 함수 기본편 | JavaScript ES6
JS-엘리 JS 13강 - 비동기의 꽃 JavaScript async 와 await 그리고 유용한 Promise API…
JS-엘리 JS 12강 - Promise 개념부터 활용까지 JavaScript Promise | (JavaScript …
JS-엘리 JS 11강 - 비동기 처리의 시작 콜백 이해하기, 콜백 지옥 체험 JavaScript Callback | …
JS-엘리 JS 10강 - JSON 개념 정리 와 활용방법 | (JavaScript ES6)
JS-엘리 JS 9강 - 유용한 10가지 배열 함수들. Array APIs 총정리 | ( JavaScript ES6)
JS-엘리 JS 8강 - 배열 개념과 APIs 총정리 | (JavaScript ES6 )
JS-엘리 JS 7강 - 오브젝트 넌 뭐니? | (JavaScript ES6)
JS-엘리 JS 6강 - 클래스・오브젝트 차이점(class vs object), 객체지향 언어 클래스 정리 | (Jav…
JS-엘리 JS 5강 - Arrow Function은 무엇인가? 함수의 선언과 표현 | (JavaScript ES6)
JS-엘리 JS 4강 - 코딩의 기본 operator, if, for loop 코드리뷰 팁 | (JavaScript E…
JS-엘리 JS 3강 - 데이터타입, data types, let vs var, hoisting | (JavaScrip…
JS-엘리 JS 2강 - 콘솔에 출력, script (async・defer) 차이점 및 앞으로 자바스크립트 공부 방향
JS-엘리 JS 1강 - 자바스크립트의 역사와 현재 그리고 미래 (JavaScript, ECMAScript, JQuer…
목록
찾아주셔서 감사합니다. Since 2012