[TOC] >[success] # map、filter、reduce、find 四種方法 ~~~ 1.工作中比較常用的四個數組api,' map、filter、reduce、find ' ~~~ [原文內容4-javascript-array-methods](https://www.30secondsofcode.org/blog/s/4-javascript-array-methods) >[info] ## 引用文章中的一個圖概括全部 ~~~ 1.map：原來一組正方形通過map后變成一組圓形，形象說明map是用來轉換原數組，切輸出的結果和原結果 長度是一致的 2.filter：原來是一組不同顏色的正方形，根據條件生成一組只有藍色的正方形。形象的說明filter 用來過濾的 他不會改變原來組內單獨每一項的特性值。只是單純過濾出符合項 3.reduce：原來是一組數據，經過reduce 后可以不再單單是一組數據，可以是別的內容的表現形式 4.find ：原來是一組數組通過find 找到符合的單獨值，形象說明find 是用來找到符合元素項，是具體的一個值 ~~~  >[danger] ##### map ~~~ 1.轉換應用于原始數組的每個元素，創建一個新數組 2.輸出的'結果數組長度和原數組長度相同' ~~~ * 下面案例新數組的長度 和 原數組長度相同 ~~~ const arr = [1, 2, 3]; const test = arr.map( x => x * 2); const test1 = arr.map( x => { if(x>1) return x }) log(test) // [2, 4, 6] log(test1) // [ undefined, 2, 3 ] ~~~ >[danger] ##### filter ~~~ 1.過濾函數創建新數組，以僅保留true基于該函數返回的元素 2.新數組的長度等于或小于原始數組長度的數組 3.新數組含與原始數組相同元素的子集 ~~~ ~~~ const arr = [1, 2, 3]; const isOdd = x => x % 2 === 1; arr.filter(isOdd); // [1, 3] ~~~ >[danger] ##### find ~~~ 1.返回匹配器函數返回的第一個元素true 2.結果是原始數組中的單個元素 ~~~ ~~~ const arr = [1, 2, 3]; const isOdd = x => x % 2 === 1; arr.find(isOdd); // 1 ~~~ >[danger] ##### reduce ~~~ 1.初始值創建任何類型的輸出值 2.結果可以是任何類型，例如整數，對象或數組 ~~~ ~~~ const arr = [1, 2, 3]; const sum = (x, y) => x + y; arr.reduce(sum, 0); // 6 const increment = (x, y) => [...x, x[x.length - 1] + y]; arr.reduce(increment, [0]); // [0, 1, 3, 6] ~~~