JS中with的替代方法与String中的正则方法详解


Posted in Javascript onDecember 23, 2016

with 语法

在代码中,要执行这么一个函数

function computeExpression(exp, scope) {
 try {
  with (scope) {
   return eval(exp);
  }
 } catch (e) {
  console.error('ERROR', e);
 }
}

要求在scope 作用域中执行,什么意思???

比如

scope = {a:10,b:5};
exp = a*b;

要求计算结果为15,这种情况,常规情况下要使用 with语法。

但是:

js的解释器需要检查with块中的变量是否属于with包含的对象,这将使with语句执行速度大大下降,并且导致js语句很难被优化。

在严格模式中,with语法是被禁用的。

而我使用ES6语法来编写这个库的,默认启用了严格模式了。所以不得已,自己模拟了一个with 的语法。

先看代码

function replaceWith(scopeName, exp) {
 exp = " " + exp.trim();
 let quickRegex = /([\s\+\-\*\/%&\|\^!\*~]\s*?)([a-zA-Z_$][a-zA-Z_$0-9]*?)/g;
 exp = exp.replace(quickRegex, (a, b, c) => {
  return b + scopeName + '.' + c;
 });
 return exp;
}

首先把首位的空格全部去掉,为了和后面的统一,在开头加上一个空格。

第一个正则匹配出犹如"t.e==0 ? f : d"的表达式中的变量会被作为c提取出来,符号作为 b提取出来。

测试一下

JS中with的替代方法与String中的正则方法详解

现在已经可以返回一个表达式了,改装一下,让表达式直接在里面执行

function replaceWith(scope, exp) {
 exp = " " + exp.trim();
 let quickRegex = /([\s\+\-\*\/%&\|\^!\*~]\s*?)([a-zA-Z_$][a-zA-Z_$0-9]*?)/g;
 exp = exp.replace(quickRegex, (a, b, c) => {
  return b + 'scope.' + c;
 });
 let func = new Function("scope", "return " + exp);
 return func(scope);
}

测试一下

JS中with的替代方法与String中的正则方法详解

大功告成。

可能中间正则写的不好,还有其他不严密的地方,欢迎园友补充。

String 原型上的正则方法

好久都没怎么写过大量代码了,看到 Sring.prototype.split(//); 这个正则表达式,竟然把分割符号都给加到数组中了,很惊讶,在MDN上学了一下。顺便做个整理,算是补充吧。

String.prototype.split(separator,[limit])

separator:指定用来分割字符串的字符(串)。separator 可以是一个字符串或正则表达式。 如果忽略 separator,则返回整个字符串的数组形式。如果 separator 是一个空字符串,则 str 将会把原字符串中每个字符的数组形式返回。

limit一个整数,限定返回的分割片段数量。split 方法仍然分割每一个匹配的 separator,但是返回的数组只会截取最多 limit 个元素。

当找到一个 seperator 时,separator 会从字符串中被移除,返回存进一个数组当中的子字符串。如果忽略 separator 参数,则返回的数组包含一个元素,该元素是原字符串。如果 separator 是一个空字符串,则 str 将被转换为由字符串中字符组成的一个数组。

注意:

Note: 当字符串为空时,split 返回一个包含一个空字符串的数组,而不是一个空数组。

如果 separator 是一个正则表达式,且包含捕获括号(capturing parentheses),则每次匹配到 separator 时,捕获括号匹配的结果将会插入到返回的数组中。

var myString = "hello world";
var splits = myString.split(();

console.log(splits);

输出

["hello world"]

var myString = "Hello 1 word. Sentence number 2.";
var splits = myString.split(/(\d)/);

console.log(splits);

输出

Hello ,1, word. Sentence number ,2,.

String.prototype.replace()

这个方法开始已经用到,就不再介绍。

String.prototype.match(Regex)

当字符串匹配到正则表达式(regular expression)时,match() 方法会提取匹配项。

如果正则表达式没有 g 标志,返回和 RegExp.exec(str) 相同的结果。而且返回的数组拥有一个额外的 input 属性,该属性包含原始字符串。另外,还拥有一个 index 属性,该属性表示匹配结果在原字符串中的索引(以0开始)。

"1aef2af3ef4 5".match(/[a-z]*(\d)/)

输出

["1", "1"]

如果正则表达式包含 g 标志,则该方法返回一个包含所有匹配结果的数组。如果没有匹配到,则返回 null。

注意,如果加g, 则分组无用

"1aef2af3ef4 5".match(/[a-z]*(\d)/g)

输出

["1", "aef2", "af3", "ef4", "5"]

String.prototype.search(Regex)

search() 方法执行一个查找,看该字符串对象与一个正则表达式是否匹配。

如果匹配成功,则 search() 返回正则表达式在字符串中首次匹配项的索引。否则,返回 -1。

类似于正则表达式的 test 方法 。

"aeg56".search(/[a-z]\d+/)

输出

2

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
ie和firefox中img对象区别的困惑
Dec 27 Javascript
javascritp实现input输入框相关限制用法
Jun 29 Javascript
js实现字符串转日期格式的方法
May 20 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
Aug 06 Javascript
跟我学习javascript的浮点数精度
Nov 16 Javascript
Vue非父子组件通信详解
Jun 12 Javascript
浅谈node中的exports与module.exports的关系
Aug 01 Javascript
加载 vue 远程代码的组件实例详解
Nov 20 Javascript
ajax前台后台跨域请求处理方式
Feb 08 Javascript
vue如何通过id从列表页跳转到对应的详情页
May 01 Javascript
elementUI table表格动态合并的示例代码
May 15 Javascript
详解vue-cli3开发Chrome插件实践
May 29 Javascript
Bootstrap源码解读排版(1)
Dec 23 #Javascript
简单实现JS倒计时效果
Dec 23 #Javascript
Bootstrap源码解读下拉菜单(4)
Dec 23 #Javascript
jquery dataview数据视图插件使用方法
Dec 23 #Javascript
基于vue的下拉刷新指令和滚动刷新指令
Dec 23 #Javascript
Bootstrap源码解读按钮(5)
Dec 23 #Javascript
基于bootstrap的选择框插件icheck
Dec 23 #Javascript
You might like
PHP如何解决网站大流量与高并发的问题
2011/06/25 PHP
PHP+Ajax检测用户名或邮件注册时是否已经存在实例教程
2014/08/23 PHP
PHP中的switch语句的用法实例详解
2015/10/21 PHP
PHP+Ajax 检测网络是否正常实例详解
2016/12/16 PHP
php查询及多条件查询
2017/02/26 PHP
一个JQuery操作Table的代码分享
2012/03/30 Javascript
Jquery显示、隐藏元素以及添加删除样式
2013/08/09 Javascript
javascript设计模式之工厂模式示例讲解
2014/03/04 Javascript
javascritp添加url参数将参数加入到url中
2014/09/25 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
2015/06/11 Javascript
js滚轮事件兼容性问题需要注意哪些
2016/11/15 Javascript
如何快速上手Vuex
2017/02/14 Javascript
jQuery图片切换动画效果
2017/02/28 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
2017/09/18 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
2017/12/25 jQuery
Angular6 正则表达式允许输入部分中文字符
2018/09/10 Javascript
Python中的高级数据结构详解
2015/03/27 Python
Numpy掩码式数组详解
2018/04/17 Python
python Spyder界面无法打开的解决方法
2018/04/27 Python
Python查看微信撤回消息代码
2018/06/07 Python
python利用插值法对折线进行平滑曲线处理
2018/12/25 Python
python批量解压zip文件的方法
2019/08/20 Python
解决python DataFrame 打印结果不换行问题
2020/04/09 Python
使用keras时input_shape的维度表示问题说明
2020/06/29 Python
中外合拍动画首获奥斯卡提名,“上海出品”《飞奔去月球》能否拿下最终大奖?
2021/03/16 国漫
使用html2canvas将页面转成图并使用用canvas2image下载
2019/04/04 HTML / CSS
墨西哥网上超市:Superama
2018/07/10 全球购物
巴西购物网站:Submarino
2020/01/19 全球购物
如何用Python输出一个Fibonacci数列
2016/08/28 面试题
资深财务管理人员自我评价
2013/09/22 职场文书
护理专业自荐信
2013/12/03 职场文书
迟到检讨书900字
2014/01/14 职场文书
《商鞅南门立木》教学反思
2014/02/16 职场文书
2015年爱牙日活动总结
2015/03/23 职场文书
毕业实习证明范本
2015/06/16 职场文书
python 使用Tensorflow训练BP神经网络实现鸢尾花分类
2021/05/12 Python