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

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

1,042  

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

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'

{

}


분류 제목
PHP-서기 PHP 51 - 웹사이트크롤링 (= 사이트파싱) ★★★ (= 타사이트 특정부위 가져오기)
JS-서기 JS 8강 - for문 안쪽에 if문 사용 (= 행렬 표만들기 = 줄바꿈 = 줄바꾸기 = 줄변경 = 라인변…
regex PHP 정규표현식 패턴 26강 - (?!패턴) (소괄호 안 물음표 느낌표) : 뒤에 패턴 존재하면 무시, 존…
PHP7-서기 PHP7 32강 - 외부 SMTP 이용해 이메일 보내기 (= 네이버/구글 SMTP 설정법)
JS-바위 JS 18강 - 스크롤트리거 (Scrolltrigger) - 스크롤 애니메이션 구현
PHP-쩡원 PHP 기초 10강 - 게시판 만들기 - 코멘트 (=댓글) , 답댓글 (= 대댓글) 입력, 출력, 입출력
regex PHP 정규표현식 패턴 15강 - 수량자 ─ { } (중괄호) - 문자 반복 횟수 특정
PHP-생코 PHP 25강 - 조건문 논리연산자 (and (&&) , or (||)) ★★★
PHP2020-서기 PHP2020 4강 - 카카오맵 (MySQL 이용해 마커 표시 / 클러스터링 사용)
JS-서기 JS 12강 - 이벤트핸들러2 (event handler) - onload, onunload, / confi…
regex PHP 정규표현식 패턴 17강 - 수량자 ─ *? (별표 물음표), +? (덧셈 물음표), ?? (물음…
JS-엘리 JS 6강 - 클래스・오브젝트 차이점(class vs object), 객체지향 언어 클래스 정리 | (Jav…
서버 서버 - URL RewriteRule (= 라라이트룰 = URL주소치환 = URL주소변경)
regex PHP 정규표현식 패턴 9강 - [^ ] (대괄호안 꺽쇠) ─ 후보문자 제외한 모든 1글자로 된 문자
PHP-쩡원 PHP 기초 8강 - 게시판 만들기 (조회수증가, 날짜형식변경, 파일업로드, 파일명중복방지)
regex PHP 정규표현식 패턴 21강 - \d (역슬래시 소문자d) : 숫자 , \D (역슬래시 대문자D) : …
regex PHP 정규표현식 패턴 6강 - \ . (역슬래시 마침표) ─ 단순 문자열로서의 마침표 기호
PHP-서기 php 10. 그외의 form관련 태그들 (input, textarea, select, option) ★★★…
PHP-쩡원 PHP 기초 3강 - 회원가입 만들기 (테이블생성, 필드생성, 입력폼생성 / 쿠키, 암호화) (member,…
regex PHP 정규표현식 패턴 22강 - \b (역슬래시 소문자b) : 워드(단어)의 경계
1/35
목록
찾아주셔서 감사합니다. Since 2012