[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的参数表面上是一个数组,但在传入参数的那一刻 ...
随机推荐
- buildroot使用
buildroot是一套自动化构建工具,比yocto简单. 项目地址:http://www.buildroot.org/ 培训资料地址:http://free-electrons.com/ 附带lin ...
- Windows平台上的pip安装
写在前面 pip 是 Python 的包管理工具,在 Python 开发中必不可少.作为一名python菜鸟,本文在踩坑无数的基础上尽可能详细地解释pip的安装过程.在安装之前需要明确两点: 1.pi ...
- C# Unity依赖注入利用Attribute实现AOP功能
使用场景? 很多时候, 我们定义一个功能, 当我们要对这个功能进行扩展的时候, 按照常规的思路, 我们一般都是利用OOP的思想, 在原有的功能上进行扩展. 那么有没有一种东西, 可以实现当我们需要扩展 ...
- Linux中删除文件,磁盘空间未释放问题追踪
在客户使用我们产品后,发现一个问题:在删除了文件后.磁盘空间却没有释放.是有进程在打开这个文件,还是其它情况?我们一起来看看一下两个场景 一. 场景一:进程打开此文件 当一个文件正在被一个进程使用时. ...
- android屏幕适配方案
曾经看了android的屏幕适配方案,有非常多种.当中自己用到的一种是:先找一款主流的分辨率的android机,如:1080*1920的分辨率做基准,然后在这个基准上.调整好一切布局.图片.适配其它手 ...
- Spring MVC基础了解
参考网址:https://www.yiibai.com/spring_mvc/springmvc_overview.html Spring框架相关 Spring Security 一个灵活强大的身份验 ...
- PatentTips - Adaptive algorithm for selecting a virtualization algorithm in virtual machine environments
BACKGROUND A Virtual Machine (VM) is an efficient, isolated duplicate of a real computer system. Mor ...
- Valgrind的用法
Valgrind是执行在Linux上一套基于仿真技术的程序调试和分析工具,它包括一个内核──一个软件合成的CPU,和一系列的小工具,每一个工具都能够完毕一项任务──调试.分析,或測试等. Valgri ...
- amazeui学习笔记--css(常用组件6)--图标Icon
amazeui学习笔记--css(常用组件6)--图标Icon 一.总结 1.关注用法即可:在 HTML 上添加添加 am-icon-{图标名称} class. <span class=&quo ...
- python3 用递归方法列出所有目录与文件
python3 用递归方法列出所有目录与文件 # !/usr/bin/env python # -*- coding:utf-8 -*- # Author:Hiuhung Wan import os ...