JavaScript： class ( 類別 )

首先必須知道 class 只是 ES6 的語法糖 ( syntactical sugar )，並不是真的以類別為基礎的物件導向，在 JavaScript 當中仍舊是原型為基礎的物件導向。

簡單範例

類別用 class 來定義，使用 constructor 來定義建構函式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

class Animal {
  constructor (family, name, color, size) {
    this.family = family;
    this.name = name;
    this.color = color;
    this.size = size;
  }
  move () {
    console.log(`${this.name} 移動`);
  }
}

const fufu = new Animal('小狗', '富富', '黑色', '小型');
fufu.move(); // 富富 移動

類別命名時建議使用大駝峰命名法

TypeScript 從零開始：聯合型別

TypeScript 是 JavaScript 的超集合，將強型別帶入 JavaSript，並提供對 ES6 的支援，而 TypeScript 由 Microsoft 開發，程式開源於 GitHub 上。

學習資源參考 TypeScript 新手指南

TypeScript 從零開始：任意值、預設型別判定

TypeScript 是 JavaScript 的超集合，將強型別帶入 JavaSript，並提供對 ES6 的支援，而 TypeScript 由 Microsoft 開發，程式開源於 GitHub 上。

學習資源參考 TypeScript 新手指南

TypeScript 從零開始：原始型別

TypeScript 是 JavaScript 的超集合，將強型別帶入 JavaSript，並提供對 ES6 的支援，而 TypeScript 由 Microsoft 開發，程式開源於 GitHub 上。

學習資源參考 TypeScript 新手指南

JavaScript：ES6 - 解構賦值

ES6 解構賦值的方法就像鏡子一樣，能夠一一的設定變數去取得物件、陣列的元素。

從陣列中解構賦值

1
2
3
4

const people = ['小奇', '小念', '小淵', '小富', '小昱'];
const [chi, nian, yuan, fu, yu] = people;

console.log(chi, nian, yuan, fu, yu); // 小奇 小念 小淵 小富 小昱

甚至也能 ↓

1
2
3

const people = ['小奇', '小念', '小淵', '小富', '小昱'];
const [chi, nian, , , yu] = people;
console.log(chi, nian, yu); // 小奇 小念 小昱

如果在當中留下空格的話，也能直接略過對應的元素，因此可以彈性的設定自己需要的變數。

JavaScript：indexOf()

indexOf() 可以尋找你要找尋的”值”當中首次出現的位置，若是找不到匹配的值會回傳 -1 的值，如果有找到則會回傳取得位置的值。

利用 indexOf 尋找元素

1
2
3
4

const name = ['小奇', '小念', '小淵', '小富'];

console.log(name.indexOf('小淵')); // 回傳 2，因為是在索引位置 2 找到
console.log(name.indexOf('小昱')); // 回傳 -1，

JavaScript：ES6 - ... 其餘及展開

ES6： ... 其餘及展開

ES6 多了一個 ... 的其餘及展開的方法，而這個方法可以實作在許多的用途上面，那就讓我們來看看 ... 的實作方法吧！

合併陣列的方式

過去我們要合併陣列時，都會使用 concat 的陣列方法，但是現在可以直接通過 ... 展開來實踐。

1
2
3
4
5

let groupA = ['小明', '杰倫', '阿姨'];
let groupB = ['老媽', '老爸'];
let groupAll = [...groupA, ...groupB];
console.log(...groupA); // 回傳 小明 杰倫 阿姨
console.log(groupAll); // 回傳 ['小明', '杰倫', '阿姨', '老媽', '老爸']

這邊可以看到如果直接回傳 ...groupA 它是會一個一個展開取出裡面的值。

JavaScript：陣列方法

這篇文章介紹的是陣列的方法，一共會介紹下列幾種：

• forEach
• map
• filter
• find
• every
• some
• reduce
• fill
• sort
• concat
• Array.from

props

props 是把資料從外層為內層傳遞的一個方法。

props 是單向數據流

單向數據流的意思是，只能單向的從外部傳入’資料’，而不能從內部元件傳出’資料’。如果你想要這麼做的話可以使用 ‘emit’ 來向外推送資料。

Vue 元件

• 元件資料與外層的資料是分別的。

為什麼需要元件？

• 避免單一檔案過大
• 在很多檔案當中都可以拉出來重複使用、管理方便