58同城2018提早批前端筆試題總結

時間 2019-11-26

原文原文鏈接

今年58同城的題目出的不深，大可能是考點基本概念，範圍比較廣。javascript

有一點值得注意的是，58的筆試不支持在線編譯，代碼靠手寫。因此平時練習的時候要多重視手寫代碼的能力，由於編輯器編寫和手寫仍是有很大區別的，面試也有很大機率讓你手寫代碼。css

題型：10道填空，5個問答，2個應用，一道編程。html

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）判斷一個字符串是否是迴文串html5

//判斷是不是迴文串
function isPalindrome(str) {
    str = str.replace(/\W/g, '').toLowerCase();
    return (str == str.split('').reverse().join(''));
}

（2）定義一個含10個隨機數的數組，並去重java

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是函數纔會有的屬性。node

在JS裏，萬物皆對象。方法（Function）是對象，方法的原型(Function.prototype)是對象。所以，它們都會具備對象共有的特色。react

對象具備屬性__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