directory

  • The introduction

    1. Proper function definition (easy)
    2. Using parseInt correctly (getting started)
    3. Exactly equivalent (getting started)
    4. Timer (medium)
    5. Process Control (Medium)
    6. Function passing parameters (getting started)
    7. Function Context (Getting started)
    8. Return function (simple)
    9. Using closures (medium)
    10. Quadratic wrapping functions (getting started)

The introduction

Niuke.com this front-end written test database, it can be said that the 60 is the most basic, but also inspect things more miscellaneous, have time 4 days almost can brush, consolidate the foundation or some use. Finish the problem review can be done all morning. Now I combine my answers with other people’s answers and make a summary here, which is also the result of sorting out my knowledge.

  • Front-end brush question – niuke.com front-end question bank 60 details (a)
  • Front-end brush question – niuke.com front-end question bank 60 details (two)
  • Front-end brush question – niuke.com front-end question bank 60 details (three)
  • Front-end brush question – niuke.com front-end question bank 60 details (four)
  • Front-end brush question – niuke.com front-end question bank 60 details (five)
  • Front-end brush question – niuke.com front-end question bank 60 details (six)

31. Correct function definition

Please fix the problem with the function definition in the given JS code input: true output: a

function functions(flag) {
    if (flag) {
      function getValue() { return 'a'; }}else {
      function getValue() { return 'b'; }}return getValue();
}
Copy the code
// Use function expressions
function functions(flag) {
    if (flag) {
      var getValue = ()  => { return 'a'; }}else {
      var getValue = () = > { return 'b'; }}return getValue();
}

// The top is the same as the bottom, and the variable is promoted
function functions(flag) {
    var getValue
    if (flag) {
      getValue = () = > { return 'a'; }}else {
      getValue = () = > { return 'b'; }}return getValue();
}
Copy the code

Related knowledge:

  • The way a function is defined

Function declarations: function declarations are promoted in scope before the function is executed, and declarations with the same name are overridden, as shown below.

Function expressions: With function expressions, the variable getValue is promoted again, and the different functions are executed according to the flow of the if statement.

32. Use parseInt correctly

Change the way parseInt is called in js code to pass all test cases input: ’12’ output: 12 Input: ’12px’ Output: 12 Input: ‘0x12’ Output: 0

// make sure it is base 10
function parse2Int(num) {
    return parseInt(num,10);
}
Copy the code

Related knowledge:

  • parseInt

ParseInt is often used in casts to explicitly cast to a number, take two arguments, and return a numeric value or NaN

ParseInt (string, radix) first argument is string, must be passed. The second argument is the base of the number, 2-36, if not passed or 0 is passed in base 10, NaN is returned if less than 2(not equal to 0) or greater than 36, if ‘0x’ starts in hexadecimal, ‘0’ starts in base 8 excluding 0.

When parseInt forces a cast, NaN is returned if the first digit is not a number, and NaN is filtered if the first digit is not a number. If it’s a decimal, it’s rounded down to a whole number.

33. identical

Determine whether val1 and val2 are identical

function identity(val1, val2) {
     return val1 === val2
}
Copy the code

Related knowledge:

  • equivalent

The difference between == and ===, in simple terms, is that == only determines the same value, encountered problems, === also determines whether the type is the same. I actually think we have to worry about NaN, NaN! == NaN

34. Correct function definition

Implement a clock timer

  1. From start to end (both start and end), console.log a number every 100 milliseconds, incrementing each number by 1
  2. The returned object needs to contain a cancel method to stop the timed operation
  3. The first number needs to be printed immediately
function count(start, end) {
    // The first one is output immediately
    console.log(start++)
    let time = setInterval(function () {
        if(start >= end) clearInterval(time)
        console.log(start++)
    },100)
    return {
        // The returned method is a function
        cancel: function () {
            clearInterval(time)
        }
    }
}
Copy the code

Related knowledge:

  • setInterval

The timer, if the first one is to be output immediately, needs to be written manually. Definition takes two parameters, the first is the function to execute each time, and the second is the execution interval. Return value The name of the receive timer that can be used to clear the timer.

  • closure

35. Process control

FizzBuzz (num); fizzBuzz (num); If num is divisible by 3, return fizzbuzz 2. If num is divisible by 5, return fizzbuzz 4. If num is divisible by 5, return buzz 4. Return false in other cases, return num input: 15; Output: fizzbuzz

function fizzBuzz(num) {
    // If num is null or not passed, isNaN is true
    if(isNaN(num)) return false
    if(num % 3= = =0 && num % 5= = =0) {
        return 'fizzbuzz'
    } else if (num % 3= = =0) {
        return 'fizz'
    } else if (num % 5= = =0) {
        return 'buzz'
    } else {
        return num
    }
}
Copy the code

Related knowledge:

  • Flow control: if-else
  • isNaN

IsNaN (), which returns true if the argument is not a Number. Since ES6, the method number.isnan () has been added to determine if it is a NaN

  • Take more than %

36. Function and the cords

Call fn with an element from array arr as an argument: function (greeting, name, punctuation) {return greeting + ‘, ‘ + name + (punctuation || ‘! ‘); }, [‘Hello’, ‘Ellie’, ‘!’] Output: HelloEllie!

// Method 1: tailor-made, pass array
function argsAsArray(fn, arr) {
    return fn.apply(this,arr)
}

// If you use call, you need to shatter it with an extension
function argsAsArray(fn, arr) {
    return fn.call(this. arr) }// Bind
function argsAsArray(fn, arr) {
    return fn.bind(this. arr)() }Copy the code

Related knowledge:

  • Apply /call/bind
  • Fn parameter transfer problem

37. Function context

Function () {return this.greeting + ‘, ‘+ this.name + ‘!!! ‘; }, {greeting: ‘Hello’, name: ‘Rebecca’}

// Apply
function speak(fn, obj) {
    return fn.apply(obj)
}

// Call
function speak(fn, obj) {
    return fn.call(obj)
}

// Bind
function speak(fn, obj) {
    return fn.bind(obj)()
}
Copy the code

Related knowledge:

  • This points to the

Apply /call/bind can change the execution context. If fn is called directly, this refers to window, and if apply/call/bind changes this to obj

38. Returns the function

The functionFunction is called to satisfy the following conditions: 2, the return value of the function f is the concatenation of the arguments in the order of the call. The concatenation characters are English comma and a space, that is, ‘, ‘. 3, the number of arguments of all functions is 1, and they are all String input: FunctionFunction (‘Hello’)(‘world’) Output: Hello, world

function functionFunction(str) {
    return function f(. arg) {
        // Remember to add a space after the comma to pass oj
        return str + ', '+arg
    }
}
Copy the code

Related knowledge:

  • Closure + Coriolization

Closures are variables that one function can access the scope of another function.

39. Using closures

Implement the makeClosures sures when called under the following conditions: 1. Return an array of functions result, of the same length as arr; 2. Run the ith function of result, result[I](), with the same result as fn(arr[I]) input:

[1.2.3].function (x) { 
	return x * x; 
}
Copy the code

Output: 4

/ / closures
function makeClosures(arr, fn) {
    let result = []
    for(let i = 0; i < arr.length; i++) {
        result.push(function(){
          return fn(arr[i])  
        })
    }
    return result
}
Copy the code

Related knowledge:

  • closure

If the closure is not used, then the roar of the for loop will always be arr.length when the function is called. If the closure is used, it can be the value of I in the loop at that time.

40. Quadratic encapsulation function

We know that the function fn takes three arguments to execute. Return partial result(str3). Return partial result(str1, str2, str3). var sayIt = function(greeting, name, punctuation) { return greeting + ‘, ‘ + name + (punctuation || ‘! ‘); }; partial(sayIt, ‘Hello’, ‘Ellie’)(‘!!! ‘);

Output: Hello, Ellie!!

// Method 1: call this directly, since this is not involved, call arguments directly, since arguments is an array of classes
function partial(fn, str1, str2) {
    return function result() {
        return fn(str1,str2,arguments[0])}}// Method two: use the extension operator to get the parameter passed in, more general
function partial(fn, str1, str2) {
    return function result(. arg) {
        return fn(str1,str2,arg)
    }
}

// ES6 arrow function, this refers to undefined
const partial = (fn, str1, str2) = > str3= > fn(str1, str2, str3)
Copy the code

Related knowledge:

  • closure
  • Gets the function argument

Arguments.length gets elements with array subscript arguments.callee (ES5 strict mode disabled)

The following things may be a little difficult ~~~