JS) 배열

배열

1. 배열 기초

1.1 배열의 기초
1.2 배열 접근법
1.3 배열의 반복

2. 배열의 다양한 메소드

2.1 push,pop
2.2 unshift,shift
2.3 slice,splice,split
2.4 sort
2.5 indexOf

---

1. 배열

1.1 배열 기초

• 배열은 순서를 가진 값이라고 할 수 있다.
• 이때 인덱스(index)를 요소로 가져 위치를 통해 값을 호출 할수 있다.
• for문을 사용하여 순서대로 값을 사용할수 있다.

1.2 배열 접근법

먼저 배열의 호출 부터 알아보겠다.

arr = [1,2,3,4,5,'java']
arr[3] = 4 
arr[0] = 1

위 형식이 일반적인 배열의 모습이다.
이러한 배열의 특징은 순서,인덱스요소라고 할수 있다.
먼저 인덱스 요소로 우리가 배열의 0번째값 혹은 4를 사용하고 싶으면 "arr[위치]"를 사용하면 되겠다.

1.3 배열의 반복

그다음 배열의 순서를 활용해 보겠다.

 arr = [1,2,3,4,5]
 num = 0
for(let i=0; i<arr.length; i++){
//배열의 시작 값은 0이므로 i의 최초값은 0으로 둔다
//반복조건은 배열의 길이만큼으로 설정하였다.
//(0부터 시작하므로 이하가 아닌 미만을 사용한다.)
 num = num + arr[i]}
return num

보기와 같이 for문을 사용하여 배열을 위치순서대로 호출하여 모두 덧셈을 하였다.

Tip) 배열을 순서대로 정렬하는 방법또한 존재한다.
for...of 문법
배열의 각 항목마다 조건이나 계산을 하여야 할경우 "for...of" 문법을 사용해주면 매우 간단하게 처리가 된다.
EX)

arr = [1,2,3,4,5];

for (const ele of arr) { //arr 배열항목들을 ele변수에 하나씩 대입하여 아래 명령을 수행한다..
  console.log(ele); 
}
// 출력
// 1
// 2
// 3
// 4
// 5

---

2. 배열의 다양한 메소드

2.1 push,pop

• 배열중 가장 마지막에 있는 값을 변경하고 추가 할 수 있는 방법을 알아보겠다.

const animals = ['pigs', 'goats', 'sheep']
const count = animals.push('cows') //push를 사용해 마지막에 'cows'추가 
animals = ["pigs", "goats", "sheep", "cows"]
const count = animals.pop()//popd을 사용해 마지막에 위치한 값 삭제
animals = ['pigs', 'goats', 'sheep']
usepush = animal.push('cow') //push를 적용뒤 바로 변수로 대입 
usepush = 4 //push를 적용한뒤 animal.length 값을 출력
usepop = animal.pop()//pop을 적용한뒤 변수에 대입
usepop = 'cow'//pop으로 인해 마지막에 삭제된 값을 출력

Tip) push는 배열에 적용뒤 길이를 return, pop은 배열에 적용시 마지막에 삭제된 값을 return 한다.

2.2 unshift,shift

• 배열의 맨 앞의 값을 변경하는 방법을 알아보자

singer =['BTS','BigBang','SG','VOS']
singer.shift() //shift를 사용해 맨 앞에 값을 삭제 
singer =['BigBang','SG','VOS'] 
singer.unshift('EXO') //unshift를 사용해 맨 앞에 'EXO'추가  
singer =['EXO','BigBang','SG','VOS']
useshift =singer.shift() //shift 적용후 변수에 대입 
useshift // 'BTS' //삭제된 값 출력 
useunshift = singer.unshift('EXO')//unshift 적용 후 변수 대입 
useunshift // 5 // singer.length 값 출력 

Tip) unshift는 배열에 적용뒤 길이를 return, shift는 배열에 적용시 처음에 삭제된 값을 return 한다.

2.3 slice(Start_index값 , End) ,
splice(Start_index값 , Deletecount , Inpu_item)

이제 배열을 자를 수 있는 방법에 대해 알아보자

• array.slice(Start_index값 , End)

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant']

animals.slice(3,6)//animal[3]부터 6번째까지 
(2) ['duck', 'elephant']

animals.slice(3,5)//animal[3]부터 5번째까지 
(2) ['duck', 'elephant']
//Tip end값이 배열의 전체 갯수를 초과할시 가장 최대값으로 자동 적용된다.

• array.splice(Start_index값 , Deletecount , Inpu_item)

*값을 삭제 후 추가*
singer = ['BTS','BigBang','SG','VOS']
singer.splice(2,2,'EXO') //singer[2]부터 2개의 값을 삭제 후 'EXO'를 추가 
singer = ['BTS', 'BigBang', 'EXO']

*Deletecount가 지워야할 갯수보다 큰경우*
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant']
animals.splice(2,4,'tiger')// animals[2]부터 4개의 값을 삭제 후 'EXO'를 추가(Deletecount값이 뒤의 값보다 클경우 뒤의 값 전체를 삭제
animals = ['ant', 'bison','tiger']

*값 추가 없이 삭제만 실행*
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant']
animals.splice(2,2)//animals[2]번째부터 2개의 값을 삭제 추가는 X
animals = ['ant', 'bison', 'elephant']

*값 삭제 없이 추가만 실행*
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant']
animals.splice(2,0,'tiger')//animals[2]위치에 'tiger'추가
animals= ['ant', 'bison', 'tiger', 'camel', 'duck', 'elephant']

*Start_index값이 음수인 경우*
animals.splice(-2,0,'tiger')//animals[-2]위치에 'tiger'추가
animals = ['ant', 'bison', 'camel', 'duck','tiger', 'elephant']
//Tip) start부분에 음수(-n) 입력시 요소끝에서 부터 array[n]과 같다. 

2.4 sort([compareFunction])

• sort() 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환합니다. compareFunction이 제공되지 않으면 요소를 문자열로 변환하고 유니 코드 코드 포인트 순서로 문자열을 비교하여 정렬됩니다.

const array = ['A','D','z','W','B','c']
array.sort()
array = ['A', 'B', 'D', 'W', 'c', 'z']
array2 = [3,4,2,6,1,2,5,1]
array2.sort()
array2 = [1, 1, 2, 2, 3, 4, 5, 6]

위를 보면 sort를 사용시 배열을 오름차순으로 정렬하는것을 확인할수 있다. 내림차순으로 정리도 가능하며 이땐 compareFunction을 사용한다. 방법은 아래와 같다.

• compareFunction(a, b)이 0보다 작은 경우 a를 b보다 낮은 색인으로 정렬합니다. 즉, a가 먼저옵니다.
• compareFunction(a, b)이 0을 반환하면 a와 b를 서로에 대해 변경하지 않고 모든 다른 요소에 대해 정렬합니다.
• compareFunction(a, b)이 0보다 큰 경우, b를 a보다 낮은 인덱스로 소트합니다.
  <출처:MDN>

이를 바탕으로 내림차순으로 정렬할 수있다.

array2.sort(function(a, b) {
  if(a < b){return 1} // 값이 순서대로 대입해 뒤에값이 클경우 앞으로 위치
  if(a > b){return -1}
  if(a === b){return 0} } )

array2 = [6, 5, 4, 3, 2, 2, 1, 1]

array.sort(function(a, b) {
  if(a < b){return 1}
  if(a > b){return -1}
  if(a === b){return 0} } )

array = ['z', 'c', 'W', 'D', 'B', 'A']

2.5 indexOf

• array.indexOf(searchElement,fromIndex)

const array = ['A','D','z','W','B','c']
array.indexOf('w') = -1 //소문자 w는 없으므로 -1 리턴
array.indexOf('W') = 3 //W는 array[3]에 위치 

array2 = [6, 3, 5, 4, 3, 2, 2, 1, 1]
array2.indexOf(3,2) = 4 //3을 array2[2]부터 찾는다