Learn more about JavaScript: Get the maximum value in an array (this,apply)

Keywords: Javascript

1. Sorting

Idea: Sort the arrays first (from large to small), the first is the maximum

let arr = [1,5,6,7,9,20,40,2,3];
let max1 = arr.sort(function(a,b){
    return b-a;
})[0];
console.log(max1);

2. Assumptions

Idea: Assume that the first value is the maximum value, iterate through each subsequent item in the array in turn, and compare it with the hypothetical value. If it is larger than the hypothetical value, assign the current item to MAX...

let arr = [1,5,6,7,9,20,40,2,3];
let max2 = arr[0];
for(let i = 1; i <= arr.length; i++){
    let item = arr[i];
    item > max2 ? max2 = item : null;
}
console.log(max2);

3. Based on Math.max and apply

Ideas: Based on Math.max completion and apply features

let arr = [1,5,6,7,9,20,40,2,3];
console.log(Math.max.apply(null, arr));

This is an important solution to understand. call,apply,bind are often compared together
First, call, apply, bind are all three methods inherited from Function.prototype and are instance methods.
All three methods change the direction of this, but use slightly differently

this

What is this

This does not refer to the function itself or the lexical scope of the function.It is indeterminate when a function is defined, and bindings occur when a function is called, that is, what this points to depends on how you call the function.

How to judge this

1. Bind a method to an event of the current element, where THIS is the element object of the current operation when the event trigger method executes
2. General function execution, THIS in the function depends on the executing body, who executes it, who THIS is (executing body: method execution, see if there is a "point" in front of the method name, or, in some cases, who is this before the point and who is not this window)
Here's an example:

function myFunction(){
    console.log(this===window);
}    
var obj = {
    myFunction(){
        console.log(this===obj);
    }
}
myFunction();//true
obj.myFunction();//true

Now that you have a general understanding of this, let's look at the call method

window.name = 'windowName';
let fn = function(){
    console.log(this.name);
}
let obj = {
    name:'objName'
}
let obj1 = {
    name:'obj1Name'
}
fn();//windowName
fn.call(obj);//ObjName: Although it is an fn call, the call changes the direction of this, the direction of this is obj, so the value of obj.name is objName
fn.call(obj1);//obj1Name

When the call method executes, something is handled internally.First, change the this keyword in the function to be operated on to the argument value passed by the call method first, get the second and second subsequent arguments of the call method, execute the function to be operated on, and pass the second subsequent passed in argument to the function

function fn(a, b) {
   console.log(a + b);
}
fn.call(null, 1, 2); //3

Details in CALL

1. In non-strict mode, if the parameter is not passed, or if the first pass is null/undefined, this points to window
2. In strict mode, who is the first parameter, this points to whom (including null/undefined), and does not pass this as undefined
In the above code, if apply is used, then

function fn(a, b) {
   console.log(a + b);
}
fn.apply(null, [1, 2]); //3

apply: basically the same as call, the only difference is the way you pass parameters

fn.call(obj,10,20)
fn.apply(obj,[10,20]) //APPLY passes in parameters that need to be passed to FN in an array (or an array of classes). Although it writes an array, it is equivalent to passing to FN one by one

bind: The syntax is the same as call, the only difference is whether to execute immediately or wait for execution

fn.call(obj,10,20) changes THIS in FN and executes FN immediately
 fn.bind(obj,10,20) changes the THIS in FN when FN is not executed (incompatible with IE6~8)

The bind call is followed by a return to the original function, which needs to be called again

Go back to the original topic and maximize the array
Math.max(arr) is definitely wrong

console.log(Math.max(ary));//=>NaN 
//=>Math.max is to get the maximum value in a stack of numbers, which requires us to pass the number of comparisons one by one to this method//=>Math.max (12,13,14...) =>Math.max ([12,13,14...]) so that only one value is passed
Math.max.apply(null,arr);
//=>takes advantage of one feature of apply: although an array is placed, executing the method also passes each item in the array to the function one by one

4.ES6 Expansion Operator

console.log(Math.max(...arr));

Posted by jeff5656 on Sat, 10 Aug 2019 23:10:48 -0700