부스트코스 웹 앱 개발-1: 자바스크립트 배열 및 오브젝트

자바스크립트에서 배열선언은 var a [];로 한다. var a = new Array()도 가능하지만 잘 사용하지 않는다.

선언 동시에 초기화도 가능하다. var b = [1,2,3,"Hello",null,[]];

배열의 길이는 .length를 사용한다.

 

배열의 원소 추가

 

배열의 원소 추가는 인덱스 번호와 값으로 할 수 있다.

a[4] = 5

또는 push메서드를 이용해 뒤에 순차적으로 삽입가능하다.

a.push(5)

 

 

배열의 유용한 메서드들

배열원소 조회 a.indexOf(3) // indexOf의 경우 해당 값이 없다면 -1을 반환한다.

배열 합치기 [1,2,3,4].concat(2,3) // [1,2,3,4,2,3] //concat의 경우 원래 배열은 그대로있고 새로운 배열을 반환함

배열의 문자열 합치기 [1,2,3,4].join() // "1,2,3,4"

 

 

 

배열탐색(foreach, map, filter)

기본의 for문은 길이설정, 값증가, 초기변수선언등 불편한 점이 많아서 다른 것을 많이 사용한다.

foreach의 경우 길이체크, ++같은게 필요없다. 함수를 동작 가능하다.

 

a.forEach(function(value, index, array) {

  console.log(value);

}

index는 해당배열의 index값이다 이 값이 1씩 늘어나 끝까지 가리키는 것이고 array는 잘 모르겠다...

index와 array를 생략가능하다.

 

map의 경우 return값이 있어서 새로운 값을 반환한다.

a.map(function(value, index){

  return value * 2;

} 하면 a의 값이 *2가된다.

 

 

filter는 말 그대로 요소를 걸러준다

var arr = [10,7,45,6];

var arr2.filter(function(value){

     return value % 5 == 0

} //[10,45];

 

---

객체 == 오브젝트

오브젝트는  키값과 벨류값이다.

var obj = {name : "crong", age: 20}

var obj2 = {name : "crong", addion : [{key : "value"} {key2 : "value"}]}  //오브젝트안에 배열안에 오브젝트넣기가능

 

console.log(obj.name) //crong

console.log(obj["name"] //crong

console.log(obj2.addtion[0]) //key : value

 

객체의 탐색

for - in 과 Object.keys()가 있다.

for - in 의 경우 배열에서도 사용가능하지만 오브젝트에서 사용하는 것이 좋다.

 

var obj = {"name" : "crong", age:20}

 

for(value in obj) {

console.log(obj[value]);   //crong, 20

}

 

Object.keys(obj).forEach(function(key){    //Object.keys에는 key값만 들어있다.

console.log(obj[key]);    //crong, 20

});

 

오브젝트안에 오브젝트가 있고 value값이 필요한경우 2중for문사용

var arr{"name" : "cccc", "addtion" : {"width" : 444,

"hetigh" : 555}}

 

Object.keys(arr).forEach(function(v){

for(key in arr[v]}{

console.log("벨류 값 " +arr[v][key])

}

})