05. 배열(Array)

1. 배열(Array)

이름과 인덱스로 참조되는 정렬된 값의 집합(자료 구조)

배열을 구성하는 각각의 값을 배열요소라고 하며, 배열에서의 위치를 가리키는 숫자를 인덱스라고 함

배열선언

배열 초기화
- 배열명 = [요소1, 요소2, 요소3, 요소4 ...]

배열의 접근

리스트와 동일

자바스크립트 배열의 특징

1. 배열 요소의 타입이 고정되어 있지 않음





2. 배열 요소의 인덱스가 연속적이지 않아도 됨

const user =[1,'apple','김사과', 20, '서울서초구'];

console.log(user);

console.log(`=====================`);

console.log(user[0]); // 1

console.log(user[1]); // apple

console.log(user[2]); // 김사과

console.log(user[3]); // 20

console.log(user[4]); // 서울 서초구

console.log(user[5]); //undifined

console.log(`=====================`);

user[4] = '서울 강남구'

console.log(user[4]); // 서울 강남구

console.log(`=====================`);

console.log(user.length); // 5

console.log(`=====================`);

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

console.log(user[i])

         }
  // 1
  // apple
  // 김사과
  // 20
  // 서울 강남구

</script>

</body>

Array 객체의 매서드
- push(): 배열의 요소를 추가
- pop(): 배열의 마지막 인덱스 번호에 있는 값을 제거
- shift(): 배열의 첫번째 인덱스 번호에 있는 값을 제거
- concat(): 배열을 합침
- join(): 배열 요소 사이에 원하는 문자를 삽입
- sort(): 배열을 오름차순으로 정렬
- reverse(): 배열을 역순으로 재배치

const user = [1, 'apple', '김사과', 20, '서울서초구'];

//push(): 배열의 요소를 추가

user.push('여자');

console.log(user);

//1

//apple

//김사과

//20

//서울 서초구
//여자

console.log(`------------------`);

//pop():배열의 마지막 인덱스 번호에 있는 값을 제거

let temp = user.pop();

console.log(user);

console.log(temp);

//1

//apple

//김사과

//20

//서울 서초구

//여자

console.log(`------------------`);

//shift():배열의 첫번째 인덱스 번호에 있는 값을 제거

console.log(user);

temp = user.shift();

console.log(user);

console.log(temp);

//apple

//김사과

//20

//서울 서초구

//1

console.log(`------------------`);

//concat(): 두 배열의 요소를 합침

const profile = ['여자', 'A형','istp'];

result = user.concat(profile);

console.log(result);

console.log(`------------------`);

//apple

//김사과

//20

    //서울 서초구
    //여자
    //A형
    //istp

//join(): 배열 요소 사이에 원하는 문자를 삽입

result = user.join(`😁`);

console.log(result);

console.log(typeof(user)); //object

console.log(typeof(result)); //string

console.log(`------------------`);

//apple😁김사과😁20😁서울 서초구

const arr = ['a','z','c','f','r'];

//sort(): 배열을 오름차순으로 재배치

arr.sort();

            console.log(arr);
    //a
    //c
    //f
    //r
    //z

//reverse(): 배열을 역순으로 재배치

arr.reverse();

console.log(arr);

    //z
    //r
    //f
    //c
    //a

</script>

</body>

------------------------------------------------------------------------------------------------------

------------------------------------------------------------------------------------------------------

------------------------------------------------------------------------------------------------------

------------------------------------------------------------------------------------------------------

------------------------------------------------------------------------------------------------------

-------------------------------------------------------------------------------------------------------

배열을 이용한 반복
- for in 문
  변수의 배열의 인덱스 또는 객체의 key가 저장되면 반복

예)
1. i에는 인덱스 번호가 저장
2. i에는 키가 저장

const userArr = [1, 'apple', '김사과', 20, '서울 서초구']

const userObj = {userid:'apple', name:'김사과', age:20}

//for in 배열

for(let i in userArr){

console.log(`i:${i}, userArr[${i}]: ${userArr[i]}`);

          }
            // ${i} => 0, 1, 2, 3, 4
            // ${userArr[i]} => 1, apple, 김사과, 20, 서울 서초구

console.log(`------------------`);

//for in 객체

for(let i in userObj){

console.log(`i:${i}, userObj[${i}]: ${userObj[i]}`);

}

            // ${i} => userid, name, age
            // ${userObj[i]} = apple, 김사과, 20

            //i:userid, userObj[userid]:apple
            //i:name, userObj[name]: 김사과
            //i:age userObj[age]: 20

</script>

</body>

for of 문
변수의 배열의 ~~value 또는 객체의~~ value가 저장되며 반복

v에 값이 저장 (객체는 오류)

const userArr = [1, 'apple', '김사과', 20, '서울 서초구']

const userObj = {userid:'apple', name:'김사과', age:20}

//for of 배열

for(let v of userArr){

console.log(`v:${v}`);

}

console.log(`------------------`);

// ${v} => 1, apple, 김사과, 20, 서울 서초구

//for of 객체 //에러

for(let v of userObj){

console.log(`v:${v}`);

}

</script>

</body>

forEach 문
: 배열에서만 사용 가능하며, 요소의 개수만큼 반복

<body>

<h2> forEach문 </h2>

const userArr = [1, 'apple', '김사과', 20, '서울 서초구']

const userObj = {userid:'apple', name:'김사과', age:20}

//forEach문

userArr.forEach(function(v, i, arr){

console.log(`v:${v}, i:${i}, arr:${arr}`);

          });

            // ${v} : 1, apple, 김사과, 20, 서울 서초구 (하나씩)
            // ${i} : 0, 1, 2, 3, 4
            // ${arr} : arr: 1, apple, 김사과, 20, 서울 서초구 (전체)

            // v:1, i=0, arr: 1, apple, 김사과, 20, 서울 서초구 (전체)
            // v:apple, i=1, arr: 1, apple, 김사과, 20, 서울 서초구 (전체)
            // v:김사과, i=2, arr: 1, apple, 김사과, 20, 서울 서초구 (전체)
            // v:20, i=3, arr: 1, apple, 김사과, 20, 서울 서초구 (전체)
            // v:서울 서초구, i=4, arr: 1, apple, 김사과, 20, 서울 서초구 (전체)

</script>

</body>

'Web > JavaScript' 카테고리의 다른 글

07. 객체(Object) (0)	2024.04.16
06. 함수(Function) (0)	2024.04.16
04. 연산자, 제어문, 반복문 (0)	2024.04.16
03. 데이터타입, 대화상자 (0)	2024.04.16
02. 변수(let), 상수(const) (0)	2024.04.16

leesarr-study

05. 배열(Array)

1. 배열(Array)

'Web > JavaScript' 카테고리의 다른 글

티스토리툴바

05. 배열(Array)

1. 배열(Array)

'Web > JavaScript' 카테고리의 다른 글

관련글

티스토리툴바