为什么这个JavaScript函数被调用两次？

Question

In this sample from W3 School Array Sort, the function displayCars seems to be called 2 times. It's called before the first function and inside the first function. Could someone explain the reasoning behind this? I'm having trouble understanding why. Thanks in advance.

 var cars = [ {type:"Volvo", year:2016}, {type:"Saab", year:2001}, {type:"BMW", year:2010}] displayCars(); function myFunction() { cars.sort(function(a, b){return a.year - b.year}); displayCars(); } function displayCars() { document.getElementById("demo").innerHTML = cars[0].type + " " + cars[0].year + "<br>" + cars[1].type + " " + cars[1].year + "<br>" + cars[2].type + " " + cars[2].year; } 

 <div id="demo"></div> 

Answer 1

It's actually only being called once because the second call for displayCars() is inside of myFunction , which is never being called.

Change the code to call myFunction and stay away from W3 Schools as it is well known to have incorrect and outdated information. Use the Mozilla Developer Network instead .

 var cars = [ {type:"Volvo", year:2016}, {type:"Saab", year:2001}, {type:"BMW", year:2010}] myFunction(); function myFunction() { cars.sort(function(a, b){return a.year - b.year}); displayCars(); } function displayCars() { document.getElementById("demo").innerHTML = cars[0].type + " " + cars[0].year + "<br>" + cars[1].type + " " + cars[1].year + "<br>" + cars[2].type + " " + cars[2].year; } 

 <div id="demo"></div> 

Answer 2

I is caalled twice to show the result before sorting and after sorting.

You need to add the call of myFunction as well.

 function myFunction() { cars.sort(function(a, b){return a.year - b.year}); displayCars(); } function displayCars() { document.getElementById("demo").innerHTML += cars[0].type + " " + cars[0].year + "<br>" + cars[1].type + " " + cars[1].year + "<br>" + cars[2].type + " " + cars[2].year + '<hr>'; } var cars = [{ type: "Volvo", year: 2016 }, { type: "Saab", year: 2001 }, { type: "BMW", year: 2010 }]; displayCars(); // show content myFunction(); // sort and show content 

 <div id="demo"></div> 

Answer 3

它被称为一次，但是为什么在代码中两次提到它却是为了让您按原样以及对结果进行排序后查看结果。

Answer 4

The function is not called twice in your snippet. I'm assuming there's more code we haven't seen, which calls myFunction ; the purpose of calling the function twice would then be to show the effect of the sorting function. Assuming myFunction is called after the display function, the program would do the following:

• Display the cars in the (unsorted) order they start in
• Run myFunction which sorts the cars then displays them again

This would allow the user to see the difference between the car list before and after it's sorted.

Answer 5

It is run only once. You are not call myFunction() function. If you call it the array will sort. Try this one.

var cars = [
{type:"Volvo", year:2016},
{type:"Saab", year:2001},
{type:"BMW", year:2010}]

myFunction();

function myFunction() {
    cars.sort(function(a, b){return a.year - b.year});
    displayCars();
}

function displayCars() {
  document.getElementById("demo").innerHTML =
  cars[0].type + " " + cars[0].year + "<br>" +
  cars[1].type + " " + cars[1].year + "<br>" +
  cars[2].type + " " + cars[2].year;
}

myFunction() will sort array. displayCars() will show array.