2021前端面试之JavaScript手写题（三）

悠悠 2022-10-17 00:43 144阅读 0赞

## 1.如何实现数组的随机排序？ ##

let arr = [2,3,454,34,324,32]
    arr.sort(randomSort)
    function randomSort(a, b) {
      return Math.random() > 0.5 ? -1 : 1;
    }

## 2.写一个通用的事件侦听器函数。 ##

## 3.使用迭代的方式实现 flatten 函数。 ##

var arr = [1, 2, 3, [4, 5], [6, [7, [8]]]]
    /** * 使用递归的方式处理 * wrap 内保
    存结果 ret * 返回一个递归函数 **/
    function wrap() {
        var ret = [];
        return function flat(a) {
            for (var item of
                a) {
                    if (item.constructor === Array) {
                        ret.concat(flat(item))
                    } else {
                        ret.push(item)
                    }
            }
            return ret
        }
    } 
    console.log(wrap()(arr));

## 4.怎么实现一个sleep ##

sleep函数作用是让线程休眠，等到指定时间在重新唤起。
    function sleep(delay) {
      var start = (new Date()).getTime();
      while ((new Date()).getTime() - start < delay) {
        continue;
      }
    }
    
    function test() {
      console.log('111');
      sleep(2000);
      console.log('222');
    }
    
    test()

## 5.实现正则切分千分位（10000 => 10,000） ##

//无小数点
    let num1 = '1321434322222'
    num1.replace(/(\d)(?=(\d{3})+$)/g,'$1,')
    //有小数点
    let num2 = '342243242322.3432423'
    num2.replace(/(\d)(?=(\d{3})+\.)/g,'$1,')
    复制代码
    27.对象数组去重
    输入:
    [{a:1,b:2,c:3},{b:2,c:3,a:1},{d:2,c:2}]
    输出:
    [{a:1,b:2,c:3},{d:2,c:2}]

首先写一个函数把对象中的key排序，然后再转成字符串  
遍历数组利用Set将转为字符串后的对象去重

## 6.解析 URL Params 为对象 ##

let url = 'http://www.domain.com/?user=anonymous&id=123&id=456&city=%E5%8C%97%E4%BA%AC&enabled';
    parseParam(url)
    /* 结果
    { user: 'anonymous',
      id: [ 123, 456 ], // 重复出现的 key 要组装成数组，能被转成数字的就转成数字类型
      city: '北京', // 中文需解码
      enabled: true, // 未指定值得 key 约定为 true
    }
    */

## 7.模板引擎实现 ##

## 8.转化为驼峰命名 ##

var s1 = "get-element-by-id"
    // 转化为 getElementById
    复制代码
    var f = function(s) {
        return s.replace(/-\w/g, function(x) {
            return x.slice(1).toUpperCase();
        })
    }

## 9.查找字符串中出现最多的字符和个数 ##

例: abbcccddddd -> 字符最多的是d，出现了5次
    
    let str = "abcabcabcbbccccc";
    let num = 0;
    let char = '';
    
     // 使其按照一定的次序排列
    str = str.split('').sort().join('');
    // "aaabbbbbcccccccc"
    
    // 定义正则表达式
    let re = /(\w)\1+/g;
    str.replace(re,($0,$1) => {
        if(num < $0.length){
            num = $0.length;
            char = $1;        
        }
    });
    console.log(`字符最多的是${char}，出现了${num}次`);

## 10.图片懒加载 ##

let imgList = [...document.querySelectorAll('img')]
    let length = imgList.length
    
    const imgLazyLoad = function() {
        let count = 0
        return (function() {
            let deleteIndexList = []
            imgList.forEach((img, index) => {
                let rect = img.getBoundingClientRect()
                if (rect.top < window.innerHeight) {
                    img.src = img.dataset.src
                    deleteIndexList.push(index)
                    count++
                    if (count === length) {
                        document.removeEventListener('scroll', imgLazyLoad)
                    }
                }
            })
            imgList = imgList.filter((img, index) => !deleteIndexList.includes(index))
        })()
    }
    
    // 这里最好加上防抖处理
    document.addEventListener('scroll', imgLazyLoad)

#### 总结一下 ####

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

![621960a57eb42479e02d6d64c0c81891.png][]

![5230c48fd0fcb265f3401a21603bda2b.png][]

**前端面试题汇总**

![42728594459506983a38ca2b86545fc6.png][]

**JavaScript**

![7796de226b373d068d8f5bef31e668ce.png][]

**性能**

![d7f6750332c78eb27cc606540cdce3b4.png][]

**linux**

![ed368cc25284edda453a4c6cb49916ef.png][]

**前端资料汇总**

![6e0ba223f65e063db5b1b4b6aa26129a.png][]

#### 完整版PDF资料免费分享，只需你点赞支持，[动动手指点击此处就可免费领取了][Link 1]。 ####

前端工程师岗位缺口一直很大，符合岗位要求的人越来越少，所以学习前端的小伙伴要注意了，一定要把技能学到扎实，做有含金量的项目，这样在找工作的时候无论遇到什么情况，问题都不会大。

[621960a57eb42479e02d6d64c0c81891.png]: /images/20221014/9128c825c2d54b07a7d33662b7bff6e1.png
[5230c48fd0fcb265f3401a21603bda2b.png]: /images/20221014/805d68d075714bd698004f03ed3c807a.png
[42728594459506983a38ca2b86545fc6.png]: /images/20221014/a06a555302d34436ade79e9e3efe5b63.png
[7796de226b373d068d8f5bef31e668ce.png]: /images/20221014/93ceea2111f54ea5888ae32d7fbc0443.png
[d7f6750332c78eb27cc606540cdce3b4.png]: /images/20221014/6a3a5f81dfdd4eb3a69c41ef1549f8ac.png
[ed368cc25284edda453a4c6cb49916ef.png]: /images/20221014/70ea0fa034dc4b37b689a276e21c7a88.png
[6e0ba223f65e063db5b1b4b6aa26129a.png]: /images/20221014/bcb764d862c54000b7084926808280af.png
[Link 1]: https://jq.qq.com/?_wv=1027&k=VIWqVeW1