[ES6] Use ES6 Proxies
A JavaScript Proxy allows you to intercept operations performed on objects, arrays, or functions like property lookup, assignment, invocation, property deletion, and more to add custom behavior. In this lesson we look at how to intercept property lookup with the get
"trap" that will allow us to get items starting from the end of the array with ease.
console.clear() const characters = [
'Harry Potter',
'Ron Weasly',
'Hermione Granger',
'Nevel Longbottom',
'Lavender Brown',
'Scabbers',
'Pigwidgeon',
] const handler = {
// target: the array itself
// name: the index which passed in
get(target, name) { // check whether index is 0,1...6
if(name in target) { // if yes, then get the value back
return Reflect.get(target, name)
} else { // if not, then the name is -1, -2, -3...
const index = Number(name);
return Reflect.get(target, target.length + index)
}
}
} const proxy = new Proxy(characters, handler) console.log(proxy[]); // Nevel Longbottom
console.log(proxy[]); // Harry Potter
console.log(proxy[-]); // Scabbers
[ES6] Use ES6 Proxies的更多相关文章
- 深入浅出 ES6:ES6 与 Babel / Broccoli 的联用
深入浅出 ES6指的是添加在 ECMASript 标准第六版中的 JavaScript 编程语言的新特性,简称为 ES6. 虽然 ES6 刚刚到来,但是人们已经开始谈论 ES7 了,它未来的样子,以及 ...
- react案例->新闻移动客户端--(react+redux+es6+webpack+es6的spa应用)
今天分享一个react应用,应在第一篇作品中说要做一个react+redux+xxx的应用.已经做完一部分,拿出来分享.github地址为:点我就可以咯~ 这里实现了一个新闻移动站的spa.本来想写p ...
- ES6基础-ES6 class
作者 | Jeskson 来源 | 达达前端小酒馆 ES - Class 类和面向对象: 面向对象,即万物皆对象,面向对象是我们做开发一种的方式,开发思维,面向对象的思维中万物皆对象,以人作为例子,它 ...
- ES6基础-ES6的扩展
进行对字符串扩展,正则扩展,数值扩展,函数扩展,对象扩展,数组扩展. 开发环境准备: 编辑器(VS Code, Atom,Sublime)或者IDE(Webstorm) 浏览器最新的Chrome 字符 ...
- 【ES6 】ES6 字符串扩展及新增方法
模板字符串 传统写法 var str = 'There are <b>' + basket.count + '</b> ' + 'items in your basket, ' ...
- 【ES6 】ES6 解构赋值--数组解构赋值
定义 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构 数组的解构赋值 以前,为变量赋值,只能直接指定值. let a = 1; let b = 2; let c = 3; ...
- 【ES6】ES6入门笔记
1.概要 - ECMAScript2015(ES6)是Javascript最标准的语法式样,是在2015年6月由Ecma国籍组织公布的最新版本,现在已经被多个领域和浏览器所广泛采纳和使用. 2.学习网 ...
- 【es6】es6使用集锦
一.查找数组中是否包含某个元素 使用includes ,返回值为布尔值 arr.includes(searchElement, fromIndex): 解析:searchElement 查询元 ...
- 【ES6 】ES6 解构赋值--函数参数解构赋值
函数的参数也可以使用解构赋值. function add([x, y]){ return x + y; } add([1, 2]); 上面代码中,函数add的参数表面上是一个数组,但在传入参数的那一刻 ...
随机推荐
- 怎样 TabHostFragment自己定义 tab键(indicator)
1 获得 tabHostFragment: ActionBarActivity activity2 = (ActionBarActivity) activity; mTabHost = new Fra ...
- CentOS搭建xfce桌面+VNC教程
CentOS搭建xfce桌面+VNC教程 Linux的安全与性能向来为开发者所称道,你可以轻松地在搜索引擎中找到各种Linux优越性的说辞,其中不乏Linux的激进者.特别是当你步入VPS领域,更多地 ...
- LOJ 6229 LCM / GCD (杜教筛+Moebius)
链接: https://loj.ac/problem/6229 题意: \[F(n)=\sum_{i=1}^n\sum_{j=1}^i\frac{\mathrm{lcm}(i,j)}{\mathrm{ ...
- mysql测试spring事务是否生效
同时对三张表进行插入操作,事务保证完整性.下面进行简单测试: 1. 锁定表 锁定用户表 LOCK TABLES user WRITE; 查看表是否锁定: show ; 显示被锁定的表. 2. 验证在同 ...
- 使用solr的DIHandler 构建mysql大表全量索引,内存溢出问题的解决方法
solr官方给出的解决方式是: DataImportHandler is designed to stream row one-by-one. It passes a fetch size value ...
- WebForm使用JQuery实现DropDownList无刷新联动
目录(?)[-] 1 JS代码 2 页面相关控件用的是平台封装的控件普通DropDownList也可以 3 后台C代码 注意事项 原来用的微软封装的Ajax控件UpdatePannel和Scri ...
- Tomcat redis 配置
http://www.cnblogs.com/interdrp/p/4868740.html http://blog.csdn.net/qq584852076/article/details/4650 ...
- 将exe添加到windows服务中
mongod --dbpath D:\MongoDB\data --logpath=D:\MongoDB\logs\mongodb.log --install http://www.cnblogs.c ...
- 15.SpringBoot简介-SpringBoot是什么可以做什么
转自:https://blog.csdn.net/kingboyworld/article/details/77713743 在过去的两年时间里,最让人兴奋.回头率最高.最能改变游戏规则的东西,大概就 ...
- HDU 2844 Coins (多重背包计数 空间换时间)
Coins Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Subm ...