走在職業的道路上總是有很多迷惘。 不後悔曾經的自己選擇了前端這條路，即使前方佈滿了荊棘。 因此想要留下點什麼，也可以記錄下在這條路上的種種。 或許在未來的某個時間點，可以以另一種眼光看待這曾經的當下。
2019-06-10
JavaScript 1 + 1 ✧ 統計字母
## 題目
計算陣列中各個字母出現的次數。
['L','o','r','e','m','i','p','s','u','m','d','o','l','o','r','s','i','t','a','m','e','t','c','o','n','s','e','c','t','e','t','u','r','a','d','i','p','i','s','i','c','i','n','g','e','l','i','t','A','d','c','u','l','p','a','m','a','g','n','a','m','p','r','a','e','s','e','n','t','i','u','m','e','t','q','u','a','s','i','s','t','e','r','e','p','r','e','h','e','n','d','e','r','i','t','p','e','r','s','p','i','c','i','a','t','i','s','i','u','r','e','a','d','i','p','i','s','c','i','r','e','p','e','l','l','a','t']
## 思路
1. 建立一張空的資料表 (物件)。
2. 檢查原始資料中每一筆的字母是否在新資料中出現過。
3. 如果有，則統計數字 +1。
4. 如果沒出現過，建立該筆資料，且計數為 1。
5. 檢查完所有原始資料後，輸出統計結果。
## 基本程式
### 原始寫法
```
const data = ['L','o','r','e','m','i','p','s','u','m','d','o','l','o','r','s','i','t','a','m','e','t','c','o','n','s','e','c','t','e','t','u','r','a','d','i','p','i','s','i','c','i','n','g','e','l','i','t','A','d','c','u','l','p','a','m','a','g','n','a','m','p','r','a','e','s','e','n','t','i','u','m','e','t','q','u','a','s','i','s','t','e','r','e','p','r','e','h','e','n','d','e','r','i','t','p','e','r','s','p','i','c','i','a','t','i','s','i','u','r','e','a','d','i','p','i','s','c','i','r','e','p','e','l','l','a','t'];
const letterCount = {};
for (let i = 0; i < data.length; i++) {
if (letterCount[data[i]]) {
letterCount[data[i]] = letterCount[data[i]] + 1;
} else {
letterCount[data[i]] = 1;
}
}
console.log(letterCount);
```
### 變數優化
Hint：建立變數保管常用數值
```
const data = ['L','o','r','e','m','i','p','s','u','m','d','o','l','o','r','s','i','t','a','m','e','t','c','o','n','s','e','c','t','e','t','u','r','a','d','i','p','i','s','i','c','i','n','g','e','l','i','t','A','d','c','u','l','p','a','m','a','g','n','a','m','p','r','a','e','s','e','n','t','i','u','m','e','t','q','u','a','s','i','s','t','e','r','e','p','r','e','h','e','n','d','e','r','i','t','p','e','r','s','p','i','c','i','a','t','i','s','i','u','r','e','a','d','i','p','i','s','c','i','r','e','p','e','l','l','a','t'];
const letterCount = {};
for (let i = 0; i < data.length; i++) {
const item = data[i];
if (letterCount[item]) {
letterCount[item] = letterCount[item] + 1;
} else {
letterCount[item] = 1;
}
}
console.log(letterCount);
```
### 運算子優化
```
const data = ['L','o','r','e','m','i','p','s','u','m','d','o','l','o','r','s','i','t','a','m','e','t','c','o','n','s','e','c','t','e','t','u','r','a','d','i','p','i','s','i','c','i','n','g','e','l','i','t','A','d','c','u','l','p','a','m','a','g','n','a','m','p','r','a','e','s','e','n','t','i','u','m','e','t','q','u','a','s','i','s','t','e','r','e','p','r','e','h','e','n','d','e','r','i','t','p','e','r','s','p','i','c','i','a','t','i','s','i','u','r','e','a','d','i','p','i','s','c','i','r','e','p','e','l','l','a','t'];
const letterCount = {};
for (let i = 0; i < data.length; i++) {
const item = data[i];
if (letterCount[item]) {
letterCount[item] += 1;
} else {
letterCount[item] = 1;
}
}
console.log(letterCount);
```
### 三元運算子優化
```
const data = ['L','o','r','e','m','i','p','s','u','m','d','o','l','o','r','s','i','t','a','m','e','t','c','o','n','s','e','c','t','e','t','u','r','a','d','i','p','i','s','i','c','i','n','g','e','l','i','t','A','d','c','u','l','p','a','m','a','g','n','a','m','p','r','a','e','s','e','n','t','i','u','m','e','t','q','u','a','s','i','s','t','e','r','e','p','r','e','h','e','n','d','e','r','i','t','p','e','r','s','p','i','c','i','a','t','i','s','i','u','r','e','a','d','i','p','i','s','c','i','r','e','p','e','l','l','a','t'];
const letterCount = {};
for (let i = 0; i < data.length; i++) {
const item = data[i];
letterCount[item] = letterCount[item] ? letterCount[item] + 1 : 1 ;
}
console.log(letterCount);
```
### 三元運算子變形
```
const data = ['L','o','r','e','m','i','p','s','u','m','d','o','l','o','r','s','i','t','a','m','e','t','c','o','n','s','e','c','t','e','t','u','r','a','d','i','p','i','s','i','c','i','n','g','e','l','i','t','A','d','c','u','l','p','a','m','a','g','n','a','m','p','r','a','e','s','e','n','t','i','u','m','e','t','q','u','a','s','i','s','t','e','r','e','p','r','e','h','e','n','d','e','r','i','t','p','e','r','s','p','i','c','i','a','t','i','s','i','u','r','e','a','d','i','p','i','s','c','i','r','e','p','e','l','l','a','t'];
const letterCount = {};
for (let i = 0; i < data.length; i++) {
const item = data[i];
letterCount[item] ? (letterCount[item] += 1) : (letterCount[item] = 1);
}
console.log(letterCount);
```
### 結果輸出
```
{
L: 1,
o: 4,
r: 10,
e: 17,
m: 6,
i: 17,
p: 9,
s: 10,
u: 6,
d: 5,
l: 5,
t: 11,
a: 10,
c: 6,
n: 5,
g: 2,
A: 1,
q: 1,
h: 1
}
```
## 進階處理
### 概念
針對資料進行排序，使呈現結果接近一般使用者閱讀習慣。
Hint：需拷貝一份原始資料，以免在資料操作時影響到原始資料。
### 程式
```
const data = ['L','o','r','e','m','i','p','s','u','m','d','o','l','o','r','s','i','t','a','m','e','t','c','o','n','s','e','c','t','e','t','u','r','a','d','i','p','i','s','i','c','i','n','g','e','l','i','t','A','d','c','u','l','p','a','m','a','g','n','a','m','p','r','a','e','s','e','n','t','i','u','m','e','t','q','u','a','s','i','s','t','e','r','e','p','r','e','h','e','n','d','e','r','i','t','p','e','r','s','p','i','c','i','a','t','i','s','i','u','r','e','a','d','i','p','i','s','c','i','r','e','p','e','l','l','a','t'];
const data2 = [...data].sort();
const letterCount = {};
for (let i = 0; i < data2.length; i++) {
const item = data2[i];
letterCount[item] ? (letterCount[item] += 1) : (letterCount[item] = 1);
}
console.log(letterCount);
```
### 結果輸出
```
{
A: 1,
L: 1,
a: 10,
c: 6,
d: 5,
e: 17,
g: 2,
h: 1,
i: 17,
l: 5,
m: 6,
n: 5,
o: 4,
p: 9,
q: 1,
r: 10,
s: 10,
t: 11,
u: 6
}
```