Title: [2021] 360 School Recruitment technology post – Objective question (WEB front end)

JS strict comparison

Question 1: Which of the following codes output is correct ()?

function showCase(value) {
    switch(value) {
    case 'A':
        console.log('Case A');
        break;
    case 'B':
        console.log('Case B');
        break;
    case undefined:
        console.log('Case undefined');
        break;
    default:
        console.log('Case default');
    }
}
showCase(new String('A'));
Copy the code

Correct answer: D Your answer: A (false)

A: Case A
Copy the code
B: Case B
Copy the code
C: Case undefined
Copy the code
D: Case default
Copy the code

Question 2: Which of the following codes output is correct ()?

function showCase(value) {
    switch(value) {
    case 'A':
        console.log('Case A');
        break;
    case 'B':
        console.log('Case B');
        break;
    case undefined:
        console.log('Case undefined');
        break;
    default:
        console.log('Case default');
    }
}
showCase(String('A'));
Copy the code

Correct answer: A Your answer: C (false)

A: Case A
Copy the code
B: Case B
Copy the code
C: Case undefined
Copy the code
D: Case default
Copy the code

Parsing switch means strictly comparing, i.e. ===

let str1 = 'A';
let str2 = String('A');
let str3 = new String('A');

typeof str1   // 'string'
typeof str2   // 'string'
typeof str3   // 'object'

'A'= = =String('A')   // true
'A'= = =new String('A')   // false
Copy the code

Cross domain and homology

Which of the following cross-domain statements is wrong ()?

Correct answer: A Your answer: C (false)

http://acmcoder.com/a.html and https://acmcoder.com/b.html are the same domain name, belong to the same originCopy the code
Using fonts with @font-face in CSS also poses cross-domain problemsCopy the code
Cookies, LocalStorage, and IndexedDB are all restricted by the same origin policyCopy the code
PostMessage, JSONP, and WebSocket are all common cross-domain solutionsCopy the code

Same domain name, same protocol, same port.

Client scripts (javascript, ActionScript) from different sources cannot read or write each other’s resources without explicit authorization.

Browsers cannot execute scripts from other sites. It is caused by the same origin policy of the browser, a security restriction that the browser imposes on JavaScript.

Links, redirects, and form submissions on pages are not restricted by the same origin policy.

Cross-domain solutions

Hash + iframe 4. Window. name + iframe 5. PostMessage 6. Cross-domain resource sharing (CORS) 7, Cross-domain nginx proxy 8, cross-domain NodeJS middleware proxy 9, cross-domain WebSocket protocol

The same origin policy restricts the following behaviors:

1.) Cookie, LocalStorage, and IndexDB cannot be read. 2.) DOM and Js objects cannot be obtainedCopy the code

Bubble and capture

The output of the following code is ()?

<div id="box1">
    <div id="box2">
        content
    </div>
</div>
<script>
    const$=document.querySelector.bind(document);
    const box1 = $('#box1');
    const box2 = $('#box2');
    
    box1.addEventListener('click'.() = > {
    console.log('box1 true');
    }, true);
    
    box1.addEventListener('click'.() = > {
    console.log('box1 false');
    }, false);
    
    box2.addEventListener('click'.() = > {
    console.log('box2 true');
    }, true);
    
    box2.addEventListener('click'.() = > {
    console.log('box2 false');
    }, false);
</script>
Copy the code

Correct answer: A Your answer: C (false)

A: box1 true, box2 true, box2 false, box1 false
Copy the code
B: box1 true, box2 false, box1 false, box2 true
Copy the code
C: box2 false, box2 true, box1 false, box1 true
Copy the code
D: box1 true, box1 false, box2 true, box2 false
Copy the code

parsing

Bubble: When an event occurs on an element, it first runs handlers on that element, then handlers on its parent element, and then all the way up to handlers on other ancestors. Inside out.

Capturing: Another stage of event processing is called “capturing.” It is rarely used in real development, but sometimes it is useful. From the outside in

The DOM event standard describes three stages of event propagation:

  1. Capturing Phase — Events (from Windows) move down to elements.
  2. Target Phase — The event reaches the Target element.
  3. Bubbling Phase — Events begin Bubbling on the elements.

The third parameter to addEventListener specifies at which stage the event is emitted, true during the capture phase and false(the default) during the bubble phase. Since event triggers are propagated from the DOM from the outside in, consider box1 and Box2 are glass, Light passes through box1 and is reflected back upon arrival. The order of light passes through is box1 -> Box2 (capture end) -> Box2 -> Box1 (bubble end)

Object.defineProperty(obj, prop, desc)

The output of the following code is ()?

<script>
    const student = {name: 'ZhangSan'}
    Object.defineProperty(student, 'age', {value: 22})
    console.log(student)
    console.log(Object.keys(student))
</script>
Copy the code

Correct answer: B Your answer: A (false)

{name: 'ZhangSan'}
['name','age']
Copy the code
{name: 'ZhangSan',age: 22}
['name']
Copy the code
{name: 'cb'}
['name','age']
Copy the code
{name: 'ZhangSan'}
['age']
Copy the code

parsing

Object.defineproperty (obj, prop, desc)

Enumerable (default false)/ 64x (default false) specifies the different information system that supports different information. The reset option is: Value /set/get/writable(default false)

Enumerable True only displays an attribute if it is enumerable on the corresponding object. That is, whether keys can be iterated over and retrieved

Enumerable {value: 22} Enumerable is false and cannot be used for in or object.keys

Math.ceil()

The output of the following code is ()

function * cb(x, y) {
    for(let i = Math.ceil(x); i <= y; i++) {
        yieldi; }}var a = cb(6.9);
console.log(a.next());
console.log(a.next());
Copy the code

Correct answer: B Your answer: empty (false)

6 6
Copy the code
6, 7Copy the code
6 and 9Copy the code
9 9
Copy the code

Parsing the JS function generator, Function * () {} function* () {} function* () {} function* () {} function* () {} function* () {} function* () {} function* () {} function* () { Let generates a scope for each I in the for loop, without interfering with each other and keeping the current assignment. If let is replaced by var, the result is all 9

Math.ceil() “round up” and math.floor () “round down” returns a rounded integer. Math.ceil() “round up” and math.floor () “round down” returns a rounded integer

The first time it is executed and returns I =6, I ++ is executed after the for loop ends. The second execution replaces I =7 and returns I =7.

Bubbling mouse events are not supported

The following mouse events that do not support bubbling are ()?

Correct answer: C Your answer: D (false)

mouseover
Copy the code
click
Copy the code
mouseleave
Copy the code
mousemove
Copy the code

Resolve UI events that do not support bubbling: load, unload, resize, abort, error Focus events that do not support bubbling: blur, focus Mouse events that do not support bubbling: mouseleave, mouseenter

$.Callbacks()

The output of the following js code is ()?

<script>
    $(function () { 
        function fn1( value ) {
            alert( value );
        }
        function fn2( value ) {
            fn1("A");
            return false;
        }
        var callbacks = $.Callbacks();
        callbacks.add( fn1 ); 
        callbacks.fire( "B" );
        callbacks.add( fn2 ); 
        callbacks.fire( "C" );
    })
</script>
Copy the code

Correct answer: C Your answer: C (True)

A B C
Copy the code
A C B
Copy the code
B C A
Copy the code
C A B
Copy the code

parsing

$.callbacks () is a multipurpose callback function list object that provides a powerful way to manage a queue of callback functions. The add method adds functions to the queue. Fire is the method in the execution queue. Execute to code block callbacks.fire(“C”); , fn1 and fn2 already exist in the queue. At this time, the fire method is executed and the two functions are executed successively with the parameter “C”. Therefore, fn1 executed first will output C, and then fn2 will output A

new

Run the following code, which of the numbers pops up in the correct order ()?

var a = 5;
 function test() { 
    a = 0; 
    alert(a); 
    alert(this.a); 
    var a;
    alert(a); 
}
new test();
Copy the code

Correct answer: D Your answer: C (false)

0, undefined 5Copy the code
0 0,Copy the code
0,5,0
Copy the code
0, undefined, 0Copy the code

parsing

When a function is executed using the new operator, it follows these steps:

  1. A new empty object is created and assigned to this.
  2. The function body executes. Typically, it will modify this to add new attributes to it.
  3. Return the value of this.

So this={}

this.a=undefined

For () with a Symbol and Symbol.

Which of the following results in true?

Correct answer: A Your answer: B (false)

Symbol.for('a') === Symbol.for('a')
Copy the code
Symbol('a') === Symbol('a')
Copy the code
NaN === NaN
Copy the code
= = = {} {}Copy the code

parsing

Symbol.for(key) will read the Symbol in the global Symbol registry (symbols that do not have this key will create one).

The global Symbol table ensures that the same Symbol is returned every time a Symbol with the same name is accessed.

CSS selectors

What is wrong with CSS selectors?

Correct answer: C Your answer: A (false)

Multiple classes are allowed per selectorCopy the code
Multiple pseudo-classes are allowed per selectorCopy the code
Multiple pseudo-elements are allowed per selectorCopy the code
Multiple ids are allowed per selectorCopy the code

parsing

Theoretically, id should be unique, class should be unlimited. However, #id>#id, when nested level by level, multiple ids can occur, while pseudo-elements are not allowed to have multiple ids

content box

Box {width: 200px; height: 200px; border: 2px solid red; margin: 10px; padding: 10px; } \

Correct answer: D Your answer: D (True)

244
Copy the code
240
Copy the code
220
Copy the code
224
Copy the code

parsing

In the standard model, if you set width and height for a box, you actually set the content box. The padding and border, together with the width and height set, determine the size of the box. Margin is not included, because that is the space outside the box, and the box ranges up to the border.

border-width

In the box model, the border-width is set incorrectly ()?

Correct answer: D Your answer: B (false)

border-width: thin;
Copy the code
border-width: medium;
Copy the code
border-width: 5px;
Copy the code
border-width: bold;
Copy the code

parsing

Border-width text attribute value only thin medium thick, no blod

flex

What is wrong in the following description?

Correct answer: A Your answer: B (false)

In layout, floating and elastic boxes can be used togetherCopy the code
After FLEX is used, the clear and vertical-align attributes become invalidCopy the code
With FLEX, you can easily center elements verticallyCopy the code
FLEX makes responsive layouts easierCopy the code

parsing

The parent element is the Flex layout, and the float, clear, and vertical-align attributes of the child elements are invalidated