[2023.09.26]: JsValue的转换体验与as关键字的浅析

昨天解决了焦点问题,今天就开始搬砖了。本以为可以一帆风顺,但是还是遇到了几个问题,不过还好,都被一一解决,这里我分享一下JsValue的转换体验以及关键字as的使用浅析。

场景描述

我是在什么情况下遇到JsValue的转换的呢?获取当前窗口的内部宽度和内部高度。api的接口定义如下:

pub fn inner_width(&self) -> Result<JsValue, JsValue>
pub fn inner_height(&self) -> Result<JsValue, JsValue> 

我使用当前窗口的内部宽度和内部高度的地方在Modal组件中:

#[derive(Properties, Clone, PartialEq)]
pub struct Props {...#[prop_or(200)]pub width: u32,#[prop_or(500)]pub height: u32,
}

也就是说,我要将JsValue转换成u32类型。

问题解决

先看这个问题最终是怎么解决的吧。和Javascript代码比起来,是稍微复杂了一点点。

pub fn get_window_size() -> Option<(u32, u32)> {if let Some(window) = get_window() {let width = window.inner_width().unwrap_or_else(|_| JsValue::from_f64(default_width1));let height = window.inner_height().unwrap_or_else(|_| JsValue::from_f64(default_height1));let width1: f64 = width.as_f64()?;let height1: f64 = height.as_f64()?;let width2 = width1 as u32;let height2 = height1 as u32;return Some((width2, height2));}None
}

逻辑比较简单,步骤如下

  1. 先通过window对象拿到widthheight;
  2. 通过方法as_f64将JsValue转换成f64类型;
  3. 通过rust的as关键字将f64类型转换成u32类型;

问题展开

从问题的解决层面上来说,明确上面3步,就可以拿到我们需要的数据,但是这显然只是冰山一角。水下面的东西很多,这里我挑2个容易的来说。

关于JsValue的数据转换

JsValue定义在wasm_bindgen中,关于数据转换的接口有下面这几个:

pub fn as_bool(&self) -> Option<bool>;
pub fn as_f64(&self) -> Option<f64>;
pub fn as_string(&self) -> Option<String>;pub const fn from_bool(b: bool) -> JsValue;
pub fn from_f64(n: f64) -> JsValue;
pub fn from_str(s: &str) -> JsValue;

也就是说,wasm_bindgen::JsValue中,只关心布尔值,字符串和数字,而数字在rust中使用的是f64,即rust std中支持的容量最大,精度最高的数字。JsValue代表了Javascript环境中的数据。因此,了解这一点,我们就可以自由的进行Javascript和Rust的数据交换了。

关于as

在上面的代码中,我们通过rust的as关键字,将f64数字类型转换成了u32数字类型。
在Rust中,as关键字可以用于类型转换,将一个类型转换为另一个类型,这里的类型必须原始类型(primitive types),但显然不是指所有的原始类型。
什么是原始类型呢?原始类型是Rust语言的基本的数据类型,它们是语言的一部分。Rust语言的原始类型包括一下几种:

布尔类型(bool):表示逻辑值,只能是true或false。
字符类型(char):表示单个Unicode字符。
整数类型(integer):包括有符号整数(i8、i16、i32、i64、isize)和无符号整数(u8、u16、u32、u64、usize)。
浮点数类型(floating-point):包括单精度浮点数(f32)和双精度浮点数(f64)。
元组类型(tuple):可以包含多个不同类型的值。
数组类型(array):包含固定长度的相同类型的值。
切片类型(slice):对数组的引用,可以动态指定长度。
指针类型(pointer):包括原始指针(const T和mut T)和引用(&T)。

在我们的问题场景中,我们用asf64转换成了u32。难道还能将tuple转换成u32不成,显然是不可能的。还好编译器会给出提示。

    let num1 = (-33, -5);let num: u32 = num1 as u32;

报错:

3 |     let num: u32 = num1 as u32;|                    ^^^^^^^^^^^ an `as` expression can only be used to convert between primitive types or to coerce to a specific trait object

其实在这里,我用as关键字是迫不得已的。因为我没有在u32这个类型上找到impl TryFrom<f64> for u32这样的方法。那将f64类型的数据转换成u32类型的数据,编译器没有报错,是不是就意味着没有问题呢?在我们的问题场景中,应该是没有问题的。但是从数据本身的角度,是有问题的。

fn main() {let num: f64 = -323.3;let num1: u32 = num as u32;println!("numbers:{}, {}", num, num1);
}

打印结果如下:

numbers:-323.3, 0

我想你应该总结处理这里的规律了吧,再看看下面这段就让你大跌眼镜了:

fn main() {let num: i32 = -3;let num1: u32 = num as u32;println!("numbers:{}, {}", num, num1);
}

按照之前的f64u32的经验,打印的结果应该是:-3, 0,对吧?
错,结果也让我吓一跳:

numbers:-3, 4294967293 

u32的最大数值是:4294967295。
这里的水有多深,我就不往下说了,我怕淹死在这里,哈哈。

正确的做法是:

fn main() {let num: i32 = -3;let num1: u32 = u32::try_from(num).unwrap_or_else(|_| 0);println!("numbers:{}, {}", num, num1);
}

所以,关于使用as来转换数据,如果类型本身实现了TryFrom<T> for ...,那么就不要使用as来进行类型转换。

总结

在基于wasm_bindgen的WebAssembly开发过程中,JsValue与Rust原始数据类型之间的转换会是家常便饭。对于JsValue来说,它只关心布尔值,字符串和数字,分别对应Rust中的boolStringf64f64与其它Rust数字之间的转换需要依赖as关键字。但是,如果数字类型实现了TryFrom<T>这个trait,就不要使用as关键字来进行转换。

今天就到这里,欢迎大家留言交流。

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

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

相关文章

全志H616在低温reboot过程中进入休眠解决方法

主题 H618在DDR物料适配支持时候&#xff0c;reboot实验异常进休眠&#xff0c;在reboot老化测试中报如下log1 [2023-07-11,16:56:44][ 40.325238][ T1] init: Untracked pid 1888 exited with status 0 [2023-07-11,16:56:44][ 40.325295][ T5] binder: undeliver…

比起“如果环境这样这样,那便那样那样”,我更喜欢听到“要怎样怎样变成想要的样子”

比起“如果环境这样这样&#xff0c;那便那样那样”&#xff0c;我更喜欢听到“要怎样怎样变成想要的样子” 许多事情不只是选择题、判断题&#xff0c;还可以是填空题、论文&#xff0c;重点是你怎么看待&#xff0c;格局有没有打开.

中睿天下参展2023海军工程大学首届网络安全文化周并发表主题演讲

2023年9月3日至9月8日&#xff0c;海军工程大学首届网络安全文化周活动于武汉举办。本次活动以“守护蓝疆网安有我”为主题&#xff0c;设有特邀嘉宾前沿讲座、网络安全圆桌交流论坛、网络安全科技展、网络对抗实战竞技、网络安全保密视频创作和信息安全知识竞赛等系列活动。 海…

自学WEB后端03-Node.js 语法

学习后端路线&#xff1a; JavaScript 基础语法 Node,js 内置 API 模块 (fs、 path、 http等) 第三方 API 模块 (express、mysql等) 今天主要回顾下Node.js 语法 Node.js 是基于 Chrome V8 引擎的 JavaScript 运行环境&#xff0c;它提供了一种能够在服务器端运行 JavaScr…

Selenium和Requests搭配使用

Selenium和Requests搭配使用 前要1. CDP2. 通过requests控制浏览器2. 1 代码一2. 2 代码2 3. 通过selenium获取cookie, requests携带cookie请求 前要 之前有提过, 用selenium控制本地浏览器, 提高拟人化,但是效率比较低,今天说一种selenium和requests搭配使用的方法 注意: 一定…

2023网络安全面试题(附答案)+面经

前言 随着国家政策的扶持&#xff0c;网络安全行业也越来越为大众所熟知&#xff0c;相应的想要进入到网络安全行业的人也越来越多&#xff0c;为了拿到心仪的Offer之外&#xff0c;除了学好网络安全知识以外&#xff0c;还要应对好企业的面试。 所以在这里我归纳总结了一些网…

软件的开发步骤,需求分析,开发环境搭建,接口文档 ---苍穹外卖1

目录 项目总览 开发准备 开发步骤 角色分工 软件环境 项目介绍 产品原型 技术选型 开发环境搭建 前端:默认已有 后端 使用Git版本控制 数据库环境搭建 前后端联调 ​登录功能完善 导入接口文档 使用swagger​ 和yapi的区别 常用注解 项目总览 开发准备 开发步骤…

解决方案(一)蓄水池抽样算法(可用于抽样,抽奖等场景)

蓄水池抽样算法 描述Java基本实现蓄水池模型参与抽样 描述 该算法可用于从数据流中随机抽取指定数量的样本。 假设目标样本数量为 n&#xff0c;参与抽样的数量为 i。 蓄水池容量为 n&#xff0c;参与抽样的数量为 i 每接收一个样本&#xff0c;不断计算抽样结果&#xff1a;…

协程是什么?为何说协程具有同步的编程方式又具有异步的性能?

协程&#xff08;Coroutine&#xff09;是一种并发编程模型&#xff0c;它允许程序在单线程内实现多个独立的执行线程&#xff0c;这些线程可以非阻塞地挂起和恢复&#xff0c;以实现协作式多任务处理。协程的核心思想是让程序员能够控制执行的流程&#xff0c;而不是完全交给操…

如何通过bat批处理实现快速生成文件目录,一键生成文件名和文件夹名目录

碰对了情人&#xff0c;相思一辈子。 具体方法步骤&#xff1a; 一、创建一个执行bat文件&#xff08;使用记事本即可&#xff09;&#xff1b; 1、新建一个txt文本空白记事本文件 2、复制以下内容进记事本内 dir/a/s/b>LIST.TXT &#xff08;其中LIST.TXT文件名是提取后将…

爬虫入门基础-HTTP协议过程

在进行网络爬虫开发之前&#xff0c;了解HTTP协议的基本过程是非常重要的。HTTP协议是Web通信的基础&#xff0c;也是爬取网页数据的核心。本文将为您详细介绍HTTP协议的过程&#xff0c;帮助您理解爬虫背后的网络通信机制。让我们一起来探索吧&#xff01; 一、什么是HTTP协议…

Linux入门教程||Shell echo命令||Shell printf 命令

Shell 的 echo 指令与 PHP 的 echo 指令类似&#xff0c;都是用于字符串的输出。命令格式&#xff1a; echo string您可以使用echo实现更复杂的输出格式控制。 1.显示普通字符串: echo "It is a test"这里的双引号完全可以省略&#xff0c;以下命令与上面实例效果一…

产权未转移登记的离婚析产协议不能对抗债权人

债权人代位析产纠纷作为一个新的民事案由&#xff0c;是民事执行阶段中债务人不能到期清偿债务&#xff0c;又怠于分割共同财产或以诉讼方式分割共同财产&#xff0c;而由债权人请求代替债务人向其他共有人提出分割财产以实现债权的诉讼。债权人代位析产&#xff0c;增加了债权…

小皮面板配置Xdebug,调试单个php文件

小皮面板配置Xdebug 首先下载phpstrom&#xff0c;和小皮面板 打开小皮面板&#xff0c;选中好要使用的php版本 然后点击【管理】> 【php扩展】> 【xdebug】 然后打开选中好版本的php位置 D:\Program_Files\phpstudy_pro\Extensions\php\php7.4.3nts打开php.ini文件…

Java8实战-总结34

Java8实战-总结34 重构、测试和调试使用 Lambda 重构面向对象的设计模式观察者模式责任链模式 重构、测试和调试 使用 Lambda 重构面向对象的设计模式 观察者模式 观察者模式是一种比较常见的方案&#xff0c;某些事件发生时&#xff08;比如状态转变&#xff09;&#xff0…

积分商城运营成功的7个关键要素

积分商城是一种受欢迎的私域营销工具&#xff0c;可以帮助企业吸引和留住客户&#xff0c;提高销售和客户忠诚度。然而&#xff0c;要确保积分商城的运营成功&#xff0c;需要考虑多个关键要素。本文将深入探讨这些要素&#xff0c;以帮助企业打造一个成功的积分商城。 第一要…

VIO和预积分(蒙圈的请过来,带你不蒙圈)

大佬的世界&#xff0c;你不会懂&#xff0c;就像一行行公式&#xff0c;人家觉得很简单&#xff0c;你却要读很多遍&#xff0c;不过还好&#xff0c;我们从普通人的世界来解读VIO和预积分。 预积分 拿大佬的话来热场&#xff0c;本章要介绍一种在紧耦合系统中十分常见的IMU…

IOTDB的TsFile底层设计

目录 概述 数据模型 数据结构 元数据注册 读取和写入 设计思想 主要过程

it网络设备监控系统

企业对网络监控系统的需求也在增加。网络监控系统是一种软件和硬件的组合&#xff0c;用于监控和管理企业的网络系统。它帮助企业实时了解网络情况&#xff0c;防范和处理网络问题&#xff0c;保证企业业务的正常使用。那么&#xff0c;IT网络监控系统监控什么设备呢&#xff1…

前端求职指南

简历求职指南 为什么没有面试&#xff1f; 1、简历写的不好 2、简历投递不好 简历的定义是什么&#xff1f; 是求职者向未来雇主展示自己专业技能和职业素养的自我推销工具&#xff0c;以找到工作为目的。 什么时候改简历&#xff1f; 每半年或一年更新一次工作中的成长 再工…