# JavaScript 陣列處理方法
###### tags: `JavaScript` `JS 直播班 - 2021 秋季班`
## <font color=#BB183D>陣列範例:</font>

let data=[2,6,10,20,13];

## <font color=#BB183D> 1. forEach(): </font>
不會回傳值,只會執行陣列裡面的元素

data.forEach(function(item){ //參數:(currentValue , index , array)
  console.log(item);
})
// 2 6 10 20 13 

### <font color=#188DBB>參數:</font>
這個 callback 函式將會把 Array 中的每一個元素作為參數，帶進 callback 函式裡，每個元素各執行一次，接收三個參數：
forEach中參數順序是固定的,但是自訂參數名稱
1. currentValue : 目前到達的陣列元素
2. index : 目前到達的陣列元素的索引
3. array : 目前被使用到的陣列

## <font color=#BB183D>2. map():</font>
需要回傳一個值,並會用forEach回傳的值組合成一個陣列
參數跟forEach一樣

let newArr=data.map(function (item){ //參數:(currentValue , index , array)
    return item+=10;
})
console.log(newArr);
// 透過map將return的值放到newArr中產生新陣列
// 12 , 16 , 20 , 30 , 23

## <font color=#BB183D>3. filter():</font>
將陣列元素進行過濾,並回傳值放到新陣列~

let newbArray=data.filter(function(item){ //參數:(currentValue , index , array)
    return item>6;
})
console.log(newbArray);
//10,20,13

## <font color=#BB183D>4. reduce():</font>
將一個累加器及陣列中每項元素（由左至右）傳入回呼函式，將陣列化為單一值。

const array1 = [1, 2, 3, 4];
const reducer = (previousValue, currentValue) => previousValue + currentValue;  

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));  //參數:(accumulator, currentValue , index , array)
// expected output: 10     accumulator(此範例為reducer)是一個累加器

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15

## <font color=#BB183D>5. find():</font>
用來查找元素 , find() 只會回傳一次值，且是第一次為 true 的值。

const dataB=[5,1,10,5,23];
let cVar=dataB.find(function(item,index){
    console.log(`目前索引:${index}`); //目前索引:0
    return item === 5;
})
console.log(cVar); // 5

## <font color=#BB183D>6. every():</font>
檢查所有的陣列是否符合條件，這僅會回傳一個值 true or false，可以用來檢查陣列中的內容是否符合特定條件

let ans=data.every(function(item){
    return item<100; // 全部小於100才會true
})
console.log(ans); // true

let ans2=data.every(function(item){
    return item<1; // 全部小於1才會true
})
console.log(ans2); // false

## <font color=#BB183D>7. some():</font>
跟every()很像,但every要全部都符合才會true,some只要部分符合就會true

let ans=data.some(function(item){
    return item<100; // 元素中有小於100就會true
})
console.log(ans); // true

let ans2=data.some(function(item){
    return item<1; // 全部都不符合所以是false
})
console.log(ans2); // false

## <font color=#BB183D>8. 用indexOf 篩選出 不重複的陣列</font>
#### 步驟二: 取得所有產品的 category 名稱
> 透過 map() 針對 productData 做處理，它可以只取出所有產品的 category 名稱，並指派給 unSort 這個變數 (JS 第 64 - 66 行)

let unSort = productData.map(function(item) {
    return item.category;
});
console.log(unSort); // 結果為 ["床架","床架","窗簾","床架","收納","床架","收納","床架"]

#### 步驟三: 移除重複的 category 名稱
> 透過 filter() 針對 unSort 做處理，並指派給 sorted 這個變數 (JS 第 69 - 72 行)

let sorted = unSort.filter(function(item, i){
    // 因為 indexOf() 只會回傳第一個找到的匹配元素之索引，搭配 filter() 做判斷就可以只保留不重複的元素
    return unSort.indexOf(item) === i;
})
console.log(sorted); // 結果為 ["床架","窗簾","收納"]


## 參考資料
[JavaScript 陣列處理方法 [filter(), find(), forEach(), map(), every(), some(), reduce()]](https://wcc723.github.io/javascript/2017/06/29/es6-native-array/)
[Array.prototype.reduce()](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce)
[陣列](https://eyesofkids.gitbooks.io/javascript-start-from-es6/content/part3/array.html)