在我們日常的實際開發中，經常遇到需要各種需要處理的數組，JavaScript中雖然提供了各式各樣的方法，但本菜鳥很長一段時間都分不清楚這些是幹什麼用的，也偷懶不去看……

前一段時間在網上衝浪時，看到一個評論里有人用符號表示了一個方法，覺得十分形象生動，於是便花了半天時間重新學習了一些常見的數組方法，並用符號、圖標進行具象化的整理，我覺得本菜鳥今天又博學了一點點。

一、map

1. map返回新數組，不改變原數組。
2. 原始數組的每一項都會調用提供的函數並返回新的數組。

[●, ●, ■, ●].map(● => ■) → [■, ■, ■, ■]

let arr = ['杜甫', '李白', '李商隱', '白居易'];
let mapArr = arr.map( e => '蘇軾' );
// console.log(mapArr): ["蘇軾", "蘇軾", "蘇軾", "蘇軾"]

二、filter

1. filter返回新數組，不改變原數組。
2. 數組內的每一項通過函數處理後，返回一個各項都符合條件的數組。 在下面這個數組中，如果想把宋朝的詩詞人過濾出來，就可以使用filter方法。

[○, △, □, △].filter( △ => true )  →  [△, △]

let arr = [
  { id: 0, name: '杜甫', age: '唐' },
  { id: 1, name: '李白', age: '唐' },
  { id: 2, name: '李商隱', age: '唐' },
  { id: 3, name: '蘇軾', age: '宋' },
  { id: 4, name: '辛棄疾', age: '宋' }
];
let filterArr = arr.filter( e => e.age === '宋' );

/**
 * console.log(filterArr): [
 *    { id: 3, name: '蘇軾', age: '宋' },
 *    { id: 4, name: '辛棄疾', age: '宋' }
 * ]
 */

三、find

1. find返回的是數組中的一項，不改變原數組。
2. 通過函數處理後返回符合元素中的第一項，只要找到符合的就把這一項給返回出去。

[○, △, □, △].find( △ => true )  → (first)△

let arr = [
  { id: 0, name: '杜甫', age: '唐' },
  { id: 1, name: '李白', age: '唐' },
  { id: 2, name: '李商隱', age: '唐' },
  { id: 3, name: '蘇軾', age: '宋' },
  { id: 4, name: '辛棄疾', age: '宋' }
];
let findItem = arr.find( e => e.age === '宋' );

/**
 * console.log(findItem): {id: 3, name: "蘇軾", age: "宋"};
 */

四、findIndex

1. 返回的是索引值，不改變原數組。
2. 通過函數處理後返回符合元素中的第一項的索引值，和find方法一樣，都是只找到第一個符合的就返回。

[○, △, □, △].findIndex( △ => true )  → (first)△

let arr = [
  { id: 0, name: '杜甫', age: '唐' },
  { id: 1, name: '李白', age: '唐' },
  { id: 2, name: '李商隱', age: '唐' },
  { id: 3, name: '蘇軾', age: '宋' },
  { id: 4, name: '辛棄疾', age: '宋' }
];
let findItem = arr.find( e => e.age === '宋' );

/**
 * console.log(findItem): {id: 3, name: "蘇軾", age: "宋"};
 */

五、every

1. every返回布爾值，不改變原數組。
2. every是檢查數組中的所有元素是否都符合條件，如果都符合返回true，有一項不符合就返回false

[○, ○, ○, △].every( ○ => true )  →  false

let arr = [
  { id: 0, name: '杜甫', age: '唐' },
  { id: 1, name: '李白', age: '唐' },
  { id: 2, name: '李商隱', age: '唐' },
  { id: 3, name: '蘇軾', age: '宋' },
  { id: 4, name: '辛棄疾', age: '宋' }
];
let everyFlag = arr.every( e => e.age === '宋' );

/**
 * console.log(everyFlag): false
 */

六、some

1. some返回的是布爾值。
2. 檢查數組中是否有任意一個元素符合條件，只要有一個符合就返回true。

[△, ○, ○, △].some( △ => true )  →  true

let arr = [
  { id: 0, name: '杜甫', age: '唐' },
  { id: 1, name: '李白', age: '唐' },
  { id: 2, name: '李商隱', age: '唐' },
  { id: 3, name: '蘇軾', age: '宋' },
  { id: 4, name: '辛棄疾', age: '宋' }
];
let someFlag = arr.some( e => e.age === '宋' );

/**
 * console.log(someFlag): true
 */

七、concat

1. concat返回新數組。
2. concat是合併兩個數組，將兩個數組合併成一個新的數組並返回。

[○, □, △].concat([△, ○])  →  [○, □, △, △, ○]

let arr = [
  { id: 0, name: '杜甫', age: '唐' },
  { id: 1, name: '李白', age: '唐' },
  { id: 2, name: '李商隱', age: '唐' },
  { id: 3, name: '蘇軾', age: '宋' },
  { id: 4, name: '辛棄疾', age: '宋' }
];
let newArr = [
 { id: 5, name: '李清照', age: '宋' }
];
let concatArr = arr.concat(newArr);

/*
    console.log(concatArr): [
      { id: 0, name: '杜甫', age: '唐' },
      { id: 1, name: '李白', age: '唐' },
      { id: 2, name: '李商隱', age: '唐' },
      { id: 3, name: '蘇軾', age: '宋' },
      { id: 4, name: '辛棄疾', age: '宋' },
      { id: 5, name: '李清照', age: '宋' }
   ]
 */

八、join

1. 返回字元串。
2. 將數組的每個元素拼接成字元串，沒有傳參就直接拼接，如果有參數就將參數當做拼接符連接。

[○, □, △, ○].join('-')  →  ○-□-△-○

let arr =  ['貝', '加', '爾', '湖', '畔'];
let joinStr = arr.join('-')

/*
  console.log(joinStr): 貝-加-爾-湖-畔
*/

九、reduce

1. 累加結果
2. 可以做一個累加器

[1, 2, 3, 4].reduce((total, current) => total + current , 10)  →  20

let arr = [1, 2, 3, 4];
let reduceRes = arr.reduce((total, current) => total + current, 10);

/*
  console.log(reduceRes): 20
*/

十、forEach

1. forEach改變了原數組
2. 對數組中每一項都執行一次函數。

[●, ●, ■, ●].forEach(● => ■) → [■, ■, ■, ■]

let arr = [
  { id: 0, name: '杜甫' },
  { id: 1, name: '李白' },
  { id: 2, name: '李商隱' }
]
let forEachArr = arr.forEach( e => e.age = '唐' )
/** 
 * arr: [
 *   { id: 0, name: '杜甫', age: '唐' },
 *   { id: 1, name: '李白', age: '唐' },
 *   { id: 2, name: '李商隱', age: '唐' }
 * ]
 *
 * forEachArr: undefined
 */ 

十一、flat

1. flat改變原數組
2. flat用於將數組扁平化，參數為要扁平化的層數，可以直接傳入Infinity，表示全部扁平化。

[○, □, [△, [△, ○]]].fill(Infinity)  →  [○, □, △, △, ○]

let arr = [1, 2, [[3], 4]];
arr.flat(Infinity);

/*
  console.log(arr): [1, 2, 3, 4]
*/

十二、fill

1. fill改變原數組。
2. fill作用為填充數組。第一個參數為要填充的內容，後面的兩個參數分別為開始到結束的位置。

[○, □, △, ○].fill(☆, 2, 3)  →  [○, □, ☆, ○]

let arr = [1, 2, 3, 4];
arr.fill('你好', 2, 3);
/*
  console.log(arr): [1, 2, '你好', 4]
*/