[JS] 배열 3_ 다양한 메소드: join() / split() / reverse()/ splice()/ slice() / find() / filter()

▪️ 배열을 string 으로 변경:

join()

*() 안에는 연결할 문자를 넣는다.

const name =['Erin','suzie','carrie'];
const result =name.join();   // 인수를 넣지 않았을때,
  console.log(result)   //   Erin,suzie,carrie 

const name =['Erin','suzie','carrie'];
const result =name.join(' & ');   // &으로 연결해준다
  console.log(result)    //Erin & suzie & carrie

---

▪️ string을 배열로 변경:

split()

*() 안에는 두개의 인자가 들어가는데,
첫번째는 구분자 (첫번째인자를 생략하면 모든 문자를 한 요소로 출력)
두번째는 전달 받고싶은 요소의 수(생략가능)

const name ='Erin,suzie,carrie';
const result =name.split(',',2);   // ,를기준으로 나누며,2개만 나타낸다,
  console.log(result)   //   ['Erin', 'suzie']

---

▪️ 요소의 순서를 거꾸로:

reverse()

const num = [1,2,3,4,5,6,7];
const result =num.reverse();  
  console.log(result)   //   [7, 6, 5, 4, 3, 2, 1]
  console.log(num)      //.  [7, 6, 5, 4, 3, 2, 1] 기존배열의 순서까지 바뀐다

---

▪️ 특정요소를 삭제하거나 다른요소로 대치하거나 새로운요소를 추가

splice(start,delete,item)

원본 배열을 바꾼다

• 첫번째 인자 : 배열의 index의 시작점
• 두번째 인자 : 삭제할 요소의 개수
• 세번째 인자 이후: 추가할 요소
  👉 인자의 순서를 꼭 지켜야함.
  👉 필요에 따라 인자를 1개만 쓸 수도 있음

  let nums = [1,2,3,4,5]
  num.splice(2,1,10)      // 2번째요소 1개를 10으로 바꾼다.
  console.log(nums)    // [1,2,10,4,5]

  *인자에 음수를 사용할 수도 있다.

  let lane1 = [{'철수':'150cm'}, {'영희': '153cm'}, {'바둑이': '155cm'},
  {'밍키': '160cm'}, {'살구' : '168cm'}, {'두팔': '175cm'}, {'여름': '180cm'}, {'소헌': '181cm'}];
       function extractOver175(list) {
            let extractedPeople = list.splice(-3,5)
            return extractedPeople;
            }
  console.log(extractOver175(lane1)) 
  // [ { '두팔': '175cm' }, { '여름': '180cm' }, { '소헌': '181cm' } ]

  
  

  ---

  
  

▪️ 배열중 원하는 부분만 가져오기

slice(start,end)

원본배열을 바꾸지 않는다

• 첫번째 인자 : 배열의 index의 시작점
• 두번째 인자 : 배열의 index의 끝점
  👉 start 요소부터 end 요소 전까지

  let nums = [1,2,3,4,5]
  let nums_1= nums.slice(0,3)
  console.log(nums)    // [1,2,3,4,5]   원본 배열은 그대로 있음.
  console.log(nums_1)  //  0번째 숫자인 1을 포함 3번째 숫자인 4 전까지. [1,2,3]

---

▪️ 조건에 맞는 요소 찾기

1. find(콜백함수)

const list =[
  {name:'abc', age:12},
  {name:'bcd', age:15},
  {name:'sfs', age:24},
  {name:'qwe', age:35},
  {name:'sfee', age:42},]
const result = list.find(ab=> ab.name === 'bcd')
// 배열에있는 모든 요소들을 순차적으로 호출하여 첫번째로 조건이 맞는 요소를 찾아낸다.
  console.log(result) // {name: 'bcd', age: 15}

2. filter(콜백함수)

const list =[
  {name:'abc', age:12},
  {name:'bcd', age:15},
  {name:'sfs', age:24},
  {name:'qwe', age:35},
  {name:'sfee', age:42},]
const result = list.filter(ab=> ab.name === 'bcd')
// 배열에있는 모든 요소들을 호출하여 조건에 맞는 요소들로 새로운 배열을 만들어낸다. 
  console.log(result) 
  //{name: 'bcd', age: 15}
  //{name: 'bcd', age: 5}
  //{name: 'bcd', age: 50}

// filter으로 중복요소 없애기
  let a = ['가','나','다','나','다','라','라','마']
  let erase = a.filter((item,index)=>a.indexOf(item)===index);
  console.log(erase) // ['가', '나', '다', '라', '마']

▶️💡 find 와 filter의 차이
1. filter는 배열을 리턴하고 find는 값을 리턴
2. find는 조건이 만족되는 하나의 값을 찾기때문에, 조건을 만족하는요소를 찾으면 반복종료. filter는 조건을 만족하는 모든 값을 모아 배열로 출력하기 때문에 요소의 길이만큼 반복.