2018拼多多校招前端笔试题

2018拼多多校招前端笔试题

1、'5'+3,'5'-3的结果是（B）

A.  error

B.  53,2

C.  other

D.  8,2

Js中，当执行加法运算时，因为第一个操作数'5'为字符串形式，所以优先采用字符串连接。

同理， 3 + 3 + '5'，计算结果应为 '65'

减法运算时，会尝试将操作数转换为 Number，再进行运算。所以 等同于 5 - 3，结果为 2。

2、下面关于进程与线程的关系不正确的是？（C）

A.  线程可以通过相互之间协同来完成进程所要完成的任务

B.  线程是进程的一个实体，可作为系统独立调度和分派的基本单位

C.  线程之间不共享进程中的共享变量和部分环境

D.  一个进程中多个线程并发执行

3、（A）

var ary = [0,1,2];

ary[10] = 10;

ary.filter(function(x){ returnx === undefined });

A.  [ ]

B.  [ undefined * 7]

C.  [ undefined ]

D.  [0,1,2,10]

var ary = [0,1,2];

ary[10] = 10;

console.log(ary);//[0, 1, 2, 10: 10]长度是11

console.log(ary[4]);//undefined

缺省元素是不能调用filter的，所以答案是[ ]

从 3 - 9 都是没有初始化的'坑'!, 这些索引并不存在于数组中. 在 array 的函数调用的时候是会跳过这些'坑'的.

4、当表单中包含文件上传控件时，需要将enctype设置为（D）

A. text/explain

B.  application/x-www-form-urlencoded

C.  file-data

D.  multipart/form-data

HTML表单如何打包数据文件是由enctype这个属性决定的。enctype有以下几种取值：

①application/x-www-form-urlencoded在发送前编码所有字符（默认）（空格被编码为’+’，特殊字符被编码为ASCII十六进制字符）

②multipart/form-data 不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。

③text/plain 空格转换为 “+” 加号，但不对特殊字符编码。

5、

const promise = new Promise((resolve,reject)=>{

    console.log('a');

    resolve();

    console.log('b');

});

promise.then(()=>{

    console.log('c');

});

console.log('d');

请给出输出结果（A）

A.  a b d c

B.  a b c d

C.  c a b d

Promise 构造函数是同步执行的，promise.then 中的函数是异步执行的。

6、（A）

var arr = new Array(5);

arr[1] = 1;

arr[5] = 2;

console.log(arr.length);

A.  6

B.  2

C.  报错

D.  5

7、下列哪个属性不会让div脱离文档流（normal flow）？（A）

A.  position:relative;

B.  position:absolute;

C.  float:left;

D.  position:fixed;

https://blog.csdn.net/theLostLamb/article/details/79581984

一般设置relative是为了让absolute有个相对定位的参照

所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。【 脱离文档流即是元素打乱了这个排列】 ， 或是从排版中拿走 。

A：position: absolute;

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位；都绝对定位了，肯定脱离了文档流。。

B:position: fixed;

生成绝对定位的元素，相对于浏览器窗口进行定位;相对于浏览器了，也和正常顺序排下来没什么关系。。

  C:position: relative;

生成相对定位的元素，相对于其正常位置进行定位。生成相对定位，也就是说还在原本的上下左右之间，上下左右的元素都不变，so这个没有能脱离文档流。。就这个了

D:float: left;都浮动出去了，还上哪保持原位置去。。

8、css属性position的值不包含（A）

A.  box

B.  absolute

C.  static

D.  inherit

absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative：生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

static默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

inherit：规定应该从父元素继承 position 属性的值。

9、下列哪些排序算法是不稳定的？（BD）

A.  插入排序

B.  快速排序

C.  冒泡排序

D.  选择排序

不稳定：希快选堆

希：希尔排序

快：快速排序

选：直接选择排序

堆：堆排序

10、

pi = 0;

radius = 1;

function circumference(radius) {

    radius = 3;

    pi = 3.14;

    console.log(2*pi*radius);

}

circumference(2);

以上函数的输出为（18.84）

11、以下代码会输出什么？

(function(x) {

    return (function(y) {

        console.log(x);

    })(2)

})(1);

请在此处填写答案：（1）

12、利用递归将数组obj的格式：

var obj = [

    {id:1,parent:null;},

    {id:2,parent:1;},

    {id:3,parent:2;}

];

转换为obj2的格式：

var obj2 = {

    obj:{

    id:1,

    parent:null,

    child:{

        id:2,

        parent:1,

        child:{

            id:3,

            parent:2

           }

       }

   }

}

//代码实现

var obj2 = {};

function createObj2(obj,child) {

    if(child.parent){

        if(obj.obj){

            createObj2(obj.obj,child);

        }else{

            if(obj.id === child.parent){

                obj.child={

                    id:child.id,

                    parent:child.parent,

                }

            }else{

                    if(obj.child){

                        createObj2(obj.child,child);

                    }else{

                        console.log('obj2未匹配到对应的parent对应关系')

                   }

           }

       }

}else{

    obj.obj = {

        id:child.id,

        parent:child.parent,

        child: {}

       }

   }

}

obj.forEach((item)=>{

    createObj2(obj2,item);

})

console.log('obj2:',obj2);

13、编写程序，找出数组arr中重复出现过的元素

输入[1,2,4,4,3,3,1,5,3]

输出[1,3,4]

方法一：

//代码实现

var arr = [1,2,4,4,3,3,1,5,3];

function duplicates(arr) {

    var newArr = [];

    arr.sort();

    console.log(arr);//[ 1, 1, 2, 3, 3, 3, 4, 4, 5 ]

    for(let i=0;i

        if(arr[i]==arr[i+1]&&(newArr.indexOf(arr[i]) == -1)){

            newArr.push(arr[i]);

            newArr.sort();

            i++;

       }

   }

console.log(newArr);//[1,3,4]

return newArr;

}

duplicates(arr);

方法二：

var arr = [1,2,4,4,3,3,1,5,3];

function duplicates(arr) {

    var newArr = [];

    for(let i=0;i

        for(let j=i+1;j

            if(arr[i]==arr[j]&&(newArr.indexOf(arr[i])==-1)){

                newArr.push(arr[i]);

                newArr.sort();

           }

       }

   }

console.log(newArr.sort());

return newArr;

}

duplicates(arr);

方法三：

var arr = [1,2,4,4,3,3,1,5,3];

function duplicates(arr) {

//声明两个数组，a数组用来存放结果，b数组用来存放arr中每个元素的个数

    var a=[],b=[];

    for(let i=0;i

    //遍历arr，如果以arr中元素为下标的的b元素已存在，则该b元素加1，否则设置为1

        if( !b[arr[i]] ){

            b[arr[i]] = 1;

            continue;

       }

    b[arr[i]]++;

   }

//遍历b数组，将其中元素值大于1的元素下标存入a数组中

for(let i=0;i

    if(b[i]>1){

    a.push(i);

       }

   }

console.log(a);

}

duplicates(arr);

方法四：

var arr = [1,2,4,4,3,3,1,5,3];

function duplicates(arr){

var brr=[];

arr.sort();

while(arr.length>0){

    //当值的第一个index ！= 最后一个index，即认为该值重复，将其赋予brr数组

    if(arr.indexOf(arr[0]) != arr.lastIndexOf(arr[0])){

    brr.push(arr[0]);

    //删除arr数组中所有与该值相同的值。

    arr.splice(arr.indexOf(arr[0]),arr.lastIndexOf(arr[0]));

}else{

    //当第一个index = 最后一个index，即该值不重复。直接删除。

    arr.shift();

       }

   }

console.log(brr);

}

duplicates(arr);

方法五：

var arr = [1,2,4,4,3,3,1,5,3];

function duplicates(arr) {

    var newArr = [];

    for(let i=0;i

    var count=0;

    for(let j=0;j

    if(arr[i] === arr[j]){

    count++;

           }

       }

if(count>1&&(newArr.indexOf(arr[i]) === -1)){

    newArr.push(arr[i]);

       }

   }

console.log(newArr);

}

duplicates(arr);

14、display:none 和 visibility:hidden 的区别？

1、display:none;

隐藏元素，不占网页中的任何空间，让这个元素彻底消失（看不见也摸不着）

2、visibility:hidden;

他是把那个层隐藏了，也就是你看不到它的内容但是它内容所占据的空间还是存在的。（看不见但摸得到）

3、overflow:hidden;

让超出的元素隐藏，就是在设置该属性的时候他会根据你设置的宽高把多余的那部分剪掉

15、

let arr1 = [1,2,3];

let arr2 = [4,5,6];

如何合并这两个数组？

Array.prototype.push.apply(arr1,arr2);

console.log(arr1);

16、当代码var a = new A('testa')执行时，会发生什么？

首先看一个例子

function A(name) {

    this.name = name;

    this.getName = function() {

        console.log(this.name);

    }

    var b = 'test';

    console.log(b);

}

var a = newA('testa');

A('TESTA');

当我们执行new A('testa')的时候 JS会这样做

① var o = new Object();

② o.__proto__ = A.prototype;  //这里还记得之那个function里面的默认的属性么?

③ A.call(o)  //由于这里this是指向o,可以把什么this.name/getName绑定到o上.

④ 把这个o返回给a;  //完成var a = new A()的过程.

这里注意下，上面所谓的第4步其实是一个简化的说法。真正的过程是在第3步之后，如果发现A返回是一个Object类型(非primitive类型，即非string,boolean,number,null,undefined类型就是Object类型)，则直接返回A的返回值，否则把第1步new的Object返回出去。(默认情况下，JS中函数默认返回值是undefined)

在JS中,绝大多数的函数都是既可以调用也可以实例化的。我们既可以直接执行函数得到函数的返回值。也可以通过new操作符得到一个对象。

17、用typeof bar === "object"判断bar是不是一个对象有什么弊端？如何避免这种弊端？

let obj = {};

let arr = [];

console.log(typeof obj === 'object');//true

console.log(typeof arr === 'object');//true

console.log(typeof null === 'object');//true

从上面的输出结果可知，typeof bar === "object" 并不能准确判断 bar 就是一个 Object。

可以通过 Object.prototype.toString.call(bar) === "[object Object]" 来避免这种弊端：

let obj = {};

let arr = [];

console.log(Object.prototype.toString.call(obj));//[object Object]

console.log(Object.prototype.toString.call(arr));//[object Array]

console.log(Object.prototype.toString.call(null));//[object Null]

18、简述一下什么是浅拷贝，什么是深拷贝，如何实现？

首先，浅拷贝和深拷贝都只针对于像Object， Array这样的复杂对象，

区别：浅拷贝只复制对象的第一层属性、深拷贝可以对对象的属性进行递归复制

浅拷贝（shallow copy）：只复制指向某个对象的指针，而不复制对象本身，新旧对象共享一块内存； 

深拷贝（deep copy）：复制并创建一个一摸一样的对象，不共享内存，修改新对象，旧对象保持不变。

//浅拷贝

var json1 = {"a":"name","arr1":[1,2,3]}

function copy(obj1) {

    var obj2={};

    for(let i in obj1) {

        obj2[i] = obj1[i];

　}

    return obj2;

}

var json2 = copy(json1);

json1.arr1.push(4);

console.log(json1.arr1); //1234

console.log(json2.arr1); //1234

通过浅拷贝得到的object2的family属性和object1的family属性在内存中指向同一个地址

//深拷贝（递归）

var json1 = {"name":"shauna","age":18,"arr1":[1,2,3,4,5],"string":'got7',"arr2":[1,2,3,4,5],"arr3":[{"name1":"shauna"},{"job":"web"}]};

var json2 = {};

function copy(obj1,obj2) {

    var obj2 = obj2 || {};

    for(let name in obj1) {

        if(typeof obj1[name] === "object") {

            obj2[name]=(obj1[name].constructor===Array)?[]:{};

            copy(obj1[name],obj2[name]);

        }else{

            obj2[name] = obj1[name];

       }

  }

return obj2;

}

json2 = copy(json1,json2)

json1.arr1.push(6);

console.log(json1.arr1); //123456

console.log(json2.arr1); //12345

19、编写一个输出日志的函数log，在输入的内容前加上前缀（app），如：

log('Hello World')返回"(app)Hello World"

log('Hello，World')返回"(app)Hello World"

//代码实现

function log(){

    //arguments是一个伪数组，在使用它之前得先把它转换成标准数组

    var args = Array.prototype.slice.call(arguments);

    args.unshift('(app)');

    console.log.apply(console,args);

}

log('Hello World');

log('Hello','World');

20、apply和call的区别

相同点：这两个方法的作用是一样的。

都是在特定的作用域中调用函数，等于设置函数体内this对象的值，以扩充函数赖以运行的作用域。

一般来说，this总是指向调用某个方法的对象，但是使用call()和apply()方法时，就会改变this的指向。

不同点：接收参数的方式不同。apply()方法 接收两个参数，一个是函数运行的作用域（this），另一个是参数数组。语法：apply([thisObj [,argArray] ]);，调用一个对象的一个方法，2另一个对象替换当前对象。

说明：如果argArray不是一个有效数组或不是arguments对象，那么将导致一个 TypeError，如果没有提供argArray和thisObj任何一个参数，那么Global对象将用作thisObj。

call()方法 第一个参数和apply()方法的一样，但是传递给函数的参数必须列举出来。语法：call([thisObject[,arg1 [,arg2 [,...,argn]]]]);，应用某一对象的一个方法，用另一个对象替换当前对象。

说明： call方法可以用来代替另一个对象调用一个方法，call方法可以将一个函数的对象上下文从初始的上下文改变为thisObj指定的新对象，如果没有提供thisObj参数，那么Global对象被用于thisObj。