23.04.25 자바스크립트 배열객체 심화

문자열과 배열을 서로 변환하는 방법

 

   문자열 ->배열 첫번째 (스플릿메서드)

 

   let str5 = "Hello everyone";

   str5.split("");

   (14) ['H', 'e', 'l', 'l', 'o', ' ', 'e', 'v', 'e', 'r', 'y', 'o', 'n', 'e']

 

   let arr2 = str5.split("");

   arr2

   (14) ['H', 'e', 'l', 'l', 'o', ' ', 'e', 'v', 'e', 'r', 'y', 'o', 'n', 'e']

 

 

   문자열 ->배열 두번째 (전개연산자)

 

   let str5 = "Hello everyone";

   let arr3 = [...str5];

   arr3

   (14) ['H', 'e', 'l', 'l', 'o', ' ', 'e', 'v', 'e', 'r', 'y', 'o', 'n', 'e']

 

 

   문자열 ->배열 세번째 (array, from)

 

   arr4 = Array.from(str5);

   (14) ['H', 'e', 'l', 'l', 'o', ' ', 'e', 'v', 'e', 'r', 'y', 'o', 'n', 'e']

 

   *배열 -> 문자 (join메서드)

   문자열.join( );

 

 

 배열을 생성하는 방법

 

   *배열 생성 방법

   1. 빈 배열을 만들고 값 할당

   2. 리터럴 표기법 생성

   3. Array 객체의 인스턴스 객체로 생성

 

   1. 빈배열 만들고 값 할당

   let seasons = [];

   seasons[0] = "spring";

   seasons[1] = "summer";

 

   seasons

   (2) ['spring', 'summer']

 

   2.리터럴표기법

   let pets = ["dog","cat","mouse"]

 

   3. Array 객체 (내장객체)

   let fruits = new Array("사과", "포도");

 

   fruits

   (2) ['사과', '포도']

 

 

 

배열객체의 값을 변경할때

 

   객체 값 변경

   let pets = ["dog","cat","mouse"]

   pets[1] = "hamster";

 

   pets

   (3) ['dog', 'hamster', 'mouse']

 

 

객체에 새로운 값을 부여할때

 

   객체 새로운 값 부여

   let pets = ["dog","cat","mouse"]

   pets[4] = "rabbit";

 

   pets

   (5) ['dog', 'cat', 'mouse', empty, 'rabbit'] //비어있는 인덱스 3번은 빈공간으로 남게됨.

 

 

 

배열은 반복문과 함께 많이 사용된다.

 

   배열 = > 반복문을 많이 사용

 

   let colors = ["red", "green", "blue", "white","black"];

   for(let i = 0; i < colors.length; i++){

     console.log(colors[i])

   };

   for(color of colors) {

     console.log(color)

   };

 

   let aniamls = ["lion", "bear", "bird"];

   aniamls.forEach((aniaml) => {

     console.log(aniaml)

   });

 

   매개변수가 2개라면(값과 인덱스)

   aniamls.forEach((animal, i) => {

     console.log(`animals[${i}] : ${animal}`)

   })

 

   인자값이 3개라면 (값, 인덱스, 배열)

   aniamls.forEach((animal, i, a) => {

     console.log(`[${a}] [${i}] : ${animal}`)

   })

 

배열과 배열을 합치는 방법 2가지

 

   배열과 배열을 합치는 방법 :contcat( )

 

   let vegitable = ["양상추", "토마토", "오이"];

   let meat = ["불고기"];

   let meatBurger = vegitable.concat(meat, "빵");

   // meatBurger

   // (5) ['양상추', '토마토', '오이', '불고기', '빵']

   let meatBurger2 = meat.concat("빵", vegitable);

   // meatBurger2

   // (5) ['불고기', '빵', '양상추', '토마토', '오이']

 

 

   배열과 배열을 합치는 방법 : 전개연산자[...]

 

   let vegitable = ["양상추", "토마토", "오이"];

   let cheese = ["모짜렐라", "슈레드"];

   let cheeseBurger = [...vegitable, ...cheese];

   cheeseBurger

   (5) ['양상추', '토마토', '오이', '모짜렐라', '슈레드']

 

 

배열의 요소를 정렬하는 메서드 2가지

 

   역순 : reverse()

   크기 : sort()

   let numbers = [6, 9, 3, 21, 18];

   numbers.reverse();

 

   numbers

   (5) [18, 21, 3, 9, 6]

   let week = ["sun", "mon", "tue"];  

   let values = [5, 20, 3, 11, 4, 15];

 

   week.sort();

   (3) ['mon', 'sun', 'tue']

   values.sort();

   (6) [11, 15, 20, 3, 4, 5]  //알파벳순, 숫자는 앞자리만 보고 판단

 

   values.sort(function(a,b){

     if(a>b) return 1;

     if(a<b) return -1;

     if(a==0) return 0;

   });

   (6) [3, 4, 5, 11, 15, 20]

 

   values.sort(function(a,b){

     return a - b;

   });

   (6) [3, 4, 5, 11, 15, 20] //오름차순 정렬하고싶다 하면 이렇게, 외우기

 

 

배열요소에서  값을 추가하거나 제거하는 메서드

 

   pop(): 맨 마지막 값을 제거하는 메서드

   push(): 맨 마지막 값을 추가하는 메서드

   shift(): 맨 앞에 값을 제거하는 메서드

   unshift(): 맨 앞에 값을 추가하는 메서드

 

 

특정위치에 요소를 추가하거나 제거하는 메서드

 

   splice(1) : 1번부터 끝까지 요소를 모두선택해서 제거

   splice(1,2) : 1번부터 2번갯수만큼 요소를 모두선택해서 제거

   splice(1,2, " ") : 1번부터 2번 앞에 " " 추가

 

   let subject = ["html", "css", "java", "react", "typescript"];

 

   subject.splice(2);

 

   subject;

   (2) ['html', 'css']

 

 

   slice(1,2) : 1부터 2번 직전까지 선택

   slice(1개) : 1번 부터 끝까지 요소를 모두 선택

 

   let subject = ["html", "css", "java", "react", "typescript"];

 

   subject.splice(2);

   (3) ['java', 'react', 'typescript']

   subject;

   (2) ['html', 'css']

   *splice 는 원본 배열 수정합니다.

   *slice 는 원본 배열을 수정하지 않습니다.

 

   let colors = ["red", "green", "blue", "white","black"];

   let color1 = colors.slice(2);

 

   color1;

   (3) ['blue', 'white', 'black']

   colors;

   (5) ['red', 'green', 'blue', 'white', 'black']

 

   let color2 = colors.splice(2);

  

   color2;

   (3) ['blue', 'white', 'black']

   colors;

   (2) ['red', 'green']