1. 程式人生 > >javascript 對象簡單介紹(二)

javascript 對象簡單介紹(二)

則表達式 數字 orange red 1.4 dom 空白字符 手冊 document

JavaScript Array(數組) 對象
數組對象的作用是:使用單獨的變量名來存儲一系列的值。

什麽是數組?
數組對象是使用單獨的變量名來存儲一系列的值。
如果你有一組數據(例如:車名字),存在單獨變量如下所示:
var car1="Saab";
var car2="Volvo";
var car3="BMW";
然而,如果你想從中找出某一輛車?並且不是3輛,而是300輛呢?這將不是一件容易的事!
最好的方法就是用數組。
數組可以用一個變量名存儲所有的值,並且可以用變量名訪問任何一個值。
數組中的每個元素都有自己的的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";

lamp [0] 是數組的第一個元素。[1] 是數組的第二個元素。

在一個數組中你可以有不同的對象
所有的JavaScript變量都是對象。數組元素是對象。函數是對象。
因此,你可以在數組中有不同的變量類型。
你可以在一個數組中包含對象元素、函數、數組:
myArray[0]=Date.now;
myArray[1]=myFunction;
myArray[2]=myCars;

數組方法和屬性


使用數組對象預定義屬性和方法:
var x=myCars.length // myCars 中元素的數量
var y=myCars.indexOf("Volvo") // "Volvo" 值的索引值

Array 對象
Array 對象用於在變量中存儲多個值:
var cars = ["Saab", "Volvo", "BMW"];
第一個數組元素的索引值為 0,第二個索引值為 1,以此類推。
更多有關 JavaScript Array 內容請參考 JavaScript Array 對象手冊。
數組屬性
屬性 描述
constructor 返回創建數組對象的原型函數。
length 設置或返回數組元素的個數。
prototype 允許你向數組對象添加屬性或方法。
Array 對象屬性
方法 描述
concat() 連接兩個或更多的數組,並返回結果。
copyWithin() 從數組的指定位置拷貝元素到數組的另一個指定位置中。
every() 檢測數值元素的每個元素是否都符合條件。
fill() 使用一個固定值來填充數組。
filter() 檢測數值元素,並返回符合條件所有元素的數組。
find() 返回符合傳入測試(函數)條件的數組元素。
findIndex() 返回符合傳入測試(函數)條件的數組元素索引。
forEach() 數組每個元素都執行一次回調函數。
indexOf() 搜索數組中的元素,並返回它所在的位置。
join() 把數組的所有元素放入一個字符串。
lastIndexOf() 返回一個指定的字符串值最後出現的位置,在一個字符串中的指定位置從後向前搜索。
map() 通過指定函數處理數組的每個元素,並返回處理後的數組。
pop() 刪除數組的最後一個元素並返回刪除的元素。
push() 向數組的末尾添加一個或更多元素,並返回新的長度。
reduce() 將數組元素計算為一個值(從左到右)。
reduceRight() 將數組元素計算為一個值(從右到左)。
reverse() 反轉數組的元素順序。
shift() 刪除並返回數組的第一個元素。
slice() 選取數組的的一部分,並返回一個新數組。
some() 檢測數組元素中是否有元素符合指定條件。
sort() 對數組的元素進行排序。
splice() 從數組中添加或刪除元素。
toString() 把數組轉換為字符串,並返回結果。
unshift() 向數組的開頭添加一個或更多元素,並返回新的長度。
valueOf() 返回數組對象的原始值。

創建新方法
原型是JavaScript全局構造函數。它可以構建新Javascript對象的屬性和方法。
實例:創建一個新的方法。
<script>
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();
var x=document.getElementById("demo");
x.innerHTML=fruits;
}
</script>
實例:
使用二維數組結合 select 對象實現二級級聯菜單。
select1 省級菜單, select2市級菜單
在省級標簽中添加事件onchange="addOption()"
<select id="a1" onchange="addoption()" >
<option value="江蘇">江蘇</option>
<option value="河北">河北</option>
</select>
<select id="a2">
<option value="南京">南京</option>
<option value="連雲港">連雲港</option>
<option value="蘇州">蘇州</option>
<option value="鎮州">鎮州</option>
</select>
var city = new Array;
city[‘江蘇‘] = [‘南京‘,‘連雲港‘,‘蘇州‘,‘鎮江‘];
city[‘河北‘] = [‘石家莊‘,‘保定‘,‘衡水‘,‘邯鄲‘,‘廊坊‘];
function allCity(){
var select1 = document.getElementById(‘a1‘);
for (var i in city){
select1.add(new Option(i,i),null);
}
addoption();
}
function addoption(){
var select2 = document.getElementById(‘a2‘);
var select1 = document.getElementById(‘a1‘).value;
select2.length = 0; //每次都先清空下市級菜單
if(select1 != ‘請選擇省份‘){
for(var i in city[select1 ]){
select2.add(new Option(city[select1][i],city[select1][i]),null);
}
}else if(select1 ==‘請選擇省份‘){
select2.length = 0;
select2.add(new Option(‘請選擇城市‘,‘請選擇城市‘),null);
}
}
window.onload = allCity();

JavaScript Boolean(布爾) 對象
Boolean(布爾)對象用於將非布爾值轉換為布爾值(true 或者 false)。

檢查布爾對象是 true 還是 false。
<script>
var b1=new Boolean(0);
var b2=new Boolean(1);
var b3=new Boolean("");
var b4=new Boolean(null);
var b5=new Boolean(NaN);
var b6=new Boolean("false");
document.write("0 為布爾值 "+ b1 +"<br>");
document.write("1 為布爾值 "+ b2 +"<br>");
document.write("空字符串是布爾值 "+ b3 + "<br>");
document.write("null 是布爾值 "+ b4+ "<br>");
document.write("NaN 是布爾值 "+ b5 +"<br>");
document.write("字符串‘false‘ 是布爾值"+ b6 +"<br>");
</script>

Boolean 對象
Boolean 對象用於轉換一個不是 Boolean 類型的值轉換為 Boolean 類型值 (true 或者false).
Boolean 對象完整教程, 請訪問 JavaScript Boolean 對象教程。
Boolean 對象屬性
屬性 描述
constructor 返回對創建此對象的 Boolean 函數的引用
prototype 使您有能力向對象添加屬性和方法。
Boolean 對象方法
方法 描述
toString() 把布爾值轉換為字符串,並返回結果。
valueOf() 返回 Boolean 對象的原始值。

創建 Boolean 對象
Boolean 對象代表兩個值:"true" 或者 "false"
下面的代碼定義了一個名為 myBoolean 的布爾對象:
var myBoolean=new Boolean();
如果布爾對象無初始值或者其值為:
0
-0
null
""
false
undefined
NaN
那麽對象的值為 false。否則,其值為 true(即使當變量值為字符串 "false" 時)!

JavaScript Math(算數) 對象
Math(算數)對象的作用是:執行常見的算數任務。

實例:
返回0-4之間的隨機整數
//生成0-4之間的隨機數
var randomNum = Math.random()*4;
//取四舍五入後的值
y = Math.round(randomNum);

Math 對象
Math 對象用於執行數學任務。
Math 對象並不像 Date 和 String 那樣是對象的類,因此沒有構造函數 Math()。
語法
var x = Math.PI; // 返回PI
var y = Math.sqrt(16); // 返回16的平方根
Math 對象屬性
屬性 描述
E 返回算術常量 e,即自然對數的底數(約等於2.718)。
LN2 返回 2 的自然對數(約等於0.693)。
LN10 返回 10 的自然對數(約等於2.302)。
LOG2E 返回以 2 為底的 e 的對數(約等於 1.414)。
LOG10E 返回以 10 為底的 e 的對數(約等於0.434)。
PI 返回圓周率(約等於3.14159)。
SQRT1_2 返回返回 2 的平方根的倒數(約等於 0.707)。
SQRT2 返回 2 的平方根(約等於 1.414)。
Math 對象方法
方法 描述
abs(x) 返回 x 的絕對值。
acos(x) 返回 x 的反余弦值。
asin(x) 返回 x 的反正弦值。
atan(x) 以介於 -PI/2 與 PI/2 弧度之間的數值來返回 x 的反正切值。
atan2(y,x) 返回從 x 軸到點 (x,y) 的角度(介於 -PI/2 與 PI/2 弧度之間)。
ceil(x) 對數進行上舍入。
cos(x) 返回數的余弦。
exp(x) 返回 Ex 的指數。
floor(x) 對 x 進行下舍入。
log(x) 返回數的自然對數(底為e)。
max(x,y,z,...,n) 返回 x,y,z,...,n 中的最高值。
min(x,y,z,...,n) 返回 x,y,z,...,n中的最低值。
pow(x,y) 返回 x 的 y 次冪。
random() 返回 0 ~ 1 之間的隨機數。
round(x) 把數四舍五入為最接近的整數。
sin(x) 返回數的正弦。
sqrt(x) 返回數的平方根。
tan(x) 返回角的正切。.

下面的例子使用了 Math 對象的 round 方法對一個數進行四舍五入。
document.write(Math.round(4.7));
上面的代碼輸出為:
5
下面的例子使用了 Math 對象的 random() 方法來返回一個介於 0 和 1 之間的隨機數:
document.write(Math.random());
上面的代碼輸出為:
0.5967274364885273
下面的例子使用了 Math 對象的 floor() 方法和 random() 來返回一個介於 0 和 11 之間的隨機數:
document.write(Math.floor(Math.random()*11));
上面的代碼輸出為:
6

JavaScript RegExp 對象
RegExp:是正則表達式(regular expression)的簡寫。

語法
var patt=new RegExp(pattern,modifiers);

或者更簡單的方式:

var patt=/pattern/modifiers;
pattern(模式) 描述了表達式的模式
modifiers(修飾符) 用於指定全局匹配、區分大小寫的匹配和多行匹配
註意:當使用構造函數創造正則對象時,需要常規的字符轉義規則(在前面加反斜杠 \)。比如,以下是等價的:
var re = new RegExp("\\w+");
var re = /\w+/;
更多關於 RegExp 對象請閱讀我們的 JavaScript RegExp 對象教程。
修飾符
修飾符用於執行區分大小寫和全局匹配:
修飾符 描述
i 執行對大小寫不敏感的匹配。
g 執行全局匹配(查找所有匹配而非在找到第一個匹配後停止)。
m 執行多行匹配。
方括號
方括號用於查找某個範圍內的字符:
表達式 描述
[abc] 查找方括號之間的任何字符。
[^abc] 查找任何不在方括號之間的字符。
[0-9] 查找任何從 0 至 9 的數字。
[a-z] 查找任何從小寫 a 到小寫 z 的字符。
[A-Z] 查找任何從大寫 A 到大寫 Z 的字符。
[A-z] 查找任何從大寫 A 到小寫 z 的字符。
[adgk] 查找給定集合內的任何字符。
[^adgk] 查找給定集合外的任何字符。
(red|blue|green) 查找任何指定的選項。
元字符
元字符(Metacharacter)是擁有特殊含義的字符:
元字符 描述
. 查找單個字符,除了換行和行結束符。
\w 查找單詞字符。
\W 查找非單詞字符。
\d 查找數字。
\D 查找非數字字符。
\s 查找空白字符。
\S 查找非空白字符。
\b 匹配單詞邊界。
\B 匹配非單詞邊界。
\0 查找 NULL 字符。
\n 查找換行符。
\f 查找換頁符。
\r 查找回車符。
\t 查找制表符。
\v 查找垂直制表符。
\xxx 查找以八進制數 xxx 規定的字符。
\xdd 查找以十六進制數 dd 規定的字符。
\uxxxx 查找以十六進制數 xxxx 規定的 Unicode 字符。
量詞
量詞 描述
n+
匹配任何包含至少一個 n 的字符串。
例如,/a+/ 匹配 "candy" 中的 "a","caaaaaaandy" 中所有的 "a"。
n*
匹配任何包含零個或多個 n 的字符串。
例如,/bo*/ 匹配 "A ghost booooed" 中的 "boooo","A bird warbled" 中的 "b",但是不匹配 "A goat grunted"。
n?
匹配任何包含零個或一個 n 的字符串。
例如,/e?le?/ 匹配 "angel" 中的 "el","angle" 中的 "le"。
n{X}
匹配包含 X 個 n 的序列的字符串。
例如,/a{2}/ 不匹配 "candy," 中的 "a",但是匹配 "caandy," 中的兩個 "a",且匹配 "caaandy." 中的前兩個 "a"。
n{X,}
X 是一個正整數。前面的模式 n 連續出現至少 X 次時匹配。
例如,/a{2,}/ 不匹配 "candy" 中的 "a",但是匹配 "caandy" 和 "caaaaaaandy." 中所有的 "a"。
n{X,Y}
X 和 Y 為正整數。前面的模式 n 連續出現至少 X 次,至多 Y 次時匹配。
例如,/a{1,3}/ 不匹配 "cndy",匹配 "candy," 中的 "a","caandy," 中的兩個 "a",匹配 "caaaaaaandy" 中的前面三個 "a"。註意,當匹配 "caaaaaaandy" 時,即使原始字符串擁有更多的 "a",匹配項也是 "aaa"。
n$ 匹配任何結尾為 n 的字符串。
^n 匹配任何開頭為 n 的字符串。
?=n 匹配任何其後緊接指定字符串 n 的字符串。
?!n 匹配任何其後沒有緊接指定字符串 n 的字符串。
RegExp 對象方法
方法 描述
compile 編譯正則表達式。
exec 檢索字符串中指定的值。返回找到的值,並確定其位置。
test 檢索字符串中指定的值。返回 true 或 false。
支持正則表達式的 String 對象的方法
方法 描述
search 檢索與正則表達式相匹配的值。
match 找到一個或多個正則表達式的匹配。
replace 替換與正則表達式匹配的子串。
split 把字符串分割為字符串數組。

實例1:
在字符串中不區分大小寫找"runoob"
<script>
var str = "Visit RUnoob";
var patt1 = /runoob/i;
document.write(str.match(patt1));
</script>
實例2:
全文查找 "is"
<script>
var str="Is this all there is?";
var patt1=/is/g;
document.write(str.match(patt1));
</script>
實例3:
全文查找和不區分大小寫搜索 "is"
<script>
var str="Is this all there is?";
var patt1=/is/gi;
document.write(str.match(patt1));
</script>

test()
test()方法搜索字符串指定的值,根據結果並返回真或假。
下面的示例是從字符串中搜索字符 "e" :
實例
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
由於該字符串中存在字母 "e",以上代碼的輸出將是:
true

當使用構造函數創造正則對象時,需要常規的字符轉義規則(在前面加反斜杠 \)
<script>
var str = ‘runoob‘;
var patt1 = new RegExp(‘\\w‘, ‘g‘); // 有轉義作為正則表達式處理
var patt2 = new RegExp(‘\w‘, ‘g‘); // 無轉義作為字符串處理
var patt3 =/\w+/g; // 與 patt1 效果相同
document.write(patt1.test(str)) //輸出 true
document.write("<br>")
document.write(patt2.test(str)) //輸出 false
document.write("<br>")
document.write(patt3.test(str)) //輸出 true
</script>

exec()
exec() 方法檢索字符串中的指定值。返回值是被找到的值。如果沒有發現匹配,則返回 null。
下面的示例是從字符串中搜索字符 "e" :
實例 1
var patt1=new RegExp("e");
document.write(patt1.exec("The best things in life are free"));
由於該字符串中存在字母 "e",以上代碼的輸出將是:
e

javascript 對象簡單介紹(二)