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

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间不重复的值

描述：

1. 这是一道大题目，把考点拆成了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)