web前端刷题笔记 - 10.17

Emist
1,350 阅读4分钟

题目：【2021】360校招技术岗-客观题（WEB前端）

JS严格比较

题1： 如下代码输出正确的是()？

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'));

正确答案: D   你的答案: A (错误)

A: Case A

B: Case B

C: Case undefined

D: Case default

题2： 如下代码输出正确的是()？

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'));

正确答案: A   你的答案: C (错误)

A: Case A

B: Case B

C: Case undefined

D: Case default

解析 switch 意味着严格比较，即 ===

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

跨域和同源

以下关于跨域说法错误的是(   )？

正确答案: A   你的答案: C (错误)

http://acmcoder.com/a.html和https://acmcoder.com/b.html是相同的域名，属于同源

CSS中通过@font-face使用字体也会有跨域问题

Cookie，LocalStorage和IndexedDB都会受到同源策略的限制

postMessage，JSONP，WebSocket都是常用的解决跨域的方案

同源是指，域名，协议，端口相同。

不同源的客户端脚本(javascript、ActionScript)在没明确授权的情况下，不能读写对方的资源。

浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。

页面中的链接，重定向以及表单提交是不会受到同源策略限制的。

跨域解决方案

1、 通过jsonp跨域
2、 document.domain + iframe跨域
3、 location.hash + iframe
4、 window.name + iframe跨域
5、 postMessage跨域
6、 跨域资源共享（CORS）
7、 nginx代理跨域
8、 nodejs中间件代理跨域
9、 WebSocket协议跨域

同源策略限制以下几种行为：

1.) Cookie、LocalStorage 和 IndexDB 无法读取 2.) DOM 和 Js对象无法获得 3.) AJAX 请求不能发送

冒泡与捕获

以下代码执行后输出结果为（      ）？

<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>

正确答案: A   你的答案: C (错误)

A: box1 true, box2 true, box2 false, box1 false

B: box1 true, box2 false, box1 false, box2 true

C: box2 false, box2 true, box1 false, box1 true

D: box1 true, box1 false, box2 true, box2 false

解析

冒泡： 当一个事件发生在一个元素上，它会首先运行在该元素上的处理程序，然后运行其父元素上的处理程序，然后一直向上到其他祖先上的处理程序。从内而外。

捕获： 事件处理的另一个阶段被称为“捕获（capturing）”。它很少被用在实际开发中，但有时是有用的。从外而内

DOM 事件标准描述了事件传播的 3 个阶段：

  1. 捕获阶段（Capturing phase）—— 事件（从 Window）向下走近元素。
  2. 目标阶段（Target phase）—— 事件到达目标元素。
  3. 冒泡阶段（Bubbling phase）—— 事件从元素上开始冒泡。

addEventListener 的第三个参数规定事件在什么阶段触发，true 是在捕获阶段触发，false(默认值) 在冒泡阶段触发，由于事件触发是自dom从外向内传播，考虑 box1 和 box2 是上下堆叠的玻璃，光传过 box1 和 box2 到达后反射回来，光穿过的的顺序为 box1 -> box2(捕获结束) -> box2 -> box1(冒泡结束)

Object.defineProperty(obj, prop, desc)

下面代码执行后的输出结果为（      ）？

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

正确答案: B   你的答案: A (错误)

{name: 'ZhangSan'}
['name','age']

{name: 'ZhangSan',age: 22}
['name']

{name: 'cb'}
['name','age']

{name: 'ZhangSan'}
['age']

解析

考察语法：Object.defineProperty(obj, prop, desc)

desc 配置项为：value/set/get/writable(默认false)/enumerable(默认false)/configurable(默认false)

enumerable true 只有在枚举相应对象上的属性时该属性显现。也即是否能被迭代和获取keys

此题desc为{value: 22}，那么没有配置enumerable默认为false，不能被for in或者Object.keys

Math.ceil()

下面代码执行后的输出结果为（      ）

function * cb(x, y) {
    for(let i = Math.ceil(x); i <= y; i++) {
        yield i;
    }
}

var a = cb(6, 9);
console.log(a.next());
console.log(a.next());

正确答案: B   你的答案: 空 (错误)

6 6

6 7

6 9

9 9

解析 JS函数生成器，function* () {}
1、函数生成器特点是函数名前面有一个 ‘*’
2、通过调用函数生成一个控制器
3、调用next()方法开始执行函数
4、遇到yield函数将暂停
5、再次调用next()继续执行函数
let会给for循环中的每一个i都生成一个作用域，互不干扰，保留当时的赋值，如果把let换成var，结果就都是9了

Math.round()  “四舍五入”， 该函数返回的是一个四舍五入后的的整数
Math.ceil()  “向上取整”， 即小数部分直接舍去，并向正数部分进1
Math.floor()  “向下取整” ，即小数部分直接舍去 \

第一次执行并返回 i=6, i++ 在 for 循环结束后执行。 第二次执行带入 i=7，返回 i=7。

不支持冒泡的鼠标事件

以下不支持冒泡的鼠标事件为（      ）？

正确答案: C   你的答案: D (错误)

mouseover

click

mouseleave

mousemove

解析 不支持冒泡的UI事件：load、unload、resize、abort、error
不支持冒泡的焦点事件：blur、focus
不支持冒泡的鼠标事件：mouseleave、mouseenter

$.Callbacks()

下列js代码执行后的输出为（      ）？

<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>

正确答案: C   你的答案: C (正确)

A B C

A C B

B C A

C A B

解析

$.Callbacks() 指一个多用途的回调函数列表对象，提供了一种强大的方法来管理回调函数队列。 add方法是向队列中添加函数。
fire是执行队列中的方法。
执行到代码块callbacks.fire( "C" );时，队列中已经存在了fn1和fn2，此时执行fire方法，依次执行这两个函数，参数为“C”，故先执行的fn1会输出C，再执行fn2，输出A

new

运行下列代码，依次弹出的数字顺序正取的是（）？

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

正确答案: D   你的答案: C (错误)

0，undefined，5

0,0,0

0,5,0

0，undefined，0

解析

当一个函数被使用new操作符执行时，它按照以下步骤：

  1. 一个新的空对象被创建并分配给this。
  2. 函数体执行。通常它会修改this，为其添加新的属性。
  3. 返回this的值。

所以此处的this={}

this.a=undefined

Symbol 和 Symbol.for()

下列代码结果为 true 的是？

正确答案: A   你的答案: B (错误)

Symbol.for('a') === Symbol.for('a')

Symbol('a') === Symbol('a')

NaN === NaN

{} === {}

解析

Symbol.for(key)会在在全局 Symbol 注册表中读取Symbol（没有这个key的Symbol则创建一个）。

全局Symbol表可以确保每次访问相同名字的 Symbol 时，返回的都是相同的 Symbol。

CSS 选择器

关于 CSS 选择器，以下说法错误的是？

正确答案: C   你的答案: A (错误)

每条选择器允许出现多个 class

每条选择器允许出现多个伪类

每条选择器允许出现多个伪元素

每条选择器允许出现多个id

解析

理论上来说 id 应该唯一，class不限。 但 #id>#id，一级一级嵌套的时候是会出现多个id的情况，而伪元素是不允许出现多个的

content box

下面box盒模型中，box的实际宽度为（）
.box{
width: 200px;
height: 200px;
border: 2px solid red;
margin: 10px;
padding: 10px;
}\

正确答案: D   你的答案: D (正确)

244

240

220

224

解析

在标准模型中，如果你给盒设置 width 和 height，实际设置的是 content box。 padding 和 border 再加上设置的宽高一起决定整个盒子的大小。不包含margin，因为那是盒子外部的空间，盒子的范围到边框为止。

border-width

盒子模型中，关于border-width的设置错误的是（）？

正确答案: D   你的答案: B (错误)

border-width: thin;

border-width: medium;

border-width: 5px;

border-width: bold;

解析

border-width的文字属性值只有thin medium thick 这三个，没有blod

flex


下列描述中错误的是（）

正确答案: A   你的答案: B (错误)

布局时，浮动和弹性盒子可以配合使用

使用FLEX后，clear和vertical-align属性将失效

使用FLEX后，可以方便元素的垂直居中

FLEX更加方便响应式布局

解析

父元素是flex布局，子元素的float、clear和vertical-align属性将会失效

avatar
文章
阅读
粉丝