js版本之ES6特性简述【Proxy、Reflect、Iterator、Generator】(五)

目录

Proxy

Reflect

静态方法

部分实例

Iterator

实际开发迭代器的使用实例

迭代器(Iterator)应用

Generator

Proxy

Proxy 是 ES6 中新增的对象

  • Proxy 是JavaScript中的内置对象,它提供了一种机制,可以拦截并自定义各种操作,如属性访问、函数调用、构造函数调用等。
  • Proxy 构造函数接受两个参数目标对象(被代理的对象)和一个处理器对象(用于定义拦截器)。
// 写法:target是目标对象,handler是处理器对象
const proxy = new Proxy(target, handler);

 详解请看:ES6之---Proxy简介

Reflect

Proxy 是 ES6 中新增的对象【:不可使用new操作符生成实例】

特点:

  • 将 Object 对象的一些明显属于语言内部的方法(如 Object.defineProperty)放到 Reflect 对象上,现阶段,某些方法同时在 Object 和 Reflect 对象上部署,未来新的方法只在 Reflect 对象上部署。也就是说,从 Reflect 对象上可以获得语言内部的方法。
  • 修改某些Object的内部方法返回结果,使其变的合理。(以Object.defineProperty为例, 现在如果没有办法定义时,则会报错,放在Reflect上面,则会返回false)
  • 让 Object 操作都编程函数行为,某些 Object 操作是命令式,比如 name in obj 和 delete obj [name],而 Reflect.has(obj, name) 和 Reflect.deleteProperty(obj, name) 让它们变成了函数行为。
  • Reflect 对象的方法与 Proxy 对象的方法一一对应,只要是 Proxy 对象的方法,就能在 Reflect 对象上找到对应的方法,这就是 Proxy 对象可以方便的调用对应的 Reflect 方法来完成默认行为,作为修改行为的基础。也就是说,无论 Proxy 怎么修改默认行为,我们总可以在 Reflect 上获取到默认行为。

静态方法

  • Reflect.apply
  • Reflect.construct
  • Reflect.defineProperty
  • Reflect.deleteProperty
  • Reflect.get
  • Reflect.getOwnPropertyDescriptor
  • Reflect.getPrototypeOf
  • Reflect.has
  • Reflect.isExtensible
  • Reflect.ownKeys
  • Reflect.preventExtensions
  • Reflect.set
  • Reflect.setPrototypeOf

部分实例

Reflect.construct(target, args)

  • Reflect.construct 方法等同于 new target(…args),这提供了一种不使用 new ,来调用构造函数的方法。
  • 如果 Reflect.construct () 方法的第一个参数不是对象,会报错。
// 说明1的例子如下: 
function Greeting(name) {this.name = name;
}
// new 的写法
const instance = new Greeting('张三');
// Reflect.construct 的写法
const instance1 = Reflect.construct(Greeting, ['张三']); // {name: '张三'}
// 说明2的例子如下: 
console.log(Reflect.construct(1, 'baz'))  // TypeError: Reflect.construct called on non-object

Reflect.deleteProperty(target, name)

  • Reflect.deleteProperty方法等同于delete obj[name],用于删除对象的属性。
  • 注意:**如果删除成功,或者被删除的属性不存在,返回 true ;删除失败,被删除的属性依然存在,返回 false **
  • 如果 Reflect.deleteProperty() 方法的第一个参数不是对象,会报错。
// 说明1,2的例子如下: 
var myObject = {foo: 1,
}
console.log(Reflect.deleteProperty(myObject, 'foo')) // true
console.log(Reflect.deleteProperty(myObject, 'zzz')) // true
// 此时的myObject 就是{}

Reflect.get(target, name, receiver)

  • Reflect.get方法查找并返回 target 对象的 name 属性值,如果没有该属性,则返回 undefined 。
  • 如果 name 属性部署了读取函数(getter),则读取函数的 this 绑定 receiver 。
  • 如果第一个参数不是对象, Reflect.get 方法会报错。
// 说明1的例子如下: 
var myObject = {foo: 1,bar: 2,get baz() {return this.foo + this.bar;},
}
console.log(Reflect.get(myObject, 'foo')) // 1 
console.log(Reflect.get(myObject, 'bar')) // 2
console.log(Reflect.get(myObject, 'baz')) // 3 没有传receiver,则this取原对象
console.log(Reflect.get(myObject, 'zzz')) // undefined
// 说明2的例子如下: 
const otherObject = {foo: 3,bar: 4
}
console.log(Reflect.get(myObject, 'baz', otherObject)) // 7
// 说明3的例子如下: 
console.log(Reflect.get(1, 'baz'))  // TypeError: Reflect.get called on non-object

Reflect.has(target, name) 

  • Reflect.has方法对应name in obj里面的in运算符。
  • 如果 Reflect.has() 方法的第一个参数不是对象,会报错。
// 说明1的例子如下: 
var myObject = {foo: 1,
}
console.log(Reflect.has(myObject, 'foo')) // true
console.log(Reflect.has(myObject, 'zzz')) // false
// 说明2的例子如下: 
console.log(Reflect.has(1, 'baz'))  // TypeError: Reflect.has called on non-object

观察者模式实例

// 这里就是简单观察者的核心逻辑,主要实现两个功能,一个就是observe,另一个就是observable
// 先定义了一个Set 集合,所有观察者函数都放进这个集合。
// observable 函数返回一个原始对象的 Proxy 代理,拦截赋值操作,触发充当观察者的各个函数
// 拦截函数 set 之中,会自动执行所有观察者
const queuedObservers = new Set();
const observe = fn => queuedObservers.add(fn);
const observable = obj => new Proxy(obj, {set});
function set(target, key, value, receiver) {const result = Reflect.set(target, key, value, receiver);queuedObservers.forEach(observer => observer());return result;
}
// 使用如下:
const person = observable({name: '张三',age: 20
});
function print() {console.log( ${person.name}, ${person.age} )
}
observe(print);
person.name = '李四';

Iterator

Iterator即迭代器,它是一种接口,为各种不同的数据结构提供了统一的访问机制,换句话说,只要有任何数据结构部署了迭代接口,就可以使用统一的方式的来遍历它。

ES6为数组和普通对象,以及新增的Map和Set提供了统一的遍历机制:迭代器(Iterator),并新增了for … of语法来使用迭代器。

实现可迭代接口的数据结构,一般都自身实现或继承了以Symbol.iterator属性的,就属于可迭代对象。Symbol.iterator属性本身是一个函数,就是当前数据结构默认的遍历器生成函数。

一个包含next()方法的对象,才可以称为一个迭代对象。next()对象的会有返回一个对象,对象中包含两个值,如下所示:

  • value:迭代器返回的任何JavaScript值。donetrue时可省略。
  • done:一个布尔值,为false时表示迭代未停止,为true时立即停止迭代器,且可以省略value的值。

实际开发迭代器的使用实例

实际开发中,为每一个对象单独定义一个迭代器属性实在不是一件聪明事。我们可以仿照js引擎部署迭代器的做法,将迭代器署在对象原型上,这样由某个构造函数或类(指es6的class)所生成的每个对象都可以方便地进行遍历了。 

构造函数写法

function Student(name, age){this.name = name;this.age = age;
}
Student.prototype[Symbol.iterator] = function(){let index = 0;let keys = [...Object.keys(this)];let _this = this;keys.sort((key1, key2) => { //按字母顺序对属性排序return key1 < key2 ? -1 : 1;})return {next(){return index < keys.length ?{value: _this[keys[index++]], done: false} :{value: undefined, done: true}}}
}let s = new Student('小明', 24);
for(let val of s){console.log(val);
}  //输出:24 '小明'

类写法

class Student{constructor(name, age){this.name = name;this.age = age;}[Symbol.iterator](){let index = 0;let keys = [...Object.keys(this)];keys.sort((key1, key2) => { //按字母顺序对属性排序return key1 < key2 ? -1 : 1;})let _this = this;return {next(){return index < keys.length ?{value: _this[keys[index++]], done: false} :{value: undefined, done: true}}}}
}

迭代器(Iterator)应用

【1】 解构赋值

Array和Set的解构赋值就是借助迭代器来实现的

js引擎依次在左右两侧结构上调用next方法,进行逐个赋值,这样左侧数组的每个变量会对应被赋为右侧的值。

const [a, b] = [1, 2];             //a: 1, b: 2const [c, d] = new Set([3, 4]);    //c: 3, d: 4

【2】扩展运算符

ES6的扩展运算符可以将数组展开为一列,这也是借助Iterator接口实现的

let args = ['name', 'age'];
f(...args);                    //等价于f('name', 'age')

【3】return和throw

迭代器对象除了必要的next方法外,还可以部署return和throw方法,用于在for … of语句中终止遍历和抛出异常。

let s = {name: '小明',age: 24,[Symbol.iterator]: function (){let index = 0;let keys = ['name', 'age'];let _this = this;return {next(){return index < keys.length ?{value: _this[keys[index++]], done: false} :{value: undefined, done: true}},return(){...  //结束循环前可以在这里执行某些操作,如关闭文件系统等return {done: true}},throw(){...  //抛出异常时可以在这里执行某些操作return {done: true}}}}
}for(let val of s){console.log(val);break;   //该语句会触发迭代器对象的return方法
}for(let val of s){console.log(val);throw new Error(); //该语句会触发迭代器对象的throw方法
}

【4】Iterator与Generator函数

Generator函数调用之后返回的就是一个迭代器对象,这个对象原生就具备next接口

let s = {name: '小明',age: 24,[Symbol.iterator]: function* (){yield this.name;yield this.age;}
}

Generator 

Generator【生成器】是ES6中提供的一种异步编程解决方案定义Generator函数在function关键字和函数名中间使用*星号,函数内部使yield关键字定义不同的状态

注:需要注意的是,生成器函数定义时需要在函数关键字 function 后面加上星号(*),以标识该函数为生成器函数。另外,yield 关键字只能在生成器函数内部使用

function* testGenerator(){// yield定义一个状态yield1 'css6之generator'yield 'es新特性'return 'generator'        // 终结Generator,后面即使有yield关键字也无效
}
const g=testGenerator()       // 返回 Generator 对象,通过next()方法移动状态g.next()                      //{value:'-碗周',done:false }
g.next()                      //{value:'es新特性',done:false }
g.next()                      //{ value:generator',done:true }

Generator详解

此文借鉴了一下博主的优秀文章

https://blog.csdn.net/Rookie_lei/article/details/140790532

https://blog.csdn.net/qq_41694291/article/details/103432571

上一章:js版本之ES6特性简述【let和const、数组、函数、集合、Symbol】(四)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/65488.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

React 组件通信完整指南 以及 自定义事件发布订阅系统

React 组件通信完整指南 1. 父子组件通信 1.1 父组件向子组件传递数据 // 父组件 function ParentComponent() {const [data, setData] useState(Hello from parent);return <ChildComponent message{data} />; }// 子组件 function ChildComponent({ message }) {re…

mac中idea菜单工具栏没有git图标了

1.右击菜单工具栏 2.选中VCS&#xff0c;点击添加 3.搜索你要的工具&#xff0c;选中点击确定就添加了 4.回到上面一个界面&#xff0c;选中你要放到工具栏的工具&#xff0c;点击应用就好了 5.修改图标&#xff0c;快捷键或者右击选中编辑图标 6.选择你要的图标就好了

Linux实验报告7-文件管理

目录 一&#xff1a;实验目的 二&#xff1a;实验内容 (1)查看/etc/inittab文件的权限属性&#xff0c;并指出该文件的所有者以及文件所属组群。 (2)新建文件test&#xff0c;设置文件权限为r--r-----。 (3)新建文件test2&#xff0c;设系统中有用户study和用户组studygr…

CPT203 Software Engineering 软件工程 Pt.4 软件设计(中英双语)

文章目录 6. 设计概念6.1 Principle6.2 Concepts6.2.1 General design concepts&#xff08;常见的设计概念&#xff09;6.2.1.1 Abstraction&#xff08;抽象&#xff09;6.2.1.2 Modularity&#xff08;模块化&#xff09;6.2.1.3 Functional independence&#xff08;功能独…

JSON 系列之4:JSON_VALUE

JSON_VALUE的作用&#xff0c;简单来说&#xff0c;就是从JSON到SQL&#xff1a; SQL/JSON function JSON_VALUE selects JSON data and returns a SQL scalar or an instance of a user-defined SQL object type or SQL collection type (varray, nested table) 所以&#xff…

[wzoi]Help Bubu

题目描述: Bubu的书架上乱成一团了&#xff01;请帮助他一下吧&#xff01; 他的书架上一共有n本书。我们定义混乱值是连续相同高度书本的段数。例如&#xff0c;如果输的高度是30,30,31,31,32&#xff0c;那么混乱值为3,30,32,32,31的混乱度也是3&#xff0c;但31,32,31,32,…

嵌入式AI STM32部署卷积神经网络的魔法棒

基于STM32部署卷积神经网络控制设备方案-AI项目-STM32部署卷积神经网络方案-红外信号复制方案-轨迹识别 项目包含下述内容 硬件部分、PCB制板、BOM表文件等等 (Hardware)外壳、3D打印文件 (3D_print)软件程序、用于电子法棒的软件程序 AI Keil等等(Software)QT上位机动作识别…

【代码分析】Unet-Pytorch

1&#xff1a;unet_parts.py 主要包含&#xff1a; 【1】double conv&#xff0c;双层卷积 【2】down&#xff0c;下采样 【3】up&#xff0c;上采样 【4】out conv&#xff0c;输出卷积 """ Parts of the U-Net model """import torch im…

[Leetcode] 最大子数组和 [击败99%的解法]

解法1&#xff1a; 暴力解法 遍历每个元素&#xff0c;从它当前位置一直加到最后&#xff0c;然后用一个最大值来记录全局最大值。 代码如下&#xff1a; class Solution {public int maxSubArray(int[] nums) {long sum, max nums[len-1];for (int i0; i<nums.length;…

系统压力测试助手——stress-ng

1、背景 在系统性能测试和压力测试中&#xff0c;stress-ng 是一个非常强大的工具&#xff0c;广泛应用于对 Linux 系统进行各种硬件和软件方面的负载测试。它能够模拟多种极端负载情况&#xff0c;帮助开发人员和运维人员检查系统在高负载下的表现&#xff0c;以便发现潜在的…

计算机网络500题2024-2025学年度第一学期复习题库(选择、判断、填空)

一、单选题 1、&#xff08; &#xff09;是实现两个同种网络互连的设备 A. 网桥 B. 网关 C. 集线器 D. 路由器 2、10M以太网有三种接口标准&#xff0c;其中10BASE-T采用&#xff08; &#xff09; A. 双绞线 B. 粗同轴电缆 C. 细同轴电缆 D. 光纤 3、HDLC是哪…

在JavaScript文件中定义方法和数据(不是在对象里定以数据和方法,不要搞错了)

在对象里定以数据和方法看这一篇 对象字面量内定义属性和方法&#xff08;什么使用const等关键字&#xff0c;什么时候用键值对&#xff09;-CSDN博客https://blog.csdn.net/m0_62961212/article/details/144788665 下是在JavaScript文件中定义方法和数据的基本方式&#xff…

基于SpringBoot的垃圾分类系统设计与实现【源码+文档+部署讲解】

系统介绍 基于SpringBootVue实现的垃圾分类系统设计了三种角色、分别是管理员、垃圾分类管理员、用户&#xff0c;实现了个人中心、用户管理、垃圾分类管理员管理、垃圾分类管理、垃圾类型管理、垃圾图谱管理、系统管理等功能 技术选型 开发工具&#xff1a;idea2020.3Webst…

今日总结 2024-12-28

今天全身心投入到鸿蒙系统下 TCPSocket 的学习中。从最基础的 TCP 协议三次握手、四次挥手原理重新梳理&#xff0c;深刻理解其可靠连接建立与断开机制&#xff0c;这是后续运用 TCPSocket 无误通信的根基。在深入鸿蒙体系时&#xff0c;仔细研读了其为 TCPSocket 封装的 API&a…

springboot启动不了 因一个spring-boot-starter-web底下的tomcat-embed-core依赖丢失

这个包丢失了 启动不了 起因是pom中加入了 <tomcat.version></tomcat.version>版本指定&#xff0c;然后idea自动编译后&#xff0c;包丢了&#xff0c;删除这个配置后再也找不回来&#xff0c; 这个包正常在 <dependency><groupId>org.springframe…

前后端分离(对话框的使用)

1.首先先定义两个按钮(一个添加按钮&#xff0c;一个修改按钮) <el-button type"primary" click"openDialog(true)">添加员工</el-button> <el-button size"mini" click"openDialog(false, scope.row)">编辑</…

doris集群存储目录切换

doris集群存储目录切换 1. 背景 3节点集群&#xff0c;BE存储目录&#xff0c;因为运维原因。存储盘系统放在了一一起。 需要增加硬盘&#xff0c;并替换原有目录。 3节点集群&#xff0c;如果各个表都是3副本&#xff0c;可以实现轮流停机&#xff0c;方式处理。 但是业务…

【Maven_bugs】The project main artifact does not exist

背景&#xff1a;我想使用 maven-shade-plugin 打一个 fat jar 时报了标题中的错误&#xff0c;使用的命令是&#xff1a;org.apache.maven.plugins:maven-shade-plugin:shade -pl :shade-project。项目结构如下图&#xff0c;我想把子模块 shade-project 打成一个 fat jar&…

Qt 的信号槽机制详解:之信号槽引发的 Segmentation Fault 问题拆析(上)

Qt 的信号槽机制详解&#xff1a;之因信号槽误用引发的 Segmentation Fault 问题拆析&#xff08;上&#xff09; 前言一. 信号与槽的基本概念信号&#xff08;Signal&#xff09;槽&#xff08;Slot&#xff09;连接信号与槽 二. 信号槽机制的实现原理元对象系统&#xff08;M…

贪心算法(常见贪心模型)

常见贪心模型 简单排序模型 最小化战斗力差距 题目分析&#xff1a; #include <bits/stdc.h> using namespace std;const int N 1e5 10;int n; int a[N];int main() {// 请在此输入您的代码cin >> n;for (int i 1;i < n;i) cin >> a[i];sort(a1,a1n);…