###### tags:`ALPHACampWeek6_學期2-2`

陣列三寶：filter&map&reduce+陣列使用this+路人三寶find&findIndex&forEach&every&some
===

統整
---

filter過濾器
---
- filter() 會回傳一個陣列，其條件是 return 後方為 true 的物件，很適合用在搜尋符合條件的資料。
## filter

1. 當`options.excludeCharacters.includes(character)` 的值是 `true` ，要回傳 `false` 給 filter 以剔除項目
2. 當`options.excludeCharacters.includes(character)` 的值是 `false` ，要回傳 `true` 給 filter 以保留項目

- MDN例子

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

- AC例子

//有函式版
const numbers  =[1,2,3,4,5]
function isLessThan3(number){
 return number < 3
}
console.log(numbers.filter(isLessThan3)) //[1, 2]

//匿名函式版
console.log(numbers.filter(number => number < 3)) //[1, 2]

map映射
---
- 使用 map() 時他需要回傳一個值，他會透過函式內所回傳的值組合成一個陣列。

- 如果不回傳則是 undefined
- **回傳數量等於原始陣列的長度**
- 這很適合將原始的變數運算後重新組合一個新的陣列。

- MDN例子

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

- AC例子

var numbers = [45, 4, 9, 16, 25];
var numbers2 = numbers.map(function(value, index){
  return value * 2;
});
console.log(numbers); // [45, 4, 9, 16, 25]
console.log(numbers2); // [90, 8, 18, 32, 50]

reduce 使成為
---
reduce() 和其他幾個差異就很大了，他可以與前一個回傳的值再次作運算，參數包含以下：

accumulator: 前一個參數，如果是第一個陣列的話，值是以另外傳入或初始化的值
currentValue: 當前變數
currentIndex: 當前索引
array: 全部陣列

const array1 = [1, 2, 3, 4];

// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
  (previousValue, currentValue) => previousValue + currentValue,
  initialValue
);

console.log(sumWithInitial);
// expected output: 10

- 卡斯柏的例子

// 原始資料在下面find
var reduceEmpty = people.reduce(function(accumulator, currentValue, currentIndex, array){
});
console.log(reduceEmpty);                 // 沒有條件，會是 undefined

var reducePlus = people.reduce(function(accumulator, currentValue, currentIndex, array){
  // 分別為前一個回傳值, 目前值, 當前索引值
  console.log(accumulator, currentValue, currentIndex);
  return accumulator + currentValue.age;  // 與前一個值相加
}, 0);                                    // 傳入初始化值為 0
console.log(reducePlus);                  // 總和為 46

var reducePlus = people.reduce(function(accumulator, currentValue, currentIndex, array){
  console.log('reduce', accumulator, currentValue, currentIndex)
  return Math.max( accumulator, currentValue.age ); // 與前一個值比較哪個大
}, 0);
console.log(reducePlus);                  // 最大值為 24

find
---
- find() 與 filter() 很像，但 find() 只會回傳一次值，且是第一個找到為 true 的值。

var people = [
  {
    name: 'Casper',
    like: '鍋燒意麵',
    age: 18
  },
  {
    name: 'Wang',
    like: '炒麵',
    age: 24
  },
  {
    name: 'Bobo',
    like: '蘿蔔泥',
    age: 1
  },
  {
    name: '滷蛋',
    like: '蘿蔔泥',
    age: 3
  }
];

var filterDouble = people.filter(function(item, index, array){
  return index % 2 === 1;    // 取得陣列中雙數的物件
});
console.log(filterDouble);   // Wang, 滷蛋 這兩個物件

findIndex
---
- 找出索引，如使用splice的時候就很有用

const peopleIndex = peoples.findIndex(people => people.id === id)
  if (peopleIndex === -1) return
  // if (list.some((movie) => movie.id === id)) {
  //   return alert('電影已經在收藏清單中!')
  // }
  // list.push(movie);
  peoples.splice(peopleIndex, 1)

foreach
---
- forEach 是這幾個陣列函式最單純的一個，不會額外回傳值，只單純執行每個陣列內的物件或值。

people.forEach(function(item, index, array){
  item.age = item.age + 1;         // forEach 就如同 for，不過寫法更容易
});

console.log(people);               // 全部 age + 1

every
---
- every() 可以檢查所有的陣列是否符合條件，這僅會回傳一個值 true or false，可以用來檢查陣列中的內容是否符合特定條件。

var array = [
  {
    name: 'Casper',
    like: '鍋燒意麵',
    age: 18
  },
  {
    name: 'Wang',
    like: '炒麵',
    age: 24
  },
  {
    name: 'Bobo',
    like: '蘿蔔泥',
    age: 1
  },
  {
    name: '滷蛋',
    like: '蘿蔔泥',
    age: 3
  }
];

var ans = array.every(function(item, index, array){
  console.log(item, index, array); // 物件, 索引, 全部陣列
  return item.age > 10 // 當全部 age 大於 10 才能回傳 true
});
console.log(ans); // false: 只要有部分不符合，則為 false

var ans2 = array.every(function(item, index, array){
  return item.age < 25
});
console.log(ans2); // true: 全部 age 都小於 25  

some
---
- some() 與 every() 非常接近，都是回傳 true or false，差異僅在 every() 需完全符合，some() 僅需要部分符合。

陣列使用this
---
- 預設的陣列行為內的 this 是指向 window (本篇中除了 reduce() 是傳入初始資料)，如果要改，可以在 function 後傳入。

var ans3 = people.forEach(function(item, index, array){
  console.log(this) // 這邊的 this 就會使用後方傳入的
  return item.age < 25
}, people);