>[success] # 多種形式處理數組思考方式 ~~~ 1.現在有個需求給數組中的每一項加上目錄前綴并且生成新數組，例如 ['foo.txt','.bar',' ','baz.foo'] 需要生成新數組中的內容格式為[ '~/cool_app/foo.txt', '~/cool_app/.bar', '~/cool_app/baz.foo' ] ~~~ [案例來源位置 js 30s](https://www.30secondsofcode.org/blog/s/code-anatomy-chaining-reduce-for-loop) >[danger] ##### 第一種方式面向過程循環解決 ~~~ 1.通過for循環取出每一項， 2.采用面向過程的思路解決 3.可以使用Array.prototype.push()或spread（...）運算符添加元素 '優點'： 1.可以使用 return break continue 來控制迭代 '不足'： 1.需要在循環外部預先聲明結果數組 '時間復雜度': 1.O(N) 復雜性，每個元素將僅迭代一次 ~~~ ~~~ const files = ['foo.txt','.bar',' ','baz.foo'] let filePaths = [] for(let file of files) { const fileName = file.trim() if(fileName){ const filePath = `~/cool_app/${fileName}`; filePaths.push(filePath); } } console.log(filePaths) ~~~ >[danger] ##### 利用數組高階方法 -- reduce ~~~ 1.通過Array.prototype.reduce()與空數組作為初始值 2.采用函數式編程的思路解決 3.可以使用Array.prototype.push()或spread（...）運算符添加元素 '優點'： 1.不需要在循環外部預先聲明結果數組 2.可以與其他方法鏈接在一起 '不足'： 1.不可以使用 return break continue 來控制迭代 '時間復雜度': 1.O(N) 復雜性，每個元素將僅迭代一次 ~~~ ~~~ const filePaths1 = files.reduce((acc,file)=>{ const fileName = file.trim() if(fileName){ const filePath = `~/cool_app/${fileName}`; acc.push(filePath); } return acc },[]) console.log(filePaths1) ~~~ >[danger] ##### 采用多個數組的高階方法鏈式解決 ~~~ 1.通過Array.prototype.map()和Array.prototype.filter()。 2.采用函數式編程的思路解決 3.可以使用Array.prototype.push()或spread（...）運算符添加元素 '優點'： 1.不需要在循環外部預先聲明結果數組 2.易于閱讀和重構的鏈可以根據需要增長 '不足'： 1.不可以使用 return break continue 來控制迭代 '時間復雜度': 1.O(cN)復雜度，c每個元素的迭代次數，（c：鏈的長度） ~~~ ~~~ // 1.去掉空字符串 =》2.過濾掉空字符 =》 3.在組合 // 一二步實際可以放在一起 const filePaths2 = files.map(file => file.trim()).filter(Boolean).map(fileName => `~/cool_app/${fileName}`) console.log(filePaths2) const filePaths3 = files.filter((file) => { if(file.trim()){ return true } }).map(fileName => `~/cool_app/${fileName}`) console.log(filePaths3) ~~~