JavaScript基礎之六——內置對象

JavaScript基礎之六——內置對象

1、構造對象

    JavaScript中的一些數據都是對象，對象其實是屬性與方法的包裝。並不像其餘相似Swift/OC/Java類的面嚮對象語言，在目前JavaScript的實現中並無類的概念，開發者有以下兩種方式來進行對象的構造：

//建立對象的方式有兩種 能夠直接建立對象的實例
var obj = new Object();
obj.name = "jaki";
obj.age = 25;
console.log(obj);
//也可使用大括號才建立對象
var obj2 = {
	name:"jaki",
	age:25,
	show:function(){
		console.log(this.name+"--"+this.age);
	}
};
obj2.show();

回顧Swift語言的對象建立方法，是經過類調用構造方法，所以，在JavaScript中，也能夠經過函數來模擬類的功能，此類的函數能夠稱爲構造函數，示例以下：

//模擬類 構造方法
function Person(name,age){
	this.name = name;
	this.age = age;
	this.show = function(){
		console.log(this.name+"--"+this.age);
	};
}
var p = new Person("jaki",25);
p.show();

JavaScript中的對象唄構造出來後，依然能夠爲其動態添加屬性或方法，示例以下：

//模擬類 構造方法
function Person(name,age){
	this.name = name;
	this.age = age;
	this.show = function(){
		console.log(this.name+"--"+this.age);
	};
}
var p = new Person("jaki",25);
p.show();
//已經構造的對象 也能夠增長屬性
p.phone = "1111"
console.log(p.phone);

2、數值對象Number

    在JavaScript中，數值是一種基本數據類型，可是Number是數值對象，能夠理解爲對數值的包裝。而且JavaScript中的數值只有一種類型，能夠建立整數，也能夠建立小數，以下：

//數字對象
//JS中只有一種數字對象Number 
//能夠描述整數  也能夠描述小數
var c = 10;
var c1 = 3.14;

也支持使用科學計數法來對數值進行描述，示例以下：

//也可使用科學計數法來計數
var c2 = 1.2e5;
var c3 = 123e-5;
console.log(c2,c3);

在JavaScript中，使用前綴0來描述八進制數值，使用前綴0x來描述十六進行的數值，示例以下：

//使用0爲前綴 約定爲8進制
var c4 = 017;
console.log(c4);  //十進制15
//使用0x前綴約定爲十六進制
var c5 = 0x11;
console.log(c5); //十進制17

須要注意：和其餘語言不一樣，JavaScript中不能隨意的數值前面加0，不然會被認爲是八進制計數。

    關於Number，若是使用new來進行構造，會返回一直數值對象，其中能夠穿入一個參數做爲數值對象的原始值，若是將Number()做爲函數來使用，則會直接返回一個具體的數值，示例以下：

//Number能夠做爲構造方法來使用 傳入的參數爲要構造的Number值
var objc = new Number(15);
console.log(objc);
//Number也能夠做爲函數來使用 這時他將返回數值或者NaN
var objc2 = Number(2);
console.log(objc2); //2
var objc3 = Number("c");
console.log(objc3);//NaN

Number中內置了一些經常使用的屬性與方法，示例以下：

//經常使用內置屬性
//返回可表示的最大值
console.log(Number.MAX_VALUE);
//返回可表示的最小值
console.log(Number.MIN_VALUE);
//返回非數字值
console.log(Number.NaN);
//表示負無窮大 發生溢出時 會返回
console.log(Number.NEGATIVE_INFINITY);
//表示正無窮大 發生溢出時 會返回
console.log(Number.POSITIVE_INFINITY);

對象實例的經常使用方法：

//經常使用內置方法
var c6 = 100;
//將數據轉換成字符串
console.log(c6.toString());
//toString()方法中能夠傳入一個參數 默認爲10進制 可選2-36
console.log(c6.toString(36));
//toLocaleString()方法返回本地環境格式的字符串  通常10進制
console.log(c6.toLocaleString());

var c7 = 3.1415926;
//toFixed()方法用於將數字轉換成字符串 能夠指定小數位數 會四捨五入
console.log(c7.toFixed(3));
//將數值轉換成指數計數法
console.log(c7.toExponential(1));
//toPrecision()方法能夠將數值轉換爲指定位數
console.log(c7.toPrecision(4));
//返回原始數值
console.log(c7.valueOf());

須要注意，對於進制轉換，toString()方法支持2-36進制，這很好理解，數字0-9加上26個英文字母，最多能夠表達36個數字。

3、字符串對象String

    JavaScript語言中的字符串對象封裝了大量的操做方法，須要注意，JavaScript中的String對象是不可變的，全部對字符串的操做都是返回一個新的字符串。String對象中最經常使用的一個屬性爲length屬性，這個屬性能夠獲取字符串的長度，示例以下：

//字符串對象
var str1 = new String("HelloWorld");
var str2 = String("HELLO");
//length屬性能夠獲取字符串的長度
console.log(str1.length);  //10

String對象中封裝的一些經常使用方法示例以下：

//靜態方法
//經過Unicode值建立字符
var str3 = String.fromCharCode(100,102,103,104);//dfgh
console.log(str3);

//建立html錨點
console.log(str1.anchor("label")); //<a name="label">HelloWorld</a>
//嵌入big標籤中
console.log(str1.big());//<big>HelloWorld</big>
//嵌入small標籤
console.log(str1.small());//<small>HelloWorld</small>
//嵌入blick標籤中
console.log(str1.blink());//<blink>HelloWorld</blink>
//嵌入b標籤中
console.log(str1.bold());//<b>HelloWorld</b>
//獲取指定位置的字符 從0開始
console.log(str1.charAt(1));//e
//獲取指定位置字符的unicode碼
console.log(str1.charCodeAt(1));//101
//字符串拼接
console.log(str1.concat("1","2","3"));//HelloWorld123
//嵌入打印模式
console.log(str1.fixed());//<tt>HelloWorld</tt>
//指定HTML字體顏色
console.log(str1.fontcolor('red'));//<font color="red">HelloWorld</font>
//指定HTML字體大小
console.log(str1.fontsize(24));//<font size="24">HelloWorld</font>
//indexOf()方法用於檢查某個子串在父串中第一次出現的位置，其中第1個參數爲要檢索的子串，第2個參數爲從某個位置開始檢索
console.log(str1.indexOf('l',3));//3  注意，若是沒有檢索到 會返回-1
//嵌入i標籤中
console.log(str1.italics());//<i>HelloWorld</i>
//從後往前檢索 同indexOf()方法
console.log(str1.lastIndexOf("l",10));//8
//嵌入a標籤中
console.log(str1.link("www.baidu.com"));//<a href="www.baidu.com">HelloWorld</a>
//進行字符串比較 若是str1<參數 則返回-1 若是大於 則返回1 相等 則返回0
console.log(str1.localeCompare("Z"));//-1
//match()方法用於字符串檢索 其將返回一個檢索結果對象
//match()方法的參數能夠爲
//字符串:要檢索的字符串
//正則表達式:要檢索的正則表達式
console.log(str1.match("ell"));//[ 'ell', index: 1, input: 'HelloWorld' ]
console.log(str1.match(/ell/));
//進行字符串替換 第1個參數爲要被替換的字符或者正則 第2個參數爲替換成的字符串
console.log(str1.replace("Hello","hahaha"));//hahahaWorld
//進行子串匹配 能夠是字符串參數也能夠是正則 這個方法不能指定檢索起點
console.log(str1.search("World"));//5
//進行字符串截取
console.log(str1.slice(0,5));//Hello
//進行字符串分隔操做
//第一個參數：分隔標準 能夠會字符串或者正則
//第二個參數：返回數組中元素的最大個數
console.log(str1.split('o',10));//[ 'Hell', 'W', 'rld' ]
//嵌入strike標籤中
console.log(str1.strike());//<strike>HelloWorld</strike>
//嵌入sub標籤
console.log(str1.sub());//<sub>HelloWorld</sub>
//進行字符串截取 第1個參數爲起始位置 第2個參數爲須要截取的長度
console.log(str1.substr(0,5));//Hello
//進行字符串截取 獲取兩個索引之間的字符
console.log(str1.substring(5,10));//World
//嵌入sup標籤中
console.log(str1.sup());//<sup>HelloWorld</sup>
//所有轉換爲小寫字母
console.log(str1.toLocaleLowerCase());
console.log(str1.toLowerCase());
//所有轉換爲大寫字母
console.log(str1.toLocaleUpperCase());
console.log(str1.toUpperCase());
//返回字符串對象的原始值
console.log(str1.valueOf());

4、日期對象Date

    JavaScript中提供豐富的日期處理方法，示例以下：

//日期對象date
//建立當前時間對象
var date1 = new Date();
console.log(date1);//2017-01-04T02:00:05.617Z
//返回當前的日期
var date2 = Date();
console.log(date2);//Wed Jan 04 2017 10:04:56 GMT+0800 (CST)
//獲取時間對象是一個月中的第幾天 1-31之間 必須是Date對象調用
console.log(date1.getDate()); //4
//獲取時間對象是一週中的第幾天 週日爲0
console.log(date1.getDay());  //3
//返回月份 注意 這個會返回0-11之間
console.log(date1.getMonth()); //0
//獲取完整的年
console.log(date1.getFullYear()); //2017
//獲取小時0-23
console.log(date1.getHours());
//獲取分鐘0-59
console.log(date1.getMinutes());
//獲取秒0-59
console.log(date1.getSeconds());
//獲取毫秒0-999
console.log(date1.getMilliseconds());
//獲取時間戳 從1970年1月1日 起
console.log(date1.getTime());
//返回本地時間與格林威治時間的分鐘差
console.log(date1.getTimezoneOffset());//-480
//返回世界時間中 一個月中的第幾天 1-31
console.log(date1.getUTCDate());
//返回世界時間中 一週中的第幾天  週日爲0
console.log(date1.getUTCDay());
//返回世界時間中的月份 0-11
console.log(date1.getUTCMonth());
//返回世界時間中的年
console.log(date1.getUTCFullYear());
//返回世界時間中小時
console.log(date1.getUTCHours());
//返回世界時間中的分鐘
console.log(date1.getUTCMinutes());
//返回世界時間中的秒
console.log(date1.getUTCSeconds());
//返回世界時間中的毫秒
console.log(date1.getUTCMilliseconds());
//靜態方法 返回從1970.1.1到指定日期間的毫秒
console.log(Date.parse(date1));
//設置日期 1個月中的某一天 1-31
date1.setDate(1);
//設置月份
date1.setMonth(2);
//設置年份
date1.setFullYear(2011);
//設置時
date1.setHours(10);
//設置分
date1.setMinutes(20);
//設置秒
date1.setSeconds(23);
//設置毫秒
date1.setMilliseconds(100);
console.log(date1);
//經過時間戳設置date對象
date1.setTime(1483599203000);
console.log(date1);
//下面這些方法設置時間時間
date1.setUTCDate(3);
date1.setUTCMonth(10);
date1.setUTCFullYear(2020);
date1.setUTCHours(22);
date1.setUTCMinutes(22);
date1.setUTCSeconds(34);
date1.setUTCMilliseconds(112);
console.log(date1);
//轉換爲本地時間字符串
console.log(date1.toString());//Wed Nov 04 2020 06:22:34 GMT+0800 (CST)
//轉換時間部分
console.log(date1.toTimeString());//06:22:34 GMT+0800 (CST)
//轉換日期部分
console.log(date1.toDateString());//Wed Nov 04 2020
//轉換爲世界時間字符串
console.log(date1.toUTCString());//Tue, 03 Nov 2020 22:22:34 GMT
//轉換成本地格式的字符串
console.log(date1.toLocaleString());//11/4/2020, 6:22:34 AM
//只轉換本地格式的時間
console.log(date1.toLocaleTimeString());//6:22:34 AM
//只轉換日期
console.log(date1.toLocaleDateString());//11/4/2020
//返回從1970.1.1到指定時間的時間戳 
//參數含義爲 年 月 日 時 分 秒 毫秒
console.log(Date.UTC(2012,1,1,1,1,1,1));

5、數組對象Array

    數組對象用於存放一組數據，JavaScript語言並不像Swift語言那樣強調類型，所以數組中存放的元素類型十分自由，JavaScript中數組的相關方法示例以下：

//有三種方式進行數組的構造
//構造空數組
var array1 = new Array();
//構造指定個數元素的數組
var array2 = new Array(5);
//構造初始數組
var array3 = new Array(1,2,3,4)

//length屬性能夠獲取數組元素個數
console.log(array3.length);//4
//進行數組鏈接
console.log(array3.concat([5,6],['q','w']));
//將數組中全部元素以指定分隔符進行拼接爲字符串
console.log(array3.join("-"));
//刪除數組中的最後一個元素
array3.pop();
console.log(array3);
//向數組中添加一個元素
array3.push(5);
console.log(array3);
//進行數組顛倒
array3.reverse();
console.log(array3);
//刪除數組中的第一個參數
array3.shift();
console.log(array3);
//向數組開頭插入一些元素
array3.unshift(1,1,1);
console.log(array3);
//對數組元素進行排序 
array3.sort(function(a,b){
	if (a>b) {
		return true;
	}else{
		return false;
	}
});
console.log(array3);
//刪除數組中的元素 並插入其餘元素
//第1個參數爲參數元素的位置
//第2個參數爲刪除元素的個數
//以後能夠有任意個參數，做爲插入元素
array3.splice(0,2,'c',5);
console.log(array3);
//將數組轉換爲字符串 使用逗號拼接
console.log(array3.toString());
console.log(array3.toLocaleString());

    須要注意，數組的排序方法sort()中須要傳入一個排序函數，這個函數中會傳入兩個參數，分別描述數組中相鄰的兩個元素，若是須要交換位置，返回true便可，不然返回false便可。另外，數組的toString()方法與join()方法做用類似，不一樣的是join()方法更加自由，開發者能夠經過參數決定進行拼接的方式，若是不傳參數，則默認也會以逗號進行分割拼接。

6、關於Boolean對象

    Boolean對象用來描述邏輯值，JavaScript中的Boolean對象能夠理解爲對布爾值的一種包裝，當使用構造函數來進行Boolean對象的建立時，若是不傳參數，默認會構造false值的對象包裝，以下：

var b1 = new Boolean();
console.log(b1);//[Boolean: false]

若是將Boolean()當作函數來使用，將會返回一個基本布爾值，以下：

var b2 = Boolean();
console.log(b2);//false

在建立布爾值時，下面這些傳參都將建立包裝false的布爾對象：

var myBoolean=new Boolean();
var myBoolean=new Boolean(0);
var myBoolean=new Boolean(null);
var myBoolean=new Boolean("");
var myBoolean=new Boolean(false);
var myBoolean=new Boolean(NaN);
var myBoolean=new Boolean(undefined);

除了上面所列舉的參數狀況外，其他的都將構造true包裝對象。

7、JavaScript中的數學對象及方法

    JavaScript中還內置了一個Math數學對象，這個對象中封裝了許多數學中經常使用的常數和算術方法，示例以下：

//Math對象
//天然對數e
console.log(Math.E);//2.718281828459045
//2的天然對數
console.log(Math.LN2);//0.6931471805599453
//10的天然對數
console.log(Math.LN10);//2.302585092994046
//以2爲底e的對數
console.log(Math.LOG2E);//1.4426950408889634
//以10爲底e的對數
console.log(Math.LOG10E);//0.4342944819032518
//圓周率
console.log(Math.PI);//3.141592653589793
//根號2的倒數
console.log(Math.SQRT1_2);//0.7071067811865476
//根號2
console.log(Math.SQRT2);//1.4142135623730951

//求絕對值函數
console.log(Math.abs(-5));//5
//求反餘弦函數
console.log(Math.acos(0.5));
//求反正弦函數
console.log(Math.asin(0.5));
//求反正切函數
console.log(Math.atan(1));
//求到(x,y)點的角度
console.log(Math.atan2(1,0));
//進行向上舍入
console.log(Math.ceil(1.3));//2
//進行向下舍入
console.log(Math.floor(1.3));//1
//求天然對數
console.log(Math.log(10));//2.302585092994046
//返回最大值
console.log(Math.max(1,2));//2
//返回最小值
console.log(Math.min(1,2));//1
//求冪函數
console.log(Math.pow(10,2));//100
//取0-1之間的隨機數
console.log(Math.random());
//進行四捨五入
console.log(Math.round(1.3));//1
//求正弦值
console.log(Math.sin(2));
//求餘弦值
console.log(Math.cos(2));
//求正切值
console.log(Math.tan(1));

前端學習新人，有志同道合的朋友，歡迎交流與指導，QQ羣:541458536