자바스크립트_배열

1. length 

길이를 반환한다. 

const numbers = [1,2,3,4]
const fruits= ['Apple','Banana','Cherry']

console.log(numbers.length)

4 나옴. 

 

2. concat

배열을 이어준다. 

const numbers = [1,2,3,4]
const fruits= ['Apple','Banana','Cherry']

console.log(numbers.concat(fruits))

3. forEach

배열데이터의 개수만큼 콜백이 실행된다. 

콜백함수의 매개변수에 들어가는 것은 첫번째는 반복되는 각각의 아이템, 두번째는 횟수이다.

const fruits= ['Apple','Banana','Cherry']

fruits.forEach(function(element,index,array){
    console.log(element,index,array)
})

이 forEach아이템을 변수에 넣어보겠다. 

const numbers = [1,2,3,4]
const fruits= ['Apple','Banana','Cherry']

const fun = fruits.forEach(function(fruit,index){
    console.log(`${fruit} - ${index}`)
})
console.log(fun)

결과는 undefined로 나온다. 

 

4. map 

map의 장점이자 foreach와의 차이점은 함수를 변수에 넣을 시 return을 반환시켜준다는 것이다. 

const funtwo = fruits.map(function(fruit,index){
    return `${fruit} - ${index}`
})
console.log(funtwo)

또는 이렇게 

const funtwo = fruits.map(function(fruit,index){
    return {
        id : index,
        name : fruit}
})
console.log(funtwo)

여태 만든 것 화살표함수로 줄이기. 

const numbers = [1,2,3,4]
const fruits= ['Apple','Banana','Cherry']

const fun = fruits.forEach((fruit,index)=>{
    console.log(`${fruit} - ${index}`)
    return `${fruit} - ${index}`
})
console.log(fun)

const funtwo = fruits.map((fruit,index)=>({
    id : index,
    name : fruit}))
console.log(funtwo)

배열 두번째 시간. 

5. filter

const numbers = [1,2,3,4]
const fruits= ['Apple','Banana','Cherry']

const a = numbers.map((number)=>{
    return number < 3
})
console.log(a)

결과는 true true false false가 나온다. 

다음 예제로는 1과 2가 나오게 된다. 신기한거는 배열로 돌려준다는 것이다. 

//filter : 특정한 기준에 의해 필터한다.
const b = numbers.filter((number)=>{
    return number < 3
})
console.log(b)

6. find

B로 시작하는 fruit을 찾는 예제. 

const numbers = [1,2,3,4]
const fruits= ['Apple','Banana','Cherry']

const Bword = fruits.find((fruit)=>{
    return /^B/.test(fruit)
})
console.log(Bword)

결과 : 

6-2. findIndex

const numbers = [1,2,3,4]
const fruits= ['Apple','Banana','Cherry']

const Bword = fruits.findIndex((fruit)=>{
    return /^C/.test(fruit)
})
console.log(Bword)

2를 반환해준다. 

 

7. inclues

true, false나옴! 

const numbers = [1,2,3,4]
const fruits= ['Apple','Banana','Cherry']

const a = numbers.includes(1)
console.log(a)

const b = fruits.includes('HEROPY')
console.log(b)

8. push, unshift

push : 배열데이터 뒷쪽에 새로운 데이터가 삽입됨

unshift : 배열데이터 앞쪽에 새로운 데이터가 삽입됨

const numbers = [1,2,3,4]
const fruits= ['Apple','Banana','Cherry']

numbers.push(5)
console.log(numbers)

numbers.unshift(0)
console.log(numbers)

9. reverse

const numbers = [1,2,3,4]
const fruits= ['Apple','Banana','Cherry']

numbers.reverse()
fruits.reverse()

console.log(numbers)
console.log(fruits)

결과 : 

 

10. slice

첫번째 변수 : 인덱스값 

두번째 변수 : 지울 값의 개수 

const numbers = [1,2,3,4]
const fruits= ['Apple','Banana','Cherry']

numbers.splice(2,1) // 첫번째 데이터 : 배열데이터의 인덱스값
console.log(numbers)

결과 : 

끼워넣을 수도 있다! 

const numbers = [1,2,3,4]
const fruits= ['Apple','Banana','Cherry']

numbers.splice(2,0,999) // 첫번째 데이터 : 배열데이터의 인덱스값
console.log(numbers)

결과 : 

삭제한 다음 쓸수도 있다 

const numbers = [1,2,3,4]
const fruits= ['Apple','Banana','Cherry']

numbers.splice(2,1,33) // 첫번째 데이터 : 배열데이터의 인덱스값
console.log(numbers)

결과 :