Qt中常见的JS类和函数(一): 全局对象

Qt专栏：http://t.csdnimg.cn/YLlEd 

相关系列文章

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

在Qt中调用示例如下：

QJSEngine myEngine;
QJSValue fun = myEngine.evaluate("(function(a) { return encodeURI(a); })");
QJSValueList args;
QString strUrl = QString::fromLocal8Bit("http://127.0.0.1/test.html?name=张三&age=30");
args << strUrl;
QJSValue threeAgain = fun.call(args);
QString result = threeAgain.toString();

结果和上面html中调用执行的结果一样。

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中的参数部分，确保可传递特殊字符

后面继续写。。。