array 배열 구조, for 구문, Object의 Keys Value -> case by case -> map, filter 정리 블로그!

https://milugarcito.tistory.com/404

JavaScript - Array

https://milugarcito.tistory.com/613

Axios 통신 - Object with array key and array value 공부

 

https://milugarcito.tistory.com/519

TypeError [ERR_INVALID_ARG_TYPE]: The "data" argument must be of type string or an instance of Buffer, TypedArray, or DataView.

 

 

 

 

Token with Nuxt Cookie 정리하기, 
셋인터벌 정리하기, 
항진씨코드, 재훈씨 코드, 재훈씨 상품코드 정리 


async await 공부하기
promise 공부하기
promise all 공부하기

 

 

 

 

 

🖤 CASE 0 --->

For 구문 함수 차이점

 

FOR..IN

//for in
for(let item of coupons){
  console.log(item,'for in 구문')
}

 

 

 

 

NORMAL FOR 1개

 

//normal for
for(let item2=0; item2 <coupons.length; item2++ ){
  console.log(coupons[item2], 'for 일반구문')
}

 

 

 

 

 

 

 

중첩 FOR 구문

  this.shopList = res.data;
  console.log(res.data,'getShopList')//[{},{},{}]

  for(let i=0; i<this.shopList.length; i++){

    // shopList: [], // 샵리스트
    // newList: {}, // 새로 만들어주기
    // newListA: {},

    console.log(this.shopList[i].category_nm,'this.shopList[i].category_nm') // 따로 나오는걸 일단 배열로 넣어주기
    if(!this.newList[this.shopList[i].category_nm]){
      // 없으면 그냥 빈배열 처리
      this.newList[this.shopList[i].category_nm] = []; 
    }{
      // { [{ }] }
      // 있으면 {} 안에 [{}] 넣기.. -> { [{...}], [{...}],[{...}], ..... }
      // { 메인카테1 : [{...}], 메인카테2 : [{...}], 메인카테3 : [{...}] }
      this.newList[this.shopList[i].category_nm].push(this.shopList[i]) 
    }
  }
  console.log(this.newList, "결과값")



  this.$forceUpdate();
  this.newListA = this.newList
   // {{}} 이렇게 되는게 아니라  ->  한개로 합쳐짐 -> {}
   // 배열도 마찬가지.. [[]] 되는게 아니라 -> 한개로 합쳐짐 -> []
  console.log(this.newListA,'this.newListA')

 

 

 

 

 

 

 

FOREACH

 

//foreach
coupons.forEach((coupon)=> console.log(coupon,'forEach 구문'))

 

 

 

 

 

 

 

🖤 CASE 1 --->

for of  & push 구조

 

[ {  }, {  }, {  } ] -> [ 'aaa', 'bbb', 'ccc', 'ddd'] 구조, 특정 object의 value 값만 뽑아서 배열로 만들기

 

 

for(let item of coupons) 이렇게 써야지 전체 배열안에 있는 각각의 { } 를 뽑아옴

console.log(coupons,'coupons@@@@')// [{},{},{}]
let couponArr = [];
for(let item of coupons){
  couponArr.push(item.coupon_no)
}
console.log(couponArr,'couponArr@@@')// [{},{},{}] -> ['aaa','bbb','ccc','ddd']

 [{},{},{}]

 

가공한 결과값  :  ['aaa','bbb','ccc','ddd']

 

 

 

 

 

 

 

 

🖤 CASE 2 --->

filter & push 써서 원래는 [ [ {  } ], [ {  } ], [ {  }]  ] 이렇게 나오는걸 -> [ { }, { }, { } ] 이렇게 만드는 방법

 

2개의  [ {  }, {  }, {  } ] 결과구조를 특정 value 값을 기준으로 2개 api 를 합쳐서 object로 새로 만든 후, 새로운 배열1개 안에 여러 objects { }, { }, { } 만들기 ..... 

 

api 결과값 1

 

api 결과값 2

 

가공한 결과값 1--> [ { }, { }, { } ]

 

 

const adminRes = await this.$axios.get('/myPage/retrieveListOfCoupons');
let adminCoupons = adminRes.data.data.coupons; 
console.log(adminCoupons,'adminCoupons@@@@@')

let couponsArrResult = [];
for (let coupon_no of couponArr){
  let [__] = (
      adminCoupons.filter(coupon=>{
        return coupon.coupon_no == coupon_no
      })
  )
  couponsArrResult.push(__)// [ { }, { }, { } ] -> 이거를 let [ 아무거나 ] 이렇게 선언해주면 [] 제거해줘서 { }, { }, { } 이렇게 나옴
}
console.log(couponsArrResult,'couponsArrResult@@@@')

 

가공한 결과값2 -> [  [{ }] ,   [{ }] ,  [{  }]  ]...

 

let couponsArrResult = [];
for(let coupon_no of couponArr){
  let test = adminCoupons.filter(item2=>{
    return item2.coupon_no  === coupon_no
  }) 
  couponsArrResult.push(test) // 이렇게 하면 filter 함수가 []로 넘겨줘서 ->  let test = [{}], [{}], [{}]... 이렇게 됨
}
console.log(couponsArrResult,'couponsArrResult') // [[{}], [{}], [{}]]...

 

 

 

 

가공한 결과값3  -> 이중 for구문 돌리는 방법

for(let i=0; i<this.user_coupons.length; i++){
    for(let j=0; j<this.shop_coupons.length; j++){
      if(this.user_coupons[i].coupon_no === this.shop_coupons[j].coupon_no){
        this.user_data.coupons.push(this.shop_coupons[j])
      }
    }
}
// 큰 배열2개를 coupon_no 기준으로 합쳐서 새로운 배열 생성 (기준 : 내가 추출하고자 하는 배열을 기준)
console.log(this.user_data.coupons,'this.user_data.coupons')

 

 

 

 

 

가공한 결과값4

let send_data = []
await this.$axios.get(`/admin/retrieveListOfCustomerInformation?search_field=name&keyword=${this.search_keyword}`)
.then(res => {
  for (let data of res.data.data.customersprivacy){
    send_data = 
    [
      {
        name: data.name,
        phone: data.cellphone,
        member_id: data.member_id,
        createdAt: data.created_date.slice(0, 10),
      }, 
      ...send_data
    ]
    // 검색한 결과값들이 -> [[{ }], [{ }] ....] -> 원래는 이렇게 출력되는것인데 -> 먼저 let send_data = [] 라고 선언해줘서 -> [{ }], [{ },{ }], [{ },{ },{ }], [{ },{ },{ },{ }].. 이렇게 배열 길이만큼 출력됨
    console.log(send_data,'send_data')
  }
}).catch(err => {
  console.log(err);
})

 

 

 

 

 

 

🖤 CASE 3 --->

[ "Object Keys" : {"Object Keys " : "Object Values" }, {"Object Keys " : "Object Values" } , ...]

 

 

가공한 결과값 -> ["6071937532900000009" : {"aaa" : "aaa", "bbb" : "bbb"}]

 

 

const adminRes = await this.$axios.get('/myPage/retrieveListOfCoupons');
let adminCoupons = adminRes.data.data.coupons; // [{},{},{}]
let resultArr =[];

for(let coupon of adminCoupons){
  let arrObject = coupon.coupon_no;
  let arrKeys = {"available_day_from_issued" : coupon.available_day_from_issued ,  "available_date" : coupon.available_date }

  console.log(arrObject,'arrObject') // "object의 keys 값으로 들어갈것"
  console.log(arrKeys,'arrKeys')// "object의 value 값으로 들어갈것"

  let temp = {};
  // 형식을 {} 로 맞춰주기
  temp[arrObject] =arrKeys; // { ["111", "222", "333"] } = {"available_day_from_issued" : coupon.available_day_from_issued ,  "available_date" : coupon.available_date }

  resultArr.push(temp)

}
console.log(resultArr,'resultArr')

 

 

 

 

 

 

 

🖤 CASE 4 --->

Filter & Map & Reduce 함수 차이점

 

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-map-%EA%B3%BC-filter-%EC%B0%A8%EC%9D%B4

[JS] 📚 자바스크립트 map 과 filter 차이

https://velog.io/@tjdud0123/javascript-map-filter-%ED%95%A8%EC%88%98

[ javascript ] map, filter 함수

 

공통점 : 기존 배열을 건드리지 않고, 각각의 배열의 요소들을 순회한후 "새로운 배열을 리턴" 함

 

-> Filter ?

     조건문을 만족한 요소들을 반환함, true를 반환하면 요소를 유지하고, false를 반환하면 버림

     즉, 리턴 값의 boolean이 true인 값만 가지고 배열을 만듬 (false, undefined 제외시킴)

const adminRes = await this.$axios.get('/myPage/retrieveListOfCoupons');
let adminCoupons = adminRes.data.data.coupons; // [{},{},{}]

let couponsArrResult = [];
for (let coupon_no of couponArr){
  let [__] = (
      adminCoupons.filter(coupon=>{
        return coupon.coupon_no == coupon_no
      })
  )
  couponsArrResult.push(__)
}

 

 

-> Map ?

     콜백 함수가 적용된 새 요소들을 반환함

     즉, 리턴 값의 boolean값을 리턴해 배열(false, undefined 도 배열에 넣어버림)

     false or undefined 값을 null로 표현해야하는경우 MAP 써야함

 

 

 

<Map 함수 예제 1>

this.user_info.coupons = couponsArrResult.map(item => {
  return {
    ...item, //couponsArrResult 배열의 각 {},{},{}...
    //각 {},{},{} 의 key값인 coupon_image_path 를 순서대로 돌면서 검사
    coupon_image_path: !!item.coupon_image_path ? (item.coupon_image_path.split('http')[0] + 'https') + (item.coupon_image_path.split('http')[1]) : null
  }
}); // api 2개 합친값

 

 

<Map 함수 예제 2>

 

console.log(res.data,'res getShopMenu @@@@@@@@@@@@@@@') // [{},{}..]
this.shopMenu = res.data.map((item,index)=>{
  console.log(item,'item @@@')//{idx: 1, category_nm: 'Online Marketplace'} -> 큰 배열안의 각 오브젝트들 출력
  console.log(index,'index @@@')//0, 1, 2, 3, ....  -> 그냥 큰 배열안에 있는 각 오브젝트들 순서를 출력
  return{
    title : item.category_nm,
  }
})

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

            //1 - check
            for(var key in this.orderStatusList){
                for(var i=0;i<this.orderStatusList[key].length;i++){
                    this.orderStatusList[key][i].checked = false;
                }
            }
            
            //1 - check
            this.orderSummaryList = targetItems;

            //1 - check
            console.log(targetItems,'1 - check / targetItems =====')



            //2 - check
            console.log(Object.keys(this.orderSummaryList), '2 - check / targetItems ====')


            
            //3 - check
            for(let item in this.orderSummaryList){
                this.order_code.push(item)
            }
            //3 - check
            console.log(this.order_code,'3 - check / this.order_code')

 

 

 

 

 

 

 

 

 

 

🖤 CASE 5 --->

두 배열을 하나의 오브젝트로 합치기

 

 

https://velog.io/@mementomori/Javascript-Object%EB%A5%BC-Array%EC%B2%98%EB%9F%BC-%EC%88%9C%ED%9A%8C%ED%95%98%EA%B8%B0

<Javascript> Object를 Array처럼 순회하기

https://developer-talk.tistory.com/303

[JavaScript]객체를 배열로 변환하는 방법

 

 

https://ingnoh.tistory.com/133

[JS] 두 배열을 하나의 오브젝트로 합치기

 

 

https://goddino.tistory.com/198

[js] 객체를 배열로 바꾸는 법, 배열을 객체로 바꾸는 법

//이거랑 새로 업뎃 되는거랑 비교하기
let old_city = [];
for(let one of user_cate_id){
    old_city.push(one.id)
}

const total = old_city.reduce((before,cur, idx)=>{
    before[cur] = city[idx];
    return before;
}, new Object);

console.log(total,'total')
console.log(Object.keys(total),'keys')
console.log(Object.values(total),'values')

 

 

배열의 중복 제거, 2차원 배열의 중복 제거

https://velog.io/@pdg03092/Javascript-%EB%B0%B0%EC%97%B4%EC%9D%98-%EC%A4%91%EB%B3%B5-%EC%A0%9C%EA%B1%B0-2%EC%B0%A8%EC%9B%90-%EB%B0%B0%EC%97%B4%EC%9D%98-%EC%A4%91%EB%B3%B5-%EC%A0%9C%EA%B1%B0

JavaScript 배열의 중복 제거, 2차원 배열의 중복 제거

 

 

 

2차원 배열을 1차원 배열로 변환 

https://codechacha.com/ko/javascript-flatten-array/

JavaScript - 2차원 배열을 1차원 배열로 변환, 2가지 방법

 

 

 

 

배열을 객체로 변환

https://codechacha.com/ko/javascript-convert-array-to-object/

JavaScript - 배열을 객체로 변환, 4가지 방법