JavaScript概論(5)

JavaScript

延續探討

Object.defineProperties(obj, props)

函數說明:一次修改物件內一個以上的屬性

傳入參數說明:

obj:要變動的物件

props:要變更的屬性項目

範例:

var p = Object.defindePropertise({},{
x:{value:1,writable:true,enumerable:false,configurable:true},
y:{value:1,writable:true,enumerable:false,configurable:true},
r:{
get:function(){return Math.sqrt(this.x*this.x+this.y*this.y)},
eumerable:true,
configurable:true
}
});

說明:將一個空的物件新增x屬性,屬性值為1、可修改、不可被列舉、可刪除、修改屬性的特性,新增一個y屬性與x屬性相同,新增r屬性,輸出值為x屬性值平方加上y屬性值平方,可被列舉、可刪除、修改屬性的特性。

範例2:

var a = [1,2,3];
Object.defineProperty(a,”length”,{writable:false});
a.length = 0;
console.log(a.length);

說明:a為一個長度為3的陣列,將a的length屬性改為不能修改value,接下來將length變更為0,此時因為length被設定為writable:false,所以會變更失敗,最後顯示的a.length會為3。

 

definePropert類函數error狀況
1.如果物件不可擴充不能增加新特性
2.如果不可修改不能改enumerable和configurable屬性
3.若Accesser特性是不可配置的無法變更getter和setter方法
4.資料特性是configurable=false,無法改為Accesser特性
5.資料特性是configurable=false,writable只能改成false
6.資料特性是configurable=false且writable=false,就無法變更value值了

 

o.getPrototypeOf(obj)

函數說明:判斷o是否為obj的Prototype

範例:
var p = {x:1};
var o = Object.create(p);
p.isPrototypeOf(o);
Object.prototype.isPrototypeOf(p);

說明:先創造一個物件p,再產生一個o的Prototype為p,p.isPrototypeOf(o)的結果為true,因為o物件是p物件產生出來的物件(若使用var o=p;的方式產生的o,在p.isPrototypeOf(o)的結果會是false),Object.prototype.isPrototypeOf(p)的結果為true,因為p為物件,所以Object為p的Prototype。

 

陣列元素列舉

我個人比較常用的陣列列舉方法有以下兩種方法

for(var i in array){

//…

}

array. forEach(function(x){//…});

範例:

var sumOfSquares = 0;

var data = [1,2,3,4,5];

for(var i in data){

sumOfSquares + = data[i]* data[i];

}

console.log(sumOfSquares);

說明:用for…in的方式列舉比較需要注意的是,for…in列舉出來的是array或是object的索引值,而不是value值,所以要使用array內的value值時要使用array[索引]的方式才能取得正確的數值,上範例是將1^2+2^2…+5^2的結果輸出在console上,輸出結果為55

範例:

var sumOfSquares = 0;

var data = [1,2,3,4,5];

function SquareSun(x){

sumOfSquares += x*x;

}

data.forEach(SquareSun);

console.log(sumOfSquares);

說明:forEach是將陣列內的每個可列舉的元素執行函數內的程式,以上述範例來說,SquareSun函數內容是將所有可列舉的元素平方後相加,所以1^2+2^2…+5^2所得最後輸出的結果為sumOfSquares=55。

陣列函數

Array.join(string)

函數說明:將陣列輸出成字串

傳入參數說明:

string:陣列元素間隔的字

範例:

var a = [1,2,3];
console.log(a.join());
console.log(a.join(“?”));
console.log(a.join(“”));

說明:

第一行的a.join(),因為沒有給引數值所以輸出結果為字串會自動帶入預設的”,”字串,所以輸出結果為”1,2,3”,第二行引數給”?”所以陣列內的數值間格變成?的字串了,輸出結果為”1?2?3”,第三行引數給空字串””,所以間隔被取代為空字串了,輸出結果為”123”。

Array.reverse()

函數說明:產生一個反向的陣列輸出

範例:

var a = [1,2,3];
a.reverse();

說明:輸出結果為[3,2,1]陣列。

Array.sort(function)

函數說明:根據Unicode由小到大排列出陣列輸出

傳入參數說明:

function:傳入值為function,function的回傳值大於0表示判斷為小於的狀況,小於0表示判斷為大於的狀況,等於0表示判斷為等於的狀況。

範例:

var a = [1, 2, 10, 21];

a.sort();

說明:

因為Unicode中的1<2空值<任何字串,所以輸出會變成[1, 10, 2, 21]。

 

結語:這次介紹的大多數是javascript的物件內的屬性相關以及陣列相關的函數及使用方式等,這次介紹的物件屬性部分比起,這次教學的陣列相關函數,在我撰寫的前端Javascript中,也常使用列舉和以上介紹的陣列函數的功能,另外物件的屬性方面,也是常常會遇到物件內的元素需不需要被列舉等等問題,陣列的應用方面更是在任何程式都經常被使用到的存取數值的方法,而排序和陣列轉字串更是經常被使用到的函數,還有陣列的列舉方法很方便,可以把物件或陣列中,可被列舉的屬性都取出來,這樣就不需要考慮物件中的索引值的問題了,這次只介紹了一小部分陣列使用到的函數說明,下次的文章會從陣列的函數繼續介紹其他的陣列函數的使用方法和說明。

Javascript是目前較常使用的前端語法,因為大多數的瀏覽器都有支援Javascript的實作語法,所以不管是Android還是iOS或是Windows 10的作業系統,只要瀏覽器有支援Javascript,都能執行。

參考:JavaScript大全(ISBN:9789862764411)

Comments

No comments yet. Why don’t you start the discussion?

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料