Javascript (6)

🚀Array

: 자바스크립트의 배열은 유동성이 좋은 배열이다. 인덱스 번호는 0번부터 시작. 문자데이터와 달리 각 요소를 수정, 삭제 할 수 있다. standard for문 이외에 for of, for in문을 사용 가능하다. 배열은 데이터타입이 object이지만 배열 전용 객체가 존재한다. 배열 또한 많은 내장 메서드를 가지고 있어 관리가 용이하게 설계되어 있다. 배열의 인덱스 번호를 사용해서 원소를 수정 할 수 있다.

🎲 알아보기)

<script>
let arr_1 = []; // 리터럴(고정된값을 나타내는 표현 그자체) 배열 생성 연산자

let arr_2 = ["kim", "Lee", "Park"];
//같은 데이터 타입 저장이 기본

//데이터들의 모음이므로 복수형의 변수 이름을 사용할 것을 권장
let members = [
        "임럭키",
        "임로비",
        "임밍키",
        "임쮸르",
        "임끼끼",
        "임정민"
];

let arr_3 = [1, true, "최", undefined, { k: "value" }]; // 연관배열(유사배열)
//유사 배열은 배열타입이 아니기 때문에 배열 관련 메서드를 사용할 수 없다.

let str_1 = 'Kim,Lee,Park';

let sums =[arr_1, arr_2, arr_3]; //기본형 배열(전부 배열로 들어와 있기 때문)

console.log(str_1.charAt(0)); // 문자인지 배열인지 구분이 안가기 때문에
//문자인 경우 charAt을 사용, 배열인 경우 []사용

console.log(sums[0] == arr_1); //false(객체타입이라 연산 안됨)...이어야 하는데
//지금 arr_1이 undefined라 실제로는 true 뜸

console.log(sums[1][1]); // 인덱스 번호를 추적해서 내부 배열에 접근하는 방법 >>출력하면 Lee
</script>

🎈배열 출력하기

: console.log();함수에 배열을 출력하면 배열의 구조가 출력 된다. 배열의 요소 값만 출력하고 싶다면 배열.toString()을 사용하여 출력하면 된다.

🎲 Html에 출력하기

<h3 id='here'></h3>
<script>
let arr =['I','Love','You'];
let str_arr = arr.toString();
document.getElementById('here').innerText=arr;
//innerText 혹은 innerHTML을 사용해서 html안에 출력이 가능하다.
</script>

🎈틈새공략! innerText와 innerHTML의 차이!

innerText는 문자 요소를 html에 띄워주기 때문에 태그로 표현이 되어있어도 문자열로만 화면에 전개 된다.
반면 innerHTML은 요소안에 html태그가 있다면 html태그로 기능을 수행한다.

✨Array_method

• pop(): 배열의 마지막 요소를 제거, return하면 제거한 요소를 리턴함.
• push(): 배열의 뒷쪽에 요소를 추가
• shift(): 배열의 첫 요소를 제거, 제거한 요소를 리턴함 pop이랑 차이 기억!
• unshift(): 배열의 첫 요소 추가, 새로 추가한 요소를 포함한 배열의 길이를 리턴함, push와 비교!
• splice(): 배열 자르기(인덱스, 갯수), 도려낸 배열을 리턴함.
  (인덱스, 갯수, 현재배열요소, 바꾸려는 배열요소) => 배열 자른 후 새로 삽입 할 수 있음
  파라미터가 1개이면 인덱스 번호 부터 끝까지 도려내고 배열을 리턴함
• slice(): 배열 추출하기(원본배열 변경 없음) 배열을 리턴함 파라미터가 1개이면 인덱스로부터 끝까지 추출
  파라미터가 2개 slice(1,3)이면, 인덱스 1부터 3앞까지 (미포함) 추출하여 배열로 리턴