这次给大家带来一道面试题，在前端公司的面试过程中注意事项有哪些，下面就是实战案例，一起来看一下。
最近徘徊在找工作和继续留任的纠结之中，在朋友的怂恿下去参加了一次面试，最后一道题目是：
写一个函数，输入一个字符串的运算式，返回计算之后的结果。例如这样的： '1 + (5 - 2) * 3'，计算出结果为10
最开始看到这个题目的时候，我脑中的第一反应就是eval，真的太直接了。但是我就不明白为什么这竟然是最后一道题目，我也不知道为什么还会考eval的运用，因此当时也很犹豫要不要用eval。因为eval有一系列的问题：
eval会改变当前的作用域，除非函数直接调用，并且是eval本身执行
eval可能会造成xss攻击，除非你对其中的字符串特别放心
当时只是觉得可以使用正则匹配运算符，然后使用递归计算，就只写了个思路，回来之后就按照这个方式实现一下。这里作为自己的解决方式，测试用例设计的也不够全面，如果各位有更好的方法，可以拿出来分享。
如果我拿个'1 + (5 - 2) * 3'这个式子我是怎么想的：
看成 1 + x * 3
算出x，x的计算就需要匹配括号，这个倒不是很难
计算出x之后，替换成 1 + 3 * 3
之后按照/%*的优先级要大于+-，先匹配计算出 3 * 3
替换成 1 + 9
最后得出 10
讲白了就是有括号，先计算括号中的算是，然后进行结果替换之后再进行后面的运算，整体而言就是一系列的'递归 + 匹配'。
/** * myeval * @param string str 字符串 * @return 返回计算后的值 [description] */function myeval(str) {
// 如果包含括号，则先进括号中的计算
// 计算规则为：先进行括号匹配拆开，单个计算之后再进行拼接
// 例如：((1 + 2) + 3 / (4 % 6)) * 6的计算顺序是：
// -> ((1 + 2) + 3 / (4 % 6)) * 6
// -> (1 + 2) + 3 / (4 % 6)
// -> 1 + 2
// -> 3 + 3 / (4 % 6)
// -> 4 % 6
// -> 3 + 3 / 4
// -> 3 / 4
// -> (3 + 0.75) * 6
// -> 3 + 0.75
// -> 3.75 * 6
// -> 22.5
if (exists(str, '(')) {
const bracketstr = getmatchstr(str);
const nextresult = myeval(bracketstr);
const replacestr = str.replace(`(${bracketstr})`, nextresult) // 如果子字符串中存在'3 + 3 / (4 % 6)' 这样的式子，说明第一个括号中的内容计算完成了
// 这样就可以接着递归进行第二个括号中的算式计算
if (exists(replacestr, '(')) {
return myeval(replacestr);
} else {
// 如果是类似于'1 + 2 / 3'的式子，则直接进行计算返回结果
return innerbracketcacl(replacestr);
}
} else {
return innerbracketcacl(str);
}}
取一个叫做myeval的函数，主要进行流程的控制，如果遇到的是括号中的内容，则先进行括号中的运算，否则，直接进行常规表达式计算。
/** * 获取匹配的字符串 * @param string str * @return string 返回的匹配结果 */function getmatchstr(str) {
// 匹配类似于这样的式子:
// '((1 + 2) / 3) * 4' -> ((1 + 2) / 3)
// '1 * (2 + 3) / (5 - 6)' -> 2 + 3
const regexp = /\([^\)]+\)[^\(]+\)|\((.*?)\)/;
const regexp2 = /\((.*)\)/;
let matches = str.match(regexp);
let bracketstr = matches[1] || matches[0];
if (exists(bracketstr, '(') && !exists(bracketstr, ')')) {
// 类似于这样的式子'((1 + 2) / (3 - 7)) * 4'
// 那么匹配出来的就是'(1 + 2'
// 显然不是我想要的结果，我只需要解掉第一层的括号就可以按照之前的方式计算了
// 用第二个正则匹配的就是'(1 + 2) / (3 - 7)'
// 我只需要按照之前的方式先计算这个式子就好
bracketstr = str.match(regexp2)[1];
} else if(bracketstr.indexof('(') === 0) {
bracketstr = bracketstr.slice(1, -1);
}
return bracketstr;}
获取匹配字符子串，主要是进行规则匹配，分布计算。
/** * 计算表达式 * 例如有这样的式子: '1 + 2 / 3' * 那么会先计算'2 / 3' * @param string str * @return string 结果 */function innerbracketcacl(str) {
const matches = str.match(/[\/\*%]/g);
let firstpriorityresult = str;
if (matches) {
firstpriorityresult = stepfirstpriority(str);
}
return stepsecondpriority(firstpriorityresult);}
简单的运算式计算，即不包含括号的计算，先计算*/%的运算符，然后计算+-
/** * 第一优先级的运算 * 这里的第一优先级为'%/*' * @param string str * @return number 返回计算结果 */function stepfirstpriority(str) {
const matches = str.match(/[\/\*%]/g);
if (!matches) {
return str;
} else {
const newstr = caclpart('/%*', str);
return stepfirstpriority(newstr);
}}/** * 第二优先级的运算 * 这里的第一优先级为'+-' * @param string str * @return number 返回计算结果 */function stepsecondpriority(str) {
if (!isnan(number(str))) {
return str;
} else {
const newstr = caclpart('+-', str);
return stepsecondpriority(newstr);
}}
这上面是运算优先级的计算方式，先乘除后加减，计算之后进行字符串替换，然后递归计算。
/** * 计算类似于 '1 + 2', '3 / 4'的子算式 * @param string shouldoprs 包含的运算符，例如('/%*', '+-') * @param string str 计算的子字符串，例如( 1 + 2 / 4 ) * @return string 返回计算后的子字符串，例如( 1 + 0.5 ) */function caclpart(shouldoprs, str) {
let newstr = '';
for (let i = 0; i < str.length; i++) {
let s = str[i];
if (exists(shouldoprs, s)) {
// 截取字符串的左侧
// 例如字符串为'3 + 3 / 4', 那么左侧就是'3 + 3 /'，右侧则是 / 4
// 目的是为了接下来的匹配左右两侧的数字
let leftstr = str.slice(0, i + 1);
let rightstr = str.slice(i);
// 左侧的正则为/((\d\.)*\d+)\s*\+$/，其中最后一个'+'是动态匹配的字符串
// 右侧的正则为/\+\s*((\d\.)*\d+)/，其中最后一个'+'是动态匹配的字符串
const leftnum = new regexp('\((\\d\\.)*\\d+\)\\s\*\\' + s + '$', 'g').exec(leftstr)[1];
const rightnum = new regexp('\\' + s + '\\s\*\((\\d\\.)*\\d+\)').exec(rightstr)[1];
// 计算出值后进行字符串替换
// 比如'3 + 3 / 4' -> '3 + 0.75'
// 单个计算完成之后跳出循环，之后继续进行后面的操作
const result = cacl(leftnum, rightnum, s);
newstr = str.replace(new regexp('(\\d\\.)*\\d+\\s\*\\' + s + '\\s\*(\\d\\.)*\\d+'), result);
break;
}
}
return newstr;}
至此，这就是我的全部思路以及实现方式。
其中有一些正则表达式写不出，想来正则学得还是不够，只能用一些取巧的办法。测试用例也设计得不是太全面，可能会存在一些问题，但是就目前的测试来说，简单的算是是能通过的。
性能问题上：因为频繁的调用递归，致使复杂度大大增大，时间运行得也比原生eval时间要长。以下是我的测试例子：
const str = '1 + 2';const str2 = '1 + 2 - 3';const str3 = '1 + 2 + 3 / 4';const str4 = '1 + 2 + 3 / 4 % 5';const str5 = '1 + 2 * (3 + 4) + 5';const str6 = '(1 + 2) * (3 + 4) + 5';const str7 = '((1 + 2) + 3 / (4 % 6)) * 6';console.time('myeval');console.log('myeval: ', myeval(str));console.log('myeval: ', myeval(str2));console.log('myeval: ', myeval(str3));console.log('myeval: ', myeval(str4));console.log('myeval: ', myeval(str5));console.log('myeval: ', myeval(str6));console.log('myeval: ', myeval(str7));console.timeend('myeval')console.time('eval');console.log('eval: ', eval(str));console.log('eval: ', eval(str2));console.log('eval: ', eval(str3));console.log('eval: ', eval(str4));console.log('eval: ', eval(str5));console.log('eval: ', eval(str6));console.log('eval: ', eval(str7));console.timeend('eval')
关于js实现eval的方式：
//计算表达式的值function evil(fn) {
var fn = function; //一个变量指向function，防止有些前端编译工具报错
return new fn('return ' + fn)();}// jquery2.0.3实现方式：// evaluates a script in a global contextglobaleval: function( code ) {
var script,
indirect = eval;
code = jquery.trim( code );
if ( code ) {
// if the code includes a valid, prologue position
// strict mode pragma, execute code by injecting a
// script tag into the document.
if ( code.indexof(use strict) === 1 ) {
script = document.createelement(script);
script.text = code;
document.head.appendchild( script ).parentnode.removechild( script );
} else {
// otherwise, avoid the dom node creation, insertion
// and removal by using an indirect global eval
indirect( code );
}
}}
参考资料：
javascript为什么不要使用eval
以eval()和newfunction()执行javascript代码
js代替eval的方法
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
在前端中的html基础知识
css float的盒子模型position
vue插件实现移动端轮播图
以上就是一道面试题的详细内容。