笔试题

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天，点击查看活动详情。

1. 判断 字符串 str 是否以 a o e i u 结尾，包括大小写

   这道题的方法解法很多，在面试的时候尽可能多的展示给面试官，表现出自己对数据方法的熟练即可

    function check(str) {
        str = str.toLowerCase()
        let code = 'aoeiu'.split('')
        return code.some(c => str.endsWith(c))
    }
    //方法1
    function check(str) 
        let code = 'aoeiu'.split('')
        code = code.concat(code.map(r=>r.toUpperCase()))
        return code.some(c => str.endsWith(c))
    }
    ​
    function check(str) {
        return /[aoeiu]$/i.test(str)
    }
    ​
    function check(str) {
        str = str.toLowerCase()[str.length - 1]
        return 'aoeiu'.includes(str)
    }
    ​
    ​
    check('simba') // true
    check('tom')   // false
   

2. 统计字符串中出现次数最多的字符

   本题考察擂台算法，把每个字符出现的次数存起来，然后依次比对，每次出现大的就把小的丢弃，这样最后剩下的就是最大的，即出现次数最多的字符

    //hello tom,i`m jerry,i miss you so much
    function getMaxCode(str){
        let obj = {}
        let Maxcode = {
            code: '',
            count: 0
        }
        for (let i = 0; i < str.length; i++) {
            let code = str[i]
            if (!obj[code]) {
                obj[code] = 1
            }else{
                obj[code]++
            }
            //打擂台 比较大小  谁大谁上
            if (obj[code] > Maxcode.count){
                Maxcode = {code,count:obj[code]}
            }
        }
        return Maxcode
    }
    console.log(getMaxCode('hello tom,i`m jerry,i miss you so much'))
   

3. 函数作用域和this指向问题

   常规函数的this指向取决于函数调用的作用域，箭头函数的this指向取决于函数定义的时候的作用域，本题中一定要注意argument这个因素，很容易忽略

    var obj = {
        age:18,
        foo:function(func){
            func()
            console.log(arguments);
            let zz = arguments[0]
            zz()
            arguments[0]()   //undefined
            //是因为arguments[0]()相当于是arguments调用的this.age，arguments有自己的作用域，所以是undefined
        }
    }
    ​
    var age = 10
    function temp(){
        console.log(this.age);
    }
    ​
    obj.foo(temp)
    ​
   

4. 介绍一下CSS盒模型

   盒子模型组成 content + padding + border + margin

   正常盒模型：box-sizing：content-box width = width + 左右padding + 左右border 实际盒子宽度比设置的宽度大

   怪异盒模型：box-sizing：border-box width = width 实际盒子宽度跟实际设置的宽度一样

5. 事件循环

   宏任务：setTimeout setInterval xhr

   微任务：Promise mutation observer

    console.log(1)
    setTimeout(function(){
        console.log(2)
    },0)
    new Promise(resolve=>{
        console.log(3)
        resolve()
        console.log(4)
    }).then(()=>{
        console.log(5)
    })
    console.log(6)
    ​
    // 1 3 4 6 5 2 
    //setTimeout是宏任务，直接放进宏任务等待
    //678三行中属于同步代码，先输出3，resolve属于微任务，后输出4，继续找同步任务输出6
    //同步任务执行完毕  先执行微任务输出5
    //最后执行宏任务 输出2
   

6. 闭包

   一定要记住，闭包是函数以及函数引用的上下文的组合，题中name=2和函数inner一起组成了闭包，无论函数inner在哪里调用，其中的this都指向inner函数被定义的时候形成的闭包中的name

    var name = 1
    ​
    function test() {
        var name = 2
        console.log(this.name);
        return function inner() {
            console.log(name);
        }
    }
    ​
    test()   //1
    test()() //2  闭包 
    var b = {
        name: 3
    }
    b.test = test
    b.test() //3
    ​
    var c = b.test
    c()   //1
    new test()  //undefined   new里面的this指向实例对象，这里没有实例对象所以是undefined
   

7. 数组去重，分为改变原数组和不改变原数组两种

    //改变原数组
    ​
    function unique(array) {
        for (let i = 0; i < array.length; i++) {
            for (let j = i + 1; j < array.length; j++) {
                if (array[i] === array[j]) {
                    array.splice(j, 1)
                    j--
                }
            }
        }
        return array
    }
    let array = [1, 1, 22, 6, 7, 6, 6, 6, 6, 6, 6, 6, 6, 3, 44, 5, 3]
    console.log(unique(array));  ////[1, 22, 6, 7,3, 44, 5]
    ​
    //不改变原数组  输出新数组
    function newUnique(arr) {
        // let tem = []
        // for (let i = 0; i < arr.length; i++) {
        //     if (tem.indexOf(arr[i]) == -1) {
        //         tem.push(arr[i])
        //     }
        // }
        // return tem
        return [...new Set(arr)]
    }
    ​
    let arr = [1, 1, 22, 6, 7, 6, 6, 6, 6, 6, 6, 6, 6, 3, 44, 5, 3]
    console.log(newUnique(arr));  //[1, 22, 6, 7,3, 44, 5]
   

8. 用Promise对fetchData进行包装，将回调的设计封装成then的形式

    function fetchData(callback) {
        setTimeout(() => {
            callback('我是返回的数据')
        }, 5000);
    }
    ​
    function promiseFecth() {
        return new Promise((resolve, reject) => {
            fetchData(resolve)
        })
    }
    ​
    promiseFecth().then(res => {
        console.log(res);
    })
   

9. 树形结构元素查找

    //这道题的核心是使用reduce方法使多维数组扁平化
    ​
    const address = [{
        id: 1,
        name: '北京市',
        children: [{
            id: 11,
            name: '海淀区',
            children: [{
                id: 111,
                name: '中关村'
            }]
        }, {
            id: 12,
            name: '朝阳区'
        }]
    }, {
        id: 2,
        name: '天津市'
    }]
    ​
    function tree2List(tree) {
        return tree.reduce((accu, curr) => {
            if (!curr.children) {
                accu.push(curr)
            } else {
                accu.push(curr, ...tree2List(curr.children))
            }
            return accu
        }, [])
    }
    let tree = tree2List(address)
    console.log(tree);
    ​
    function getNameByid(address, id) {
        //1.树形结构数据转换数组
        //2.比对数组
        const result = address.find(item => item.id === id)
        return result ? result.name : ""
    ​
    }
    console.log(getNameByid(tree, 6));
   

10. 数组交集

     function sameNumber(arr1,arr2){
         return arr1.fiflter(item=>arr2.includes(item))
     }
     console.log(sameNumber([1,5,6],[2,6,7]))  //[6]