如何从视觉上概念化此Javascript递归函数?

时间:2019-11-16 19:34:49

标签: javascript recursion

我想直观地了解运行此递归代码时会发生什么。我不明白最终结果是9。 在我看来,f(x - 1)会迭代直到返回5,然后再添加1等于6。

let f = x => {
  if (x === 0) {
    return 5
  }
  return 1 + f(x - 1)
}
let y = f(4)
console.log(y)

谢谢您的时间

2 个答案:

答案 0 :(得分:2)

您有倒推的理由。不是在最后添加一次,而是在每个递归调用返回后添加一个。考虑这一行:

return 1 + f(x - 1)

一旦递归f调用返回,则将一个添加到该结果中。然后此递归调用返回,并再次添加一个。这种情况一直持续到首次调用返回为止。

由于每个递归调用一次添加一次,它将递归四次,并且基本情况返回5,因此该函数基本上只需要计算即可

1 + 1 + 1 + 1 + 5 == 9

答案 1 :(得分:2)

您可以为日志缩进获取一个级别,并查看哪个级别具有输入和返回值。

      if(request()->has('rName')) {
         $responsible = Responsible::create([
            'ResponsibleName'=> $request->rName,
            'ResponsibleCNI'=>$request->cni,
            'responsible_number'=>$request->tele
        ]);
      }  

      //Student::create($data);

 if(request()->has('MontantP')) {
          $payment=Payment::create([
            'PaymentPaid'=>$request->MontantP,
            'PaymentRemaining'=>$request->RestP,
            'responsible_id'=>$responsible->id,
          ]);
      }

          if($request->hasFile('file')){
                    $student->images = $request->file->store('file');
        }

 if(request()->has('TransportR')) {
          $transport=Transport::create([
            'TransportPaid'=> $request->TransportP,
            'TransportRemainning'=>$request->TransportR,
            'TransportDateStart'=>$request->TdateStart,
            'TransportDateEnd'=>$request->TdateEnd,
          ]);
      }
           if(request()->has('edateStart')) {    
    $payment_date = Payment_Date::create([
        'PaymentDateStart'=>$request->edateStart,
        'PaymentDateEnd'=>$request->edateEnd,
        'payment_id'=>$payment->id,
     ]);

$letter = 'KassN';
$number =$request->env . 'G';
$number2 = $request->group;
$id='_'.rand();

$random = $letter.$number.$number2.$id;
       if(request()->has('fName')) {
        $student = Student::create([
            'StudentFName'=> $request->fName,
            'StudentLName'=> $request->lName,
            'StudentDateStart'=>$request->edateStart,
            'StudentDateEnd'=>$request->edateEnd,
            'level_id'=> $request->env,
            'group_id'=>$request->group,
            'responsible_id'=> $responsible->id,
            'payment_date_id'=>$payment_date->id,
            'Payment_dure_id'=>$request->paymentD,
            'payment_id'=>$payment->id,
            'transport_id'=>$transport->id,
            'student_code'=>$random
        ]);
    }

    if(request()->has('inscription')){
       $agrement= Payment_agrement::create([

        'frais_inscription'=>$request->inscription,
        'payment_mois'=>$request->payment,
        'Assurance'=>$request->assaurance,
        'Garde'=>$request->garde,
        'Transport'=>$request->fraiTransport,
        'responsible_id'=>$responsible->id
    ]);
    }
@extends('layouts.app')
@section('content')
@if (Route::has('login'))
@auth
@if (session('status'))

    <div class="alert alert-success">
        {{ session('status') }}
        <a href="{{url('/')}}">back to <strong>Home</strong></a>&nbsp;&nbsp;
        <a href="{{url('student')}}">back to <strong>list</strong></a>

    </div>
@endif

    <div class="mr-auto offset-md-1" style="width: 200px;">
<a href="{{url('home')}}"><input type="button" class="btn btn-danger btn-sm" name="" value="<- Reteur"></a>

</div>
<div class="card-body">
        <div class="container" style="width: 80%;">
          <form action="{{url('student')}}" method="POST">

            {{ csrf_field() }}
            <div class="form-group">
              <label for="firstName">First Name </label>
              <input type="text" class="form-control" name="fName" id="elastName">
            </div>
            <div class="form-group">
              <label for="lastName">Last name:</label>
              <input type="text" class="form-control" name="lName" id="efirstName">
            </div>

            <div class="form-group">
              <label for="responsable">Responsable Name:</label>
              <input type="text" class="form-control" name="rName" id="responsable">
            </div>
            <div class="form-group">
              <label for="cni">Responsable CNI:</label>
              <input type="text" class="form-control" name="cni" id="cni">
            </div>

            <div class="form-group">
              <label for="nuveau">Niveau:</label>
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <label class="input-group-text" for="nuveau">Options</label>
                </div>
                <select class="custom-select" id="nuveau" name="env">

                  <option selected>Choose...</option>
                  @foreach($levels as $level)

                  <option value="{{$level->id}}">{{$level->LevelName}} </option>
                  @endforeach
                </select>

              </div>
            </div>
                 <div class="form-group">
            <fieldset>

               <legend>Aggrement:<hr></legend>
                   <div class="form-group">
                      <label for="cni">Frais de inscription:</label>
                      <input type="text" class="form-control" name="inscription" id="cni">
                   </div>
                   <div class="form-group">
                      <label for="cni">paiement mensuel:</label>
                      <input type="text" class="form-control" name="payment" id="cni">
                   </div>
                   <div class="form-group">
                      <label for="cni">Frais de Assurance:</label>
                      <input type="text" class="form-control" name="assaurance" id="cni">
                   </div>
                   <div class="form-group">
                      <label for="cni">Frais de Garde:</label>
                      <input type="text" class="form-control" name="garde" id="cni">
                   </div>
                   <div class="form-group">
                      <label for="cni">Frais de transport:</label>
                      <input type="text" class="form-control" name="fraiTransport" id="cni">
                   </div>
            </fieldset>
          </div>
            <div class="form-group">
              <label for="nuveau">Group:</label>
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <label class="input-group-text" for="group">Options</label>
                </div>
                <select class="custom-select" id="nuveau" name="group">
                  <option selected>Choose...</option>
                  @foreach($groups as $group)
                  <option value="{{$group->id}}">{{$group->group_name}}</option>
                  @endforeach
                </select>
              </div>
            </div>


            <div class="form-group">
              <label for="payment">Payment:</label>
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <label class="input-group-text" for="payment">Options</label>
                </div>
                <select class="custom-select" id="payment" name="paymentD">
                  <option selected>Choose...</option>
                  @foreach($payment_dures as $payment_dure)
                  <option value="{{$payment_dure->id}}">{{$payment_dure->payment_dure_name}}</option>
                  @endforeach

                </select>
              </div>
            </div>

            <div class="form-group">
              <label for="dateStart"></label>
              <input type="date" class="#" id="dateStart" style="width: 49%;" name="edateStart">
              <label for="dateEnd">au:</label>
              <input type="date" class="#" id="dateEnd" style="width: 44%;" name="edateEnd">
            </div>

            <div class="form-group">
              <label for="MontantP">Montant paye:</label>
              <div class="input-group mb-3">
                <input type="text" class="form-control" name="MontantP" placeholder="" id="MontantP">
                <div class="input-group-append">
                  <span class="input-group-text">DH</span>
                </div>
              </div>
            </div>

            <div class="form-group">
              <label for="RestP">Rest a paye paye:</label>
              <div class="input-group mb-3">
                <input type="text" class="form-control" placeholder="" id="MontantR" name="RestP">
                <div class="input-group-append">
                  <span class="input-group-text">DH</span>
                </div>
              </div>
            </div>
            <p>
              <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1" style="width: 100%">Bus subscribtion</a>
              <div class="row">
                <div class="col">
                  <div class="collapse multi-collapse" id="multiCollapseExample1">
                    <div class="card card-body">
                      <div class="form-group">
                        <div class="form-group">
                          <label for="TMontantP">Montant paye:</label>
                          <div class="input-group mb-3">
                            <input type="text" class="form-control" placeholder="" id="TMontantP" name="TransportP">
                            <div class="input-group-append">
                              <span class="input-group-text">DH</span>
                            </div>
                          </div>
                        </div>
                          <div class="form-group">
                            <label for="TRestP">Rest a paye paye:</label>
                            <div class="input-group mb-3">
                              <input type="text" class="form-control" placeholder="" id="TRestP" name="TransportR">
                              <div class="input-group-append">
                                <span class="input-group-text">DH</span>
                              </div>
                            </div>
                          </div>


                          <div class="form-group">
                            <label for="TdateStart"></label>
                            <input type="date" class="#" id="TdateStart" style="width: 48%;" name="TdateStart">
                            <label for="dTateEnd">au:</label>
                            <input type="date" class="#" id="TdateEnd" style="width: 44%;" name="TdateEnd">
                          </div>


                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                  </p>
                  <br>



                <button type="submit" class="btn btn-secondary">Submit</button>

              </form>
            </div>



          </div>
        </div>
      </div>
    </div>

    @else

<div class="d-flex justify-content-center text-center">
<div class="alert alert-danger" role="alert" style="width: 70%">
  identifié vous d'abord
</div>
</div>
@endauth
 @endif

@endsection