JavaScript 정리 07 배열(Array)

지현·2022년 6월 2일
0

Javascript / TypeScript

목록 보기
6/16
post-thumbnail

배열 (array)

배열요소 추가 방법

  1. 일일이 대입
    let array = new Array(3);
array[0] = 'A';
array[1] = 'B';
array[2] = 'C';
console.log(array);
  1. Array 생성자로 생성하기
let array2 = new Array(1,2,3);
console.log(array2)
  1. 배열리터럴 [ ] 로 추가하기
let array3 = [1,2,3,4,5]
console.log(array3)
console.log(array3[3]) //배열요소의 참조 
(인덱스값으로 나오기 때문에 0부터 시작 여기서 array3의 index3번은 4)

배열 주의할점

  • let array4 = new Array(10) // 배열에 숫자 하나만 넣으면 요소가 아니라 배열 길이로 인식해버림
    console.log(array4) // [<10 empty items>]
    console.log(array4.length) // 길이 10으로 나옴
    console.log(array4[0]) // 10을 요소로 안쳐서 [0] 구해도 undefined 나옴

  • let array5 = new Array('go')
    // 얘는 문자열 하나만 나와도 요소 1개인 배열이 된다.
    console.log(array5)
    console.log(array5.length) // 문자열 1개니까 길이 1로 나옴
    console.log(array5[0])// 1

배열요소 삭제

const subway = ['1호선','2호선','3호선','4호선','5호선']
length는 길이니까 5 , index는 0부터 시작하니까 4까지 있음

console.log(subway[2]) // index[2] = 3호선
console.log(subway.length) // 개수 5개 (길이)
console.log(subway[0]) // 1호선
console.log(subway[1]) // 2호선
console.log(subway[2]) // 3호선
console.log(subway[3]) // 4호선
  • delete subway[2] : delete로 배열요소 삭제하면 자리는 남아있어서 1, 2, 1 empty item, 4, 5 으로 출력, 배열의 인덱스는 수정하지 않는다.

  • splice(시작인덱스,개수) 사용하면 배열 자체를 수정할 수 있다.
    subway.splice(2,1) // 이렇게 하면 1, 2, 4, 5 로 배열 자체 수정됨
    console.log(subway.length) 하면 // 배열 요소 삭제된걸로 쳐서
    length 4 됨

  • for문으로 만들기 : i<subway.length로 하면 index값은 length보다 1 작으니까 알맞게 출력 가능
for(let i = 0;i<subway.length ;i++){
    console.log(subway[i])
}

배열요소 추가

const color = ['red','green','blue']
console.log(color)
  • 제일 앞에 추가하기 unshift
    console.log(color.unshift('yellow')) console창에는 length로 출력되지만
    console.log(color)
    다시 console log 해보면 yellow가 추가된 것을 알 수 있다

  • 제일 뒤에 추가하기 push
    console.log(color.push('orange')) //얘도 length는 5
    console.log(color) 하면 ['yellow','red','green','blue','orange'] 로 출력

  • splice 이용
    console.log(color.splice(2,0,'skyblue','black'))
    splice(시작인덱스, 자를 개수 , 추가할 값)
    여기서는 삭제하는 건 없고 추가만 하니까 삭제할 개수는 0, 삭제는 안되고 skyblue와 black값이 추가만 됨
    console.log(color) // ['yellow', 'red', 'skyblue', 'black', 'green','blue','orange'] (2번 인덱스인 red 이후에 추가된 것을 볼 수 있다.)

요소 제거

const color = ['red','green','blue','yellow']
color.shift() // 맨앞제거
console.log(color)
color.pop() //맨 뒤 제거
console.log(color)  // [ 'green', 'blue', 'yellow' ]
const familyName = ['철수','영희','순이','길동']
familyName.splice(2,1) 
// 순이 인덱스 번호 2번에서 1명 제거하는 거니까 순이만 제거됨
console.log(familyName) // [ '철수', '영희', '길동' ]
const newFamily = familyName.slice(2,3) 
// 영희에서 잘라서(2) 길동이만 나옴(3) (start, end)
console.log(familyName) // [ '철수', '영희', '길동' ]
console.log(newFamily) // [길동]

배열 합치기

  • concat : 배열, 문자열 합치기
const arr1 = [1,2,3]
const arr2 = [4,5,6,7,8,9] // concat() 배열/문자열 합치기

const arrPlus = arr1.concat(arr2)
const 새로운배열=배열1.concat(합칠 배열2)
console.log(arrPlus)// [1,2,3,4,5,6,7,8,9]

배열 거꾸로

  • reverse : 배열 거꾸로
    const arrReverse = arrPlus.reverse()
    console.log(arrReverse) 하면 [9,8,7,6,5,4,3,2,1]

배열 중첩

  • 배열은 중첩 가능 [ ] 안에 [ ] 또 쓰면 돼
    let multiArr = [['a','b','c'],['가','나','다']]
    console.log(multiArr); 하면 [ [ 'a', 'b', 'c' ], [ '가', '나', '다' ] ]
  • flat() : 중첩배열 합치기 ()안에는 중첩 depth 넣을 수 있다 2 넣으면 2차 중첩도 평평하게해줌
    let flatArr = multiArr.flat()
    console.log(flatArr)하면 [ 'a', 'b', 'c', '가', '나', '다' ]

문자열 합치기

  • join() : 문자열 합치기 괄호 안에 문자열 넣어주면 사이에 들어감
    const txtJoin = flatArr.join('-')
    console.log(txtJoin) 하면 () 안에 '-' 넣어서 a-b-c-가-나-다 로 나옴 안넣으면 그냥 abcd가나다 로 나옴

여러 메서드

const year = ['2022','2023','2024','2024'] 에서

  • console.log(year.indexOf('2024'))
    indexOf는 찾는 문자열의 위치를 알려준다. 이 경우는 첫번째 2024의 index 번호인 2를 반환한다.
  • console.log(year.includes('2024'))
    includes 는 포함하는 값이 있는지 없는지에 대한 논리값을 반환한다.
  • console.log(Array.isArray(year)) //
    isArray 는 해당 값이 Array 인지 아닌지에 대한 논리값을 반환한다.

값이 있는지 유무 따라 다르게 출력

year.indexOf('2026') 로 하면 값이 없다 뜬다 
year에 2026 없으니까. indexOf 해서 값이 없으면 -1 출력함. 
const value=year.indexOf('2024'); // value가 -1과 같지 않으면 값이 있음
if(value!==-1){
  console.log('값이 있다')
}else{
  console.log('값이 없다')
}

Date객체 이용해서 년월일요일 -> 2022년 5월 26일 목요일 처럼 오늘 날짜 나오게 하기

const now = new Date()  // new Date() 로 Date객체 생성해줘야함
const year = now.getFullYear()
const month = now.getMonth()+1
const date = now.getDate()
const dayArr = ['일','월','화','수','목','금','토']
const today = `오늘은 ${year}${month}${date}${dayArr[now.getDay()]}요일`
console.log(today)

forEach구문 이용해서 배열 값 구하기

var array = [1,2,3,4,5]
function arrList(arraylist){
    arraylist.forEach((data,index,arr)=>{
    console.log(`데이터 : ${data}`)
    console.log(`인덱스:${index}`)
    console.log(`arr:${arr}`)
})
}
arrList(array)

하면 출력은
데이터 : 1 인덱스:0 arr:1,2,3,4,5
데이터 : 2 인덱스:1 arr:1,2,3,4,5
데이터 : 3 인덱스:2 arr:1,2,3,4,5
데이터 : 4 인덱스:3 arr:1,2,3,4,5
데이터 : 5 인덱스:4 arr:1,2,3,4,5
가 나온다

0개의 댓글