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 相关文章推荐
JavaScript打开word文档的实现代码(c#)
Apr 16 Javascript
JQuery 操作/获取table具体代码
Jun 13 Javascript
JavaScript中的ArrayBuffer详细介绍
Dec 08 Javascript
8个超实用的jQuery功能代码分享
Jan 08 Javascript
浅谈js中StringBuffer类的实现方法及使用
Sep 02 Javascript
轻松实现jQuery添加删除按钮Click事件
Mar 13 Javascript
老生常谈angularjs中的$state.go
Apr 24 Javascript
在小程序/mpvue中使用flyio发起网络请求的方法
Sep 13 Javascript
小试小程序云开发(小结)
Jun 06 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
Jul 22 Javascript
VUE 自定义组件模板的方法详解
Aug 30 Javascript
绘制微信小程序验证码功能的实例代码
Jan 05 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
mongo Table类文件 获取MongoCursor(游标)的实现方法分析
2013/07/01 PHP
thinkphp的URL路由规则与配置实例
2014/11/26 PHP
PHP的Yii框架中Model模型的学习教程
2016/03/29 PHP
PHP+JQUERY操作JSON实例
2017/03/23 PHP
jquery 锁定弹出层实现代码
2010/02/23 Javascript
指定位置如果有图片显示图片,无图片显示广告的JS
2010/06/05 Javascript
javascript中声明函数的方法及调用函数的返回值
2014/07/22 Javascript
node.js中的http.request方法使用说明
2014/12/14 Javascript
创建js对象和js类的方法汇总
2014/12/24 Javascript
JavaScript必知必会(二) null 和undefined
2016/06/08 Javascript
JS控制HTML元素的显示和隐藏的两种方法
2016/09/27 Javascript
jQuery给指定的table动态添加删除行的操作方法
2016/10/12 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
2017/05/23 Javascript
bootstrap timepicker在angular中取值并转化为时间戳
2017/06/13 Javascript
bootstrap可编辑下拉框jquery.editable-select
2017/10/12 jQuery
layui框架中layer父子页面交互的方法分析
2017/11/15 Javascript
React Native开发封装Toast与加载Loading组件示例
2018/09/08 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
2018/11/25 Javascript
微信小程序实现商品属性联动选择
2019/02/15 Javascript
基于vue+axios+lrz.js微信端图片压缩上传方法
2019/06/25 Javascript
LayUI动态设置checkbox不显示的解决方法
2019/09/02 Javascript
[03:03]DOTA2 2017国际邀请赛开幕战队入场仪式
2017/08/09 DOTA
Python中pygame安装方法图文详解
2015/11/11 Python
Python聊天室实例程序分享
2016/01/05 Python
Python编程之字符串模板(Template)用法实例分析
2017/07/22 Python
pycharm不以pytest方式运行,想要切换回普通模式运行的操作
2020/09/01 Python
日本著名的平价时尚女性购物网站:Fifth
2016/08/24 全球购物
英国领先的品牌珠宝和配件供应商:Acotis Jewellery
2018/03/07 全球购物
瑞士领先的网上超市:LeShop.ch
2018/11/14 全球购物
LN-CC英国:伦敦时尚生活的缩影
2019/09/01 全球购物
英国婚礼商城:Wedding Mall
2019/11/02 全球购物
abstract是什么意思
2012/02/12 面试题
行政人员岗位职责
2013/12/08 职场文书
《菜园里》教学反思
2014/04/17 职场文书
建筑工地质量标语
2014/06/12 职场文书
MySQL为id选择合适的数据类型
2021/06/07 MySQL