前端面试编程题

席小超
310 阅读6分钟

实现一个trim方法

javascript1.8.1才支持trim方法；由于去除字符串两边的空白实在太常用，各大类库都有它的影子。外国人都很有研究精神，搞鼓了相当多实现。 image.png

  • Trim1: 使用了两次正则替换，实际速度非常惊人，主要得益于浏览器的内部优化。 一个著名的例子字符串拼接，直接相加比用Array做成的StringBuffer还快。base2类库使用这种实现。
String.prototype.trim = function() {
  return this.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
}
  • Trim2: 和Trim1很相似，但速度稍慢，因为它不会触发所有相同的优化。 主要原因是它最先是假设至少存在一个空白符。Prototype.js使用这种实现，不过其名字为strip，因为Prototype的方法都是力求与Ruby同名。
String.prototype.trim = function() {
  return this.replace(/^\s+/, '').replace(/\s+$/, '');
}
  • Trim3: 这通常比以下方法快，但比以上两种方法慢。它的速度来自使用简单的字符索引查找的速度。 以截取方式取得空白部分（当然允许中间存在空白符），总共调用了四个原生方法。设计得非常巧妙，substring以两个数字作为参数。Math.max以两个数字作参数，search则返回一个数字。
String.prototype.trim = function() {
  return  this.substring(Math.max(this.search(/\S/), 0),this.search(/\S\s*$/) + 1);
}
  • Trim4: 这个可以称得上实Trim2的简化版，就是利用候选操作符连接两个正则。但这样做就失去了浏览器优化的机会，比不上Trim3。由于看来很优雅，许多类库都使用它，如JQuery与mootools 这种通常经过深思熟虑的方法很容易成为当今JavaScript库中最常用的方法。通常，只有在使用不包含前导或尾随空格的短字符串时，这才是最快的实现。此次要优势部分是由于它触发的初始字符区分优化。尽管这是一个相对不错的执行器，但是在使用更长的字符串时，它比上面的三种方法要慢，因为顶级交替阻止了许多优化，否则这些优化可能会启动。
String.prototype.trim = function() {
  return  this.replace(/^\s+|\s+$/g, '');
}
  • Trim5: match是返回一个数组，因此原字符串符合要求的部分就成为它的元素。为了防止字符串中间的空白符被排除，我们需要动用到非捕获性分组（?:exp）。由于数组可能为空，我们在后面还要做进一步的判定。好像浏览器在处理分组上比较无力，一个字慢。所以不要迷信正则，虽然它基本上是万能的。 通常，在处理空字符串或仅包含空格的字符串时，这是最快的方法，因为它会触发所需的字符优化的预检查。注意：在IE6中，使用较长的字符串时，这可能会很慢。
String.prototype.trim = function() {
  var str = this;
  str = str.match(/\S+(?:\s+\S+)*/);
  return str ? str[0] : '';
}
  • Trim6: 把符合要求的部分提供出来，放到一个空字符串中。方法类似（但次于）Trim8。 没有充分的理由在JavaScript中使用它，特别是因为它在IE6中可能非常慢。
String.prototype.trim = function() {
  return this.replace(/^\s*(\S*(\s+\S+)*)\s*$/, '$1');
}
  • Trim7: 和Trim6很相似，但由于使用了非捕获组（在IE 5.0及更低版本中不起作用），因此速度更快。同样，这在IE6中可能很慢。
String.prototype.trim = function() {
  return this.replace(/^\s*(\S*(?:\s+\S+)*)\s*$/, '$1');
}
  • Trim8: 沿着上面两个的思路进行改进，动用了非捕获分组与字符集合，用?顶替了*，效果非常惊人。尤其在IE6中，可以用疯狂来形容这次性能的提升，直接秒杀火狐。 性能差异表明IE对于“任何字符”标记的量化具有出色的优化。
String.prototype.trim = function() {
  return this.replace(/^\s*((?:[\S\s]*\S)?)\s*$/, '$1');
}
  • Trim9: 这次是用懒惰匹配顶替非捕获分组，在火狐中得到改善，IE没有上次那么疯狂。 通常，对于包含非空格字符和边缘空白的非常短的字符串，这是最快的。此次要优势是由于它使用了简单，单遍，惰性的方法。就像Trim8，这在IE6中比Firefox 2快得多。
String.prototype.trim = function() {
  return this.replace(/^\s*([\S\s]*?)\s*$/, '$1');
}
  • Trim10: 先是把可能的空白符全部列出来，在第一次遍历中砍掉前面的空白，第二次砍掉后面的空白。全过程只用了indexOf与substring这个专门为处理字符串而生的原生方法，没有使用到正则。速度快得惊人，估计直逼上内部的二进制实现，并且在IE与火狐（其他浏览器当然也毫无疑问）都有良好的表现。速度都是零毫秒级别的。
String.prototype.trim = function() {
  var str = this,
  whitespace = ' \n\r\t\f\x0b\xa0\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u200b\u2028\u2029\u3000';
  for (var i = 0,len = str.length; i < len; i++) {
    if (whitespace.indexOf(str.charAt(i)) === -1) {
      str = str.substring(i);
      break;
    }
  }
  for (i = str.length - 1; i >= 0; i--) {
    if (whitespace.indexOf(str.charAt(i)) === -1) {
      str = str.substring(0, i + 1);
      break;
    }
  }
  return whitespace.indexOf(str.charAt(0)) === -1 ? str : '';
}
  • Trim11: Trim10已经告诉我们普通的原生字符串截取方法是远胜于正则替换，虽然是复杂一点。但只要正则不过于复杂，我们就可以利用浏览器对正则的优化，改善程序执行效率，如Trim8在IE的表现。我想通常不会有人在项目中应用Trim10，因为那个whitespace 实现太长太难记了（当然如果你在打造一个类库，它绝对是首先）。Trim11可谓其改进版，前面部分的空白由正则替换负责砍掉，后面用原生方法处理，效果不逊于原版，但速度都是非常逆天。
String.prototype.trim = function() {
  var str = this,
  str = str.replace(/^\s+/, '');
  for (var i = str.length - 1; i >= 0; i--) {
    if (/\S/.test(str.charAt(i))) {
      str = str.substring(0, i + 1);
      break;
    }
  }
  return str;
}
  • Trim12: Trim10与Trim11在写法上更好的改进版，注意说的不是性能速度，而是易记与使用上。和它的两个前辈都是零毫秒级别的，以后就用这个来工作与吓人。
String.prototype.trim = function() {
  var str = this,
  str = str.replace(/^\s\s*/, ''),
  ws = /\s/,
  i = str.length;
  while (ws.test(str.charAt(--i)));
  return str.slice(0, i + 1);
}

比较结果

TrimFirefox 2IE 6
Trim115ms< 0.5ms
Trim231ms< 0.5ms
Trim346ms31ms
Trim447ms46ms
Trim5156ms1656ms
Trim6172ms2406ms
Trim7172ms1640ms
Trim8281ms< 0.5ms
Trim9125ms78ms
Trim10< 0.5ms< 0.5ms
Trim11< 0.5ms< 0.5ms
Trim12< 0.5ms< 0.5ms

原文链接：www.cnblogs.com/rubylouvre/…

实现一个deepClone方法

如何写出一个惊艳面试官的深拷贝 这篇文章非常好，小伙伴们自行去阅读

实现 add(1)(2)(3)

本题主要从 3W (what, how, why) 角度出发通俗易懂的解释一下 什么是函数柯里化，以及怎么用三行代码来实现 add(1)(2)(3) 这个很常见的面试题。

大数相加

拍平熟组

实现防抖函数

实现节流函数

实现字符串反转

数组去重

实现千位分隔符

将普通的数字转换为带千位分隔符格式的数字字符串是一个非常常见的问题，千位分隔符格式的规则是数字的整数部分每三位一组，以“，”分节。小数部分不分节 。 示例：19,351,235.235767 这里有几个常见的实现方法。

  • 方法一 实现思路是将数字转换为字符数组，再循环整个数组， 每三位添加一个分隔逗号，最后再合并成字符串。因为分隔符在顺序上是从后往前添加的：比如 1234567添加后是1,234,567 而不是 123,456,7 ，所以方便起见可以先把数组倒序，添加完之后再倒序回来，就是正常的顺序了。要注意的是如果数字带小数的话，要把小数部分分开处理。
function numFormat(num){
    num=num.toString().split(".");  // 分隔小数点
    var arr=num[0].split("").reverse();  // 转换成字符数组并且倒序排列
    var res=[];
    for(var i=0,len=arr.length;i<len;i++){
      if(i%3===0&&i!==0){
         res.push(",");   // 添加分隔符
      }
      res.push(arr[i]);
    }
    res.reverse(); // 再次倒序成为正确的顺序
    if(num[1]){  // 如果有小数的话添加小数部分
      res=res.join("").concat("."+num[1]);
    }else{
      res=res.join("");
    }
    return res;
}

var a=1234567894532;
var b=673439.4542;
console.log(numFormat(a)); // "1,234,567,894,532"
console.log(numFormat(b)); // "673,439.4542"

语法： numObj.toLocaleString([locales [, options]])

toLocaleString() 方法返回这个数字在特定语言环境下的表示字符串。

var a=1234567894532;
var b=673439.4542;

console.log(a.toLocaleString());  // "1,234,567,894,532"
console.log(b.toLocaleString());  // "673,439.454"  （小数部分四舍五入了）
  • 方法三 使用正则表达式和replace函数，相对前两种我更喜欢这种方法，虽然正则有点难以理解。

replace 语法：str.replace(regexp|substr, newSubStr|function)

其中第一个 RegExp

对象或者其字面量所匹配的内容会被第二个参数的返回值替换。

function numFormat(num){
  var res=num.toString().replace(/\d+/, function(n){ // 先提取整数部分
       return n.replace(/(\d)(?=(\d{3})+$)/g,function($1){
          return $1+",";
        });
  })
  return res;
}

var a=1234567894532;
var b=673439.4542;
console.log(numFormat(a)); // "1,234,567,894,532"
console.log(numFormat(b)); // "673,439.4542"

原文链接：www.jianshu.com/p/928c68f92…

判断是否是回文数

实现一个模版引擎

判断一个数是否是素数

获取n以内所有的素数

avatar
文章
阅读
粉丝