---
tags: JAVASCRIPT
---
# [筆記] 陣列處理方法 Array
[教學筆記](https://wcc723.github.io/javascript/2017/06/29/es6-native-array/)
- filter()
- find()
- forEach()
- map()
- every()
- some()
- reduce()
### filter
- 回傳array
- 搜尋符合條件的資料
### find
- 回傳找到符合條件的第一個值
### forEach
- 不會回傳值
- 如同 for
### map
- 回傳值的數量等於array長度
- 適用於將原始變數運算後再重組合成一個新的陣列
### every
- 回傳一個值，true或false
- 檢查陣列中所有值是否符合特定條件
### some
- 回傳一個值，true或false
- 檢查陣列中是否符合特定條件的值
### reduce
- [MDN說明](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce)
### join
- array 合成字串　
### unshift
- 從前面插入值
### shift
- 從前面"刪值"
### splice
- 從Array中添加/刪除項目，回傳被刪除的項目。
- array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
- [slice()、splice()、split() 傻傻分不清 - Peggy Chan - Medium](https://medium.com/@bebebobohaha/slice-splice-split-%E5%82%BB%E5%82%BB%E5%88%86%E4%B8%8D%E6%B8%85-46d9c8992729)
### split
- 分割字串成字串組
- stringObject.split(separator,how_many): 可控制傳回最大長度
### slice
- 複製開始與結束點（結束點不算）中的內容
- arr.slice(begin, end)

### concat
- 用來合併兩個或多個陣列
- 回傳新的array

## 應用

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

console.log(people)
// 回傳array，搜尋符合條件的資料
var filterAgeThan5 = people.filter(function (item, index, array) {
    return item.age > 5
});
console.log(filterAgeThan5)
// 雖有２個，但只回傳第一個
var findAgeThan10 = people.find(function (item, index, array) {
    return item.age > 10
});
console.log(findAgeThan10)
// 不會額外回傳值，只單純執行每個陣列內的物件或值
// 如同for
var findEveryName = people.forEach(function (item, index, array) {
    console.log(item.name);
});
// 使用 map() 時他需要回傳一個值，他會透過函式內所回傳的值組合成一個陣列。
// 回傳數量等於原始陣列的長度
// 這很適合將原始的變數運算後重新組合一個新的陣列。
var mapEat = people.map(function (item, index, array) {
    if (item.like !== '蘿蔔泥') {
        return `${item.like} 好吃`;
    } else {
        return `${item.like} 不好吃`;
    }
});
console.log(mapEat);
// 僅會回傳一個值 true or false
// 檢查陣列中的內容是否符合特定條件
var ans = people.every(function (item, index, array) {
    console.log(item, index, array); // 物件, 索引, 全部陣列
    return item.age > 10 // 當全部 age 大於 10 才能回傳 true
});
console.log(ans); // false: 只要有部分不符合，則為 false

var ans2 = people.every(function (item, index, array) {
    return item.age < 25
});
console.log(ans2); // true: 全部 age 都小於 25
// some和every的差別是，some只要部分符合即可
// reduce
const average = function() {
    const nums = Array.from(arguments);
    const total = nums.reduce(function(acc, val) {
        return acc + val
    }, 0)
    console.log('total', total)
    return total/nums.length
}
console.log('average', average(1, 2, 3, 4, 5))

# Array的方法
## Array.from()
Array.from() 方法會從類陣列（array-like）或是可迭代（iterable）物件建立一個新的 Array 實體。

console.log(Array.from('foo'));
// expected output: Array ["f", "o", "o"]

console.log(Array.from([1, 2, 3], x => x + x));
// expected output: Array [2, 4, 6]
var m = new Map([[1, 2], [2, 4], [4, 8]]);
console.log(m);
console.log(Array.from(m)); 
// [[1, 2], [2, 4], [4, 8]]
function f() {
  return Array.from(arguments);
}
f(1, 2, 3);
// [1, 2, 3]