631      阿裏雲  技術社區[雲棲]

JavaScript 對象總結

JavaScript 中的所有事物都是對象：字符串、數值、數組、函數...

此外，JavaScript 允許自定義對象

JavaScript 對象

對象隻是一種特殊的數據。對象擁有屬性和方法

訪問對象的屬性

屬性是與對象相關的值。訪問對象屬性的語法是：

objectName.propertyName

下麵這個例子使用了 String 對象的 length 屬性來獲得字符串的長度：

var message="Hello World!";
var x=message.length;

訪問對象的方法

方法是能夠在對象上執行的動作。可以通過以下語法來調用方法：

objectName.methodName() 

下麵這個例子使用了 String 對象的 toUpperCase() 方法來將文本轉換為大寫：

var message="Hello world!";
var x=message.toUpperCase();

創建 JavaScript 對象

通過 JavaScript，您能夠定義並創建自己的對象

創建新對象有兩種不同的方法：

1.定義並創建對象的實例

下麵這個例子創建了對象的一個新實例，並向其添加了三個屬性：

person=new Object();
person.firstname="John";
person.age=50;
person.eyecolor="blue";

替代語法（使用對象 literals）：

person={firstname:"John",age:50,eyecolor:"blue"};

2.使用函數來定義對象，然後創建新的對象實例

下麵的例子使用函數來構造對象：

function person(firstname,age,eyecolor){
    this.firstname=firstname;
    this.age=age;
    this.eyecolor=eyecolor;
}

在JavaScript中，this通常指向的是我們正在執行的函數本身，或者是指向該函數所屬的對象（運行時）

創建 JavaScript 對象實例

一旦您有了對象構造器，就可以創建新的對象實例，就像這樣：

var myFather=new person("John",50,"blue");
var myMother=new person("Sally",48,"green");

把屬性添加到 JavaScript 對象

您可以通過為對象賦值，向已有對象添加新屬性：
假設 personObj 已存在 - 您可以為其添加這些新屬性：firstname、age 以及 eyecolor：

person.firstname="John";
person.age=30;
person.eyecolor="blue";

把方法添加到 JavaScript 對象

方法隻不過是附加在對象上的函數。在構造器函數內部定義對象的方法：

 function person(firstname,age,eyecolor)
 {
     this.firstname=firstname;
     this.age=age;
     this.eyecolor=eyecolor;
     this.changeName=changeName;
     function changeName(name)
     {
           this.firstname=name;
     }
 }
myMother=new person("Sally",48,"green");
myMother.changeName("Doe");
document.write(myMother.firstname);

JavaScript 類

JavaScript是麵向對象的語言，但JavaScript不使用類

在 JavaScript 中，不會創建類，也不會通過類來創建對象（就像在其他麵向對象的語言中那樣）

JavaScript 基於 prototype，而不是基於類的

JavaScript for...in 循環

JavaScript for...in 語句循環遍曆對象的屬性

for (variable in object){
   code to be executed
 }

注意： for...in 循環中的代碼塊將針對每個屬性執行一次

JavaScript Number 對象

JavaScript 數字

JavaScript 隻有一種數字類型。可以使用也可以不使用小數點來書寫數字

var pi=3.14;    // 使用小數點
var x=34;       // 不使用小數點

極大或極小的數字可通過科學（指數）計數法來寫：

var y=123e5;    // 12300000
var z=123e-5;   // 0.00123

所有 JavaScript 數字均為 64 位

所有 JavaScript 數字均為 64 位

在JavaScript中，數字不分為整數類型和浮點型類型，所有的數字都是由浮點型類型。JavaScript采用IEEE754標準定義的64位浮點格式表示數字，它能表示最大值為±1.7976931348623157 x 10308，最小值為±5 x 10 -324

精度

整數（不使用小數點或指數計數法）最多為 15 位。小數的最大位數是 17，但是浮點運算並不總是 100% 準確：

var x = 0.2+0.1; // result will be 0.30000000000000004

八進製和十六進製

如果前綴為 0，則 JavaScript 會把數值常量解釋為八進製數，如果前綴為 0 和 "x"，則解釋為十六進製數

var y = 0377; //255
var z = 0xFF;//255

絕不要在數字前麵寫零，除非您需要進行八進製轉換

默認情況下，JavaScript 數字為十進製顯示。但是你可以用toString()方法 輸出16進製、8進製、2進製

var myNumber=128;
myNumber.toString(16);   // returns 80
myNumber.toString(8);    // returns 200
myNumber.toString(2);    // returns 10000000

無窮大（Infinity）

當數字運算結果超過了JavaScript所能表示的數字上限（溢出），結果為一個特殊的無窮大（infinity）值，在JavaScript中以Infinity表示。同樣地，當負數的值超過了JavaScript所能表示的負數範圍，結果為負無窮大，在JavaScript中以-Infinity表示。無窮大值的行為特性和我們所期望的是一致的：基於它們的加、減、乘和除運算結果還是無窮大（當然還保留它們的正負號）。

myNumber=2;
while (myNumber!=Infinity){
    myNumber=myNumber*myNumber;
    document.write(myNumber +'<BR>');
}//4 16 256 65536 4294967296 18446744073709552000 3.402823669209385e+38 1.157920892373162e+77 1.3407807929942597e+154 Infinity

除以0也產生了無限:

var x = 2/0;     //Infinity
var y = -2/0;    //-Infinity

NaN - 非數字值

NaN 屬性是代表非數字值的特殊值。該屬性用於指示某個值不是數字。可以把Number對象設置為該值來指示其不是數字值。

可以使用 isNaN() 全局函數來判斷一個值是否是 NaN 值

var x = 1000 / "Apple";
isNaN(x); // returns true
var y = 100 / "1000";
isNaN(y); // returns false

除以0是無窮大，無窮大也是一個數字

數字可以是數字或者對象

數字可以私有數據進行初始化，就像 x = 123;

JavaScript 數字對象初始化數據， var y = new Number(123);

var x = 123;
var y = new Number(123);
typeof(x) // returns Number
typeof(y) // returns Object

數字屬性

MAX_VALUE - 最大值

MIN_VALUE - 最小值

NEGATIVE_INFINITY - 負無窮大

POSITIVE_INFINITY - 正無窮大

NaN - 非數字

Number.prototype - 運行您向對象添加屬性和方法。當構造一個屬性 所有Number對象將被添加上該屬性及值。當構造一個方法所有Number對象都會有這個方法。Number.prototype不允許引用一個單獨的Number對象但是可以使用Number()對象。prototype 型是一個全局對象的構造函數，可用於所有的JavaScript對象

object.prototype.name=value // 語法
//例子
Number.prototype.myMet=function(){
    this.myProp=this.valueOf()/2;
}
var n = new Number(55);
n.myMet();
var x = n.myProp;

object.constructor - 返回對創建此對象的數組函數的引用

function employee(name,job,born){
    this.name=name;
    this.job=job;
    this.born=born;
}
var bill=new employee("Bill Gates","Engineer",1985);
document.write(bill.constructor); //function employee(name,job,born) { this.name=name; this.job=job; this.born=born; }

數字方法

NumberObject.toExponential(num):把Number轉換成指數計數法,num表示小數點後保留幾位

NumberObject.toFixed(num)：把Number四舍五入為指定小數位數的數字

NumberObject.toPrecision(num)：在對象的值超出指定位數時將其轉換為指數計數法，num指定有效數字的位數。如果沒有提供precision參數或其值為undefined，則將轉而調用toString()方法進行處理。如果提供了參數，則參數precision必須介於 [1, 21] 之間，否則將報錯。如果數字的有效位數大於precision，將會根據第precision + 1位的有效數字進行四舍五入

NumberObject.toString()：不加參數表示把數字轉化為字符串，也可以加上幾進製的參數進行轉化

NumberObject.valueOf()：可以把字符串轉化為數字

JavaScript 字符串

String 對象用於處理已有的字符塊。

JavaScript 字符串

一個字符串可以使用單引號或雙引號：

var carname="Volvo XC60";
var carname='Volvo XC60';

使用位置（索引）可以訪問字符串中任何的字符：

var character=carname[7];

字符串的索引從零開始, 所以字符串第一字符為 [0],第二個字符為 [1]

可以在字符串中使用引號

var answer="It's alright";
var answer="He is called 'Johnny'";
var answer='He is called "Johnny"';

或者可以在字符串中使用轉義字符使用“\”：

var answer='It\'s alright';
var answer="He is called \"Johnny\"";

字符串（String）

字符串（String）使用長度屬性length來計算字符串的長度：

var txt="Hello World!";
document.write(txt.length);

在字符串中查找字符串

字符串使用 indexOf() 來定位字符串中某一個指定的字符首次出現的位置：

var str="Click the button to locate where "locate" first occurs.";
var n=str.indexOf("locate");    //20

如果沒找到對應的字符函數返回-1

lastIndexOf() 方法在字符串末尾開始查找字符串出現的位置

內容匹配

match()函數用來查找字符串中特定的字符，並且如果找到的話，則返回這個字符

var str="Hello world!";
document.write(str.match("world") + "<br>");    //world
document.write(str.match("World") + "<br>");    //null
document.write(str.match("world!"));            //world!

替換內容

replace() 方法在字符串中用某些字符替換另一些字符

str="Please visit Microsoft!"
var n=str.replace("Microsoft","w3cschool"); //Please visit w3cschool!"

字符串大小寫轉換

字符串大小寫轉換使用函數 toUpperCase() / toLowerCase():

var txt="Hello World!";       // String
var txt1=txt.toUpperCase();   // txt1 is txt converted to upper
var txt2=txt.toLowerCase();   // txt2 is txt converted to lower

字符串轉為數組

字符串使用strong>split()函數轉為數組:

txt="a,b,c,d,e"   // String
txt.split(",");   // Split on commas
txt.split(" ");   // Split on spaces

特殊字符

Javascript 中可以使用反斜線（\）插入特殊符號，如：撇號,引號等其他特殊符號

var txt="We are the so-called "Vikings" from the north.";

在JavaScript中，字符串的開始和停止使用單引號或雙引號。這意味著，上麵的字符串將被切成： We are the so-called。解決以上的問題可以使用反斜線來轉義引號：

var txt="We are the so-called \"Vikings\" from the north.";

JavaScript將輸出正確的文本字符串：We are the so-called "Vikings" from the north.

下表列出其他特殊字符，可以使用反斜線轉義特殊字符：

字符串屬性和方法

屬性:

length - 計算字符串的長度

prototype - 同number

constructor - 同number

方法:

charAt() - 返回指定位置的字符

charCodeAt() - 返回指定位置的字符的 Unicode 編碼

concat() - 多個字符串的連接

fromCharCode() - 根據Unicode編碼返回一個字符串

indexOf() - 定位字符串中某一個指定的字符首次出現的位置

lastIndexOf() - 在字符串末尾開始查找字符串出現的位置

match() - 查找字符串中特定的字符，並且如果找到的話，則返回這個字符

replace() - 在字符串中用某些字符替換另一些字符

search() - 檢索字符串中指定的子字符串，或檢索與正則表達式相匹配的子字符串，查到後返回字符串首字母位置

stringObject.slice(start,end) - 可提取字符串的某個部分，並以新的字符串返回被提取的部分，允許使用負數作為參數

split() - 字符串以某標誌分割轉為數組

stringObject.substr(start,length) - 在字符串中抽取從start下標開始的指定數目的字符

stringObject.substring(start,stop) - 提取字符串中介於兩個指定下標之間的字符，不接受負的參數

toLowerCase() - 字符串轉為小寫

toUpperCase() - 字符串轉為大寫

stringObject.valueOf() - 返回 Object 參數的字符串形式，如果參數為 “null”，返回“null”，否則返回objtoString()的值

JavaScript Date（日期）對象

日期對象用於處理日期和時間

Date() 方法 - 返回當日的日期和時間

var d=new Date();
document.write(d); //Fri Jun 02 2017 11:39:29 GMT+0800 

getFullYear() - 獲取年份

var d = new Date().getFullYear(); //2017

getTime() - 返回從 1970 年 1 月 1 日至今的毫秒數

var d = new Date().getTime(); //1496374883302

setFullYear() - 設置具體的日期

var d = new Date().setFullYear(2020,10,3); //Tue Nov 03 2020 11:42:29 GMT+0800

toUTCString() - 將當日的日期（根據 UTC）轉換為字符串

var d = new Date().toUTCString(); //Fri, 02 Jun 2017 03:42:39 GMT

getDay() - 顯示星期

var d = new Date().getDay(); //5

Date 對象屬性

JavaScript constructor 屬性

返回創建Date對象的函數原型：

myDate.constructor;

constructor 屬性返回對創建此對象的 Date 函數的引用

function myFunction(){
    var d = new Date();
    document.write(d.constructor);
}     //function Date() { [native code] }

JavaScript Date prototype 屬性

prototype 屬性使您有能力向對象添加屬性和方法。當構造一個原型，所有的日期對象都會默認添加屬性和方法。

注意： 可將屬性和方法添加到原型中，但不能為對象分配其他原型。 但是可以向用戶定義的對象分配新的原型。Prototype是一個全局屬性，這對於幾乎全部的JavaScript對象

Date.prototype.myMet=function(){
    if (this.getMonth()==3){this.myProp="四月"};
    if (this.getMonth()==4){this.myProp="五月"};
    if (this.getMonth()==5){this.myProp="六月"};
}
function myFunction(){
    var d = new Date();
    d.myMet();
    document.write(d.myProp);
}     //function Date() { [native code] }

Date 對象方法

JavaScript Array（數組）對象

數組對象是使用單獨的變量名來存儲一係列的值

什麼是數組?

數組可以用一個變量名存儲所有的值，並且可以用變量名訪問任何一個值

數組中的每個元素都有自己的的ID以便它可以很容易地被訪問到

創建一個數組

創建一個數組，有三種方法。下麵的代碼定義了一個名為 myCars的數組對象：

1: 常規方式:

 var myCars=new Array(); 
 myCars[0]="Saab";       
 myCars[1]="Volvo";
 myCars[2]="BMW";

2: 簡潔方式:

var myCars=new Array("Saab","Volvo","BMW");

3: 字麵:

var myCars=["Saab","Volvo","BMW"];

訪問數組

通過指定數組名以及索引號碼，可以訪問某個特定的元素。

以下實例可以訪問myCars數組的第一個值：

var name=myCars[0];

以下實例修改了數組 myCars 的第一個元素:

myCars[0]="Opel";

在一個數組中你可以有不同的對象

所有的JavaScript變量都是對象。數組元素是對象。函數是對象。因此，你可以在數組中有不同的變量類型。可以在一個數組中包含對象元素、函數、數組：

 myArray[0]=Date.now;
 myArray[1]=myFunction;
 myArray[2]=myCars;

數組方法和屬性

使用數組對象預定義屬性和方法：

 var x=myCars.length             // the number of elements in myCars
 var y=myCars.indexOf("Volvo")   // the index position of "Volvo"

創建新方法 - prototype

Array.prototype.myUcase=function(){
    for (i=0;i<this.length;i++){
        this[i]=this[i].toUpperCase();
    }
}
function myFunction(){
    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    fruits.myUcase();
    document.write(fruits);
}

Array 對象方法

every() 方法

every()方法用於檢測數組所有元素是否都符合指定條件（通過函數提供）。如果數組中檢測到有一個元素不滿足，則整個表達式返回 false ，且剩餘的元素不會再進行檢測。如果所有元素都滿足條件，則返回 true。

注意： every() 不會對空數組進行檢測。every() 不會改變原始數組

var ages = [32, 33, 16, 40];
function checkAdult(age) {
    return age >= 18;
}
document.write(ages.every(checkAdult)); //false

filter() 方法

filter()方法創建一個新的數組，新數組中元素是通過檢查指定數組中符合條件的所有元素

注意： filter() 不會對空數組進行檢測。filter() 不會改變原始數組

var ages = [32, 33, 16, 40];
function checkAdult(age) {
    return age >= 18;
}
document.write(ages.filter(checkAdult)); //32,33,40

map() 方法

map() 方法返回一個新數組，數組中的元素為原始數組元素調用函數處理後的值。map() 方法按照原始數組元素順序依次處理元素

注意：map() 不會對空數組進行檢測。map() 不會改變原始數組

var numbers = [4, 9, 16, 25];
function myFunction() {
    document.write(numbers.map(Math.sqrt));
} //2,3,4,5

var numbers = [65, 44, 12, 4];
function multiplyArrayElement(num) {
    return num * 10;
}
function myFunction() {
    document.getElementById("demo").innerHTML = numbers.map(multiplyArrayElement);
}    //650, 440, 120, 40

valueOf()

valueOf() 是數組對象的默認方法，返回 Array 對象的原始值。該原始值由 Array 對象派生的所有對象繼承。

valueOf() 方法通常由 JavaScript 在後台自動調用，並不顯式地出現在代碼中。valueOf() 方法不會改變原數組

function myFunction(){
    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    document.write(fruits.valueOf());
}    //Banana,Orange,Apple,Mango

JavaScript Boolean（布爾）對象

Boolean 對象用於轉換一個不是 Boolean 類型的值轉換為 Boolean 類型值 (true 或者false)

Boolean 對象代表兩個值:"true" 或者 "false"

如果布爾對象無初始值或者其值為:0 -0 null "" false undefined NaN 那麼對象的值為 false。否則其值為 true（即使當自變量為字符串 "false" 時）

Boolean 對象屬性

Boolean 對象方法

JavaScript Math（算數）對象

Math（算數）對象的作用是：執行常見的算數任務。Math對象提供多種算數值類型和函數。無需在使用這個對象之前對它進行定義

Math 對象並不像 Date 和 String 那樣是對象的類，因此沒有構造函數 Math()。

使用Math的屬性/方法的語法：

var x=Math.PI; // 返回PI
var y=Math.sqrt(16); // 返回16的平方根4

注意： Math對象無需在使用這個對象之前對它進行定義

算數值

JavaScript 提供 8 種可被Math對象訪問的算數值：

算數方法

除了可被 Math 對象訪問的算數值以外，還有幾個函數（方法）可以使用。

使用 Math 對象的 round 方法對一個數進行四舍五入。

document.write(Math.round(4.7));     //5

使用 Math 對象的 random() 方法來返回一個介於 0 和 1 之間的隨機數：

document.write(Math.random());

使用 Math 對象的 floor() 方法和 random() 來返回一個介於 0 和 11 之間的隨機數：

document.write(Math.floor(Math.random()*11));

Math 對象屬性

Math 對象方法

acos() 方法

語法：

Math.acos(x)

acos() 方法可返回一個數的反餘弦。返回的值是 0 到 PI 之間的弧度值

注意：如果參數 x 超過了 -1.0 ~ 1.0 的範圍，那麼瀏覽器將返回 NaN。如果參數 x 取值 -1，那麼將返回 PI

asin() 方法

語法：

Math.asin(x)

asin() 方法返回-PI/2 到 PI/2 之間的弧度值

注意：如果參數 x 超過了 -1.0 ~ 1.0 的範圍，那麼瀏覽器將返回 NaN。如果參數 x 取值 1，那麼將返回 PI/2。

JavaScript RegExp 對象

RegExp：是正則表達式（regular expression）的簡寫

什麼是 RegExp？

正則表達式是描述字符模式的對象

正則表達式用於對字符串模式匹配及檢索替換，是對字符串執行模式匹配的強大工具

當您檢索某個文本時，可以使用一種模式來描述要檢索的內容。RegExp 就是這種模式。簡單的模式可以是一個單獨的字符。更複雜的模式包括了更多的字符，並可用於解析、格式檢查、替換等等。可以規定字符串中的檢索位置，以及要檢索的字符類型，等等

語法

var patt=new RegExp(pattern,modifiers);
or more simply:
var patt=/pattern/modifiers;

pattern（模式） 描述了表達式的模式

modifiers(修飾符) 用於指定全局匹配、區分大小寫的匹配和多行匹配

RegExp 修飾符

修飾符用於執行不區分大小寫和全文的搜索

i - 修飾符是用來執行不區分大小寫的匹配

g - 修飾符是用於執行全文的搜索（而不是在找到第一個就停止查找,而是找到所有的匹配）

var str="Is this all there is?";
var patt1=/is/gi;
document.write(str.match(patt1)); //Is,is,is

test()

test()方法搜索字符串指定的值，根據結果並返回真或假。

下麵的示例是從字符串中搜索字符 "e" ：

var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free")); //true

exec()

exec()方法檢索字符串中的指定值。返回值是被找到的值。如果沒有發現匹配，則返回 null

下麵的示例是從字符串中搜索字符 "e" ：

var patt1=new RegExp("e");
document.write(patt1.exec("The best things in life are free")); //e

修飾符

修飾符用於執行區分大小寫和全局匹配:

方括號

方括號用於查找某個範圍內的字符：

元字符

元字符（Metacharacter）是擁有特殊含義的字符：

\s 元字符

\s 元字符用於查找空白字符

空白字符可以是：

空格符 (space character)

製表符 (tab character)

回車符 (carriage return character)

換行符 (new line character)

垂直換行符 (vertical tab character)

換頁符 (form feed character)

\B 元字符

\B 元字符匹配非單詞邊界。匹配位置的上一個和下一個字符的類型是相同的：即必須同時是單詞，或必須同時是非單詞字符。字符串的開頭和結尾處被視為非單詞字符。如果未找到匹配，則返回 null

量詞

RegExp 對象方法

支持正則表達式的 String 對象的方法

最後更新：2017-06-02 19:36:17

  上一篇：  Java Web學習-阿裏druid使用中遇到的一個問題

  下一篇：  《配置管理最佳實踐》——1.12 高級特性和授權高級用戶