阅读 3253

记头条的一次笔试

四月初收到了头条的笔试邀请,打开链接后发现跳到了牛客网。面试前心中很是忐忑,毕竟大厂,而自己面试经验又不多。

最后做下来,发现自己确实还有很多不足,尤其是手撸代码这一块。有些 js 方法就是记不住,比如日期获取年,下意识写了 date.getYear(),其实是不对的,应该是 date.getFullYear()

话不多说,看题吧。期望能给予同在面试的你或他一点帮助!

题一:正则考点

给出一个段文本,将文本内容输出为特定内容

文本

aa "55" $c b
nn (8*) q 12
true sdc 12 2w2
复制代码

输出

输出

这是笔试的第一题,看到题目后下意识想这个文本是怎么输入进去的?在浏览器端,js 不能读取文件吧。反正很是纠结。

大概过了 5 分钟,迟迟无法答题。最后干脆忽略文本文件读取,直接当有换行符的文本字符串处理。但是换行这一块在大脑中搜索不到任何信息,唉,最后答了一个使用 /\S/ 正则表达式处理,然后进入下一题。


以下是笔试完后写的:

<input class="file" type="file">
<script>
    var file = document.querySelector('.file')
    file.addEventListener('change', function(e) {
        var fileRead = new FileReader()
        fileRead.readAsText(e.target.files[0])
        fileRead.onload = function() {
            var text = fileRead.result
            text = text.match(/[\s\S]+/g)[0]
            var textArr = text.split(/[\r\n]+/)
            var arr = []
            textArr.forEach(function(item) {
                arr.push(item.split(/\s+/))
            })
            console.log(arr)
        }
    })
</script>
复制代码

因为题目没有说清楚,所以假想它是需要读取一个文本文件里面的内容。当然,也可以直接使用正则匹配那部分代码。

题二:布局考点

CSS 内容,一个简单的 sticky footer 布局。大致内容就是当页面高度不够时,页脚固定在页面底部;当页面高度足够时,页脚被页面内容推送下去。

<header>
 <h1>Header</h1>
</header>
<main>
  <p>Bacon Ipsum dolor sit amet...</p>
</main>
<footer>
  <p>Footer</p> 
</footer>
复制代码
html {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
main {
  flex: 1;
}
复制代码

题三:Date 与编程能力考点

一个时间转换问题,输入一个时间戳或时间字符串,然后与当前时间对比。

如果1分钟以内,显示刚刚;如果小于2分钟,显示2分钟前;如果小于1小时,显示1小时前;如果小于1小天,显示1天前;如果大于2天,显示日期字符串,"2019-03-20"

function format(time) {
    time = new Date(time)
    var interval = new Date() - time
    if (interval < 60 * 1000) {
        return '刚刚'
    } else if (interval < 60 * 60 * 1000) {
        return Math.floor(interval / (60 * 1000)) + '分钟前'
    } else if (interval < 24 * 60 * 60 * 1000) {
        return Math.floor(interval / (60 * 60 * 1000)) + '小时前'
    } else if (interval < 2 * 24 * 60 * 60 * 1000) {
        return Math.floor(interval / (24 * 60 * 60 * 1000)) + '小时前'
    } else {
        return time.getFullYear() + '-' + (addZero(time.getMonth() + 1)) + '-' + addZero(time.getDay())
    }
}

function addZero(number) {
    return number < 10 ? ('0' + number) : number
}

console.log(format('2019-4-10 9:25:01'))
console.log(format(1555040105650))
复制代码

题四:计算机基础考点

正数和负数,其原码、反码、补码的关系。

这题很简单,不过突然一下子想不起来了。当时记混了,说正数的补码是反码加一。

  • 正数:原码、反码、补码都相同
  • 负数:反码等于原码取反,补码等于反码加一

题五:设计模式考点

实现一个事件类 Event,包括 on(),off(),once(),emit() 方法

class Event {
    constructor() {
        this.events = {}
    }
    on(event, callback) {
        if (!this.events[event]) {
            this.events[event] = []
        }
        this.events[event].push(callback)
    }
    off(event, callback) {
        if (this.events[event]) {
            this.events[event] = this.events[event].filter(fn => callback !== fn)
        }
    }
    once(event, callback) {
        let _this = this
        if (!_this.events[event]) {
            _this.events[event] = []
        }
        const fn = function() {
            callback.apply(_this, arguments)
            _this.off(event, fn)
        }
        _this.events[event].push(fn)
    }
    emit(event, data) {
        if (this.events[event]) {
            this.events[event].forEach(function(callback) {
                callback(data)
            })
        }
    }
}

let event1 = new Event()
event1.once('abc', function(data) {
    console.log('1', data)
})
event1.on('abc', function(data) {
    console.log('2', data)
})
event1.emit('abc', 521)
event1.emit('abc', 520)
复制代码

题六:性能优化与事件委托考点

有一个表格 table,点击其中 td 元素,可以弹出元素里的文本内容。

<table class="table" border="1">
    <tr>
        <td>Hi</td>
        <td>Ha</td>
        <td>Ho</td>
    </tr>
</table>
<script>
    var table = document.querySelector('table')
    table.addEventListener('click', function(event) {
        if (event.target.nodeName.toLowerCase() === 'td') {
            alert(event.target.innerHTML)
        }
    })
</script>
复制代码

题七:正则与编程能力考点

数字金额千分位转换,如 14290023.2314,290,023.23,使用正则和非正则两种方式

老实说前些天我还特意看了千分位转换的,但是当时看别人的正则实现很头疼,所以只是过了下。笔试时,正则这一块没答出来。然后写了一个非正则的。

function formatRegExp1(number) {
    var pattern = /(?=(\B\d{3})+\.)/g
    return number.toFixed(2).toString().replace(pattern, ',')
}

function formatRegExp2(number) {
    var pattern = /(\d)(?=(?:\d{3})+\.)/g
    return number.toFixed(2).toString().replace(pattern, '$1,')
}

function format(number) {
    number = number.toFixed(2).toString()
    var dotIndex = number.indexOf('.')
    var part = number.substring(0, dotIndex)
    var flag = 0
    var result = ''
    for (var i = part.length - 1; i >= 0; i--) {
        result = part[i] + result
        if (i !== 0 && ++flag === 3) {
            result = ',' + result
            flag = 0
        }
    }
    return result + number.substring(dotIndex)
}

console.log(format(114290023))
console.log(format(2114290023))
复制代码

题八:this 指向考点

这道题在最开始写本文时漏掉了,想了想还是补上,万一有人忽略了这个知识点呢(其实是我自己不会这个知识点啦 -_-)

var obj1 = {
    name: 'obj1'
}
var obj2 = {
    name: 'obj2'
}
var obj3 = {
    name: 'obj3'
}
function say() {
    console.log(this.name)
}
var fn = say.bind(obj1).bind(obj2).bind(obj3)
fn()
复制代码

结果是 obj1,表面原因是 bind() 只对第一次有效。但是这是为什么呢?追本溯源,我们来看看本质是啥。

bind() 的实现:

Function.prototype.bind = function(context) {
    const self = this
    const args = [...arguments].slice(1)
    return function F() {
        if (self instanceof F) {
            return new self(...args, ...arguments)
        }
        return self.apply(context, args.concat(...arguments))
    }
}
复制代码

题目代码:

var s1 = say.bind(obj1)
s1 = function() {
    return say.apply(obj1)
}

var s2 = s1.bind(obj2)
s2 = function() {
    return (function() {
        return say.apply(obj1)
    }).apply(obj2)
}

var s3 = s1.bind(obj3)
s3 = function() {
    return (function() {
        return (function() {
            return say.apply(obj1)
        }).apply(obj2)
    }).apply(obj3)
}

s3()
复制代码

由此可以看到 say() 方法的 this 指向就是 obj1

小结

总体来说,题目是不难的,但是很考验候选人的综合能力。如果你也面试前端,并且将来也恰好遇到了套试题,不要高兴的太早。虽然他能帮助你通过笔试,但是后面的面试更难。

关注下面的标签,发现更多相似文章
评论