2022-11-02 새싹 프론트엔드] 배열

배열

관련있는 데이터들을 하나로 묶어서 하나의 변수 아래에 한줄로 저장하는 것

여러개의 데이터를 하나의 변수에 담고 싶을 때 사용한다.

• 변수는 하나의 값만 넣을 수 있지만 배열은 여러가지의 변수를 넣을 수 있다.
• 변수에 들어갈 수 있는 하나의 값
• 변수안에 아이템이 들어갈 때 마다 자동으로 번호를 붙여준다, 이를 인덱스라 칭한다.
• 1000가지의 값을 모두 let로 하나하나 지정할 수 없을 때 사용함
• 호출시에는 변수명만 써주면 된다.
• 여러개의 변수값중 하나만 호출도 가능

 

인덱스

• 배열에 들어가 있는 아이템에는 모두 인덱스 번호가 부여된다.
• 번호는 0부터 부여된다.
• 인덱스 번호로 배열에 있는 아이템들을 접근할 수 있다.

[" "]안에 아이템들을 넣어 한줄에 코드로 작성할 수 있다.

 

위의 값에서 banana의 값만 가져오고 싶을때

let fruit = ["banana","apple","grape"]

console.log(fruit) //furit에 들어있는 변수를 모두 출력


furit에 있는 banana변수값만 출력
furit에 있는 변수중 0번째 값을 출력해주세요



console.log(fruit[0])

컴퓨터는 1부터세지않고 0부터 센다.

---

0번째에 있는 banana의 인덱스를 다른 값으로 변경하고 싶을떄

let fruit = ["banana","apple","grape"]
fruit[0]="apple" //fruit[0]= "apple" 로 하겠다

console.log(fruit[0])

 

banana는 사라지고 apple이 자리를 차지함

---

배열과 함께 쓸 수 있는 함수들

pop()	마지막에 있는 아이템을 뺌
push()	마지막 배열에 아이템을 추가함
includes()	해당 아이템을 배열이 포함하고 있는지 알려줌  ture or fales
indexOf()	아이템의 인덱스 번호를 알고 싶을때 사용
length	배열 함수는 아니지만 배열의 크기, 개수를 보여주는 값\ 띄어쓰기도 length 에 포함되어있음 ex) let array = ["apple","banana","mango"] console.log(array.length)  // 값은 3이 나옴 , 배열에 아이템이 총 3개이기 때문에

 

pop() 적용값(좌)    결과값(우)- grape가 빠짐

push적용 값(좌)    결과값(우)- mango가 추가 됨

.includes() 적용값(좌)    결과값(우)-banana라는 값이 있으니 true

 

 

 

slice, splice의 차이첨

함수명	작성	기준	차이점
slice()	(.slice(2))	시작점 기준 - 해당변수 미포함 ←방향 해당값 앞에 있는 모든 값을 자르겠다. fruit변수의 2번앞에 있는 값을 자른다 (2번변수 미포함)	기존에 있던 배열을 자른게 아니다
	(.slice(1,3))	앞~뒤 (끝점앞까지가 범위) 해당변수 미포함 꼭 변수 인덱스를 써준다 fruit변수의 1번앞에 있는 값과,3번포함 뒤에 있는 값을 자른다.  (1번변수 미포함 )~(3번변수 포함)
splice()	.splice(3)	시작점 뒤에 있는 모든값(시작점 포함) 해당변수 포함 →방향 시작점 뒤에 있는 모든 값을 자른다  3번째 변수뒤에 있는 값을 모두 자른다 (3번 변수 포함)	기존에 있던 배열이 잘림
	,splice(2,2)	시작점~입력한 개수만큼 제거 해당변수 포함 2번째 변수 뒤에 있는 값을 2개 지운다 (2번 변수 포함)

---