58同城2018提前批前端笔试题总结

今年58同城的题目出的不深，大多是考点基本概念，范围比较广。

有一点值得注意的是，58的笔试不支持在线编译，代码靠手写。所以平时练习的时候要多重视手写代码的能力，因为编辑器编写和手写还是有很大区别的，面试也有很大概率让你手写代码。

题型：10道填空，5个问答，2个应用，一道编程。

1.编程题

实现对象的深复制deepclone函数。

//利用 递归 来实现深复制，对属性中所有引用类型的值，遍历到是基本类型的值为止。
function deepclone(src){
    if(!src && typeof src !== 'object'){
        return;
    }
    var dst = src.constructor === Array ? []:{};
    for(key in src){
        if(src.hasOwnProperty(key)){
            if(src[key] && typeof src[key] === 'object'){
                dst[key] = src[key].constructor === Array ? []:{};
                dst[key] = deepclone(src[key]);
            }else{
                dst[key] = src[key];
            }
        }
    }
    return dst;
}
var a = {
    name : 'orange',
    age : '24',
    arr : [1,2,3,{a:2, b:'hello'},[4,5]],
    clone: function(){
        console.log('helloworld');
    }
}
a.clone(); //helloworld
console.log(typeof a.clone);  //function
console.log(deepclone(a));
// { name: 'orange',
//   age: '24',
//   arr: [ 1, 2, 3, { a: 2, b: 'hello' }, [ 4, 5 ] ],
//   clone: [Function: clone] }

2.应用题

（1）判断一个字符串是不是回文串

//判断是否是回文串
function isPalindrome(str) {
    str = str.replace(/W/g, '').toLowerCase();
    return (str == str.split('').reverse().join(''));
}

（2）定义一个含10个随机数的数组，并去重

var arr = [];
for(var i=0; i<100; i++){
    var num = parseInt(Math.random()*100);
    arr[i] = num;
}
function unique(arr){
    var newArr = [];
    for(var i=0; i<arr.length; i++){
        if(newArr.indexOf(arr[i]) == -1){
            newArr.push(arr[i]);
        }
    }
    return newArr;
}
console.log(arr);
console.log(unique(arr));

3.问答题

（1）prototype和_proto_的原理和区别

_proto_是每个对象都有的一个属性，而prototype是函数才会有的属性。

在JS里，万物皆对象。方法（Function）是对象，方法的原型(Function.prototype)是对象。因此，它们都会具有对象共有的特点。

对象具有属性__proto__，可称为隐式原型，一个对象的隐式原型指向构造该对象的构造函数的原型，这也保证了实例能够访问在构造函数原型中定义的属性和方法。

方法这个特殊的对象，除了和其他对象一样有上述_proto_属性之外，还有自己特有的属性——原型属性（prototype），这个属性是一个指针，指向一个对象，这个对象的用途就是包含所有实例共享的属性和方法（我们把这个对象叫做原型对象）。原型对象也有一个属性，叫做constructor，这个属性包含了一个指针，指回原构造函数。

总结：
1.对象有属性__proto__,指向该对象的构造函数的原型对象。
2.方法除了有属性__proto__,还有属性prototype，prototype指向该方法的原型对象。

（2）事件捕获和冒泡应该如何管理？怎么阻止？

addEventListener      false:事件冒泡  true:事件捕获

//阻止事件冒泡
function stopBubble(event){
    if(window.event){//兼容IE
        window.event.cancelBubble=true;
    }else{
        event.stopPropagation();
    }
}

//阻止默认事件
function stopDefaultEvent(event){
    if(window.event){//兼容IE
        window.event.returnValue=false;
    }else{
        event.preventDefault()
    }
    return false;
}

（3）闭包的原理和应用

当函数可以记住并访问所在的词法作用域时就产生了闭包，即使函数是在当前词法作用域之外执行。

//手写一个闭包
function outer(){
    var a = 2;
    function inner(){
        console.log(a);
    }
    return inner;
}
var result = outer();//result引用内部函数outer
result(); //2

闭包的特点：函数嵌套函数、内部函数可以引用外部函数的参数和变量（词法作用域）、参数和变量不会被垃圾回收机制收回

好处：希望一个变量长期驻扎在内存中、避免全局变量的污染、私有成员的存在

应用：闭包通常用来创建内部变量，使得这些变量不能被外部随意修改，同时又可以通过指定的函数接口来操作。 代码封装、模块化。

（4）js的异步编程方法

回调函数、promise对象、事件监听、发布/订阅     Javascript异步编程的4种方法

（5）react的setState是同步还是异步？执行setState之后发生了什么？

4.填空题

（1）3+true = 4

（2）http协议的前端缓存的四种方法

（3）Node.js的核心模块   nodejs常用核心模块介绍

HTTP模块：处理客户端的网络请求

URL模块：处理客户端请求过来的URL

Query Strings模块：处理客户端通过`get/post`请求传递过来的参数

File System模块：在服务端来操作文件,可能是需要将浏览器上传的图片保存到服务器,也可能是需要将服务器的资源读取之后返回给浏览器

Path模块：操作文件的路径,为文件操作服务

Global模块：全局共享的,不需要导入模块即可以使用

（4）html5的本地存储     cookie、localStorage、sessionStorage

（5）写出四种设计模式   工厂模式、单例模式、观察者模式、原型模式        设计模式

（6）css中的单位 rem和em分别相对于什么？

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。