Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of web front-end case analysis, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe you will gain something after reading this web front-end case analysis article. Let's take a look at it.

Text

The rules of this question are like this.

Given an Add function, call Add (1) (2) (3). SumOf (); / output 6Add (1) (2) (3) (4). SumOf (); / / output 10Add (1) (2) (3) (4) (3) (4) (4). SumOf (); / /.

When I get this kind of problem, I will first talk about my own problem-making process, and I will generally look for its simplest form. Let's disassemble it step by step.

Remove sumOf () first and change it to the following form

Add.) (3) (4) (...)

Um... A little familiar. But it's still a little complicated, so let's remove the restriction of unlimited calls.

Add (1 and 2) (3) (4)

Well, it's still a little difficult. It doesn't matter, cut again, don't pass in multiple parameters.

Add (1) (2) (3)

There is. There is. It smells like that. This. Isn't this Corey.

Some children may not have heard of it, but they are familiar and well-versed to older friends.

Let's introduce it.

In the book javascript Advanced programming, it is described as follows:

A topic closely related to function binding is function Corialization, which is used to create a function with one or more parameters that has been set. The basic method of function Corialization is the same as function binding: a closure is used to return a function. The difference between the two is that when the function is called, the returned function also needs to set some parameters passed in.

Let's write and see:

Function Add (x) {return function (y) {return return functio (z) {return x+y+z;}} / / abbreviated const Add = x = > y = > z = > x+y+z

Execute it.

Add (1) (2) (3) / 6

It's the smell we want.

So now that we have written this form, we will push back step by step.

Don't be nervous at this time. Let's start from the lowest form and write the most basic form, which can effectively help us build self-confidence and settle down. In this way, even if we don't write a perfect result in the end, it's also a bonus for the interviewer to see you think about the process of solving the problem.

Okay, go on.

Then we need to achieve this next.

Add (1 and 2) (3) (4)

Pass in more than one parameter

We know that for uncertain parameters, we can use the object arguments to get all the input parameters, but arguments is not an Array, but we can use Spread syntax (expansion syntax) in ES6 to turn it into an array. The show continues.

Function Add () {const nums = [... arguments]; return function () {nums.push (.duration); return function () {nums.push (.duration); return nums.reduce ((a, b) = > a + b);}

Nice! It's getting closer and closer to our final form. The next step is that this function can be called indefinitely.

Add.) (3) (4) (...)

So how can I call it indefinitely? That's right, recursion.

Function Add () {const nums = [... arguments]; function AddPro () {nums.push (.. return AddPro;); return AddPro;} return AddPro;}

Well, actually we found it here. Because it is infinitely recursive, we cannot determine the last function call, so we need to explicitly call an ending method to print out the final data.

Naturally, we can add a method sumOf to AddPro to solve this problem.

The younger brother was stuck here and was confused by the last method added to the function. Do you know?

Function Add () {const nums = [... arguments]; function AddPro () {nums.push (..); return AddPro;} AddPro.sumOf = () = > {return nums.reduce ((a, b) = > a + b);} return AddPro;}

All right, it's over.

Wait

In the end, I would like to add a scheme. Function can not only continue to mount function ~ but also mount variables.

Function Add () {if (! Add.nums) {Add.nums = [];} Add.nums.push (.. return Add;); return Add;} Add.sumOf = () = > {return Add.nums.reduce ((a, b) = > a + b);}

Let's summarize the basic knowledge involved in the small interview questions.

Closures, recursions, scopes, functions and objects

The foundation is the foundation, will always be your father, master the foundation, in order to remain unchanged to cope with changes.

This is the end of the article on "web front-end example analysis". Thank you for reading! I believe you all have a certain understanding of the knowledge of "web front-end case analysis". If you want to learn more knowledge, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.