---
# System prepended metadata

title: class擴充原始陣列的方法
tags: [核心篇, class, JaveScript]

---

{%hackmd BJrTq20hE %}
###### tags: `JaveScript` `核心篇` `class`
# class擴充原始陣列的方法
這個範例是繼承原始Array並添加新的方法，好處是不會動到原始Array的prototype，並且能使用原本Array的所有方法

```javascript=
// 準備要帶入的資料
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},
]
// 創造一個繼承Array的class
class NewArry extends Array{
  constructor(data){
    // 因為要把陣列帶入陣列如果不展開就會變成[[],[]]
    super(...data)
  }
  // 寫入新的方法
  sumPrice(){
    return this.reduce((pre, cur) => pre + cur.price ,0)
  }
  sortByParminter(par, ascend = true){
    return this.sort((a, b) => ascend ? a[par] - b[par] : b[par] - a[par])
  }
}

const myOrder = new NewArry(orderList)
console.log(myOrder)
console.log(myOrder.sumPrice())
console.log(myOrder.sortByParminter('price' ,false))
```
[class擴充原始陣列的方法](https://codepen.io/pen/?editors=0011)