JS 정리 3

JS 데이터

문자 메소드

//indexOf, 첫번째 등장 인덱스 반환, 없으면 -1
const result = 'Hello World!'.indexOf('World') 

//slice, 인덱스 6부터 10까지 출력
console.log(str.slice(6,11))

//replace, world 단어를 hi로 변경
console.log(str.replace('world', 'hi'))

//match, 정규표현식으로 배열 데이터로, qk1890만 반환
const str = 'qk1890@naver.com'
console.log(str.match(/.+(?=@)/)[0])

//trim, 앞뒤의 모든 공백을 제거
const str = '    hello world       '
console.log(str.trim())

숫자

console.log('abs: ', Math.abs(-12)) //절대값
console.log('abs: ', Math.min(2, 8)) //최소값
console.log('abs: ', Math.max(2, 8)) //최대값
console.log('abs: ', Math.ceil(3.14)) //올림
console.log('abs: ', Math.floor(3.14)) //내림
console.log('abs: ', Math.round(3.14)) //반올림
console.log('abs: ', Math.random()) //랜덤
Math.floor(Math.random() * 10) // 0~9까지 랜덤 정수

자세한 내용은 mdn에서

배열

원본이 바뀌지 않는 메소드

console.log([].length) // 0, 비어있는 배열
console.log(numbers.concat(fruits)) //합쳐진 새로운 배열 생성, 원본은 보존

forEach

반환 불가

fruits.forEach(function (element, index, array) { //데이터 개수만큼, 콜백함수를 사용
  console.log(element, index, array)
})

map

boolean 반환 가능

let b = fruits.map((element, index) => ({ //forEach와 다르게, 반환가능
    id: index,
    name: element
  }) //화살표함수에 객체데이터를 사용하려면, 소괄호사이에 넣어줘야 함
)

filter

해당 데이터 반환 가능

let b = numbers.filter(number => {
  return number < 50
})

find

특정 데이터 찾기

let a = fruits.find(fruit => /^c/.test(fruit))//c로 시작하는 단어 찾기

findIndex

특정 데이터 인덱스 찾기

let a = fruits.findIndex(fruit => /^c/.test(fruit)) //c로 시작하는 단어 인덱스 찾기

includes

데이터가 존재한다면 true

let a = fruits.includes('apple')

원본이 바뀌는 메소드

push

numbers.push(5) // 맨뒤에 데이터 삽입

unshift

numbers.unshift(2) // 맨앞에 데이터 삽입

reverse

numbers.reverse() // 뒤집음

splice

삭제와 삽입이 가능한 메소드
splice(인덱스, 삭제할 개수, 삽입할 데이터)
numbers.splice(2, 3) // 인덱스 2부터 3개 삭제
numbers.splice(2, 0, 999) // 인덱스 2에 삭제하지말고, 999 넣기

Object

assign

덮어쓰기
let target = { a:1, b:2}
let source = { b:4, c:5}

let returnedTarget = Object.assign(target, source) //assign(대상객체, 출처객체는 여러개가 될 수 있음)
console.log(target) // {a:1, b:4, c:5}
console.log(target === returnedTarget) //assign으로 참조할때 대상객체가 동일한 메모리이기 때문에 true

let noTarget = Object.assign({}, target, source)
console.log(target === noTarget) //대상이 {} 빈 객체라서, 같은 값이라도 아예 다른 메모리이기 때문에 false

keys

객체데이터 key 배열화
const user = {
  name: 'mangyun',
  age: 82,
  email: 'con@naver.com'
}

const keys = Object.keys(user) //객체데이터의 key들만 배열로
// ['name', 'age', 'email']
console.log(user['email']) // 배열에서 인덱싱처럼, 객체데이터의 인덱싱
const values = keys.map(key => user[key])
console.log(values)