Special Exercise 20

Table of contents

1. Multiple choice questions

    1. After the following code is executed, what is the information output by the console?

    2. Which of the following options is incorrectly described

    3. After the following code is executed, what is the result of array?

2. Programming questions

    1. Convert the parameter array to a string output


1. Multiple choice questions

1. After the following code is executed, what is the information output by the console?
for(let i = 0; i < 5; i++){
    requestAnimationFrame(() => console.log(i));
}

A、1 2 3 4 5

B、0 1 2 3 4

C、4 4 4 4 4

D、5 5 5 5 5

Correct answer: B Your answer: D

Parse:

(1) Although requestAnimationFrame is an asynchronous function , the for loop is a synchronous task . When a synchronous task encounters an asynchronous task, it will automatically suspend and continue to execute the synchronous task. i is defined in the for loop. let is a block-level scope , and there is no variable promotion. Repeated definition, the declared variable will not be used as a windows attribute, which means that the current i is only valid in the current cycle . It can be understood that the i of each cycle is actually a new variable, to put the current value and requestAnimationFrame in this role domain

(2) Extension: window.requestAnimationFrame() tells the browser that you want to execute an animation, and requires the browser to call the specified callback function to update the animation before the next redraw. This method needs to pass in a callback function as a parameter. The callback function Will be executed before the browser's next redraw


2. Which of the following options is incorrectly described

A. iframes are used to insert third-party pages into web pages. Early pages used iframes mainly for the navigation bar, which is the same part of many pages, so as to avoid repeated downloads when switching pages

B. The creation of iframe is 1-2 orders of magnitude slower than ordinary DOM elements

C. The iframe tag will block the loading of the page

D. The essence of iframe is the Incude mechanism of dynamic language and the use of ajax to dynamically fill content

correct answer: D

Parse:

(1) Limitations of iframe

① iframe creation is 1-2 orders of magnitude slower than the creation of general DOM elements

         Pages that use iframes generally do not contain too many iframes, so the time spent creating DOM nodes will not account for a large proportion

② Block page loading

        The window's onload event needs to be triggered after all iframes are loaded (including the elements inside). In Safari and Chrome, dynamically setting the SRC of the iframe through JavaScript can avoid this blocking situation

③The only connection pool

        In most browsers, the main page and the iframe within it share a connection . This means that the iframe may use up all available connections while loading resources, blocking the main page resources from loading. This is of course fine if the content in the iframe is more important than the content of the main page. But usually, the content in the iframe is less important than the content of the main page. It's not worth using up the available connections in the iframe at this point. One solution is to dynamically set the SRC of the iframe after the important elements on the main page are loaded

        Browsers can only open a small number of connections to the web server. Older browsers, including Internet Explorer 6 & 7 and Firefox 2, can only open two connections to a domain name (hostname) at the same time. This number limit has been increased in newer versions of the browser. Safari 3+ and Opera 9+ can open 4 connections to a domain at the same time, Chrome 1+, IE 8 and Firefox 3 can open 6 connections at the same time

④ Not conducive to SEO

        Search engine crawlers cannot interpret iframes. In addition, iframe itself is not a dynamic language, and both styles and scripts need to be imported additionally

(2) In-depth understanding

https://www.cnblogs.com/Leophen/p/11403800.html


3. After the following code is executed, what is the result of array?
var array=[-1,1,3,4,6,10];
array.sort((a,b)=>Math.abs(a-3)-Math.abs(b-3));

A、[10,-1,6,1,4,3]

B、[10,6,4,3,1,-1]

C、[3,4,1,6,-1,10]

D、[-1,1,3,4,6,10]

Correct answer: C Your answer: A

Parse:

(1) The sort() method is behind the bubble sort . For sortFunction(a,b), the a and b elements are adjacent elements in the array , but the positions of a and b in the array are b, a, that is, the b element is in In front of the a element , sortFunction(a,b) will return a value after execution. If the return value is >0 , that is  true , the positions of a and b remain unchanged , that is, b, a; if the return value is <0 , it is  false . Exchange the positions of a and b elements , that is, a and b; if the return value == 0 , the positions of a and b remain unchanged

(2) Analysis of the original question

①Original array var array= [-1,1,3,4,6,10] ;

②Parameter (a,b)=>Math.abs(a-3)-Math.abs(b-3): the absolute value of the value minus 3 [4, 2, 0, 1, 3, 7] is determined as a parameter to sort

③Arrange [0, 1, 2, 3, 4, 7] according to the size of the absolute value minus 3 , and the corresponding original array is sorted as [3, 4, 1, 6, -1, 10]


2. Programming questions

1. Convert the parameter array to a string output

Example: _join([1,'2',3]) -> "123"
Note: Only one-dimensional arrays and primitive data types are considered

Parse:

(1) join() method, convert array to string

<script>
    let array = [1,'2',3]
    function _join(array){
        return array.join('')
    }
    console.log(_join(array));
</script>

(2) forEach loops the array and assigns values ​​to the empty string x one by one

<script>
    let array = [1,'2',3]
    function _join(array){
        let x = ''
        array.forEach(element => {
            x = x + element
        });
        return x
    }
    console.log(_join(array));
</script>

(3) Convert the string first, the replaceAll() method removes the comma ',' and finally returns a new string

<script>
    let array = [1,'2',3]
    function _join(array){
        let x = array.toString().replaceAll(',','')
        return x
    }
    console.log(_join(array));
</script>

(4) reduce () method

<script>
    let array = [1,'2',3]
    function _join(array){
        let x = ''
        return array.reduce((pre,cur)=>pre+cur,x)
    }
    console.log(_join(array));
</script>

Guess you like

Origin blog.csdn.net/qq_51478745/article/details/131563191