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的学习之路（第一篇）

标签：原生js的学习之路

原文地址：http://12753560.blog.51cto.com/12743560/1955953