QML语法-对象篇（上篇）

如果你用过 C++ 或 Java，肯定熟悉类(class)。在 ECMAScript 中并没有 “类” 这个词， 其对应的是 “对象定义”，不过这太拗口了，因此还是诜择使用 “类” 这个词。

对象是由 new 运算符加上要实例化的类型的名字创建的。比如下面的代码创建 Array 类的实例：

var a = new Array()

在语法上与 C++ 类似。如果类的构造函数没有参数，括号可以省略；如果有多个参数， 则必须使用括号。为了避免混乱，笔者建议都使用括号。

1、String

String 类是 String 原始类型的对象表示法。其实 Boolean、Number 也有对应的对象表示 法，不过我们一般都直接使用原始值，略过不提。

你可以这样构造一个 String 对象：

var str = new String("I\'m a string")

String 对象的 valueOf() 方法和 toString() 方法都会返回 String 类型的原始值。

String 类型比较复杂，本节重点介绍其基本功能。

本文福利，莬费领取Qt开发学习资料包、技术视频，内容包括（C++语言基础，Qt编程入门，QT信号与槽机制，QT界面开发-图像绘制，QT网络，QT数据库编程，QT项目实战，QSS，OpenCV，Quick模块，面试题等等）↓↓↓↓↓↓见下面↓↓文章底部点击莬费领取↓↓

（1）字符串长度

length 属性返回字符串中的字符个数：

1. var str = new String("I\'m a string")

2. console.log(str.length)

上面示例输出的是 12。对于 String 类型的原始值，同样可以通过 length 属性获知字符串长度。比如：console.log("I\'m a string".length);。

（2）访问单个字符

charAt() 方法可以访问指定索引位置的字符。前面己经介绍过，可以使用数组下标的形式访问字符串中的字符。而 charCodeAt() 方法返回指定位置字符对应的 Unicode 编码。 下面是简单的示例：

1. var str = new String("I\'m a string")

2. console.log (str. char At (2)) // 输出：m

3. console • log (str [0]) // 输出：I

4. console.log (str.charCodeAt (1)) // 输出：39

（3）査找子串

indexOf() 方法从字符串的开头检索子串，lastlndexOf() 方法从字符串的结尾开始检索子串，它们返回给定的子串在本对象代表的字符串中的位置，如果找不到则返回 -1。这两个方法还有一个可选的参数，指定开始查找的位置。

search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。它是区分大小写的。它总是从字符串的开始进行查找。

match() 方法可在字符串内检索指定的值，或者寻找匹配指定正则表达式的一个或多个子串。如果检索到了符合规则的子串，它会返回一个存放所有子串的数组。

需要注意的是，上面 4 个用于查找的方法，都是区分大小写的。以一个忽略大小写的正则表达式为参数调用 search() 或 match() 方法，可以实现忽略大小写的查找。

下面是简单的示例：

1. var str = new String("I\'m a string")

3. console.log(str.indexOf("ing")) // 输出：9

4. console.log(str.search("i")) //输出：9，而非 0

5. console. log (str.match("tri")) // 输出：[tri]

7. var numberSource = new String ("2014-08-18, I got 96")

8. var results = numberSource.match(/\d+/g)

9. console.log (results.length) // 输出：4

10. console. log (results) // 输出：[2014,08, 18,96]

（4）字符串比较

localeCompare() 方法在比较字符串时，默认釆用底层操作系统提供的排序规则。当本对象等于参数字符串时此方法返回0，小于时返回小于 0 的值（QML中为-1），大于时返回大于0的值（QML中返回1）。

示例代码片段：

1. var strl = "Qt Quick"

2. var str2 = "qt quick"

3. var str3 = "ok"

5. console.log (strl == str2) // 输出：false

6. console.log (strl < str2) // 输出：true

7. console.log (strl.localeCompare(str2)) // 输出：1

8. console.log (str3.localeCompare (str2)) // 输出：-1

（5）连接字符串

concat() 方法用于连接两个或多个字符串，返回一个新的字符串原始值。使用 “ + ” 运算符可以更方便地连接字符串，效果和 concat() —样。示例代码片段：

1. var strl = new String("Qt")

2. var str2 = "Quick"

4. var strResult = strl.concat(str2, " is", " great!")

5. console.log(strResult)

6. console.log(strl)

7. console.log(strl.concat (" Widgets"))

8. console.log(strl + str2)

注意，无论是 concat() 还是 “ + ”，都不会在字符串之间插入填充字符。如果你想连接多个字符串并且指定它们之间的分隔符（填充字符），则可以使用 Array 对象存储字符串，然后调用 Array 的 join() 方法。

（6）提取子串

ECMAScript String 提供了 slice() 和 substring() 两个方法来提取子串，它们接受一个或两个参数，第一个参数指定起始位置，第二个参数指定结束位置（提取出的子串不包含该位置 的字符），如果忽略第二个参数，结束位置默认为字符串的长度。

还有一个方法，substr() 也可以提取子串，它的第一个参数指定起始位置，第二个参数指定要提取的字符个数，如果不指定，substr() 会返回从起始位置到母串结束的所有字符。 示例代码片段：

1. var source = new String ("I like QML")

2. console.log (source.slice (-3)) // 输出："QML"

3. console.log (source.slice (2,6)) // 输出："like"

4. console.log (source.substring (0, 6)) // 输出："I like"

5. console.log (source.substring (-3) ) // 输出："I like QML"

6. console.log (source.substring (4, -3)) // 输出："I li"

7. console.log (source.slice (4, -3)) // 输出："ke"

8. console.log (source.substr (2, 4)) // 输出："like"

（7）大小写转换

如果你想将一个字符串转换为小写，可以使用 toLowerCase() 或 toLocaleLowerCase() 方法：转换为大写，可以使用 toUpperCase() 或 toLocaleUpperCase() 方法。其中 toLocaleXXX 方法基于特定的区域实现，与 localeCompare() 类似。示例代码片段：

1. var orig = "Qt Quick"

2. console.log(orig.toLocaleLowerCase())

3. console.log(orig.toLowerCase())

4. console.log(orig.toLocaleUpperCase())

5. console.log(orig.toUpperCase())

（8）字符串替换

replace) 方法可以将母串中的部分子串替换为指定的新字符串。它的第一个参数是一个字符串原始值或者正则表达式，第二个参数是新字符串或产生新字符串的函数。

介绍子串查找时我们用到了正则表达式，这里还要用到，但正则表达式本身是一个非常复杂的主题，后面我们会简要介绍。示例代码片段：

1. var strSource = new String("Android,best")

3. // 下面语句输出"iOS,best"

4. console.log(strSource.replace("Android", "iOS"))

5. // 下面语句输出"Android,worst”

6. console.log(strSource.replace(/best/, "worst"))

（9）使用arg()进行值替换

QML 在实现 ECMAScript 时对 String 对象做了扩充，加入了 arg() 方法。如果你用过 Qt C++ 中的 QString 类，对此应不陌生。

arg()的语法：stringarg(value)。其中 value 可以是数字、字符串、布尔值、对象等，它用来替换发出调用的字符串对象内的 ％1、°/2、%N 等占位符；布尔值会被替换为 1 或 0；对于对象，则使用 toString() 方法转换后的结果来替换对应的占位符。arg() 会返回一个新的字符串对象。简单的示例：

1. var expression = "%1 < %2 = %3"

2. var result = expression.arg(7).arg(8).arg("true")

3. console.log(result)

4. console.log(expression.arg(10).arg(6).arg(false))

5. console.log("I am %1 years old.".arg(10))

值得注意的是，String 类型的对象是只读的，字符串提取、查找、替换等操作，凡是牵涉到修改的动作，都返回新的字符串原始值或对象，而母串本身不会改变。另外，字符串原始值是伪对象，它可以使用String类的所有属性和方法。

2、RegExp

在编写处理字符串的程序时，经常会有查找符合某些复杂规则的字符串的需要。正则表达式就是用于描述这些规则的工具。换句话说，正则表达式就是记录文本规则的代码。在 QtC++ 中有 QRegExp，在 QML 中有 RegExp，它们是对字符串执行模式匹配的强大工具。

在 ECMAScript 中支持两种构造正则表达式的方法：

• 字面量语法：/pattem/attributes。
• 创建 RegExp 对象：new RegExp (pattern, attributes)。

使用字面量这种方式，我们在上面介绍 String 类的 match() 和 search() 方法时已经用到过。创建 RegExp 对象与字面量方式类似，它们都需要设置 pattern 和 attributes。

3、Array

ECMAScript 定义的 Array 是动态数组，其大小可以动态变化。而且数组中的元素，类型可以不同。这和 C++ 这种强类型语言就大大不同了。下面我们来看看 Array 类的一般用法。

（1）创建数组

要定义一个 Array 对象，有三种方式：

1. // 使用默认的构造函数

2. var a = new Array()

4. // 指定数组对象的初始长度

5. var a = new Array(10)

7. // 用给定的参数初始化数组

8. var a = new Array(10, 6, 3, 21, 22, 30, 8)

（2）访问数组

Array 类的 length 属性表示数组中元素的个数。数组中的元素，可以通过下标访问。简单的示例代码：

1. var a = new Array(10, 6, 3, 21, 22, 30, 8)

2. console.log("array length - ", a.length)

3. console.log("2nd element - ", a[1])

（3）修改数组

可以直接使用下标运算符来添加元素，只需指定一个越界的索引即可，比如数组长度为 4，你可以使用a[4]=3这样的语句来添加一个元素。你还可以使用下标修改已经存在的元素。

• 可以使用 push() 方法向数组末尾插入一个或多个元素，它返回数组新的长度。你可以使用 Pop() 方法删除并返回数组的最后一个元素。
• shift() 方法删除并返回数组的第一个元素。unshift() 方法向数组的开始添加一个元素并返回新的数组长度。
• reverse() 方法可以颠倒数组中元素的顺序。注意，它会改变原来的数组。
• sort() 方法可以对数组内元素排序并返回对原数组的引用。注意，它会改变原来的数组。

示例代码片段：

1. var a = new Array(10, 6, 3, 21, 22, 30, "zhangsan")

2. console.log("array length - ", a.length)

3. console.log("2nd element - ", a[1])

4. console.log("7th - ", a[6])

6. a[6] = "ZhangSanFeng"

7. a[7] = "XieXun"; a.push(250)

8. a.unshift(1); console.log(a.join(""))

9. console.log(a.shift ()); a.reverse ()

10. console.log(a.pop())

11. console.log(a.sort ())

12. console.log(a.pop())

13. console.log(a.pop())

14. console.log(a.sort())

16. /*

17. 输出结果如下：

18. qml： array length w 7

19. qml： 2nd element ~ 6

20. qml： 7th _ zhangsan

21. qml: 1 10 6 3 21 22 30 ZhangSanFeng XieXun 250

22. qml： 1

23. qml： 10

24. qml： [21, 22, 250, 3, 30, 6, XieXun, ZhangSaiiFeng]

25. qml： ZhangSanFeng

26. qml： XieXun

27. qml： [21, 22, 250,3,30,6]

28. */

（4）转换为字符串

• join() 方法可以把数组中的所有元素组合成一个字符串，字符串之间可以用给定的分隔符来填充。
• toString() 方法可以把数组转换为字符串，与不带参数的 join() 方法结果一样。
• toLocaIeString() 方法可以把数组转换为本地字符串。

（5）数组分隔与合并

concat() 方法可以连接两个或多个数组，它的参数既可以是一个单一的值，也可以是一个数组对象。它不会改变现有数组，而是返回一个新的数组对象。

slice(start, end) 方法与 String 类的 slice() 方法用法相近，它将母数组中 start 到 end (不含 end 位置的元素）之间的元素放到一个新数组中返回。示例代码片段：

1. var array = new Array("I", "like", "Qt", "Quick")

2. var subArray = array.slice(2, 4)

3. console.log (subArray.join(" "")

4. var newArray = array.concat ("!", subArray)

5. console.log(newArray.join(""))

7. newArray[0] = "Do you"

8. newArray.splice (4, 3, "?", "Yes", "!")

9. console.log(newArray.join(""))

11. /*

12. 输出结果：

13. qml： Qt Quick

14. qml： I like Qt Quick J Q+. Quick

15. qml： Do you like Qt Quick ? Yes !

16. */

（6）数组的字面量表示法

除了使用 new 来创建数组对象，还可以使用字面量来表示数组。例如：

1. var a = [2, 3, 4, "?", "Quick"]

2. console.log(a.length, a[2])

如上所示，数组的字面量表示法就这些要点：方括号（[]）定义一个数组，数组元素（原始值或对象）放在方括号内，多个元素之间使用逗号分隔。

4、Math

Math 对象用来执行数学运算，它有点儿特别，你不用使用 new 运算符构造对象，可以直接使用。使用 Math 对象的代码片段：

1. var pi = Math.PI

2. var textColor = Qt.rgba(Math.random(), Math.random(), Math.random())

Math 有下列方法：

• max(x, y)，返回 x 和 y 中的最大值。
• min(x, y)，返回 x 和 y 中的最小值。
• abs(x)，返回数的绝对值。
• sqrt(x),返回数的平方根。
• pow(x, y)，返回 x 的 y 次幕。
• random()，返回 0〜1 之间的随机数。
• sin(x)，返回数的正弦值。
• asin(x)，返回数的反正弦值。
• exp(x)，返回 e 的指数。
• log(x)，返回数的自然对数（底为 e)。
• valueOf()，返回 Math 对象的原始值。

 (1653条消息) QML语法-对象篇（上篇）_音视频开发老舅的博客-CSDN博客