JavaScript 陣列處理方法map(), every(), some(), reduce() filter(), find(), forEach(),

陣列定義:
陣列就是一個「有序」、「有索引」、「有值」的一個「集合」。
是由一對中括號 [ ] 組成， [ ] 裡面為陣列元素，每個元素以逗號分開，
可以是純數組，或者數組對象。

map

map沒有返回值，適合用在對陣列進行 ‘修改’ 時
不影响原有的数组大小；
接受一個 callback 函式，callback 可以有三個參數( currentValue, index, array)，

• currentValue 代表目前處理到的元素的值
• index 代表目前處理到的元素的索引
• array 代表陣列本身

map在數值是單一簡單類型時，並不會改變數組

const arr = [1, 2, 3]
const result = arr.map(item => {
  item = item * 3;
  return item;
});
console.log('arr', arr);     // [1, 2, 3]
console.log('result', result);  // [3, 6, 9]

在數值是對象複雜類型時，若是透過’直接’賦值的方式則會改變原數組

const arr = [
  { data: 1 },
  { data: 1 },
  { data: 1 }
]
const result = arr.map(item => {
  item.data= item.data+ 2;  
  return item
});
console.log('arr', arr);  //原数组被改变，所有item下的data都等于3
/*const arr = [
  { data: 3 },
  { data: 3 },
  { data: 3 }
]*/

一般情況下不建議改變原數組而是另外賦值給新數組。若不想改變原數組則可以使用以下:

const arr = [
  { data: 1 ,id:2},
  { data: 1 ,id:3},
  { data: 1 ,id:4}
]
const newArry= arr.map(item => ({
  ...item,//es6省略符號 相當於 id:item.id
  data: item.data+ 2 //不直接通过item.data = item.data+ 2
}));
console.log('arr', arr);
console.log('newArry', newArry);

filter

filter 不会改变原数组，它返回过滤后的新数组。遍歷一個陣列中的每個元素,很適合用在過濾符合條件時。
只能用return返回其結果，並在後面的條件中，為true的加入新數組，false則移除數組
接受一個 callback 函式，callback 可以有三個參數(element, index, array)，

• element：陣列元素的值。
• index：陣列元素的所在位置。
• arr：已經過 filter 處理的陣列

var numbers=[20, 10, 9, 25, 1, 3, 8, 11]; 
var result=numbers.filter(function(element, index, arr){ 
return element >= 10; 
}); 
console.log(result); // [20, 10, 25, 11]

如果是更複雜的判斷式時顯然一句代碼式沒辦法滿足需求的，這時候可以新增一個封裝，用來判斷複雜條件，最終return true或false即可:

var arr = [
  { id: 15 },
  { id: -1 },
  { id: 0 },
  { id: 3 },
  { id: 12.2 },
  { },
  { id: null },
  { id: NaN },
  { id: 'undefined' }
];
var arr = [
  { id: 15 },
  { id: -1 },
  { id: 0 },
  { id: 3 },
  { id: 12.2 },
  { },
  { id: null },
  { id: NaN },
  { id: 'undefined' }
];

var invalidEntries = 0;

function isNumber(obj) {
  return obj !== undefined && typeof(obj) === 'number' && !isNaN(obj);
}

function filterByID(item) {
  if (isNumber(item.id) && item.id !== 0) {
    return true;
  } 
  invalidEntries++;
  return false; 
}

var arrByID = arr.filter(filterByID);

console.log('Filtered Array\n', arrByID); 
// Filtered Array
// [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }]

console.log('Number of Invalid Entries = ', invalidEntries); 
// Number of Invalid Entries = 5

every

every() 可以檢查所有的陣列是否符合條件，這僅會回傳一個值 true or false，可以用來檢查陣列中的內容是否符合特定條件。
接受一個 callback 函式，callback 可以有三個參數(item, index, array)，

• element：陣列元素的值。
• index：陣列元素的所在位置。
• arr：陣列

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

every看似不常被使用到，實際上在開發時其實 every 可以用來做後端的表單驗證。比方說註冊時前端會傳來幾個欄位：user、password、gender、name、email，假設這些資料存在 data 裡面好了。

換句話說，data 含有這五個欄位。

這時就可以用 every 來檢查他們是不是都含有值：

  const requirements = ['user', 'password', 'gender', 'name', 'email'];
  if (requirements.every(x => array[x] !== undefined)) {
    console.log('必要的欄位都不是空值');
    // 必要的欄位都不是空值
  } else {
    console.log('有些必要的欄位是空值');

    // 有些必要的欄位是空值
  }

some

some() 與 every() 非常接近，都是回傳 true or false，差異僅在 every() 需完全符合，some() 僅需要部分符合。接受一個 callback 函式，callback 可以有三個參數(item, index, array)，

• element：陣列元素的值。
• index：陣列元素的所在位置。
• arr：陣列

var ans = people.some(function(item, index, array){
  return item.age > 10 // 當全部 age 大於 10 才能回傳 true
});
console.log(ans);  // true: 只要有部分符合，則為 true

同樣 some 也可以用來這樣檢查。假設 facebook、twitter、github 的社群帳號他一定要有留至少一個，不能都不填的話，就可以這樣做：

const socialAccounts = ['facebook', 'twitter', 'github'];
if (socialAccounts.some(x => data[x] !== undefined)) {
    // 至少有填寫一個社群帳號
} else {
    // 完全沒有填寫社群帳號
}

find

find() 與 filter() 很像，但 find() 只會回傳一次值，且是第一次為 true 的值。接受一個 callback 函式，callback 可以有三個參數(item, index, array)，

• element：陣列元素的值。
• index：陣列元素的所在位置。
• arr：陣列

var findAgeThan5 = people.find(function(item, index, array){
  return item.age > 5;           // 取得大於五歲的
});

reduce

educe() 和其他幾個差異就很大了，他可以與前一個回傳的值再次作運算。常常拿來應用於陣列中每個元素的「累加」或是「比較」
接受一個 callback 函式，callback 可以有三個參數(accumulator, currentValue, currentIndex, array), initialValue)

• accumulator：經由個別 currentValue 加總的累計值
• currentValue：Array 的個別 item
• currentIndex：Array item 的索引
• array：呼叫該 Array method 的陣列
• initialValue：第一次呼叫時要傳入的累加器初始值。（選擇性 )若沒有提供初始值，則原陣列的第一個元素將會被當作初始的累加器。

const arr = [1, 2, 3, 4, 5];
const reduceArr = arr.reduce((accumulator, currentValue) => {
  console.log(accumulator); // 0, 1, 3, 6, 10
  console.log(currentValue); // 1, 2, 3, 4, 5
  return accumulator + currentValue
}, 0);