[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[3]); // Nevel Longbottom
console.log(proxy[0]); // Harry Potter
console.log(proxy[-2]); // Scabbers
时间: 2024-10-22 19:23:54

[ES6] Use ES6 Proxies的相关文章

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

今天分享一个react应用,应在第一篇作品中说要做一个react+redux+xxx的应用.已经做完一部分,拿出来分享.github地址为:点我就可以咯~ 这里实现了一个新闻移动站的spa.本来想写pc端的,但是比较懒,而且因为主要是react的项目,关于css和布局的细节就是糊弄人的了.T.T,这里只说关于这个项目的js部分. 这里的功能很简单,有一下几点: 1,按”心“排序 当比上一个多了,就会排到前面. 2.评论部分 新闻的评论部分类似qq空间的评论 当然,也可以点击新闻回复的哦. ===

Mz学院ES6视频教程 ES6基础教程 共27课包含源码课件

1.ES6简介.mp42.let基本用法.mp43.let不存在变量提升.mp44.let暂时性死区.mp45.let不允许重复声明.mp46.为什么需要块级作用域.mp47.块级作用域.mp48.const命令.mp49.const对象.mp410.const对象冻结.mp411.跨模块常量.mp412.全局对象属性.mp413.Destructuring.mp414.不完全解构.mp415.制定默认值.mp416.let和const命令.mp417.对象的解构赋值.mp418.对象解构赋值的

【ES6】ES6入门

1.概要 - ECMAScript2015(ES6)是Javascript最标准的语法式样,是在2015年6月由Ecma国籍组织公布的最新版本,现在已经被多个领域和浏览器所广泛采纳和使用. 2.学习网址: - https://github.com/lukehoban/es6features- https://babeljs.io/learn-es2015/- https://es6.ruanyifeng.com/#docs 3.开发工具 - nodejs 10.x 4.编辑器 - vscode

ES6基础-ES6 class

作者 | Jeskson 来源 | 达达前端小酒馆 ES - Class 类和面向对象: 面向对象,即万物皆对象,面向对象是我们做开发一种的方式,开发思维,面向对象的思维中万物皆对象,以人作为例子,它的特性有哪些.比如有姓名,性别,出生年月,身高等,还有人的行为,为吃饭,睡觉.特性和行为组合起来就成为人类,特性和行为都是人都有的,通过这些不同的特性和行为给不同的值,构成不同的人. 使用类进行编程,是可以降低维护成本,类的封装性是非常强的,很多情况下,类和业务是低耦合,使用类可以让代码高度复用,类

export,import, es6 export, es6 import

创建javascript模块以从模块中导出函数.对象或原语值时,使用export语句,以便其他程序可以使用import语句. export { name1, name2, …, nameN }; export { variable1 as name1, variable2 as name2, …, nameN }; export let name1, name2, …, nameN; // also var, const export let name1 = …, name2 = …, …, n

深入浅出ES6(一):ES6是什么

作者 Jason Orendorff github主页 https://github.com/jorendorff ECMAScript发生了什么变化? 编程语言JavaScript是ECMAScript的实现和扩展,由ECMA(一个类似W3C的标准组织)参与进行标准化.ECMAScript定义了: 语言语法 – 语法解析规则.关键字.语句.声明.运算符等. 类型 – 布尔型.数字.字符串.对象等. 原型和继承 内建对象和函数的标准库 – JSON.Math.数组方法.对象自省方法等. ECMA

最新的JavaScript核心语言标准——ES6,彻底改变你编写JS代码的方式!【转载+整理】

原文地址 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和for-of循环 生成器 Generators 模板字符串 不定参数和默认参数 解构 Destructuring 箭头函数 Arrow Functions Symbols 集合 学习Babel和Broccoli,马上就用ES6 代理 Proxies ES6 说自己的宗旨是"凡是新加入的特性,势必已在其它语言中得到强有力的实用性证明."--TRUE!如果你大概浏览下 ES6 的新特性,事实上它

ES6语法的新特性

ES6 就是ECMAScript 6是新版本JavaScript语言的标准.虽然目前已经更新到ES7,但是很多浏览器还不知处ES7语法,该标准仍在更新中,但目前部门网站都指出ES6的语法.目前ES6也是使用最多的最新的javaScript语言标准.要查看ES6的支持情况请点此. 在2009年ES5问世以后,javaScript的标准就一直没有更新.从那时起ES标准委员会就已经开始筹划新的ES标准,在2015年发布了ES6.ES6是ECMAScript 的第6个版本. 经过持续几年的磨砺,它已成为

关于es6的箭头函数使用与内部this指向

特型介绍:箭头函数是ES6新增的特性之一,它为JS这门语言提供了一种全新的书写函数的语法. 'use strcit'; let arr = [1,2,3]; //ES5 let es5 = arr.map(function(n){ return n*2; }); //ES6 let es6 = arr.map(n => n*2); console.log(es5); //[2,4,6] console.log(es6); //[2,4,6] 箭头函数简化了原先的函数语法,不需要再写 functi