For loops
代码实现
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);
}
}
// filePaths = [ '~/cool_app/foo.txt', '~/cool_app/.bar', '~/cool_app/baz.foo']
- Any
for
loop can be used – read more about the different JavaScript loops. - Less common nowadays, due to functional programming being more popular.
- Control over the iteration, such as skipping over elements or early
return
s. - Resulting array needs to be declared beforehand, outside the loop.
- Uses
Array.prototype.push()
or the spread (...
) operator to add elements. O(N)
complexity, each element will be iterated over only once.
Array reduce
使用样例
const files = [ 'foo.txt ', '.bar', ' ', 'baz.foo' ];
const filePaths = files.reduce((acc, file) => {
const fileName = file.trim();
if(fileName) {
const filePath = `~/cool_app/${fileName}`;
acc.push(filePath);
}
return acc;
}, []);
// filePaths = [ '~/cool_app/foo.txt', '~/cool_app/.bar', '~/cool_app/baz.foo']
- Uses
Array.prototype.reduce()
with an empty array as the initial value. - More common nowadays, due to functional programming being more popular.
- Less control over the iteration, cannot skip elements or
return
early. - Can be chained with other methods, if necessary.
- Uses
Array.prototype.push()
or the spread (...
) operator to add elements. O(N)
complexity, each element will be iterated over only once.
Method chaining
const files = [ 'foo.txt ', '.bar', ' ', 'baz.foo' ];
const filePaths = files
.map(file => file.trim())
.filter(Boolean)
.map(fileName => `~/cool_app/${fileName}`);
// filePaths = [ '~/cool_app/foo.txt', '~/cool_app/.bar', '~/cool_app/baz.foo']
- Uses
Array.prototype.map()
andArray.prototype.filter()
. - More common nowadays, due to functional programming being more popular.
- Less control over the iteration, cannot skip elements or
return
early. - Declarative, easier to read and refactor, chain can grow as necessary.
- Does not use
Array.prototype.push()
or the spread (...
) operator. O(cN)
complexity,c
iterations per element, (c
: length of the chain).
翻译自:https://www.30secondsofcode.org/js/s/code-anatomy-chaining-reduce-for-loop