2018年前端社招筆試題分享

CoyPan發表於2019-02-16
前端筆試

以下是2018年年初，面某公司的筆試題。為啥現在才分享出來，純粹是因為之前懶。只分享題，沒有答案。

1.請通過程式碼實現下面的效果

function add(num){
    var total = 0; 
    var curryAdd = function(num){
        total = total + num;
        return total;
    }
    return curryAdd;
}

console.log(add(2)(3)); //結果為5
console.log(add(2)(3)(4)(5)); // 結果為14

2.請回答按鈕點選前後，程式碼中的兩個console.log在瀏覽器控制檯的輸出資訊
並解釋現象背後的原因.

let count = 0;

class MyComponent extends React.Component{
  constructor(){
    super();
    this.state = {
      count : count
    };
  }
  
  componentWillMount(){
    this.setState({
      count : ++count
    });
    
    this.setState({
      count : ++count
    });
    
    setTimeout(() => {
      this.setState({
        count : ++count
      });

      this.setState({
        count : ++count
      });
    }, 1000);
  }
  
  componentDidMount(){
    this.button.addEventListener(`click`, this.onClick.bind(this, `原生瀏覽器事件`), false);
  }
  
  onClick(info) {
    console.log(info);
    
    this.setState({
      count : ++count
    });
    
    this.setState({
      count : ++count
    });
  }
  
  render() {
    console.log(this.state.count);
    return (
      <div>
        <button type="button" ref={node => this.button = node} onClick={this.onClick.bind(this, `React事件`)}>生成新計數</button>
        <div>Count : {this.state.count}</div>
      </div>
    );
  }
}

ReactDOM.render(<MyComponent />, mountNode);

3.throttle的簡單實現


function throttle(func, duration) {
        // 在這裡編寫具體實現
}

window.addEventListener(`scroll`, throttle(func, 50), false);

4.實現一個深度優先搜尋演算法（非遞迴）

    
function dfs(tree, name){
    // 請在這裡實現
}

var tree = {
    name : `中國`,
    children : [
        {
            name : `北京`,
            children : [
                {
                    name : `朝陽群眾`
                },
                {
                    name : `海淀區`
                },
                {
                    name : `昌平區`
                }
            ]
        },
        {
            name : `浙江省`,
            children : [
                {
                    name : `杭州市`,
                    code : 0571,
                },
                {
                    name : `嘉興市`
                },
                {
                    name : `紹興市`
                },
                {
                    name : `寧波市`
                }
            ]
        }
    ]
};

var node = dfs(tree, `杭州市`);
console.log(node);    // { name: `杭州市`, code: 0571 }

5.編寫一個簡單的自定義事件處理器: 1.具備 on 方法繫結事件, 2.具備 off 方法解綁事件


function EventEmitter () {
    // TODO

}

var emitter = EventEmitter();

emitter.on(`foo`, function(e){
    console.log(`listening foo event 1`, e);
});

emitter.on(`foo`, function(e){
    console.log(`listening foo event 2`, e);
});

emitter.on(`bar`, function(e){
    console.log(`listening bar event`, e);
});

// 監聽全部事件
emitter.on(`*`, function(e){
    console.log(`listening all events`);
});

emitter.trigger(`foo`, {name : `John`});
emitter.trigger(`bar`, {name : `Sun`});
emitter.trigger(`*`, {name : `Sun`});
emitter.off(`foo`);

6.請用原生 JS 實現 DOM 拖動效果，儘量多考慮相容以及其他可能的情況

相關文章