拼多多后端架构拼多多前端开发

转载

mob6454cc68daf3 2024-01-02 11:17:54

文章标签 拼多多后端架构拼多多前端笔试前端 css 文章分类 架构后端开发

考试时间：2017-09-02-提前批内推-笔试

1）

拼多多后端架构拼多多前端开发_css

测试代码如下：

var a = {};
b = { key: 'b' };
c = { key: 'c' };
a[b] = 123;
a[c] = 456;
console.log(a); //{ '[object Object]': 456 }
console.log(a[b]); //456

a[b]通过索引’[object Object]'获取到对象a的一个属性。之所以结果是456，是因为a[b]和a[c]获取到的是同一个属性，a[c]=456这行代码覆盖了原有属性。

选D

拼多多后端架构拼多多前端开发_css_02

测试代码

(function() {
    var a = b = 3;  
})();

console.log(typeof a !== 'undefined'); // false
console.log(typeof b !== 'undefined'); // true

var a = b = 3 这段代码是从右往左执行的。先执行b =3 , 由于b在函数内未声明，所以被认为是全局变量，所以可以外部被访问，变量a在函数内被声明，所以在外部访问不到。

选A

拼多多后端架构拼多多前端开发_拼多多后端架构_03

console.log(NaN == NaN); //false
console.log(NaN === NaN); //false
console.log(undefined == null); //true
console.log(undefined === null); //false

关于NaN:

NaN compares unequal (via ==, !=, =, and !) to any other value – including to another NaN value.

选C

拼多多后端架构拼多多前端开发_拼多多后端架构_04

<!DOCTYPE>
<html>

<head>
    <style>

    </style>
</head>

<body>
    <input id="target" type="text">
    <script>
        var input = document.getElementById('#target');
        target.onmousedown = function() {
            console.log('onmousedown');
        }
        target.onmouseup = function() {
            console.log('onmouseup');
        }
        target.onclick = function() {
            console.log('onclick');
        }
        target.onfocus = function() {
            console.log('onfucs');
        }
    </script>
</body>

</html>

测试结果

onmousedown
onfucs
onmouseup
onclick

选C

拼多多后端架构拼多多前端开发_拼多多_05

var a1 = 111;
console.log(a1); //111
console.log(a2); // undefined
console.log(a3); // a3 in not defined
var a2 = 222;
a3 = 333;

var关键字的作用是声明提升。如果只是赋值a3=333并不能提升声明。而且提升的只是声明部分，不包括赋值。

选A

6）

拼多多后端架构拼多多前端开发_拼多多_06

看文档

new Date();
new Date(value);
new Date(dateString);
new Date(year, month[, date[, hours[, minutes[, seconds[, milliseconds]]]]]);
Parameters
value
Integer value representing the number of milliseconds since 1 January 1970 00:00:00 UTC, with leap seconds ignored (Unix Epoch; but consider that most Unix time stamp functions count in seconds).
dateString
String value representing a date. The string should be in a format recognized by the Date.parse() method (IETF-compliant RFC 2822 timestamps and also a version of ISO8601).
year
Integer value representing the year. Values from 0 to 99 map to the years 1900 to 1999. See the example below.
month
Integer value representing the month, beginning with 0 for January to 11 for December.
date
Optional. Integer value representing the day of the month.
hours
Optional. Integer value representing the hour of the day.
minutes
Optional. Integer value representing the minute segment of a time.
seconds
Optional. Integer value representing the second segment of a time.
milliseconds
Optional. Integer value representing the millisecond segment of a time.

new Date(dateString);这种方式实则调用Date.parse(),所以是这样的：

new Date(Date.parse(dataString))

而Date.parse()这个函数在不同浏览器上的行为是不一样的，所以不符合题意。

选A

拼多多后端架构拼多多前端开发_拼多多后端架构_07

各种黑科技啊

console.log(1 + '2' + '2'); //122
console.log(1 + +'2' + '2'); //32
// + 是一元操作符 +'2' 实则调用Number('2');
console.log(1 + -'1' + '2'); //
// - 也是一元操作符，和+一元操作符相比，除了正负不同，其他同理
console.log(+'1' + '1' + '2'); //112
console.log('A' - 'B' + '2'); // NaN2
// 'A'-'B' 调用toString(), NaN-NaN -> NaN,然后字符串拼接
console.log('A' - 'B' + 2); //NaN + 2 -> NaN

选D

8）

拼多多后端架构拼多多前端开发_css_08

只有在同一个元素上相继触发mousedown和mouseup事件，才会触发click事件，所以

选D

9）

拼多多后端架构拼多多前端开发_前端_09

直接看结果：

拼多多后端架构拼多多前端开发_拼多多_10

答案是都可以的，为什么呢。

setInterval和setTimeout一样，不能保证程序从什么时候开始执行。它内部的代码会进入一个消息队列，要等到执行栈空闲，且该代码在消息队列队首才会执行，所有是有延迟的。

其中涉及JS异步编程的原理。详见：JavaScript异步编程的原理

选D

拼多多后端架构拼多多前端开发_拼多多_11

<!DOCTYPE>
<html>

<head>
    <style>
        .one {
            z-index: 0;
        }
        
        .two {
            opacity: 0;
        }
        
        .three {
            width: 0;
            height: 0;
        }
    </style>
</head>

<body>
    <div class="one">hello world one z-index</div>
    <div class="two">hello world two opacity</div>
    <div class="three">hello world three height = width = 0</div>
    <script>
    </script>
</body>

</html>

测试结果：

拼多多后端架构拼多多前端开发_前端笔试_12

选B

另：如何使得一个不显示，详见 Five Ways to Hide Elements in CSS

11）

拼多多后端架构拼多多前端开发_css_13

关于盒子模型，详见：盒子模型和box-sizing属性

选D

12）

拼多多后端架构拼多多前端开发_css_14

基本包装类型比较的是对象的地址。

var s1 = new String('zxc');
var s2 = new String('zxc');
console.log(s1 == s2);//false
console.log(s1 === s2);//false

拼多多后端架构拼多多前端开发_css_15

请读者自行查阅文档，还是很简单的。

选B

拼多多后端架构拼多多前端开发_前端笔试_16

这个可以查阅文档：推荐书籍《图解HTTP》

选ABCD

拼多多后端架构拼多多前端开发_拼多多后端架构_17

一切引起改变元素位置和几何的属性变化都会引起回流

详见：网页性能管理详解

选ABCD

拼多多后端架构拼多多前端开发_拼多多_18

考察排序算法稳定性，很简单。

选A,D

拼多多后端架构拼多多前端开发_前端笔试_19

我对HTTP2.0不是很了解，详见：拼多多考试总结

另外：在HTTP/1,gzip用来压缩请求体，HTTP2.0用了新技术压缩请求头，但不是gzip,详见HTTP/2 头部压缩技术介绍

选BCD

18）

拼多多后端架构拼多多前端开发_前端笔试_20

选ACD

《JS高级程序设计》第2版P145提到了new关键字，new使用时会创建一个新对象，并将构造函数作用域赋给了新对象（因此this指向了新对象）

拼多多后端架构拼多多前端开发_css_21

闭包实现

//实则是个闭包
function mul(num) {
    return function(num2) {
        return function(num3) {
            return num * num2 * num3;
        }
    }
}
console.log(mul(2)(3)(4));//24

一道算法题

拼多多后端架构拼多多前端开发_前端_22