# [JS30] Day.4 Array Prototype
###### tags: `JS30`
## 任務 Task
學習常用的 `Array Prototype` 並解題目。
==完成時間：1hr==
## 步驟 Step
看影片一次再自己打一次。
## 筆記 Note
### .filter()
* 用法：經過設立條件選出符合條件的元素，產生新的 `Array`。
* 語法：
1. filter((element) => {condition})
```javascript=
const fruit = ['tomato', 'apple', 'lemon', 'strawberry' ];
let fiveWord = fruit.filter(five => five.length == 5);
console.log(fiveWord); //['apple', 'lemon']
```
2. filter(callbackfuction)
```javascript=+
let moreFive = (e) => {
return e.length > 5;
}
let answer = fruit.filter(moreFive);
console.log(answer); //['tomato', 'strawberry']
```
### .map()
* 用法：經過 `function` 產生新的 `Array`
* 語法：
1. map((element) => {condition})
```javascript=
const num = [1, 2, 3, 4 ];
let square = num.map(x => x**2);
console.log(square); //[1, 4, 9, 16]
```
2. map(callbackfuction)
```javascript=+
let plusFive = (e) => {
return e + 5;
}
let answer = num.map(plusFive);
console.log(answer); //[6, 7, 8, 9]
```
* 如果 `return` 的 `Array` 還有要做其他的事的話，最好還是用 `forEach` 或是 `for...of`。
### .sort()
* 用法：設立（a, b）元素去做比較排列==改變原 `Array`==，如果不設條件，會以 `string` 元素去做排列。
* 排列的方法為：如果 `retun` ==正數==則排==前面== `return` ==負數==則排==後面==
* 語法：
1. sort()
```javascript=
const str = ['bee', 'apple', 'deer', 'cake' ];
console.log(str.sort()); //['apple', 'bee', 'cake', 'deer']
```
2. sort((a,b) => {condition})
```javascript=+
let str_length = str.sort((a, b) => a.length > b.length ? 1 : -1);
console.log(str_length);//['bee', 'cake', 'deer', 'apple']
```
3. sort(compareFunction)
```javascript=+
let strLength = (a,b) => {
if(a.length > b.length){
return 1;
}return -1;
};
let answer = str.sort(strLength);
console.log(answer); //['bee', 'cake', 'deer', 'apple']
```
* 酷用法：如果今天是比較數字只要 `return a - b` 就可以數字排列了（因為 `a-b` 不是正就是負）。
```javascript=
const num = [2,1,98,5,7,4,8,1];
console.log(num.sort((a,b) => a - b));
//[1,1,2,4,5,7,8,98]
```
### .reduce()
* 用法：得出一個`previousValue`。每 `callback` 一次，就將 `previousValue` 做一次 `return` 。第一個`currentValue` 的 `currentIndex` 為 `1` 。如果有設 `initialValue` ，則一開始的 `previousValue` 為 `initialValue` 且 `currentIndex` 為 `0`。
* 語法：
1. reduce((previousValue, currentValue,currentIndex) => {condition})
```javascript=
const num = [1, 2, 3, 4];
let sum = num.reduce((total, x) => {
return total + x;
})
console.log(sum);//10
```
2. reduce(callbackFunction, initialValue)
```javascript=
const people = ['Jim', 'Annie', 'John'];
let length = (strLength, e) => {
return strLength + e.length;
}
let sum_peopleLength = people.reduce(length, 0);
console.log(sum_peopleLength);//12
```
:::danger
如果沒有設 `initialValue` 結果會是 `Jim54` 因為一開始的 `previousValue = Jim`。
:::
### Array.from()
* 用法：從 `Array` 或是可變成 `Array` 的物件，建立一個新的 `Array`
* 語法：
1. Array.from(arraylink)
```javascript=
console.log(Array.from('foo'))//['f', 'o', 'o']
```
2. Array.from(arraylink,mapfunction)
```javascript=
console.log([1, 2, 3], x => x * 2)//[2, 4, 6]
```
## 遇到問題 Problem
1. 第五題解不出來
* 解題思路為先找到文件當中`category`的地方，把裡面 `a` 的 `NodeList` 用 `Array.from` 變成`Array` 並丟給一個變數，然後用 `map()` 去 `filter` 只有 `includes` "de" 文字的項目。
2. 第八題解不出來：
* 解題思路為製做一個 `object` 把文字丟進去，並且遇到重複的文字時，將 `value` 加一。
* 要注意的地方是因為最後產出的是 `object` 所以 `initialValue` 要設 `{}` 且因為一開始是空物件，所以要設定如果 `obj[item]` 是 `undifined` 時要建立物件 `obj[item]=0`。
<br>
:::warning
這一題真的是蠻酷的，要想一下才能知道他再幹嘛。
:::
## 想法 Idea
:::warning
:bulb: <font color=black>做一個表格涵蓋今天所做的東西
</font>
:::
### 方法 method
<iframe height="300" style="width: 100%;" scrolling="no" title="Table sort and calculate" src="https://codepen.io/jim876633/embed/qBxQJgY?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/jim876633/pen/qBxQJgY">
Table sort and calculate</a> by Jim (<a href="https://codepen.io/jim876633">@jim876633</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
### 🔮 Annie method
## 連結
[Array](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array)
Sign in with Wallet
Connect another wallet