본문 바로가기
Programming | Study/JS | jQuery

Java Script 공부 4 (배열)

by jinju 2021. 3. 30.

배열 

다양한 타입의 데이터를 보관하는 변수 모음으로 [] 통해 생성과 초기화를 동시에 처리 가능

자료형 지정이 없어 모든 자료형 데이터로 저장 가능

 자바스크립트에서 배열은 자바의 ArrayList랑 유사.

        1. 다수의 자료형을 보관가능

        2. 길이제한이 없다.

        3. 인덱스로 값을 접근함.

        * DB에서 데이터를 가져온 값, DOM객체를 가져왔을때 사용

 

 

-배열선언

1. []표현 선언하기

2. array객체 생성

 

1. Array객체를 통한 배열 선언

var 변수명 = [값1(숫자), 값2(문자), 값3( 객체), 함수 ...];

 

ex)

let arr = [];

arr=["자바","오라클","자바스크립트","데베"];

console.log(arr.length);

-자바 스크립트 배열음 여러 자료형을 보관할 수 있다.

arr=["자바",19,"180.5",{hobby:"코딩"},function(){alert('배열내부 함수');} ];

 

console.log(arr[0]);  

console.log(arr[3].hobby);

console.log(arr[4]);

결과값

배열에 값 대입하기
-인덱스 번호로 접근하여 값을 대입하기

-배열[인덱스번호] = 값;

 

console.log(arr[0]);

arr[0]=200;

console.log(arr[0]);

 

0번호인 자바가 200으로 바뀐 것이다

 

2.  new연산자 이용해서 배열 선언

var 변수 명 = new Array();

 

let arr2 = new Array();

arr2=new Array(10);

 

array2 = new Array("자바",19,"180.5",{hobby:"코딩"},function(){alert('배열내부 함수');}

 


Array객체 메소드

 

arr=[];

->배열 초기화

 

console.log(arr.length);

->arr배열의 갯수 알기

 

console.log(arr.push("abc"));

->배열의 맨 뒤에 요소 추가

 

let animal=["강아지","고양이","원숭이","낙타","라마"];

let food=["떡볶이","라면","칼국수","초밥"];

let result=animal.concat(food);

->두 개 이상의 배열을 합침

 

slice() : 배열의 일부를 짤라내서 새 배열로 생성

slice(시작인덱스번호, 끝인덱스번호);

splice() : 배열의 특정위치 값을 지우고, 그 위치에 값을 추가

splice(시작,지울갯수,추가할값[,추가값...]);

 

includes() : 특정값이 배열에 있는지 확인하는 함수

find() : 특정기준에 맞는 요소를 찾는 함수 -> 한개 만 

filter() : 특정기준에 맞는 요소를 찾는 함수 -> 기준에 맞는 전체 다

 

 forEach() : 배열에 있는 모든값을 접근하는것

        매개변수로 함수를 전달받음 매개변수가 두개를 받음

 

누적계산을 해주는 함수

 reduce(함수[,초기값]) : 특정변수에 return값을 지속저장하는 함수

        매개변수로 함수를 전달받음

        그 매개변수함수는 두개의 매개변수가 있음

        첫번째 : 초기값(0번 인덱스값)

        두번째 : 다음값

        return 값이 처음매개변수에 대입됨.

        * 초기값을 담는 변수에


 배열에 지역 서울, 대전, 대구, 부산, 광주, 목포, 포항

  input태그로 입력받아 그 지역이 있는지 확인하기

 

See the Pen ZELBpyq by lee jinju (@pearl23) on CodePen.

댓글