Czy istnieje mechanizm pętli x razy w ES6 (ECMAScript 6) bez zmiennych mutowalnych?

Typowy sposób na zapętlenie xczasów w JavaScript to:

for (var i = 0; i < x; i++)
  doStuff(i);

Ale nie chcę używać ++operatora ani w ogóle mieć żadnych zmiennych zmiennych. Czy jest więc sposób w ES6 na zapętlenie xczasów w inny sposób? Uwielbiam mechanizm Ruby:

x.times do |i|
  do_stuff(i)
end

Coś podobnego w JavaScript / ES6? Mógłbym trochę oszukać i stworzyć własny generator:

function* times(x) {
  for (var i = 0; i < x; i++)
    yield i;
}

for (var i of times(5)) {
  console.log(i);
}

Oczywiście, że nadal używam i++. Przynajmniej jest poza zasięgiem wzroku :), ale mam nadzieję, że w ES6 jest lepszy mechanizm.

DOBRZE!

Poniższy kod jest napisany przy użyciu składni ES6, ale można go równie łatwo napisać w ES5 lub nawet mniej. ES6 nie jest wymagane, aby utworzyć „mechanizm pętli x razy”

Jeśli nie potrzebujesz iteratora w wywołaniu zwrotnym , jest to najprostsza implementacja

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'))

Jeśli potrzebujesz iteratora , możesz użyć nazwanej funkcji wewnętrznej z parametrem licznika, aby wykonać iterację

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'))

Przestań czytać tutaj, jeśli nie lubisz uczyć się więcej rzeczy ...

Ale coś powinno czuć w tych ...

• ifInstrukcje pojedynczej gałęzi są brzydkie - co się dzieje w drugiej gałęzi?
• wiele instrukcji / wyrażeń w ciałach funkcyjnych - czy obawy dotyczące procedury są mieszane?
• niejawnie zwrócone undefined- wskazanie nieczystej funkcji powodującej skutki uboczne

"Czy nie ma lepszego sposobu?"

Jest. Przyjrzyjmy się najpierw naszej początkowej implementacji

// times :: Int -> (void -> void) -> void
const times = x => f => {
  if (x > 0) {
    f()               // has to be side-effecting function
    times (x - 1) (f)
  }
}

Jasne, to proste, ale zwróć uwagę, jak po prostu dzwonimy f()i nic z tym nie robimy. To naprawdę ogranicza rodzaj funkcji, którą możemy powtarzać wielokrotnie. Nawet jeśli mamy dostępny iterator, f(i)nie jest dużo bardziej wszechstronny.

A jeśli zaczniemy od lepszego rodzaju procedury powtarzania funkcji? Może coś, co lepiej wykorzystuje dane wejściowe i wyjściowe.

Powtarzanie funkcji ogólnej

// 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

Powyżej zdefiniowaliśmy funkcję ogólną, repeatktóra pobiera dodatkowe dane wejściowe, które są używane do rozpoczęcia wielokrotnego stosowania pojedynczej funkcji.

// 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)))

Wdrażanie timeszrepeat

Cóż, teraz jest to łatwe; prawie cała praca jest już wykonana.

// 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'))

Ponieważ nasza funkcja przyjmuje idane wejściowe i zwraca i + 1, działa to skutecznie jako nasz iterator, do którego przechodzimy za fkażdym razem.

Naprawiliśmy również naszą listę punktowaną problemów

• Nigdy więcej brzydkich pojedynczych ifinstrukcji
• Treści o pojedynczym wyrażeniu wskazują na ładnie rozdzielone problemy
• Nigdy więcej bezużytecznych, pośrednio zwróconych undefined

Operator przecinka JavaScript,

Jeśli nie możesz zobaczyć, jak działa ostatni przykład, zależy to od twojej świadomości jednego z najstarszych toporów bojowych JavaScript; operator przecinek - krótko mówiąc, ocenia wyrażenia od lewej do prawej i zwraca wartość ostatniego wyrażenia ocenianej

(expr1 :: a, expr2 :: b, expr3 :: c) :: c

W naszym powyższym przykładzie używam

(i => (f(i), i + 1))

co jest tylko zwięzłym sposobem pisania

(i => { f(i); return i + 1 })

Tail Call Optimization

Choć rekurencyjne implementacje są seksowne, w tym momencie byłoby nieodpowiedzialne, gdybym je polecał, biorąc pod uwagę, że żadna maszyna wirtualna JavaScript , o której myślę, nie obsługuje prawidłowej eliminacji wywołań ogonowych - do transpozycji używano babel, ale jest w stanie "zepsuty; zostanie ponownie zaimplementowany status przez ponad rok.

repeat (1e6) (someFunc) (x)
// => RangeError: Maximum call stack size exceeded

W związku z tym powinniśmy ponownie przyjrzeć się naszej implementacji, repeataby była bezpieczna dla stosu.

Poniższy kod nie używać zmiennych zmienny ni xnależy jednak pamiętać, że wszystkie mutacje są zlokalizowane w repeatfunkcji - bez zmiany stanu (mutacje) są widoczne z zewnątrz funkcji

// 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

Wiele z was będzie mówić „ale to nie działa!” - Wiem, zrelaksuj się. Możemy zaimplementować interfejs loop/ styl Clojure recurdo pętli w przestrzeni stałej przy użyciu czystych wyrażeń ; nic z tego while.

Tutaj abstrahujemy whileod naszej loopfunkcji - szuka ona specjalnego recurtypu, aby utrzymać działanie pętli. Gdy recurnapotkany zostanie inny typ, pętla jest zakończona i zwracany jest wynik obliczenia

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

Korzystanie z operatora Spread ES2015 :

[...Array(n)].map()

const res = [...Array(10)].map((_, i) => {
  return i * 10;
});

// as a one liner
const res = [...Array(10)].map((_, i) => i * 10);

Lub jeśli nie potrzebujesz wyniku:

[...Array(10)].forEach((_, i) => {
  console.log(i);
});

// as a one liner
[...Array(10)].forEach((_, i) => console.log(i));

Lub używając operatora ES2015 Array.from :

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);

Zauważ, że jeśli potrzebujesz tylko powtórzenia ciągu, możesz użyć String.prototype.repeat .

console.log("0".repeat(10))
// 0000000000

for (let i of Array(100).keys()) {
    console.log(i)
}

Myślę, że najlepszym rozwiązaniem jest użycie let:

for (let i=0; i<100; i++) …

Spowoduje to utworzenie nowej ( izmiennej ) zmiennej dla każdej oceny treści i zapewni, że izostanie ona zmieniona tylko w wyrażeniu inkrementacji w tej składni pętli, a nie z innego miejsca.

Mógłbym trochę oszukiwać i stworzyć własny generator. Przynajmniej i++jest poza zasięgiem wzroku :)

To powinno wystarczyć imo. Nawet w czystych językach wszystkie operacje (lub przynajmniej ich interpretery) są zbudowane z prymitywów, które używają mutacji. Dopóki ma odpowiedni zakres, nie widzę, co w tym złego.

Powinieneś być w porządku

function* times(n) {
  for (let i = 0; i < x; i++)
    yield i;
}
for (const i of times(5))
  console.log(i);

Ale nie chcę używać ++operatora ani w ogóle mieć żadnych zmiennych zmiennych.

Wtedy jedynym wyborem jest użycie rekurencji. Możesz zdefiniować tę funkcję generatora również bez mutacji i:

function* range(i, n) {
  if (i >= n) return;
  yield i;
  return yield* range(i+1, n);
}
times = (n) => range(0, n);

Ale wydaje mi się to przesada i może powodować problemy z wydajnością (ponieważ eliminacja ogonów nie jest dostępna return yield*).

const times = 4;
new Array(times).fill().map(() => console.log('test'));

Ten fragment będzie console.log test4 razy.

Myślę, że to całkiem proste:

[...Array(3).keys()]

lub

Array(3).fill()

Odpowiedź: 9 grudnia 2015

Osobiście uważam, że zaakceptowana odpowiedź jest zarówno zwięzła (dobra), jak i zwięzła (zła). Doceń, że to stwierdzenie może być subiektywne, więc przeczytaj tę odpowiedź i sprawdź, czy się zgadzasz, czy nie

Przykład podany w pytaniu był podobny do Rubiego:

x.times do |i|
  do_stuff(i)
end

Wyrażenie tego w JS za pomocą poniższych pozwoliłoby na:

times(x)(doStuff(i));

Oto kod:

let times = (n) => {
  return (f) => {
    Array(n).fill().map((_, i) => f(i));
  };
};

Otóż ​​to!

Prosty przykład użycia:

let cheer = () => console.log('Hip hip hooray!');

times(3)(cheer);

//Hip hip hooray!
//Hip hip hooray!
//Hip hip hooray!

Alternatywnie, postępując zgodnie z przykładami zaakceptowanej odpowiedzi:

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'

Uwaga dodatkowa - Definiowanie funkcji zakresu

Podobnym / pokrewnym pytaniem, które wykorzystuje zasadniczo bardzo podobne konstrukcje kodu, może być wygodna funkcja Range w (rdzeniu) JavaScript, coś podobnego do funkcji zakresu podkreślenia.

Utwórz tablicę z n liczbami, zaczynając od x

Podkreślać

_.range(x, x + n)

ES2015

Kilka alternatyw:

Array(n).fill().map((_, i) => x + i)

Array.from(Array(n), (_, i) => x + i)

Demo przy użyciu 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 ]

W krótkim teście, który przeprowadziłem, z każdym z powyższych uruchomionych milion razy przy użyciu naszego rozwiązania i funkcji doStuff, poprzednie podejście (Array (n) .fill ()) okazało się nieco szybsze.

Array(100).fill().map((_,i)=> console.log(i) );

Ta wersja spełnia wymóg niezmienności PO. Rozważ także użycie reducezamiastmap zależności od przypadku użycia.

Jest to również opcja, jeśli nie przeszkadza ci mała mutacja w twoim prototypie.

Number.prototype.times = function(f) {
   return Array(this.valueOf()).fill().map((_,i)=>f(i));
};

Teraz możemy to zrobić

((3).times(i=>console.log(i)));

+1 do arcseldona za .fillsugestię.

Oto kolejna dobra alternatywa:

Array.from({ length: 3}).map(...);

Najlepiej, jak zauważył @Dave Morse w komentarzach, możesz również pozbyć się mapwywołania, używając drugiego parametru Array.fromfunkcji, takiego jak:

Array.from({ length: 3 }, () => (...))

Nie jest to coś, czego bym uczył (lub kiedykolwiek używałbym w moim kodzie), ale oto rozwiązanie godne Codegolf bez mutowania zmiennej, bez potrzeby ES6:

Array.apply(null, {length: 10}).forEach(function(_, i){
    doStuff(i);
})

Bardziej interesujący dowód słuszności koncepcji niż użyteczna odpowiedź.

Spóźniłem się na imprezę, ale ponieważ to pytanie często pojawia się w wynikach wyszukiwania, chciałbym tylko dodać rozwiązanie, które uważam za najlepsze pod względem czytelności, a jednocześnie nie jest długie (które jest idealne dla każdej bazy kodów IMO) . To mutuje, ale dokonałbym tego kompromisu dla zasad KISS.

let times = 5
while( times-- )
    console.log(times)
// logs 4, 3, 2, 1, 0

Ahaik, w ES6 nie ma mechanizmu podobnego do timesmetody Rubiego . Ale możesz uniknąć mutacji, używając rekurencji:

let times = (i, cb, l = i) => {
  if (i === 0) return;

  cb(l - i);
  times(i - 1, cb, l);
}

times(5, i => doStuff(i));

Demo: http://jsbin.com/koyecovano/1/edit?js,console

Jeśli chcesz skorzystać z biblioteki, możesz również skorzystać z lodash_.times lub podkreślenia_.times :

_.times(x, i => {
   return doStuff(i)
})

Zwróć uwagę, że zwraca to tablicę wyników, więc bardziej przypomina ten rubin:

x.times.map { |i|
  doStuff(i)
}

W paradygmacie funkcjonalnym repeatjest zwykle nieskończoną funkcją rekurencyjną. Aby go użyć, potrzebujemy leniwej oceny lub stylu zaliczania kontynuacji.

Leniwy oceniał powtarzanie funkcji

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
);

Używam thunk (funkcji bez argumentów), aby osiągnąć leniwą ocenę w JavaScript.

Powtarzanie funkcji ze stylem przekazywania kontynuacji

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 jest na początku trochę przerażający. Jednak zawsze według takiego samego schematu: Ostatni argument jest kontynuacją (funkcja), która powołuje się na swój własny podmiot: k => k(...). Należy pamiętać, że CPS wywraca aplikację na lewą stronę, tj. take(8) (repeat...)Staje się miejscem, w k(take(8)) (...)którym kjest częściowo zastosowanarepeat .

Wniosek

Oddzielając powtórzenie ( repeat) od warunku zakończenia ( take) uzyskujemy elastyczność - rozdzielenie spraw aż do ich gorzkiego końca: D

Zalety tego rozwiązania

• Najprostszy do odczytania / użycia (imo)
• Wartość zwracana może być użyta jako suma lub po prostu zignorowana
• Zwykła wersja es6, również link do wersji kodu w języku TypeScript

Wady - mutacja. Będąc tylko wewnętrznym, nie obchodzi mnie to, może inni też nie.

Przykłady i kod

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
}

Wersja TypeScipt
https://codepen.io/whitneyland/pen/aVjaaE?editors=0011

zajęcie się aspektem funkcjonalnym:

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);
});

Generatory? Rekursja? Dlaczego tak bardzo nienawidzę mutacji? ;-)

Jeśli jest to dopuszczalne tak długo jak my „ukryć”, a potem po prostu zaakceptować zastosowanie operatora jednoargumentowego i możemy zachować rzeczy proste :

Number.prototype.times = function(f) { let n=0 ; while(this.valueOf() > n) f(n++) }

Tak jak w rubinie:

> (3).times(console.log)
0
1
2

Odpowiedź @Tieme s opakowałem funkcją pomocniczą.

W języku TypeScript:

export const mapN = <T = any[]>(count: number, fn: (...args: any[]) => T): T[] => [...Array(count)].map((_, i) => fn())

Teraz możesz biegać:

const arr: string[] = mapN(3, () => 'something')
// returns ['something', 'something', 'something']

Ja to zrobiłem:

function repeat(func, times) {
    for (var i=0; i<times; i++) {
        func(i);
    }
}

Stosowanie:

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
*/

iZmienna zwraca ilość razy to zapętlone - przydatna, gdy trzeba by wstępnie kwotę X obrazów.