x
JavaScript中循环时间的典型方法是:
for (var i = 0; i < x; i++)
doStuff(i);
但是我根本不想使用++
运算符或根本没有任何可变变量。那么在ES6中是否有x
另一种方法可以循环计时?我喜欢Ruby的机制:
x.times do |i|
do_stuff(i)
end
JavaScript / ES6有什么相似之处吗?我可以作弊,然后自己制作发电机:
function* times(x) {
for (var i = 0; i < x; i++)
yield i;
}
for (var i of times(5)) {
console.log(i);
}
当然我还在用i++
。至少它不可见:),但是我希望ES6中有更好的机制。
好!
下面的代码是使用ES6语法编写的,但也可以使用ES5甚至更少的语言轻松编写。ES6不是创建“循环x次的机制”的要求
如果您在回调中不需要迭代器,则这是最简单的实现
const times = x => f => {
if (x > 0) {
f()
times (x - 1) (f)
}
}
// use it
times (3) (() => console.log('hi'))
// or define intermediate functions for reuse
let twice = times (2)
// twice the power !
twice (() => console.log('double vision'))
如果确实需要迭代器,则可以使用带有计数器参数的命名内部函数为您进行迭代
const times = n => f => {
let iter = i => {
if (i === n) return
f (i)
iter (i + 1)
}
return iter (0)
}
times (3) (i => console.log(i, 'hi'))
如果您不喜欢学习更多内容,请在这里停止阅读...
但是那些东西应该让人感到...
- 单个分支的
if
语句很难看–在另一个分支上会发生什么? - 功能主体中有多个语句/表达式-程序关注点是否混合在一起?
- 隐式返回
undefined
-表示不纯净的副作用功能
“没有更好的办法吗?”
有。让我们首先回顾一下我们的初始实现
// times :: Int -> (void -> void) -> void
const times = x => f => {
if (x > 0) {
f() // has to be side-effecting function
times (x - 1) (f)
}
}
当然,这很简单,但是请注意我们如何调用它f()
,而不做任何事情。这确实限制了我们可以重复多次的功能类型。即使我们有可用的迭代器,f(i)
也没有更多的用途。
如果我们从更好的函数重复过程开始呢?也许可以更好地利用输入和输出。
通用功能重复
// repeat :: forall a. Int -> (a -> a) -> a -> a
const repeat = n => f => x => {
if (n > 0)
return repeat (n - 1) (f) (f (x))
else
return x
}
// power :: Int -> Int -> Int
const power = base => exp => {
// repeat <exp> times, <base> * <x>, starting with 1
return repeat (exp) (x => base * x) (1)
}
console.log(power (2) (8))
// => 256
上面,我们定义了一个通用repeat
函数,该函数带有一个附加输入,用于启动单个函数的重复应用。
// repeat 3 times, the function f, starting with x ...
var result = repeat (3) (f) (x)
// is the same as ...
var result = f(f(f(x)))
实现times
与repeat
好吧,这现在很容易。几乎所有工作都已经完成。
// repeat :: forall a. Int -> (a -> a) -> a -> a
const repeat = n => f => x => {
if (n > 0)
return repeat (n - 1) (f) (f (x))
else
return x
}
// times :: Int -> (Int -> Int) -> Int
const times = n=> f=>
repeat (n) (i => (f(i), i + 1)) (0)
// use it
times (3) (i => console.log(i, 'hi'))
由于我们的函数i
作为输入并返回i + 1
,因此有效地充当了我们f
每次传递给我们的迭代器。
我们也修复了项目符号列表
- 不再有难看的单个分支
if
语句 - 单表达主体表示关注点完全分开
- 不再无用,隐式返回
undefined
JavaScript逗号运算符
如果您在看最后一个示例的工作方式时遇到麻烦,则取决于您对JavaScript最古老的战斗方式之一的了解。的逗号操作符-总之,它从左至右计算表达式和返回最后计算的表达式的值
(expr1 :: a, expr2 :: b, expr3 :: c) :: c
在上面的示例中,我正在使用
(i => (f(i), i + 1))
这只是一种简洁的写作方式
(i => { f(i); return i + 1 })
尾叫优化
尽管递归实现很性感,但由于我认为没有JavaScript VM支持适当的尾部调用消除功能,因此我不推荐它们,这是不负责任的– babel曾被用于翻译它,但它处于“中断状态;将重新实现”地位超过一年。
repeat (1e6) (someFunc) (x)
// => RangeError: Maximum call stack size exceeded
因此,我们应该重新考虑的实现,repeat
以使其具有堆栈安全性。
以下代码确实使用了可变变量n
,x
但请注意,所有突变都定位在repeat
函数中–从函数外部看不到任何状态变化(突变)
// repeat :: Int -> (a -> a) -> (a -> a)
const repeat = n => f => x =>
{
let m = 0, acc = x
while (m < n)
(m = m + 1, acc = f (acc))
return acc
}
// inc :: Int -> Int
const inc = x =>
x + 1
console.log (repeat (1e8) (inc) (0))
// 100000000
你们中很多人会说:“但这不起作用!” –我知道,请放松。我们可以使用纯表达式实现Clojure风格的loop
/recur
接口用于恒定空间循环;没有这些东西。while
在这里while
,我们从loop
函数中抽象出来-它寻找一种特殊的recur
类型来保持循环运行。recur
遇到非类型时,循环结束,并返回计算结果
const recur = (...args) =>
({ type: recur, args })
const loop = f =>
{
let acc = f ()
while (acc.type === recur)
acc = f (...acc.args)
return acc
}
const repeat = $n => f => x =>
loop ((n = $n, acc = x) =>
n === 0
? acc
: recur (n - 1, f (acc)))
const inc = x =>
x + 1
const fibonacci = $n =>
loop ((n = $n, a = 0, b = 1) =>
n === 0
? a
: recur (n - 1, b, a + b))
console.log (repeat (1e7) (inc) (0)) // 10000000
console.log (fibonacci (100)) // 354224848179262000000
[...Array(n)].map()
const res = [...Array(10)].map((_, i) => {
return i * 10;
});
// as a one liner
const res = [...Array(10)].map((_, i) => i * 10);
或者,如果您不需要结果:
[...Array(10)].forEach((_, i) => {
console.log(i);
});
// as a one liner
[...Array(10)].forEach((_, i) => console.log(i));
Array.from(...)
const res = Array.from(Array(10)).map((_, i) => {
return i * 10;
});
// as a one liner
const res = Array.from(Array(10)).map((_, i) => i * 10);
请注意,如果只需要重复一个字符串,则可以使用 String.prototype.repeat。
console.log("0".repeat(10))
// 0000000000
for (let i of Array(100).keys()) {
console.log(i)
}
我认为最好的解决方案是使用let
:
for (let i=0; i<100; i++) …
这将为i
每个主体评估创建一个新的(可变)变量,并确保i
仅在该循环语法中的增量表达式中更改,而不从其他任何地方进行更改。
我可以作弊,自己做发电机。至少
i++
看不见:)
够了,imo。即使是纯语言,所有操作(或至少是它们的解释器)都是从使用变异的原语构建的。只要它的范围适当,我就看不出这是怎么回事。
你应该很好
function* times(n) {
for (let i = 0; i < n; i++)
yield i;
}
for (const i of times(5)) {
console.log(i);
}
但是我根本不想使用
++
运算符或根本没有任何可变变量。
然后,您唯一的选择是使用递归。您还可以在不可变的情况下定义该生成器函数i
:
function* range(i, n) {
if (i >= n) return;
yield i;
return yield* range(i+1, n);
}
times = (n) => range(0, n);
但这对我来说似乎有些矫kill过正,并且可能存在性能问题(因为无法使用消除尾声return yield*
)。
const times = 4;
new Array(times).fill().map(() => console.log('test'));
此代码段将播放console.log
test
4次。
我认为这很简单:
[...Array(3).keys()]
要么
Array(3).fill()
答案:2015年12月9日
就我个人而言,我发现公认的答案既简洁(好)又简洁(不好)。赞赏此声明可能是主观的,因此请阅读此答案,看看您是否同意
问题中给出的示例类似于Ruby的示例:
x.times do |i|
do_stuff(i)
end
使用下面的方法在JS中表示可以:
times(x)(doStuff(i));
这是代码:
let times = (n) => {
return (f) => {
Array(n).fill().map((_, i) => f(i));
};
};
而已!
简单示例用法:
let cheer = () => console.log('Hip hip hooray!');
times(3)(cheer);
//Hip hip hooray!
//Hip hip hooray!
//Hip hip hooray!
或者,按照接受的答案的示例进行操作:
let doStuff = (i) => console.log(i, ' hi'),
once = times(1),
twice = times(2),
thrice = times(3);
once(doStuff);
//0 ' hi'
twice(doStuff);
//0 ' hi'
//1 ' hi'
thrice(doStuff);
//0 ' hi'
//1 ' hi'
//2 ' hi'
旁注-定义范围功能
一个类似/相关的问题,使用了非常相似的代码结构,可能是(核心)JavaScript中有一个便捷的Range函数,类似于下划线的range函数。
从x开始创建具有n个数字的数组
下划线
_.range(x, x + n)
ES2015
几个选择:
Array(n).fill().map((_, i) => x + i)
Array.from(Array(n), (_, i) => x + i)
演示使用n = 10,x = 1:
> Array(10).fill().map((_, i) => i + 1)
// [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
> Array.from(Array(10), (_, i) => i + 1)
// [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
我进行了一次快速测试,使用我们的解决方案和doStuff函数将以上各项运行了100万次,事实证明前一种方法(Array(n).fill())速度稍快。
这是另一个不错的选择:
Array.from({ length: 3}).map(...);
最好,正如@Dave Morse在注释中指出的那样,您还可以map
通过使用Array.from
函数的第二个参数来摆脱调用,如下所示:
Array.from({ length: 3 }, () => (...))
Array(100).fill().map((_,i)=> console.log(i) );
该版本满足了OP对不变性的要求。还要考虑使用reduce
而不是map
取决于您的用例。
如果您不介意原型有一点变异,这也是一种选择。
Number.prototype.times = function(f) {
return Array(this.valueOf()).fill().map((_,i)=>f(i));
};
现在我们可以做到这一点
((3).times(i=>console.log(i)));
+1以arcseldon的.fill
建议。
这不是我会教(或在我的代码中使用过的)东西,但是这是一个值得修改代码的解决方案,无需更改变量,不需要ES6:
Array.apply(null, {length: 10}).forEach(function(_, i){
doStuff(i);
})
实际上,更多的是有趣的概念验证而不是有用的答案。
我参加聚会很晚,但是由于这个问题经常出现在搜索结果中,因此我想添加一个我认为在可读性方面最好的解决方案,但又不会太长(这对于任何代码库IMO都是理想的) 。它会发生变化,但我会在KISS原则上进行权衡。
let times = 5
while( times-- )
console.log(times)
// logs 4, 3, 2, 1, 0
如果您愿意使用一个库,也可以使用lodash_.times
或下划线_.times
:
_.times(x, i => {
return doStuff(i)
})
请注意,这将返回结果数组,因此实际上更像是红宝石:
x.times.map { |i|
doStuff(i)
}
Afaik,ES6中没有类似于Rubytimes
方法的机制。但是您可以通过使用递归来避免突变:
let times = (i, cb, l = i) => {
if (i === 0) return;
cb(l - i);
times(i - 1, cb, l);
}
times(5, i => doStuff(i));
演示:http : //jsbin.com/koyecovano/1/edit?js,console
在功能范式中 repeat
中,通常是无限递归函数。要使用它,我们需要惰性评估或延续传递样式。
延迟评估函数重复
const repeat = f => x => [x, () => repeat(f) (f(x))];
const take = n => ([x, f]) => n === 0 ? x : take(n - 1) (f());
console.log(
take(8) (repeat(x => x * 2) (1)) // 256
);
我使用thunk(一个没有参数的函数)来实现Javascript中的惰性评估。
具有连续传递样式的功能重复
const repeat = f => x => [x, k => k(repeat(f) (f(x)))];
const take = n => ([x, k]) => n === 0 ? x : k(take(n - 1));
console.log(
take(8) (repeat(x => x * 2) (1)) // 256
);
CPS起初有点吓人。但是,它始终遵循相同的模式:最后一个参数是延续(一个函数),它调用自己的主体:k => k(...)
。请注意,CPS成为内而外的应用程序,即take(8) (repeat...)
成为k(take(8)) (...)
其中k
的部分应用repeat
。
结论
通过将重复(repeat
)与终止条件(take
)分开,我们获得了灵活性-顾虑分离到痛苦的尽头:D
该解决方案的优势
- 最简单的阅读/使用(imo)
- 返回值可以用作总和,也可以忽略
- 普通的es6版本,还链接到TypeScript版本的代码
缺点
-变异。作为内部人,我不在乎,也许其他人也不会。
示例和代码
times(5, 3) // 15 (3+3+3+3+3)
times(5, (i) => Math.pow(2,i) ) // 31 (1+2+4+8+16)
times(5, '<br/>') // <br/><br/><br/><br/><br/>
times(3, (i, count) => { // name[0], name[1], name[2]
let n = 'name[' + i + ']'
if (i < count-1)
n += ', '
return n
})
function times(count, callbackOrScalar) {
let type = typeof callbackOrScalar
let sum
if (type === 'number') sum = 0
else if (type === 'string') sum = ''
for (let j = 0; j < count; j++) {
if (type === 'function') {
const callback = callbackOrScalar
const result = callback(j, count)
if (typeof result === 'number' || typeof result === 'string')
sum = sum === undefined ? result : sum + result
}
else if (type === 'number' || type === 'string') {
const scalar = callbackOrScalar
sum = sum === undefined ? scalar : sum + scalar
}
}
return sum
}
TypeScipt版本
https://codepen.io/whitneyland/pen/aVjaaE?editors=0011
解决功能方面:
function times(n, f) {
var _f = function (f) {
var i;
for (i = 0; i < n; i++) {
f(i);
}
};
return typeof f === 'function' && _f(f) || _f;
}
times(6)(function (v) {
console.log('in parts: ' + v);
});
times(6, function (v) {
console.log('complete: ' + v);
});
发电机?递归?为什么这么讨厌“变形”?;-)
只要我们“隐藏”它,如果可以接受,那么只需接受使用一元运算符就可以使事情简单:
Number.prototype.times = function(f) { let n=0 ; while(this.valueOf() > n) f(n++) }
就像在红宝石中一样:
> (3).times(console.log)
0
1
2
我用辅助函数包装了@Tieme的答案。
在TypeScript中:
export const mapN = <T = any[]>(count: number, fn: (...args: any[]) => T): T[] => [...Array(count)].map((_, i) => fn())
现在您可以运行:
const arr: string[] = mapN(3, () => 'something')
// returns ['something', 'something', 'something']
我做的:
function repeat(func, times) {
for (var i=0; i<times; i++) {
func(i);
}
}
用法:
repeat(function(i) {
console.log("Hello, World! - "+i);
}, 5)
/*
Returns:
Hello, World! - 0
Hello, World! - 1
Hello, World! - 2
Hello, World! - 3
Hello, World! - 4
*/
i
变量返回其循环的次数-如果您需要预加载x图像数量,则此变量很有用。
我只想把它放在这里。如果您正在寻找不使用数组的紧凑函数,并且可变性/不变性没有问题:
var g =x=>{/*your code goes here*/x-1>0?g(x-1):null};
文章标签:ecmascript-6 , ecmascript-harmony , generator , javascript
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!