javascript 對象簡單介紹（二）

標籤：一個   htm   空白   reducer   run   concat   代碼   express   教程   

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("Null 字元串是布爾值 "+ 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：是Regex（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編譯Regex。
exec檢索字串中指定的值。返回找到的值，並確定其位置。
test檢索字串中指定的值。返回 true 或 false。
支援Regex的 String 對象的方法
方法描述
search檢索與Regex相匹配的值。
match找到一個或多個Regex的匹配。
replace替換與Regex匹配的子串。
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‘); // 有轉義作為Regex處理
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 對象簡單介紹（二）