배열 (1)

배열 (1)

1. 배열: 리스트와 비슷한 객체로서 순회와 변형 작업을 수행하는 메서드

Array - JavaScript | MDN

버스타기 : Array를 사용

사람이 많다 : 데이터가 많다(3개 이상)

줄 세움 (나열) => 처리속도가 빠름

처리속도가 빠름 : 삭제,수정,추가가 용이(유지보수가 좋다)

{
  /* 기본 배열 출력 */
 
  let arr =[];
  arr[0]= '홍길동';
  arr[1]= 20;
  arr[2]= '서울시 강남구';
  arr[3]= '010-0000-0000';
 
  console.log('이름:',arr[0])
  console.log('나이:',arr[1])
  console.log('주소:',arr[2])
  console.log('번호:',arr[3])
  console.log('갯수:',arr.length)
}
 
=> 결과값
 
[Running] node "/workspaces/codespaces-blank/index.js"
이름: 홍길동
나이: 20
주소: 서울시 강남구
번호: 010-0000-0000
갯수: 4
 
[Done] exited with code=0 in 0.056 seconds
{
  /* 초기값 */

    const menuList = ['Room0','Room1','Room2','Room3'];

    //for문으로 출력

    for(let i=0; i<menuList.length; i++){
      let menuitem =menuList[i];
      console.log(i,'번째방:',menuitem)
    }
    console.log('------------------------------')

    // for of문
    let cnt = 0;
    for(let menu of menuList){
      let menuItem = menu;
      console.log(cnt,'번째방:',menuItem);
      cnt++;
    }
    console.log('------------------------------')

    //for in 문
    for(let idx in menuList){ // index번호를 가져옴
      let menuItem = menuList[idx];
      console.log(idx,'번째방',menuList)
    }
}

=> 결과값

[Running] node "/workspaces/codespaces-blank/index.js"
0 번째방: Room0
1 번째방: Room1
2 번째방: Room2
3 번째방: Room3
------------------------------
0 번째방: Room0
1 번째방: Room1
2 번째방: Room2
3 번째방: Room3
------------------------------
0 번째방 [ 'Room0', 'Room1', 'Room2', 'Room3' ]
1 번째방 [ 'Room0', 'Room1', 'Room2', 'Room3' ]
2 번째방 [ 'Room0', 'Room1', 'Room2', 'Room3' ]
3 번째방 [ 'Room0', 'Room1', 'Room2', 'Room3' ]

[Done] exited with code=0 in 0.053 seconds

2. 배열 순환 For문 활용

 
/* 배열 순환으로 이름 조회 */
 
{
  /* 초기값 */
  let name = ['강호동','유재석','신동엽','이수근','김희철']
  let len = name.length;
  let username = prompt('이름 조회','조회할 이름을 입력해주세요');
 
  //for문: 조회가 되면 break로 끝내기
 
  for(let i=0; i<len; i++){
    if(username==name[i]){
      console.log(username,'을 찾았습니다')
      break
    }
  }
 
  //for of문
  for(let namelist of name){
    if(namelist==username){
      console.log(username,'을 찾았습니다')
      break
    }
  }
 
  //for in문
  for(let idx in name){ // 인덱스번호 출력
    if(name[idx]==username){
      console.log(username,'을 찾았습니다')
      break
    }
  }
}
 
=> 결과값
 
[Running] node "/workspaces/codespaces-blank/index.js"
강호동 을 찾았습니다
강호동 을 찾았습니다
강호동 을 찾았습니다
 
[Done] exited with code=0 in 0.053 seconds

3. toString,join

/* toString,join 활용 */
 
{
  let name = ['강호동','유재석','신동엽','이수근','김희철']
  let str  = name.toString();
  let str1  = name.join('+');
  let str2  = name.join('-');
  let str3  = name.join(' ');
  let str4  = name.join('');
 
  console.log('str:',str);
  console.log('str의 타입은?',typeof(str))
 
  console.log('str1:',str1);
 
  console.log('str2:',str2);
 
  console.log('str3:',str3);
 
  console.log('str4:',str4);
}
 
=> 결과값
[Running] node "/workspaces/codespaces-blank/index.js"
str: 강호동,유재석,신동엽,이수근,김희철
str의 타입은? string
str1: 강호동+유재석+신동엽+이수근+김희철
str2: 강호동-유재석-신동엽-이수근-김희철
str3: 강호동 유재석 신동엽 이수근 김희철
str4: 강호동유재석신동엽이수근김희철
 
[Done] exited with code=0 in 0.052 seconds

4. push,pop,unshift,shift

1): push() 메서드는 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환합니다.(원본이 바뀜)

Array.prototype.push() - JavaScript | MDN

2): pop() 메서드는 배열에서 마지막 요소를 제거하고 그 요소를 반환합니다.

Array.prototype.pop() - JavaScript | MDN

3): unshift() 메서드는 새로운 요소를 배열의 맨 앞쪽에 추가하고, 새로운 길이를 반환합니다.

Array.prototype.unshift() - JavaScript | MDN

4): shift() 메서드는 배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환합니다. 이 메서드는 배열의 길이를 변하게 합니다.

Array.prototype.shift() - JavaScript | MDN

/* push,pop,unshift,shift 활용 */
 
	/* (1). push 활용 */
 
  let color = ['red','green','blue','yellow','orange'];
  color.push('purple'); // 맨뒤 배열 purple 추가
  color.push('pink'); // 맨뒤 배열 pink 추가
  console.log(color);
 
=>결과값
 
['red','green','blue','yellow','orange','purple','pink']
 
--------------------------------------------------------------------
 
/* (2). pop 활용 */
 
  color.pop(); //맨뒤 배열 삭제
  console.log(color);
  console.log("")
 
=> 결과값
 
[ 'red', 'green', 'blue', 'yellow', 'orange', 'purple']
 
--------------------------------------------------------------------
 
/* (3). unshift 활용 */
 
  color.unshift('hotpink'); // 맨앞 배열 추가
  console.log(color)
 
=> 결과값
 
['hotpink', 'red', 'green', 'blue', 'yellow', 'orange', 'purple']
 
--------------------------------------------------------------------
 
/* (4). shift 활용 */
 
  color.shift(); // 맨 앞 배열 삭제
  console.log(color);
 
=> 결과값
 
['red', 'green', 'blue', 'yellow', 'orange', 'purple']
 
--------------------------------------------------------------------
 
/* (5). 배열 데이터 수정 */
  //수정
  color[0]='라임';
  color[1]='블루';
  console.log(color);
 
=> 결과값
 
[ '라임', '블루', 'blue', 'yellow', 'orange', 'purple' ]

5. isArray,concat,slice,splice

1): **Array.isArray()**메서드는 인자가 Array인지 판별합니다.(반환은 Boolean값)

Array.isArray() - JavaScript | MDN

2): concat() 메서드는 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환합니다.

Array.prototype.concat() - JavaScript | MDN

  • 기존배열을 변경하지 않습니다.

  • 추가된 새로운 배열을 반환합니다.

    3): slice() 메서드는 어떤 배열의 begin 부터 end 까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다.

Array.prototype.slice() - JavaScript | MDN

  • 원본 배열은 바뀌지 않습니다.

    4): splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다.

Array.prototype.splice() - JavaScript | MDN

/* isArray,concat,slice,splice 활용 */
 
	/* (1). isArray 활용 */
 
	let color = 'red,green,pink,skyblue,hotpink';
 
  /* string을 배열로 변경 */
  let arr = color.split(',');
 
  console.log(Array.isArray(color)) // 배열인지 판별 false
  console.log(Array.isArray(arr)) // 배열인지 판별 true
 
=>결과값
 
[Running] node "/workspaces/codespaces-blank/index.js"
false
true
 
[Done] exited with code=0 in 0.054 seconds
 
--------------------------------------------------------------------
 
/* (2). concat 활용 */
 
	const arr1 = [100,200,300,400];
	const arr2 = [10,20,30,40,50];
  const arr3 = [1,2,3,4,5];
  console.log(arr1);
 
  let arrToConcat = arr1.concat(arr2,arr3);
  console.log('arrToConcat?',arrToConcat);
 
=> 결과값
 
[Running] node "/workspaces/codespaces-blank/index.js"
 
배열의 초기값 출력 [ 100, 200, 300, 400 ]
 
arrToConcat? [100, 200, 300, 400, 10, 20 ,30 ,40 ,50 ,1 ,2 ,3 ,4 ,5]
 
[Done] exited with code=0 in 0.057 seconds
 
--------------------------------------------------------------------
 
/* (3). slice 활용 */
 
	let arr = [10,20,30,40,50,60];
  let str = arr.slice(1,3); // slice(시작인덱스~,마지막 배열)
  let str1 = arr.slice(3); //slice(시작인덱스부터~)
  let str2 = arr.slice(1,-2);
  let str3 = arr.slice(-1); // slice(음수면 뒷자리부터)
  console.log(`${str}`);
  console.log(`${str1}`);
  console.log(`${str2}`);
  console.log(`${str3}`);
 
=> 결과값
 
[Running] node "/workspaces/codespaces-blank/index.js"
20,30
40,50,60
20,30,40
60
 
[Done] exited with code=0 in 0.056 seconds['hotpink', 'red', 'green', 'blue', 'yellow', 'orange', 'purple']
 
--------------------------------------------------------------------
 
/* (4). splice 활용 */
 
	let data = [10,20,30,40,50,60];
  data.splice(1,3); //  splice(시작인덱스,배열숫자) 배열을 삭제용
  console.log(data);
 
  let data1 = [10,20,30,40,50,60];
  data1.splice(1,0,'홍길동','강호동','김철수');
  //splice(시작인덱스번호,배열자릿수 ,)
  console.log(data1);
 
  let data2 = [10,20,30,40,50,60];
  data2.splice(2,2,'a','b','c','d');
  console.log(data2);
 
=> 결과값
 
[Running] node "/workspaces/codespaces-blank/index.js"
[10, 50, 60]
 
[10, '홍길동','강호동', '김철수', 20, 30, 40, 50, 60]
 
[10, 20, 'a', 'b', 'c', 'd', 50, 60]
 
[Done] exited with code=0 in 0.059 seconds