owned this note
owned this note
Published
Linked with GitHub
# 【JS30】Day4 - Array Cardio Day 1
###### tags: `filter()`、`map()`、`sort()`、`reduce()`
## 陣列的多種用法
早在之前看了鐵人賽關於js陣列的文章,大約有些概念。本篇會加上ES6的寫法來複習。
**1. .filter()**
filter()可以用來過濾資料,**用來搜尋陣列中符合條件的物件,且只能有一個**,當回傳 true 數量超過兩者以上,那會以第一個為優先,通常會適合搜尋來搜尋特定 id。
實作練習可以搭配[六角學院的F2E前端修煉活動](http://www.hexschool.com/2018/05/09/2018-05-09-the_f2e/)中,第2周的任務(JS篩選功能)。
```javascript
const fifteen = inventors.filter(inventor => (inventor.year >= 1500 && inventor.year < 1600));
```
針對inventors這個陣列去過濾,上方用到了ES6箭頭函式的寫法。
```javascript
(參數 => (執行過濾條件)); //箭頭函式
console.table(fifteen);
```
範例內容中的[console.table()](https://developer.mozilla.org/en-US/docs/Web/API/Console/table),可以將表格數據顯示為表格。
---
**2. .map()**
針對陣列裡面**每一個項目回傳新的值**。
**用來處理陣列回傳新值產生一個新陣列**,要特別注意回傳的值數量與原始陣列長度相同,所以留空的 return 則會產生 ```undefined```。
```javascript
const fullNames = inventors.map(inventor => `${inventor.first} ${inventor.last}`);
```
```javascript
//create a list of Boulevards in Paris that contain 'de' anywhere in the name
// https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
const category = document.querySelector('.mw-category');
const links = Array.from(category.querySelectorAll('a'));
const de = links
.map(link => link.textContent)
.filter(streetName => streetName.includes('de'));
```
---
**3. .sort()**
用於陣列內的項目進行排序。
下方箭頭函式的寫法,翻譯為:代入a、b參數,當a.year > b.year成立,回傳1;若不成立,則回傳-1。總之,```?```後面是放```true狀況下回傳值 : false狀況下回傳值```。
```javascript
// Array.prototype.sort()
// 3. Sort the inventors by birthdate, oldest to youngest
// const ordered = inventors.sort(function(a, b) {
// if(a.year > b.year) {
// return 1;
// } else {
// return -1;
// }
// });
const ordered = inventors.sort((a, b) => a.year > b.year ? 1 : -1);
console.table(ordered);
```
```javascript
// 5. Sort the inventors by years lived
const oldest = inventors.sort(function(a, b) {
const lastInventor = a.passed - a.year;
const nextInventor = b.passed - b.year;
return lastInventor > nextInventor ? -1 : 1;
});
```
```javascript
// Sort the people alphabetically by last name
const alpha = people.sort((lastOne, nextOne) => {
const [aLast, aFirst] = lastOne.split(', ');
const [bLast, bFirst] = nextOne.split(', ');
return aLast > bLast ? 1 : -1;
});
```
---
**4. .reduce()**
接收到前一個回傳的值供。下一個物件使用。很適合用在**累加與比對**上。
```javascript
// Array.prototype.reduce()
// 4. How many years did all the inventors live?
const totalYears = inventors.reduce((total, inventor) => {
return total + (inventor.passed - inventor.year);
}, 0);
```
```javascript
//Reduce Exercise
// Sum up the instances of each of these
const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck', 'pogostick'];
const transportation = data.reduce(function(obj, item) {
if (!obj[item]) {
obj[item] = 0;
}
obj[item]++;
return obj;
}, {});
console.log(transportation);
```