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的更多相关文章

  1. 深入浅出 ES6:ES6 与 Babel / Broccoli 的联用

    深入浅出 ES6指的是添加在 ECMASript 标准第六版中的 JavaScript 编程语言的新特性,简称为 ES6. 虽然 ES6 刚刚到来,但是人们已经开始谈论 ES7 了,它未来的样子,以及 ...

  2. react案例->新闻移动客户端--(react+redux+es6+webpack+es6的spa应用)

    今天分享一个react应用,应在第一篇作品中说要做一个react+redux+xxx的应用.已经做完一部分,拿出来分享.github地址为:点我就可以咯~ 这里实现了一个新闻移动站的spa.本来想写p ...

  3. ES6基础-ES6 class

    作者 | Jeskson 来源 | 达达前端小酒馆 ES - Class 类和面向对象: 面向对象,即万物皆对象,面向对象是我们做开发一种的方式,开发思维,面向对象的思维中万物皆对象,以人作为例子,它 ...

  4. ES6基础-ES6的扩展

    进行对字符串扩展,正则扩展,数值扩展,函数扩展,对象扩展,数组扩展. 开发环境准备: 编辑器(VS Code, Atom,Sublime)或者IDE(Webstorm) 浏览器最新的Chrome 字符 ...

  5. 【ES6 】ES6 字符串扩展及新增方法

    模板字符串 传统写法 var str = 'There are <b>' + basket.count + '</b> ' + 'items in your basket, ' ...

  6. 【ES6 】ES6 解构赋值--数组解构赋值

    定义 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构 数组的解构赋值 以前,为变量赋值,只能直接指定值. let a = 1; let b = 2; let c = 3; ...

  7. 【ES6】ES6入门笔记

    1.概要 - ECMAScript2015(ES6)是Javascript最标准的语法式样,是在2015年6月由Ecma国籍组织公布的最新版本,现在已经被多个领域和浏览器所广泛采纳和使用. 2.学习网 ...

  8. 【es6】es6使用集锦

    一.查找数组中是否包含某个元素  使用includes  ,返回值为布尔值 arr.includes(searchElement, fromIndex): 解析:searchElement   查询元 ...

  9. 【ES6 】ES6 解构赋值--函数参数解构赋值

    函数的参数也可以使用解构赋值. function add([x, y]){ return x + y; } add([1, 2]); 上面代码中,函数add的参数表面上是一个数组,但在传入参数的那一刻 ...

随机推荐

  1. js上传文件(图片)的格式和大小限制

    如果你想快速解决这个问题,看本文就够了.查了好多资料,终于解决了,太耗时间了,本文留给给后来者,希望你们工作的更轻松 本文保存为.html文件用浏览器打开即可测试功能 <form id=&quo ...

  2. centos7.2 64位安装java

    1.  wget http://download.oracle.com/otn-pub/java/jdk/8u131-b11/d54c1d3a095b4ff2b6607d096fa80163/jdk- ...

  3. 决策树2 -- CART算法

    声明: 1,本篇为个人对<2012.李航.统计学习方法.pdf>的学习总结.不得用作商用,欢迎转载,但请注明出处(即:本帖地址). 2,因为本人在学习初始时有非常多数学知识都已忘记.所以为 ...

  4. [Javascript AST] 2. Introduction: Write a simple ESLint rule

    What we want to do is checking if user write nested if statements which actually can combine to one: ...

  5. PHP盛宴——经常使用函数集锦

    近期写了蛮多PHP,也接触到挺多经常使用的函数,大多都记了笔记,发个博客出来.共同学习.事实上感觉学习一门语言,语法逻辑是软素养.而对语言的熟悉程度仅仅能随着使用时间的增长而慢慢增长,当对一门语言的函 ...

  6. secureCRT The remote system refused the connection问题解决

    问题: Ubuntu系统必须开启ssh服务后,XP或者其它的主机才干够远程登陆到Ubuntu系统. 1,安装软件包,运行sudo apt-get install openssh-server Ubun ...

  7. 使用Spring框架的好处

    转自:https://www.cnblogs.com/hoobey/p/6032506.html 在SSH框假中spring充当了管理容器的角色.我们都知道Hibernate用来做持久层,因为它将JD ...

  8. 51Nod——N1284 2 3 5 7的倍数

    https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1284 基准时间限制:1 秒 空间限制:131072 KB 分值: 5  ...

  9. (转)yum & wget代理设置

    转自 http://www.cnblogs.com/windows/archive/2012/12/14/2817533.html   yum  配置代理服务器访问要设置所有 yum 操作都使用代理服 ...

  10. 如何使用SVN协调代源代码,多人同步开发

    转自linFen原文如何使用SVN协调代源代码,多人同步开发 1.什么是SVN SVN是一种版本管理系统,前身是CVS,是开源软件的基石.即使在沟通充分的情况下,多人维护同一份源代码的一定也会出现混乱 ...