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. 写一个方法去掉字符串中的空格

const str = '  s t  r  'const POSITION = Object.freeze({left: Symbol(),right: Symbol(),both: Symbol(),center: Symbol(),all: Symbol(),
})function trim(str, position = POSITION.both) {if (!!POSITION[position]) throw new Error('unexpected position value')switch(position) {case(POSITION.left):str = str.replace(/^\s+/, '')break;case(POSITION.right):str = str.replace(/\s+$/, '')break;case(POSITION.both):str = str.replace(/^\s+/, '').replace(/\s+$/, '')break;case(POSITION.center):while (str.match(/\w\s+\w/)) {str = str.replace(/(\w)(\s+)(\w)/, `$1$3`)}break;case(POSITION.all):str = str.replace(/\s/g, '')break;default: }return str
}const result = trim(str)console.log(`|${result}|`) //  |s t  r|

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

描述：

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

    var arr = new Array(5);var num = randomNumber();var i = 0;randomArr(arr,num);function randomArr(arr,num) {if (arr.indexOf(num)< 0){arr[i] = num;i++;} else {num = randomNumber();}if (i>=arr.length){console.log(arr);return;}else{randomArr(arr,num)}}function randomNumber() {return Math.floor(Math.random()*31 + 2)}

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. 简要描述下什么是回调函数并写一个例子出来

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

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是函数作用域）

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

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

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

function Foo(){var name = "fooname";  //需要从外部访问这些变量var age = 12;this.getFoo = function(){  //设置访问方法return name;}this.setFoo = function(){return age;}this.xgFoo = function(new){name = new;}
}var foo = new Foo();
foo.getFoo();  //访问name变量。
foo.xgFoo("liz") //从外部修改nage变量

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)