Qt中常见的JS类和函数(一)

这篇具有很好参考价值的文章主要介绍了Qt中常见的JS类和函数(一)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

相关系列文章

Qt中字符串转换为JS的函数执行

目录

1.引言

2.全局对象(The Global Object)

2.1.值属性(Value Properties)

2.1.1.NaN

2.1.2.Infinity

2.1.3.undefined 

2.2.函数属性(Function Properties)

2.2.1.eval(x)

2.2.2.parseInt(string, radix)

2.2.3.parseFloat(string)

2.2.4.isNaN(number)

2.2.5.isFinite(number)

2.2.6.encodeURI(uri)

2.2.7.decodeURI(encodedURI)

2.2.8.encodeURIComponent(uriComponent)

2.2.9.decodeURIComponent(encodedURIComponent)

2.2.10.escape(string)

2.2.11.unescape(string) 


1.引言

        由于qml是js的拓展,可以在qml中创建js的对象,js的对象有数组,日期,算数,逻辑,正则表达式,对象,都需要使用new来创建,创建的名字也是固定的,固定的名字可以调用js的内建方法。

        在qml中和qt中的QJSEngine类都可以使用js中的对象和函数,而且使用起来特别的方便。如:

 QJSEngine myEngine;
 QJSValue three = myEngine.evaluate("1 + 2");

而且qt也可以很轻松的调用js定义的函数,如下示例:

 QJSValue fun = myEngine.evaluate("(function(a, b) { return a + b; })");
 QJSValueList args;
 args << 1 << 2;
 QJSValue threeAgain = fun.call(args);

下面就来详细的介绍qt中能使用的对象和函数

2.全局对象(The Global Object)

2.1.值属性(Value Properties)

2.1.1.NaN

代表非数字,是当结果应为数字但结果未定义或不能表示为数字时,JavaScript 从某些函数和操作返回的值,NaN是一个特殊的数字值(typeof NaN的结果为number),是not a number的缩写,表示不是一个合法的数字,如:

//[1]
Number('fefww') // NaN
Number(undefined) // NaN

//[2]
parseInt('abc', 10) //NaN, parseInt() 如果解析失败返回 NaN 
Math.log(-1) // NaN
Math.sqrt(-1) // NaN
Math.acos(2)  // NaN

注意:NaN是唯一一个和自身不相等的值,如 NaN === NaN // false

2.1.2.Infinity

Infinity(无穷大)在 JS 中是一个特殊的数字,它的特性是:它比任何有限的数字都大。无穷可以分为两种,正无穷和负无穷,JS 中对应的表示方式为:+Infinity(或者Infinity) 和 -Infinity。

这意味着Infinity和-Infinity(小于任何有限数的数字)都是number类型的特殊值:

typeof Infinity; // => 'number'
typeof -Infinity; // => 'number'

Infinity比任何有限数都大。如:

Infinity > 100;                     // => true
Infinity + 1;        // => Infinity
Infinity + Infinity; // => Infinity
10 / Infinity; // => 0
2 / 0; // => Infinity

对无穷数进行概念上不正确的运算会得到NaN。 例如,不能除以无限数,也无法确定无限数是奇数还是偶数:

Infinity / Infinity; // => NaN
Infinity % 2;        // => NaN

2.1.3.undefined 

undefined既是JavaScript中的原始数据类型之一,也是一个原始值数据。导致undefined的常见场景有:

1)未初始化变量和访问不存在的属性。如

//[1]
var obj;
console.log(typeof obj); //undefined

//[2]
var obj1 = {
   name: 'conan';
}
//使用属性选择器obj1.age访问不存在的属性age将被计算为`undefined`;

本身访问不存在的属性不会引发错误,但是尝试从不存在的属性中获取数据时就会发生出问题。

因此它可以用来检查属性是否存在:

a、obj.name !== undefined : 直接与undefined 进行比较
b、typeof obj.name !== 'undefined': 验证属性值类型
c、obj.hasOwnProperty(‘name’) : 验证对象是否具有自己的属性 仅在对象自己的属性中进行验证
d、'name' in obj : 验证对象的是否具有自己的属性或继承属性

建议使用in操作符,它的语法短小精悍。in操作符的存在表明一个明确的意图,即检查对象是否具有特定的属性,而不访问实际的属性值。

2)函数返回值

隐式地, 没有return 语句, JS函数返回undefined.

3)未定义的数组

访问越界索引的数组元素时,会得到undefined。如:

var arr = [name, age, desc];
arr[6];  //=> undefined

注意:undefined 和 null 之间的区别

两个特殊值都表示空状态,主要区别在于undefined 表示尚未初始化的变量的值,null 表示故意不存在对象。

如:

//[1]
var num;
console.log(num);//undefined
// num 变量未定义,这清楚的表明未初始化的变量。

//[2]
undefined == null; //true
undefined === null; //false

2.2.函数属性(Function Properties)

2.2.1.eval(x)

eval(x)可以接受一个字符串x作为参数,并把这个参数作为脚本代码来执行。

1)  如果参数是一个表达式,eval() 函数将执行表达式。
2)  如果参数是Javascript语句,eval()将执行 Javascript 语句。

如果执行结果是一个值就返回,不是就返回undefined,如果参数不是一个字符串,则直接返回该参数

示例如下:

eval(“var b=1222”);//声明一个变量b并赋值1222。
eval(“55+366”);//执行加运算,并返回运算值。
eval(“test()”);//执行test()函数。
eval("{a:2}");//声明一个对象。如果想返回此对象,则需要在对象外面再嵌套一层小括如下:eval("({a:2})");

2.2.2.parseInt(string, radix)

         解析一个字符串并返回指定基数的十进制整数, radix 是2-36之间的整数,表示被解析字符串的基数。当参数 radix 的值为 0,或没有设置该参数时,parseInt() 会根据 string 来判断数字的基数。parseInt函数将其第一个参数转换为一个字符串,对该字符串进行解析,然后返回一个整数或 NaN。示例如下:

parseInt("123");//123<br>
parsrInt("-123");//-123<br>
parseInt("123wffee")//123<br>
parseInt("123efe123")//123 <br>
parseInt("12333vwewe")//123<br>
parseInt("123vwevweg123")//123 <br>
parseInt("0.05");//5
parseInt("5e-2");//5
parseInt("Cwewefw666")//NaN

注意事项:

  • 若传入的string不是字符串,则会默认使用tostring()函数来将传入的内容转化为字符串。
  • 若字符串以0x或0X开头则以16进制解析。
  • 若字符串以0开头则以10进制解析。
  • 若传入的为数字,且开头为0,则以八进制解析。
  • 若传入值以0b或0B开头(不加引号),则以二进制解析。

2.2.3.parseFloat(string)

        解析一个字符串,并返回一个浮点数。该函数指定字符串中的首个字符是否是数字。如果是,则对字符串进行解析,直到到达数字的末端为止,然后以数字返回该数字,而不是作为字符串。如果在解析过程中遇到了正负号(+ 或 -)、数字 (0-9)、小数点,或者科学记数法中的指数(e 或 E)以外的字符,则它会忽略该字符以及之后的所有字符,返回当前已经解析到的浮点数。同时参数字符串首位的空白符会被忽略。示例如下:

parseFloat('3.14') // 3.14
parseFloat('314e-2') // 3.14
parseFloat('0.0314E+2') // 3.14
parseFloat('3.14more non-digit characters') // 3.14
parseFloat('\t\v\r12.34\n ') // 12.34
parseFloat([]) // NaN
parseFloat('FF2') // NaN
parseFloat('') // NaN

注意事项:

  • parseFloat方法是将字符串进行转化为浮点数
  • 字符串中符合科学计数法则会进行转化
  • 字符串中中包含不能转化为浮点数的字符,那么就将已经转化好的部分返回
  • parseFloat会自动过滤字符串前后空格
  • 如果参数不是字符串,或者第一个字符不能转化为浮点数,那么返回NaN
  • parseInt不同于Number

2.2.4.isNaN(number)

isNaN()来判断一个数值是不是一个非数字(并不是用来判断是不是NaN这个值)。如:

isNaN(NaN)  // true
isNaN(10)  // false

为什么说isNaN()不是用来判断是不是NaN这个值的呢?因为isNaN对非数字不起作用,它首先做的就是把这些值转换成数字,转换的结果可能为NaN,然后函数会错误地返回true

isNaN('abc')  // true

所以我们想确定这个一个值是为NaN,可以使用以下两种方法:

//[1] 将isNaN()和typeof结合来判断
function isValueNaN(value) {
	return typeof value === 'number' && isNaN(value)
}

//[2] 值是否与本身不相等(NaN是唯一有这样特征的值)
function isValueNaN(value) {
	return value !== value
}

2.2.5.isFinite(number)

此函数用来判断被传入的参数值是否为一个有限数值(finite number),如果参数是 NaN,正无穷大或者负无穷大,会返回 false,其他返回 true。如:

document.write(isFinite(123)+ "<br>");  //true
document.write(isFinite(-1.23)+ "<br>"); //true
document.write(isFinite(5-2)+ "<br>"); //true
document.write(isFinite(0)+ "<br>");  //true
document.write(isFinite("Hello")+ "<br>"); //false
document.write(isFinite("2005/12/12")+ "<br>"); //false

2.2.6.encodeURI(uri)

对参数uri进行编码,uri为字符串。encodeURI()函数只对字符串中有意义的字符进行转义。例如将字符串中的空格转化为“%20”。如:

encode.js:

function endecode_test(){
	var uri = "http://127.0.0.1/test.html?name=张三&age=30";
	var encodeResStr =  encodeURI(uri);
    console.log(encodeResStr); 
    console.log(decodeURI(encodeResStr)); 
}

encode.html:

<!DOCTYPE html>
<html>
<body>
<script src="./encode.js"></script>
 
<h1>JavaScript中的常用函数4:编码URI和解码URI</h1>
<p id="res">结果:</p>
<script>
	endecode_test();
</script>
 
</body>
</html>

运行结果在控制台可以看到:

encodeRes = http://127.0.0.1/test.html?name=%E5%BC%A0%E4%B8%89&age=30
encode.js:5

decodeRes = http://127.0.0.1/test.html?name=张三&age=30

2.2.7.decodeURI(encodedURI)

解码已经编码的字符串,是对encodeURI()函数的逆向操作。在这里我们不多讲了。

2.2.8.encodeURIComponent(uriComponent)

        uriComponent字符串作为 URI 组件进行编码;此方法不会对 ASCII 字母和数字进行编码,也不会对这些 ASCII 标点符号进行编码: - _ . ! ~ * ' ( ) 。所谓组件,通常会被如下符号分割的字符串::;/?:@&=+$,# 。示例如下:

encode.js:

 function endecodeURIComponent_test(){
	var uri = "http://127.0.0.1/test.html?name=张三&age=30";
	var encodeResStr =  encodeURIComponent(uri);
    console.log("encodeRes = " + encodeResStr); 
    console.log("decodeRes = " + decodeURIComponent(encodeResStr)); 
}

encode.html:

<!DOCTYPE html>
<html>
<body>
<script src="./encode.js"></script>
 
<h1>JavaScript中的常用函数4:编码URI和解码URI</h1>
<p id="res">结果:</p>
<script>
	endecodeURIComponent_test();
</script>
 
</body>
</html>

运行结果:

encodeRes = http%3A%2F%2F127.0.0.1%2Ftest.html%3Fname%3D%E5%BC%A0%E4%B8%89%26age%3D30
encode.js:12

decodeRes = http://127.0.0.1/test.html?name=张三&age=30

备注:encodeURIComponent()和encodeURI()的最主要区别是:前者对保留字符同样做转义编码,后者则不会

2.2.9.decodeURIComponent(encodedURIComponent)

解码已经编码的字符串,是encodeURIComponent()函数的逆向操作。在这里我们不多讲了。

2.2.10.escape(string)

escape() 函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串。该方法不会对 ASCII 字母和数字进行编码,也不会对下面这些 ASCII 标点符号进行编码: * @ - _ + . / 。其他所有的字符都会被转义序列替换。如:

let str="Need tips? Visit RUNOOB!";
console.log(escape(str)) //Need%20tips%3F%20Visit%20RUNOOB%21
console.log(unescape(str)) //Need tips? Visit RUNOOB!

2.2.11.unescape(string) 

对字符串string进行解码,是对escape()的逆操作。在这里我们不多讲了。

总结:escape()encodeURI()encodeURIComponent()的区别

  escape encodeURI encodeURIComponent
编码范围 仅可识别 ASCII 字符集 不包括特殊字符 # 包括所有特殊字符
适用URL 不适用 用于编码整个URL 用于编码URL中的参数部分
保留字符 保留字符不会被编码 保留字符如 :/?#[]@ 不会被编码 所有非字母数字字符都会被编码
编码结果 对特殊字符使用 % 编码 %20 用于空格 %20 用于空格; %21 用于 ! 等特殊字符
解码 使用unescape()解码 使用decodeURI()解码 使用decodeURIComponent()解码
适用场景 适用于旧版浏览器或特定需求(性能较差) 编码整个URL(包含协议、域名、路径等)以防止URL被解释错误 编码URL中的参数部分,确保可传递特殊字符

 

 

 

 

 

 

 

 

 

 

 

 

后面继续写。。。文章来源地址https://www.toymoban.com/news/detail-836650.html

到了这里,关于Qt中常见的JS类和函数(一)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 3分钟搞懂:JavaScript 和 ECMAScript

    ECMAScript 是 JavaScript 语言的 国际标准 ,JavaScript 是 ECMAScript 的 一种实现 (Adobe ActionScript 和 JScript 同样实现了 ECMAScript)。 ECMAScript 是欧洲计算机制造商协会 ECMA(European Computer Manufacturers Association)发布的浏览器脚本语言标准。它是 262 号标准文件,又叫 ECMA-262。 ECMAScript 定义

    2023年04月22日
    浏览(45)
  • 前端学习笔记:JavaScript基础语法(ECMAScript)

    此博客参考b站:【黑马程序员前端JavaScript入门到精通全套视频教程,javascript核心进阶ES6语法、API、js高级等基础知识和实战教程】https://www.bilibili.com/video/BV1Y84y1L7Nn?p=76vd_source=06e5549bf018e111f4275c259292d0da 这份笔记适用于已经学过一门编程语言(最好是C语言)的同学,如果你没有

    2024年02月16日
    浏览(46)
  • 深入理解 ECMAScript modules:提升你的 JavaScript 技能(六)

    🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_ CSDN 博客专家、23年度博客之星前端领域TOP1 🕠 牛客 高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课 签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你

    2024年02月21日
    浏览(51)
  • 深入理解 ECMAScript modules:提升你的 JavaScript 技能(一)

    🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_ CSDN 博客专家、23年度博客之星前端领域TOP1 🕠 牛客 高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课 签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你

    2024年02月20日
    浏览(42)
  • JavaScript节流功能(js节流函数,节流功能的应用与解析,深入了解JavaScript节流函数)

    简述:上篇文章介绍了js防抖功能,这期说下js节流功能。节流就是某一高频事件不断被触发时,将多次执行变成每隔一段时间执行,具体点就是减少一个事件在一段时间内的触发频率,它是一种常用的函数优化技术,可以限制函数的执行频率,从而提高网页的性能和用户体验

    2024年02月13日
    浏览(42)
  • JavaScript深拷贝(js深拷贝,JavaScript递归函数,实现深拷贝)

    简述:JavaScript的深拷贝和浅拷贝大家都比较熟悉,今天来分享下深拷贝,就是使用该函数时,会复制拷贝一份该数据,修改该数据属性,不会改变原有数据,就是把复制的对象所引用的对象全都复制了一遍,具体实现如下; 1、定义拷贝对象; 2、定义递归函数deepClone(),实现

    2024年02月15日
    浏览(60)
  • 【JavaScript】深度理解js的函数(function、Function)

    学了这么久的JavaScript,函数在JavaScript中最常用之一,如果你不会函数,你就不会JavaScript。 函数就是Function对象,一个函数是可以通过外部代码调用的一个“子程序”,它是头等(first-class)对象,因为它们可以像任何其他对象一样具有属性和方法 。瞧瞧它的定义,注定它能

    2024年01月21日
    浏览(45)
  • [前端开发] 常见的 HTML CSS JavaScript 事件

    代码示例指路 常见的 HTML、CSS、JavaScript 事件代码示例 在 Web 开发中,事件是用户与网页交互的重要方式之一。通过事件,用户可以与页面元素进行交互,触发相应的功能或效果。本文将介绍常见的 HTML、CSS、JavaScript 事件,以及事件对象和事件代理的概念。 鼠标事件 鼠标事

    2024年02月19日
    浏览(54)
  • 深入探讨javascript的流程控制与分支结构,以及js的函数

    ✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 所属的专栏: 前端泛海 景天的主页: 景天科技苑 在javascript中的一个程序执行的过程中,各条代码的执行顺序对程序的结果是有直接影响的。 很多时候我们要通过控制代码的执行顺序来实现我们要完

    2024年03月12日
    浏览(41)
  • JavaScript中的时间日期函数new Date()(JS中5种获取时间戳的函数)

    简介: JavaScript 中的 new Date() 方法用于创建一个新的 Date 对象,该对象表示当前日期和时间。Date 对象提供了许多方法和属性,可以用于获取和设置日期和时间信息。 new Date([year, month, day, hour, minute, second, millisecond]) 其中,每个参数都是可选的。如果没有指定参数,则 new Dat

    2024年02月04日
    浏览(70)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包