{%hackmd BJrTq20hE %}
###### tags: `JaveScript` `核心篇` `class`
# class與this的進階方法
這個範例是要創造一個class與class內的方法，並且帶入資料執行這些方法。

// 準備要帶入的資料
const orderList = [
  {name: 'Jack',
   order: '小籠湯包',
   price: 65},
  {name: 'John',
   order: '珍珠奶茶',
   price: 45},
  {name: 'Alex',
   order: '排骨飯',
   price: 90},
  {name: 'Jon',
   order: '茄汁義大利麵',
   price: 120},
  {name: 'Marlin',
   order: '冬瓜牛奶',
   price: 55},
  {name: 'CHUN-CHIA',
   order: '西班牙海鮮燉飯',
   price: 180},
  {name: 'May',
   order: '快樂肥宅套餐',
   price: 250},
]

// 創造class 可以發現在最後都會有return this
// 這個目的在於可以用.連續執行方法，不用再從頭呼叫
class Filter{
  items = []
  temp = []
  constructor(data){
    this.items = data
  }
  listSearch(pro ,val){
    this.items.forEach((item, index) => {
        return item[pro] === val ? this.temp.push(this.items[index]) : ''
    })
    console.log(this.temp)
    return this
  }
    // 搜尋大於等於某個價格
  listUperPriceFilter(num){
    this.items = this.items.filter((item) => item.price >= num)
    console.log('listUperPriceFilter',this.items)
    return this
  }
    // 依照資料排序
  listSort(pro) {
    this.items.sort((a, b)=> b[pro] - a[pro])
    console.log('sortPrice', this.items)
    return this
  }
    // 刪除特定屬性資料
  listDelete(...pros) {
    this.items.map((item) => {
      Object.keys(item).forEach((pro) =>{
        if(pros.indexOf(pro) >= 0){
          delete item[pro]
        }
      })
    })
    console.log('listDelete', this.items)
    return this
  }
}
// 產生一個新的實體並且在建構式帶入資料
const myfilterList = new Filter(orderList)
// 執行class內的方法，因為方法有return this所以可以寫成用.連續執行
myfilterList.listSearch('name', 'Marlin')
    .listUperPriceFilter(90)
    .listSort('price')
    .listDelete('price' , 'order')
// 也可以分開執行
myfilterList.listSearch('name', 'Marlin')
myfilterList.listUperPriceFilter(90)
myfilterList.listSort('price')
myfilterList.listDelete('price' , 'order')

[class與this的進階方法](https://codepen.io/efzdamnp-the-lessful/pen/LYdajeb?editors=0011)