2019年最新web前端笔试题

1.编写js代码实现冒泡排序

2.编写js代码实现数组去重（考虑性能）

3.编写css代码实现div水平垂直居中

4.编写js代码实现在一个数组中删除另一个数组存在的值

var arr = [1, 2, 3, 4, '1', 0,  1, 2, 'a', 'b'];

var brr = [1, 2, 'a'];

结果：[3, 4, "1", 0, "b"]

5.下面代码输出的是什么，并简单解释一下

var name = 'World!';

(function () {

    if (typeof name === 'undefined') {

        var name = 'Jack'

        console.log('Goodbye ' + name)

    } else {

        console.log('Hello ' + name)

    }

})()

6.React性能优化，渲染20000多条checkbox组件，点击选择checkbox组件的时候特别卡，如何解决

import React, { Component } from 'react'

import { Checkbox } from 'antd'

class App extends Component {

  constructor(props) {

    super(props)

    this.state = {

      checked: []

    }      

  }

  render() {

    let list = this.list()

    return (

      <div>

        {list}

      </div>

    );

  }

}

Object.assign(App.prototype, {

  componentDidMount() {

    let arr = []

    for (let i = 0; i < 20000; i++) {

      arr.push(i)

    }   

    this.setState({

     checked: arr

    })

  },

  list() {

    let { checked } = this.state

    let arr = []

    for (let i = 0; i < 20000; i++) {

      arr.push(<Checkbox key={i} checked={checked.indexOf(i) >= 0}  onChange={this.handleChange.bind(this, i)}>{i}</Checkbox>)

    }

    return arr

  },

  handleChange(index, e) {

    let { checked } = this.state

    let tempIndex = checked.indexOf(index)

    if (e.target.checked) {

     if (tempIndex < 0) {

       checked.push(index)

     }     

    } else {

     if (tempIndex >= 0) {

       checked.splice(tempIndex, 1)

     }         

    }

    this.setState({

     checked: checked

    })

  }

})

export default App

7.如何实现React父组件控制子组件执行不同的方法进行渲染