[자바스크립트] 배열

 

 

1.배열 순회 - for(let 변수명 of arr)

let arr = [1,2,3];

// for of 순회
//마치 자바의 for(클래스 변수 : 배열) 과 비슷한 느낌
for(let item of arr){
	console.log(item)
}

 

2.객체 순회

let person = {name : "삼록", age: "55", hobby:"bingeWatching"}

//Object.keys
//객체에서 key값들만 뽑아서 배열로 반환하는 내장함수

let keys = Object.keys(person);
for(let key of keys){
	console.log(key, person[key])
}

//Object.values
//객체에서 value값들만 뽑아서 배열로 반환하는 내장함수

let values = Object.values(person);
for(let value of values){
	console.log(value);
  }

 

3.배열 요소 조작 메서드

 

3-1.push : 배열의 맨 뒤에 새로운 요소를 추가하는 메서드이며 배열의 길이를 리턴함

let arr =[1,2,3];
const arrLenght = arr.push(4,5,6,7) //7

 

3-2.pop : 배열의 맨 뒤에 있는 요소를 제거하고, 반환

let arr = [1,2,3];
const popppedItem = arr.pop(); //3

 

3-3.shift : 배열에서 맨 앞에 있는 요소를 제거하고, 반환

let arr = [1,2,3]
const shiftedItem = arr.shift(); //1

 

3-4.unshift :  배열의 맨 앞에서 새로운 요소를 추가하는 메서드. 새로운 요소가 추가된 배열의 길이를 리턴함

let arr = [1,2,3];
const arrLenght = arr.unshift(0) // arr=[0,1,2,3] , arrLenght = 4

 

3-5.slice : 배열의 특정 범위를 잘라내서 새로운 배열로 반환(이때 원본 배열이 변화되는 것은 아니다)

let arr =[1,2,3,4,5];
let slice = arr.slice(2,5) //arr배열에서 2번째 인덱스부터 5번째 인덱스 (4번째 인덱스)전까지 잘라낸다는말
//따라서, slice = [3,4,5];
//끝까지 잘라내려한다면 시작점 인덱스만 알려주어도 된다.
//arr. slice(2,5)와 arr.slice(2)는 같은 결과를 가진다.

 

3-6. concat : 두 개의 서로 다은 배열을 비어 붙여서 새로운 배열을 반환

let arr1 = [1,2,3];
let arr2 = [4,5,6];

let concatArr = arr1.concat(arr2); //[1,2,3,4,5,6]

 

 

4. 요소 순회 및 탐색

 

4-1.forEach(콜백함수) : 요소를 순회하는 메서드

//기본문법(
//forEach(콜백함수(현재 처리중인 요소값, 현재요소의 인덱스,원본배열) )

let arr = [1,2,3];
arr.forEach(function(item,idx,arr){
	console.log(idx,item);
});

//또는 화살표함수를 사용하여 아래와 같이 표현도 가능하다

arr.forEach((item,idx,arr) = >{
	console.log(idx,item)
})

 

4-2. includes : 배열에 특정 요소가 있는지 확인하는 메서드

let arr = [1,2,3];
let trueOrFalse = arr.includes(4); // false

 

4-3.indexOf :배열에서 특정 요소의 위치(인덱스)를 찾아내 반환하는 메서드

let arr = [1,2,3];
let index = arr.indexOf(3); // 2
let index2 = arr.indexOf(-4) // -1 없는 요소에 대한 인덱스는 항상 -1로 리턴된다

 

4-4.findIndex :객체 배열에서 모든 요소를 순회하면서 콜백함수를 만족 시키는 특정 요소의 위치(인덱스)를 찾아내 반환하는 메서드

let objArr = [
{name : "삼록"}
{name : "케이티엑스"}
]

const findIndex = objArr.findIndex((item)=>item==="삼록") //0

 

4-5. find : findIndex가 인덱스(위치)를 찾아내 반환한다면 find는 객체배열에서 객체 그 자체를 리턴시킨다.

objArr.find((item)=>item.name === "삼록"); //{name:"삼록"}

 

5.배열 변형

 

5-1.filter : 기존 배열에서 조건을 맍고하는 요소들만 필터링하여 새로운 배열로 반환

let arr = [
{name : "삼록", hobby: "bingeWatching"},
{name : "케이티", hobby : "traveling"},
{name: : "엑스", hobby : "reading"}
]

const person = arr.filter((item)=>item.hobby === "bingeWatching"); //{name:"삼록", hobby : "bingeWatching"}

 

5-2. map : 배열의 모든 요소를 순회하면서, 반복을 돌 떄마다 콜백함수를 실행하고 그 결과값들을 모아서 새로운 배열로 반환

forEach()는 단순히 배열을 순회하면서 각 요소에 대해 어떤 일을 수행한다면,

map()은  배열을 순회하면서 각 요소를 가공하여 새로운 배열을 만들어 반환하는 것이다.

let arr =[1,2,3];

const mapResult = arr.map((item,idx,arr)=>{
 return item*2;
}); //[2,4,6]