>[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) ~~~