1. 程式人生 > >21000+行原生J S的學習之路(第一篇)

21000+行原生J S的學習之路(第一篇)

原生js的學習之路

學習JS已經有一年多了(小白),看了很多書,也寫了不少代碼,但是總感覺功力還是不夠(哈哈),前段時間偶然接觸到原生JS代碼,邊對此產生了興趣,學習原生JS對於我們深入了解js有很好的幫助比如函數的參數類型、返回值類型等。下來先介紹一下原生JS的語法結構,來幫助大家更好的學習和閱讀原生JS:

declare function eval(x: string): any;

上面這個就是我們常見的eval函數在原生JS中的寫法,括號中X為函數的參數,‘:’後面為參數的類型,最外層‘:’後面為調用函數返回值的類型。any表示可以任意類型(float,int,double,Boolean等),具體的由調用時計算得到。

下來開始正式學習:

1.

declare const NaN: number;
declare const Infinity: number;

由上面的代碼可以看出NaN,infinity均為number類型,並且它倆均被const限定符修飾,即是不可修改的。

typeof NaN // "number"

typeof Infinity // "number"

2.

declare function parseInt(s: string, radix?: number): number;

parseInt()我們會經常用到,它裏面需要傳兩個參數(一個必需的string類型的S,另一個radix為可選的)它的返回值類型為number,

radix表示要解析的數字的基數。該值通常為2,8,10,16(該值介於 2 ~ 36 之間).即根據需要將傳入的S轉換成以radi為基數的number。


parseInt("04");         //返回 4  
parseInt("31",10);       //返回 31 (3*10+1)
parseInt("11",2);        //返回 3  (1*2+1)  
parseInt("27",8);        //返回 23  (8*2+7)
parseInt("2f",16);       //返回 47  (16*2+f)  
parseInt("010");        //返回 10

括號中的算法可以幫助我們快速計算出表達式的值。


3.

declare function parseFloat(string: string): number;

parseFloat()和parseInt()類似,但是他只接受一個string類型參數,同樣其返回值的類型為number

document.write(parseFloat("10"))            //10
document.write(parseFloat("10.00"))         //10
document.write(parseFloat("10.33"))         //10.33
document.write(parseFloat("34 45 66"))      //34
document.write(parseFloat(" 60 "))          //60
document.write(parseFloat("40 years"))      //40
document.write(parseFloat("He was 40"))     //NaN


4.

declare function isNaN(number: number): boolean;

isNaN()方法通常備用來判斷傳入的參數是不是一個數字,上面的寫法中表示傳入的參數為number類型,我覺得這裏寫的不對,如果傳入的參數都是number類型了還用判斷是不是number嗎。

isNaN(123)           //false
isNaN(-1.23)         //false
isNaN(5-2)           //false
isNaN(0)             //false
isNaN("Hello")       //true
isNaN("2005/12/12")  //true
isNaN({})            //true

註意:true表示傳入的參數不是number,false相反。

5.

declare function isFinite(number: number): boolean;

isFinite()方法用來判斷傳入的number是有窮的還是無窮的,若為有窮,返回true,反之返回false。


document.write(isFinite(123)+ "<br />")             //true
document.write(isFinite(-1.23)+ "<br />")           //true
document.write(isFinite(5-2)+ "<br />")             //true
document.write(isFinite(0)+ "<br />")               //true
document.write(isFinite("Hello")+ "<br />")         //false
document.write(isFinite("2005/12/12")+ "<br />")    //false

6.

declare function decodeURI(encodedURI: string): string;

declare function encodeURI(uri: string): string;

encodeURI() 函數可把字符串作為 URI 進行編碼。返回值為URIstring 的副本,其中的某些字符將被十六進制的轉義序列進行替換。

decodeURI() 函數可對 encodeURI() 函數編碼過的 URI 進行解碼。返回值為URIstring 的副本,其中的十六進制轉義序列將被它們表示的字符替換。

var test1="http://www.w3school.com.cn/My first/"

document.write(encodeURI(test1)+ "<br />")
// http://www.w3school.com.cn/My%20first/
document.write(decodeURI(test1))
// http://www.w3school.com.cn/My first/

7.

declare function encodeURIComponent(uriComponent: string): string;

declare function decodeURIComponent(encodedURIComponent: string): string;

encodeURIComponent() 函數可把字符串作為 URI 組件進行編碼。


document.write(encodeURIComponent("http://www.w3school.com.cn"))
document.write("<br />")
document.write(encodeURIComponent("http://www.w3school.com.cn/p 1/"))
document.write("<br />")
document.write(encodeURIComponent(",/?:@&=+$#"))
/*  輸出
    http%3A%2F%2Fwww.w3school.com.cn
    http%3A%2F%2Fwww.w3school.com.cn%2Fp%201%2F
    %2C%2F%3F%3A%40%26%3D%2B%24%23
*/

decodeURIComponent() 函數可對 encodeURIComponent() 函數編碼的 URI 進行解碼。

var test1="http://www.w3school.com.cn/My first/"

document.write(encodeURIComponent(test1)+ "<br />")
document.write(decodeURIComponent(test1))
/*  輸出
    http%3A%2F%2Fwww.w3school.com.cn%2FMy%20first%2F
    http://www.w3school.com.cn/My first/
*/

關於javascript中url編碼與解碼點擊此鏈接可進行詳細的了解

8.

interface PropertyDescriptor {
    configurable?: boolean;
    enumerable?: boolean;
    value?: any;
    writable?: boolean;
    get? (): any;
    set? (v: any): void;
}

上述為一個原型接口函數PropertyDescriptor(),其包含四個內置屬性configurable,enumberable,value,writeable對應的值類型為Boolean,Boolean,any,Boolean。

還包含兩個方法:get,set。其中set方法是沒有返回值的。

用法大致如下:

var o = {name:"HD"};
Object.defineProperty(o,"age",{
    configurable:true,
    enumerable:true,
    set:function(age){       return this.age = age;
    },
    get:function(){        
    }
});
var oDesc_name = Object.getOwnPropertyDescriptor(o,"name");




9.

interface PropertyDescriptorMap {
     [s: string]: PropertyDescriptor;
}

類似於PropertyDescriptor()


欲知後事如何,且聽下回分解!

本文出自 “12743560” 博客,謝絕轉載!

21000+行原生J S的學習之路(第一篇)