📌 배열을 교체 추가하는 메서드
1. unshift 추가
let catName = ["자몽", "서리"]
catName.unshift("유자","코코")
catName
// shift 제거
let aaa = ['a','b','c']
aaa.shift('a')
aaa
- 추가:
unshift==push - 제거:
shift==pop
2. splice
splice배열의 기존 요소를 삭제,교체,추가 하여 배열의 내용을 변경arr.splice(원소가공을시작할인덱스위치, 제거할 원소개수, 추가해줄 원소)
1) 추가
let need = ["떡볶이", "레드콤보","초코라떼","삼겹살"]
//2번째 인덱스에 제거 없이 (0) 딸기생크림케이크 추가
need.splice(2,0,"딸기생크림케이크")
2) 삭제
let need = ["떡볶이", "레드콤보","초코라떼","삼겹살"]
// 0번째 인덱스의 떡볶이 1개 삭제
let one = need.splice(0,1)
// one 제거된 원소를 배열로 반환 > 제거된 원소들은 새로운 변수에 담아 사용
[ '떡볶이' ]
// need
[ '레드콤보', '초코라떼', '삼겹살' ]
3) 교체
let need = ["떡볶이", "레드콤보","초코라떼","삼겹살"]
// 2번째 인덱스의 초코로떼 1개 삭제하고 해당자리에 딸기생크림케이크추가
let one = need.splice(2,1,'딸기생크림케이크')
// one 제거된 원소를 배열로 반환 > 제거된 원소들은 새로운 변수에 담아 사용
[ '초코라떼' ]
// need
[ '떡볶이', '레드콤보', '딸기생크림케이크', '삼겹살' ]
3. slice
- 배열의 원소를 잘라온 원소를 새로운 배열에 반환하는 메서드
arr.slice(자르기 시작할 인덱스, 자르기를 종료할 인덱스) - 자르기를 종료할 인덱스는 미포함
- 자르기 종료할 인덱스 추가하려면 +1
let ATeam = ['A','B','C','D','E']
let BTeam = frontTeam.slice(0,3)
BTeam
[ 'A', 'B', 'C' ]
잘라진 원소 새로운 배열에 반환됨
ATeam
[ 'A', 'B', 'C', 'D', 'E' ]4. concat
- 두 개 이상의 배열을 합쳐주거나, 배열에 값을 이어붙여주는 메서드
1) 배열 합치기
arr1.concat(arr2, arr3)
let arr1 = [1,2,3]
let arr2 = [4,5,6]
let concatArray = arr1.concat(arr2)
concatArray
[ 1, 2, 3, 4, 5, 6 ]
2) 원소 이어붙이기
arr.concat(추가할 원소)
let arr1 = [1,2,3]
let one = arr1.concat("안녕")
one
[ 1, 2, 3, '안녕' ]
3) 배열합치고, 이어붙이기
let arr1 = [1,2,3]
let arr2 = [4,5,6]
let arr3 = ["한","글"]
let newArray = arr1.concat(arr2, "여기는 한글",arr3)
newArray
[ 1, 2, 3, 4, 5, 6, '여기는 한글', '한', '글' ]📌 배열을 변형하는 메서드
1. map
- 배열의 모든 원소에 대해 함수를 호출한 결과를 모아 새로운 배열을 반환
- 실무에서 반복문으로 사용
arr.map((el) => {
// 모든 배열 원소에게 반복 실행할 코드
})
let num = [1,2,3,4,5]
let newNum = num.map( el => el * 3 )
newNum
[ 3, 6, 9, 12, 15 ]
// map 안의 el 매개변수, 즉 파라미터 안에는 num의 모든 원소들이 한번씩 들어가게 된다.
2. sort
- 배열의 모은 원소를 적절한 위치에 정렬 후 해당 배열을 반환
- 기본적인 정렬 순서는 문자열의 유니코드를 따른다.
arr.sort(() => {
// 비교기준 함수
// 없을 시엔 기본적인 정렬에 따라 정렬
})
1) 숫자열에서 비교기준 함수
// 오름차순 (작은 것에서부터 큰 것으로 가는)
arr.sort((a, b) => {
return a - b
})
arr.sort((a, b) => return a - b)
// 내림차순 ( 큰 것에서부터 작은 것으로 가는 )
arr.sort((a, b) => {
return b - a
})
arr.sort((a, b) => return b - a)
2) 문자열에서 비교기준 함수
// 오름차순
arr.sort((a, b) => {
return a < b ? -1 : 1
})
arr.sort((a, b) => {
return a< b ? -1 : 1 4
})
// 내림차순
arr.sort((a, b) => {
return a > b ? -1 : 1
})3. reverse
- 배열의 순서를 반전해주는 메서드
- 마지막 요소가 첫 번째 요소가 되며, 첫변째 요소는 마지막 요소가 된다
let array = ["three", "two", "one"]
let reverseArray = array.reverse()
reverseArray
[ 'one', 'two', 'three' ]4, split
- 특정 문자열을 일정한 기준으로 잘라 배열로 반환
str.split(구분자, 횟수 제한)
// 구분자: 문자열을 잘라올 기준1)
let num = "010-1234-4567"
let SplitNum = num.split("-")
// "-" 을 기준으로 문자열을 잘라옴
SplitNum
// [ '010', '1234', '4567' ]
2)
let mail = "hi@google.com, my@google.com, name@google.com"
let splitMail = mail.split("@", 2)
// @ 을 기준으로 자르고 2번까지만 결과물 반환
splitMail
// [ 'hi', 'google.com, my' ]
5. join
- 배열의 모든 원소를 연결해 하나의 문자열을 반환하는 메서드
arr.join(구분자)- 구부자는 뭘쓰냐에 따라서 반환되는 문자열이 다른다.
- 구분자가 있을 때는 해당 구분자를 문자열로 반환한지만, 생략하게 되면 모든 요소들이 쉼표로 구분
let arr = ["안","녕","하","세","요"]
let str = arr.join("")
str
// '안녕하세요'
let arr = ["안","녕","하","세","요"]
let str = arr.join()
str
// '안,녕,하,세,요'
let arr = ["안","녕","하","세","요"]
let str = arr.join("와")
str
// '안와녕와하와세와요'6. reduce
- 각 배열의 원소에 대해 함수를 실행하고, 하나의 결과값을 반환
- Q. map 과 차이는?
- 배열의 총원소의 합을 구할 때 사용
arr.reduc((누적값, 현재값) => {
// 현재값 + 누적값을 리턴
}, 초기값)- 초기값: 처음 연산을 시작할 때 깔아 놓는 값
- 즉 반환값은 초기값 + 모든 원소 연산 값
- 초기값이 없으면 0이 기본값
1) 초기값 없음
let arr = [1,2,3,4,5,6,7,8,9,10]
arr.reduce((acc, cur) => {
console.log(`누적값 : ${acc}, 현재값 : ${cur}`)
return acc + cur
})
55
'누적값 : 1, 현재값 : 2'
'누적값 : 3, 현재값 : 3'
'누적값 : 6, 현재값 : 4'
'누적값 : 10, 현재값 : 5'
'누적값 : 15, 현재값 : 6'
'누적값 : 21, 현재값 : 7'
'누적값 : 28, 현재값 : 8'
'누적값 : 36, 현재값 : 9'
'누적값 : 45, 현재값 : 10'
2) 초기값 있음
let arr = [1,2,3,4,5,6,7,8,9,10]
arr.reduce((acc, cur) => {
console.log(`누적값 : ${acc}, 현재값 : ${cur}`)
return acc + cur
}, 10)
65
'누적값 : 10, 현재값 : 1'
'누적값 : 11, 현재값 : 2'
'누적값 : 13, 현재값 : 3'
'누적값 : 16, 현재값 : 4'
'누적값 : 20, 현재값 : 5'
'누적값 : 25, 현재값 : 6'
'누적값 : 31, 현재값 : 7'
'누적값 : 38, 현재값 : 8'
'누적값 : 46, 현재값 : 9'
'누적값 : 55, 현재값 : 10'
7. reduceRight
reduce와 같은 기능을 하지만,reduce와 다르게 현재값이 배열의 끝에서부터 시작한다.
arr.reduceRight((누적값, 현재값) => {
// 현재값 + 누적값을 리턴
})let arr = [1,2,3,4]
arr.reduceRight((acc, cur) => {
console.log(`누적값 : ${acc}, 현재값 : ${cur}`)
return acc + cur
},20)
30
'누적값 : 20, 현재값 : 4'
'누적값 : 24, 현재값 : 3'
'누적값 : 27, 현재값 : 2'
'누적값 : 29, 현재값 : 1'📌 배열을 전체 순회하기
1. forEach
- map과 for와 비슷한 기능을 하며 주어진 함수를 배열의 각 요소에 실행시킨다.
- map과 다르게 forEach는 배열을 리턴하지 않고, undefined를 리턴한다.
arr.forEach(() => {
// 각 배열에 반복하고 싶은 코드
})let arr = [1,2,3,4,5,6]
arr.forEach((items) => {
return console.log(items * 2)
})
2
4
6
8
10
12- 배열을 반환하지 않기 때문에 item*2 의 값을 배열에 새롭게 만들고 싶다면 빈배열 안에
push해야한다. - Q.
push하는 방법 ?? - 새로운 배열이 필요하다면
map - 배열은 필요없지만 반복문을 사용해야한다면
forEach사용
📌 배열 탐색하기 (원하는 요소 찾기)
1. indexOf
- 배열에 특정 원소가 있는지 탐색하고, 찾은 첫번째 요소의 인덱스를 반환한다.
만일 존재하지 않으면 -1 을 반환한다.
arr.indexOf("탐색하고 싶은 요소", 탐색을 시작할 위치 = 인덱스)let name = ["A", "B", "C", "D", "E", "F"]
name.indexOf("F")
// 결과 2
// 2번째 인덱스에 위치
// 배열의 마지막에 있는 "F"을 데리고 오고 싶을 때
// 탐색을 시작할 위치를 지정해 주면 됨
let name = ["A", "B", "C", "D", "E", "F"]
name.indexOf("F", 3)
// 탐색하고 싶은 요소 > F
// 탐색을 시작할 위치 인덱스 3 (D)
// 탐색할 위치를 지정해주면 해당 인덱스트를 포함해서 탐색 시작
// 결과 52. lastIndexOf
indexOf와 다르게 배열에서 찾은 마지막 요소의 인덱스를 반환indexOf와 같은 기능이지만 '인덱스 반환만' 뒤에서부터 해준다. 이외에는indexOf랑 동일
arr.lastIndex("탐색하고 싶은 요소", 역순으로 탐색을 시작할 위치 = 인덱스)let name = ["A", "B", "C", "D", "E", "F"]
name.lastIndexOf("B")
// 결과 4
// 뒤에서부터 4번째
let name = ["A", "B", "C", "D", "B", "F"]
name.lastIndexOf("B", 3)
// 결과 1
// 뒤에서 3번째 인덱스 C부터 탐색시작
// 재훈 기준 1번째 인덱스에 위치 - 사용하는 이유는 탐색의 위치를 지정해주면 해당 인덱스를 기준으로 큰 쪽으로 탐색을 하는 것이아닌 작은쪽으로 탐색 진행
3. includes
- 배열이 특정 요소를 포함하고 있는지 판별하고 있으면 true, 없으면 false 반환
arr.includes("탐색하고 싶은 요소", 탐색을 시작할 위치)let name = ["A", "B", "C", "D", "E", "F"]
name.includes("F")
true
// 탐색 위치 정하기
// 2번째 인덱스 C부터 A가 있는지 탐색 시작
// 탐색 위치를 지정하게되면, 해당 인덱스를 포함해서 탐색을 시작한다.
let name = ["A", "B", "C", "D", "E", "F"]
name.includes("A", 2 )
false 4. find
- 판별함수를 만족하는 배열의 첫번째 요소의 값을 반환
- 만족하는 요소 없다면 undefinde 반환
arr.find(()=>{
// 판별함수
})let arr = [1, 2, 3, 4, 5, 6, 7]
arr.find((el) => {
return el > 4
})
// 4 보다 큰 요소는 5, 6, 7 인데 첫번째 요소 값만 반환하니까
// 결과 5 5. findIndex
- 판별함수를 만족하는 배열의 첫번째 요소의 인덱스를 반환
- find 와 같은 기능이지만, 반환해주는 값이 다른 것이 차이점
arr.findIndex(() => {
// 판별함수
})let arr = [1, 2, 3, 4, 5, 6, 7]
arr.findIndex((el) => {
return el > 4
})
// 결과 4
// 4 보다 큰 요소는 5, 6, 7 인데 먼저 첫번째 요소 값만 반환하니까 5
// 그리고 5가 위치한 인덱스 값 4 반환 6. filter
- 주어진 함수를 만족하는 모든 요소를 모아 새로운 배열로 반환
- 일정한 기준에 부합하는 원소들만 추출하고 싶을 때 많이 사용
arr.fliter(() => {
// 일정한 기준을 준 함수
})let arr = [1, 2, 3, 4, 5, 6, 7, 8]
arr.filter((el) => {
return el > 3
})
[ 4, 5, 6, 7, 8 ]find와findIndex는 최초의 값만 알려주거나 위치를 알려줬지만fliter는 함수에 부합하는 원소 모두 새로운 배열로 반환하기 때문에 모든 원소가 필요할 때 사용
slow but sure