ECMAScript語言的標準是由Netscape、Sun、微軟、Borland等公司基於JavaScript和JScript錘煉、定義出來的。 ECMAScript可以為不同種類的宿主環境提供核心的腳本編程能力。ECMAScript僅僅是一個描述,定義了腳本語言的所有屬性、方法和對象。 ...
說道QML,不得不先說一下ECMAScript:
ECMAScript語言的標準是由Netscape、Sun、微軟、Borland等公司基於JavaScript和JScript錘煉、定義出來的。
ECMAScript可以為不同種類的宿主環境提供核心的腳本編程能力。ECMAScript僅僅是一個描述,定義了腳本語言的所有屬性、方法和對象。它描述了一下內容:
- 語法
- 類型
- 語句
- 關鍵字
- 保留字
- 運算符
- 對象
其他語言可以以它為基礎拓展出新特性,比如QML引入了Qt對象系統中的信號與槽等特色功能。
QML有三個核心:
- ECMAScript
- Qt對象系統
- Qt Quick標準庫
所以說學號QML,瞭解ECMAScript必不可少。在開始瞭解ECMAScript的基本特性之前,要知道qmlscene可以載入QML文檔以達到測試的目的,比如如下測試代碼,就可以在Qt命令行界面中以“qmlscene text.qml”的方式顯示界面效果:
/* * text.qml */ import QtQuick 2.2 Rectangle { Component.onCompleted: { // 這裡放測試代碼 } }
下麵開始簡單介紹ECMAScript:
1.語法
與C、C++或者Java類似。如果你有這幾種語言的基礎,那學習ECMAScript簡直就是“張飛吃豆芽,小菜一碟”。需要註意的幾點是:
- 區分大小寫
知道變數area和Area不一樣就行了,無需多言。
- 弱類型
ECMAScript語言是弱類型語言,變數沒有特定的類型,在定義變數的時候都用var定義,可以用任意值初始化變數,而且可以隨時改變變數所存儲的數據類型,當然了,最好是不要這麼做。
- 分號可寫可不寫
ECMAScript中,如果沒有以分號結尾,它就會把本行的末尾當做是該語句的結束。之後需要QML與C++混合編程,為了不思想分裂,故而還是與c++風格保持一致的好啊,你說是也不是。
2.變數
與c++中變數聲明以及定義是類似的,這裡不必多言。在ECMAScript中,變數可以存放兩種類型的值,即原始值和引用值。原始值一般存放在棧上,引用值是一個指針,指向存儲在堆中的對象,如果你熟悉c++的話,那麼很容易就能理解這個概念。
3.原始類型
在ECMAScript中,原始類型有5種:
- Undefined
- Null
- Boolean
- Number
- String
typeof運算符可以判斷一個值的類型,是原始類型會返回類型的名字,是引用類型則統一返回“object”作為類型名字。以下為簡單的示例:
/* * typeof value */ import QtQuick 2.2 Rectangle { Component.onCompleted: { var name = "matao"; console.log(typeof name); console.log(typeof 60); } }
Undefined類型和Null類型都只有一個值,即undefined、null。
數字類型的最大值是Number.MAX_VALUE,最小值是Number.MIN_VALUE,它們定義了Number值的外邊界,所有的ECMAScript數都必須在這兩個值之間。不過,由表達式的值可以不落在這兩個數之間。大於最大值,它將被賦值為Number.POSITIVE_INFINITY,即正無窮大;當生成的數值小於Number.MIN_VALUE時,將被賦值為Number.NEGATIVE_INFINITY,即負無窮大。其實,ECMAScript也有專門表示無窮大的值,即Infinity,而-Infinity表示負無窮大。
isFinit()方法可以判斷一個數是否是又窮的。
還有一個特殊值NaN,表示非數。isNaN判斷一個數是否是非數。
4.類型轉換
- toString()
- Boolean、Number、String三種原始類型,都有toString()方法,可以把它們的值變為字元串;
- parseInt()和parseFloat()
- 這兩種方法只適用於String類型,而且只轉換無效字元之前的部分,見如下示例:
parseInt("2014年"); //2014 parseInt("3.14"); //3 parseFloat("3.13.1"); //3.13 parseInt("INGI"); //NaN
- 強制類型轉換
- Boolean(value)
- value是非空字元串、非0數字或對象時,Boolean()返回true;
- value是空字元串、0、undefined或null,Boolean()返回false;
- Number(value)
- Number()轉換的是整個值! 這是與parseInt()和parseFloat()不同的地方。
- String(value)
- 它與調用tostring()方法的唯一不同在於:對null或undefined值強制類型轉換可以生成字元串而不發生錯誤:
- Boolean(value)
var null2String = String(null); // “null” var oNull = null var s2 = oNull.toString(); // error
5.對象
首先聲明,其實在ECMAScript中並沒有“類”這個詞,與其對應的是“對象定義”,這裡的“類”代指的就是這個意思,區別於C++、Java中的類。前面提到的引用值,指向的就是對象。
對象是由new運算符加上要實例化的類型的名字創建的。比如:
var a = new Array();
如果類的構造函數沒有參數,括弧可以省略。
幾個基本的對象:
- Object
Object類是所有ECMAScript類的基類,Object類的所有屬性和方法都會出現在其他類中:
- Object類中的屬性:
- constructor,指向創建對象的函數,對於Object類,它只想object()函數;
- prototype,對該對象的對象原型的引用;
- Object類中的方法:
- hasOwnProperty(property),判斷對象是否有某個屬性,property為字元串;
- isPrototypeOf(object),判斷該對象是否為另一個對象的原型;
- propertyIsEnumerable(property),判斷給定的屬性是否可以用for...in語句進行枚舉(一般自定義的對象屬性都是可以枚舉的);
- toString(),返回對象的字元串表示。
- valueOf(),返回最適合該對象的原始值。對於許多類,該方法返回的值都與toString()一樣。
以上的每種屬性和方法都可以被object的派生類覆蓋。
關於對象有以下幾點需要說明:
1.動態增加屬性
在ECMAScript中,對象的屬性可以動態地增刪,比如下麵的示例:
var person = new Object(); person.name = "LingXiaoMo"; person.year = 20;
2.動態增加方法
對象的方法就是一個函數,也可以動態地增加,然後按函數的方式調用,比如下麵的示例:
person.printInfo = function printInfo() { console.log("name-" , this.name , "year-" , this.year); } person.printInfo();
3.使用數組下標訪問屬性和方法
對象的屬性和方法居然可以使用數組下標的形式來訪問。比如這樣:
console.log(person["name"]); // ->person.name person["printInfo"](); // ->person.printInfo()
[]中的東西叫“索引”,這裡的索引是字元串,而不是我們常見的整數。是不是想到了Key-Value(鍵值對)?
4.使用for...in枚舉對象屬性
前面我們提過propertyIsEnumerable()方法可以判斷一個對象的屬性是否可以枚舉。多數自定義屬性和方法都是可以枚舉的,而內置對象或宿主對象的多數核心屬性是不能枚舉的。枚舉對象屬性時我們使用數組下標法訪問對象屬性。看如下的示例:
for(var prop in person) { console.log(prop,",",person[prop]); }
5.對象的字面量表示法
前面已經用過數字字面量、字元串字面量:
-
- 所有QML代碼中直接輸入的數字被看作是數字字面量;
- 字元串字面量可以用雙引號(”)或單引號(')來聲明;
其實對象也能用字面量表示:
var person = { "name": "LingXiaoMo", "year": 20 }
上面的代碼和前面先構造Object再添加屬性的方式,得到的是一樣的對象。
對象的字面量表示法,語法是這樣的:使用一對花括弧表示一個對象,其屬性以Key:Value對的形式放在其括弧內,多個屬性之間使用 逗號 分隔;如果一個屬性本身是對象,還可以使用字面量表示法來嵌套描述。
- String
String、Boolean、Numble都有自己的對象表示法,一般都使用原始值。
你可以這樣構造一個String對象:
var str = new String("I\'m a string");
對字元串有以下基本操作:
1.字元串長度
length屬性返回字元串中的字元個數:
console.log(str.length);
對於String的原始值,同樣可以通過length屬性獲知字串長度。比如:
console.log("I\'m a string".length);
2.訪問單個字元
charAt()方法可以訪問指定索引位置的字元;
可以通過數組下標法訪問指定位置的字元;
而charCodeAt()方法返回指定位置字元對應的Unicode編碼;
下麵是簡單的示例:
console.log(str.charAt(2)); // 輸出m console.log(str[0]); // 輸出I console.log(str.charCodeAt(1)); // 輸出39
3.查找字串
indexOf()方法從字元串的開頭檢索子串,lastInderOf()方法從字元串的結尾開始檢索子串,它們返回子串在字元串中的位置,如果找不到則返回-1.這兩個方法有一個可選參數,指定開始查找的位置;
search()方法用於檢索字元串中指定的字元串,或檢索與正則表達式相匹配的子字元串。區分大小寫,且只能從字元串的開始進行查找;
match()方法可在字元串內檢索指定的值,或者尋找匹配指定正則表達式的一個或多個子串。返回一個存放所有符合規則的子串的數組;
註:
上面4種方法都區分大小寫。以一個忽略大小寫的正則表達式為參數調用search()或match()方法,可實現忽略大小寫的查找。
簡單的示例:
console.log(str.indexOf("ing",4)); // 輸出9 console.log(str.search(/String/)); // 輸出-1 console.log(str.search(/String/i)); // 忽略大小寫,輸出6 console.log(str.match("tri")); // 輸出[tri] var numberSource = new String("2014-08-18, I got 96"); var results = numberSource.match(/\d+/g); console.log(results.length); // 輸出4 console.log(results); // 輸出[2014,08,18,96]
4.字元串比較
使用大於(>)、小於(<)、等於(==)三個運算符比較字元串,使用的是字元的Unicode編碼進行比較,忽略了與本地語言環境相關的語義和排序規則。
localeCompare()方法在比較字元串時,預設採用底層操作系統提供的排序規則。等於時返回0,大於時返回1,小於時返回-1。
示例代碼片段:
var str1 = "Qt"; var str2 = "qt"; var str3 = "ok"; console.log(str1<str2); // true console.log(str1.localeCompare(str2)); // 1 console.log(str3.localeCompare(str2)); // -1
可以看到第3行和第4行的結果不一致,真令人意外。
5.連接字元串
concat()方法用於連接兩個或多個字元串,返回一個新的字元串。
實際中,使用”+“號可能會更方便一些,效果一樣。
6.提取子串
提取子串的方法有三個:
-
-
- slice(): 兩個參數,第一個參數表示起始位置,第二個參數表示結束位置(截取的子串不包括此位置上字元);
- substring(): 兩個參數,與slice()類似,此方法總是把較小的參數作為起始位置,比如substring(1,3)和substring(3,1)效果一樣;
- substr(): 兩個參數,第一個參數表示其實位置,第二個表示待提取子串的長度;
-
註:
上述三個方法都可以不指定第二個參數,如不指定則返回從起始位置到結束的所有字元;
slice()和substring()兩個方法的不同之處在於對負數參數的處理:前者遇到負數時,會應用”從串尾倒數“這種策略,而後者則是把負數當作0來處理。
7.大小寫轉換
實現大小寫轉換的有四個方法:
- 大寫->小寫
- toLowerCase()
- toLocaleLowerCase()
- 小寫->大寫
- toUpperCase()
- toLocaleUpperCase()
8.字元串替換
replace方法可以實現這個功能。它的第一個參數是一個字元串原始值或者正則表達式,第二個參數是新字元串。
9.使用arg()進行值替換
arg()是Qt C++中的東西,在這裡是QML對實現ECMAScript時做的擴充。
arg()的語法是:string arg(value)。其中value可以是數字、字元串、布爾值、對象等,它用於替換髮出調用的字元串對象內的%1、%2、%N等占位符;布爾值會被替換為1或0;對於對象,則使用toString()方法轉換後的結果來替換對應的占位符。arg()會返回一個新的字元串對象。
示例代碼片段:
var expression = "%1 < %2 = %3"; var result = expression.arg(7).arg(8).arg("true");
需要註意的是,String類型的對象是只讀的,凡是牽涉到修改的動作,母串本身不會改變。另外,字元串原始值是偽對象,它可以使用String類的所有屬性和方法。
String類說到這裡,不再多言。
- RegExp
在Qt C++中有QRegExp,在QML中有RegExp,它們是對字元串執行模式匹配的強大工具。
在ECMAScript中支持的兩種構造正則表達式的方法:
-
- 字面量語法:/pattern/attributes
- 創建RegExp對象:new RegExp(pattern,attributes)
或RegExp(pattern,attributes)。
關於正則表達式的修飾符、元字元等其他內容,這裡暫且略過。
- Array
在ECMAScript中數組都是動態的,其大小可以隨時變化,而且數組中的元素類型可以不同。
下麵我們來看看對數組的基本操作:
1、數組的創建
var arrayObj = new Array(); //創建一個數組 var arrayObj = new Array([size]); //創建一個數組並指定長度,註意不是上限,是長度 var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]); //創建一個數組並賦值
要說明的是,雖然第二種方法創建數組指定了長度,但實際上所有情況下數組都是變長的,也就是說即使指定了長度為5,仍然可以將元素存儲在規定長度以外的,註意:這時長度會隨之改變。
2、數組的元素的訪問
var testGetArrValue=arrayObj[1]; //獲取數組的元素值 arrayObj[1]= "這是新值"; //給數組元素賦予新的值
3、數組元素的添加
arrayObj. push([item1 [item2 [. . . [itemN ]]]]);// 將一個或多個新元素添加到數組結尾,並返回數組新長度 arrayObj.unshift([item1 [item2 [. . . [itemN ]]]]);// 將一個或多個新元素添加到數組開始,數組中的元素自動後移,返回數組新長度 arrayObj.splice(insertPos,0,[item1[, item2[, . . . [,itemN]]]]);//將一個或多個新元素插入到數組的指定位置,插入位置的元素自動後移,返回""。
4、數組元素的刪除
arrayObj.pop(); //移除最後一個元素並返回該元素值 arrayObj.shift(); //移除最前一個元素並返回該元素值,數組中元素自動前移 arrayObj.splice(deletePos,deleteCount); //刪除從指定位置deletePos開始的指定數量deleteCount的元素,數組形式返回所移除的元素
5、數組的截取和合併
arrayObj.slice(start, [end]); //以數組的形式返回數組的一部分,註意不包括 end 對應的元素,如果省略 end 將複製 start 之後的所有元素 arrayObj.concat([item1[, item2[, . . . [,itemN]]]]); //將多個數組(也可以是字元串,或者是數組和字元串的混合)連接為一個數組,返回連接好的新的數組
6、數組的拷貝
arrayObj.slice(0); //返回數組的拷貝數組,註意是一個新的數組,不是指向 arrayObj.concat(); //返回數組的拷貝數組,註意是一個新的數組,不是指向
7、數組元素的排序
arrayObj.reverse(); //反轉元素(最前的排到最後、最後的排到最前),返回數組地址 arrayObj.sort(); //對數組元素排序,返回數組地址
8、數組元素的字元串化
arrayObj.join(separator); //返回字元串,這個字元串將數組的每一個元素值連接在一起,中間用 separator 隔開。 //toLocaleString 、toString 、valueOf:可以看作是join的特殊用法,不常用
數組對象的3個屬性:
1、length 屬性
Length屬性表示數組的長度,即其中元素的個數。因為數組的索引總是由0開始,所以一個數組的上下限分別是:0和length-1。和其他大多數語言不同的是,ECMAScript數組的length屬性是可變的,這一點需要特別註意。當length屬性被設置得更大時,整個數組的狀態事實上不會發生變化,僅僅是length屬性變大;當length屬性被設置得比原來小時,則原先數組中索引大於或等於length的元素的值全部被丟失。下麵是演示改變length屬性的例子:
var arr=[12,23,5,3,25,98,76,54,56,76]; //定義了一個包含10個數字的數組 //顯示數組的長度10 arr.length=12; //增大數組的長度 //顯示第9個元素的值,為56 arr.length=5; //將數組的長度減少到5,索引等於或超過5的元素被丟棄 //顯示第9個元素已經變為"undefined" arr.length=10; //將數組長度恢復為10 //雖然長度被恢復為10,但第9個元素卻顯示"undefined"
由上面的代碼我們可以清楚的看到length屬性的性質。但length對象不僅可以顯式的設置,它也有可能被隱式修改。ECMAScript中可以使用一個未聲明過的變數,同樣,也可以使用一個未定義的數組元素(指索引超過或等於length的元素),這時,length屬性的值將被設置為所使用元素 索引的值加1。例如下麵的代碼:
var arr=[12,23,5,3,25,98,76,54,56,76]; arr[15]=34;
2、prototype 屬性
返回對象類型原型的引用。prototype 屬性是 object 共有的。
objectName.prototype
objectName 參數是object對象的名稱。
說明:用 prototype 屬性提供對象的類的一組基本功能。 對象的新實例“繼承”賦予該對象原型的操作。
對於數組對象,以以下例子說明prototype 屬性的用途。
給數組對象添加返回數組中最大元素值的方法。要完成這一點,聲明一個函數,將它加入 Array.prototype, 並使用它。
function array_max() { var i, max = this[0]; for (i = 1; i < this.length; i++) { if (max < this[i]) max = this[i]; } return max; } Array.prototype.max = array_max; var x = new Array(1, 2, 3, 4, 5, 6); var y = x.max();
3、constructor 屬性
表示創建對象的函數。
object.constructor //object是對象或函數的名稱。
說明:constructor 屬性是所有具有 prototype 的對象的成員。constructor 屬性保存了對構造特定對象實例的函數的引用。
例如:
x = new String("Hi"); if (x.constructor == String) // 進行處理(條件為真)。
或
function MyFunc { // 函數體。 } y = new MyFunc; if (y.constructor == MyFunc){} // 進行處理(條件為真)。
對於數組來說:
y = new Array();
關於Math、Data等類型請移駕到Qt幫助模式下,以關鍵字檢索即可!
6.函數
首先,ECMAScript不支持函數重載,然後我們再說函數語法。
函數語法如下:
function functionName(arg1,arg2,...,argN) { // 要執行的代碼 }
- function是定義函數時必須使用的關鍵字;
- 小括弧內arg參數可以不加;
- functionName可以任意取,符合變數命名規則即可;
- 花括弧內是要執行的代碼塊;
- 函數要返回值時,可以用return語句;
其他的一些運算符、優先順序以及迴圈語句和條件控制語句,這裡一概不論,下麵說說這個console。
7.使用console
console是和實現ECMAScript的宿主環境相關的一個對象,提供了輸出日誌信息、斷言、計時器、計數器、性能分析等功能。
前面一直使用的console.log()是用來輸出調試信息的,console對象提供了多個列印調試信息的方法:
- console.log();
- console.debug();
- console.info();
- console.warn();
- console.error();
這些方法是調試QML的利器,我們以console.log()為例來說明,它可以列印下列信息:
- 字元串
- 數字
- 數組
- 任意實現toString()方法的對象
示例代碼片段:
console.log("I\'m minor,^_^"); console.log("I\'m ", 16); var array = new Array(10,12,8,"Anna"); console.debug("print array:",array);
還有一個常用的功能就是計時器:
- console.time(tag)啟動定時器,字元串類型的tag是必須的;
- console.timeEnd(tag)停止計時器;
簡單示例如下:
console.time("控制台計時器一"); for(var i=0;i<1000;i++){ for(var j=0;j<1000;j++){} } console.timeEnd("控制台計時器一");
好,路還在繼續,只不過本節到此結束吧!
轉載請註明博客來源:http://www.cnblogs.com/lxmwb/p/6291220.html