2020年前端面试之JS手写代码题合集

深藏阁楼爱情的钟 2023-02-10 07:41 15阅读 0赞

# 2020年前端面试之JS手写代码题合集 #

> 预计会有上千道题，后续慢慢补！

### 1.  写一个把字符串大小写切换的方法  ###

function caseConvert(str){
        return str.replace(/([a-z]*)([A-Z]*)/g, (m, s1, s2)=>{
    	return `${s1.toUpperCase()}${s2.toLowerCase()}`
        })
    }
    caseConvert('AsA33322A2aa') //aSa33322a2AA

### 2.  写一个方法把下划线命名转成大驼峰命名 ###

function strToCamel(str){
        return str.replace(/(^|_)(\w)/g,(m,$1,$2)=>$2.toUpperCase());
    }

### 3.  去除字符串中最后一个指定的字符  ###

function delLast(str,target) {
      let reg =new RegExp(`${target}(?=([^${target}]*)$)`)
      return str.replace(reg,'')
    }

### 4.  写一个方法去掉字符串中的空格  ###

### 5.  用递归算法实现，数组长度为5且元素的随机数在2-32间不重复的值 ###

描述：

1.  这是一道大题目，把考点拆成了4个小项；需要侯选人用递归算法实现（限制15行代码以内实现；限制时间10分钟内完成）：  
    a) 生成一个长度为5的空数组arr。  
    b) 生成一个（2－32）之间的随机整数rand。  
    c) 把随机数rand插入到数组arr内，如果数组arr内已存在与rand相同的数字，则重新生成随机数rand并插入到arr内\[需要使用递归实现，不能使用for/while等循环\]  
    d) 最终输出一个长度为5，且内容不重复的数组arr。

### 6.  写一个去除制表符和换行符的方法 ###

const removeSymbol = (str) => str.replace(/\t|\n|\r/g, "");
    
    const str =
      "\t11122233\n_aaaaaaa\r\n_bbbbbb\t_3333333\r_4444444\n_555555";
      
    console.log(removeSymbol(str));

### 7.  统计某一字符或字符串在另一个字符串中出现的次数 ###

var childInNums = parent.split(child).length - 1, 这个没毛病吧
    //或者
    str.match(new RegExp(`${target}`, 'g')).length

### 8.  写一个加密字符串的方法 ###

function encode (str) {
    	return btoa(encodeURIComponent(str));
    }
    
    function decode (str) {
    	return decodeURIComponent(atob(str));
    }

// 利用 base64, 浏览器环境自带 btoa / atob 方法
    // Node.js 需要引入相关库
    const str = "abcdefg";
    
    console.log(btoa(str));
    console.log(atob(btoa(str)));
    
    // 凯撒密码
    const encodeCaesar = ({str = "", padding = 3}) =>
      !str
        ? str
        : str
            .split("")
            .map((s) => String.fromCharCode(s.charCodeAt() + padding))
            .join("");
    
    const decodeCaesar = ({str = "", padding = 3}) =>
      !str
        ? str
        : str
            .split("")
            .map((s) => String.fromCharCode(s.charCodeAt() - padding))
            .join("");
    
    console.log(encodeCaesar({str: "hello world"}));
    console.log(decodeCaesar({str: "khoor#zruog"}));

### 9. 写一个判断数据类型的方法 ###

typeof argument //如果结果为object，则用toString.call再次判断
    
    Object.prototype.toString.call(argument).replace(/^.{8}(.+)]$/,(m,$1)=> $1.toLowerCase());

### 10. [简要描述下什么是回调函数并写一个例子出来][Link 1] ###

回调是把一个函数作为参数传递给另一个函数，当该函数满足某个条件时触发该参数函数。  
主要用于异步操作 例如网络请求 防止页面同步代码阻塞导致渲染线程停止

### 11. 网页应用从服务器主动推送到客户端有那些方式？ ###

服务端推送

webSocket

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

eventsource(SSE)

EventSource 接口是 Web 内容与服务器发送的事件的接口。一个 EventSource 实例打开一个持久连接 HTTP 服务器，它发送事件的 text/event-stream 格式。连接保持打开状态，直到通过调用关闭 EventSource.close()。

与 WebSockets 不同，服务器发送的事件是单向的。也就是说，数据消息是从服务器到客户端（例如用户的 Web 浏览器）沿一个方向传递的

Web Push

就是用户订阅了一个站点的 Web Push 服务后，即使用户关闭了浏览器，一旦站点主动发送推送消息，用户都能收到，只要你的电脑是开着的。这是目前谷歌和苹果在 Chrome 和 Safari 上都力推的一种全新推送服务，Firefox 最近也加入了这个阵营。

但是由于需要 GCM 支持，所以这个方法并不常见

### 12. 简要描述下JS有哪些内置的对象 ###

*  时间对象Date
 *  字符串对象String
 *  数学对象Math
 *  数值对象Number
 *  数组对象Array
 *  函数对象Function
 *  函数参数集合arguments
 *  布尔对象Boolean
 *  错误对象Error
 *  基础对象Object
 *  正则表达式对象 RegExp

### 13. http都有哪些状态码？ ###

*  200 成功
 *  301 重定向
 *  304 (未修改) 自从上次请求后，请求的网页未修改过。 服务器返回此响应时，不会返回网页内容。
 *  400 (错误请求) 服务器不理解请求的语法。
 *  403 (禁止) 服务器拒绝请求。
 *  404 (未找到) 服务器找不到请求的网页。
 *  500 (服务器内部错误) 服务器遇到错误，无法完成请求。
 *  501 (尚未实施) 服务器不具备完成请求的功能。 例如，服务器无法识别请求方法时可能会返回此代码。
 *  502 (错误网关) 服务器作为网关或代理，从上游服务器收到无效响应。
 *  503 (服务不可用) 服务器目前无法使用(由于超载或停机维护)。 通常，这只是暂时状态。
 *  504 (网关超时) 服务器作为网关或代理，但是没有及时从上游服务器收到请求。
 *  505 (HTTP 版本不受支持) 服务器不支持请求中所用的 HTTP 协议版本。

### 14. 写一个获取当前url查询字符串中的参数的方法 ###

function getParams(name) {
    	const { search }  = window.location;
    	const params = new URLSearchParams(search);
    	return params.get(name)
    }

### 15. 什么是闭包？优缺点分别是什么？ ###

闭包的定义：从外部访问或者操作函数内部变量的的方式，缓存数据,延长作用域链（JS是函数作用域）

例子：定义了一个内部变量，但是不想使这些变量不能被外部随意修改，同时又可以通过指定的函数接口来操作来访问，闭包的作用常常用来「间接访问一个变量」。换句话说，「隐藏一个变量」

优点：以隐藏变量以及防止变量被篡改和作用域的污染，从而实现封装。模块化编程。

缺点：函数中的变量不能及时的释放

### 16. 写一个数组去重方法 ###

function uniqueArr(arr) {
      return [...new Set(arr.flat(Infinity))]
    }

[1,2,3,4,4,5,5,2].filter((item, index, arr) => arr.indexOf(item) === index)

[Link 1]: https://github.com/haizlin/fe-interview/issues/30#