第9章 標準庫對象(內置對象)
js學習中的三種對象:
-
內置對象
-
自定義對象
-
瀏覽器對象
JavaScript 提供了很多個內置對象：Math/Array/Number/String/Boolean...
對象只是帶有屬性和方法的特殊數據類型。
我們在學習時其實就是要記住對象的每個屬性和方法怎麼使用，代表什麼含義；
技術問題，遇到分歧，去哪裏查找資料：
9.1 Math對象
9.1.1 使用
Math 是一個內置對象， 它具有數學常數和函數的屬性和方法。不是一個函數對象。
與其它全局對象不同的是 , Math 不是一個構造器. Math 的所有屬性和方法都是靜態的.
跟數學相關的運算直接使用Math中的成員即可
Math對象的屬性（常量）
| 屬性(常量) | 描述 |
|---|---|
| Math.E 常量 | 數學常數 e。這是歐拉數，自然對數的底。 |
| Math.LN2 常量 | 2 的自然對數。 |
| Math.LN10 常量 | 10 的自然對數。 |
| Math.LOG2E 常量 | 以 2 爲底 e 的對數。 |
| Math.LOG10E 常量 | 以 10 爲底 e 的對數。 |
| Math.PI 常量 | Pi。這是圓的周長與直徑的比值。 |
| Math.SQRT1_2 常量 | 0.5 的平方根，或相當於 1 除以 2 的平方根。 |
| Math.SQRT2 常量 | 2 的平方根。 |
Math對象的方法（函數）
| 方法(函數) | 描述 |
|---|---|
| Math.abs 函數 | 返回數字的絕對值。 |
| Math.acos 函數 | 返回數字的反餘弦值。 |
| Math.acosh 函數 | 返回數字的雙曲反餘弦值（或反雙曲餘弦值）。 |
| Math.asin 函數 | 返回數字的反正弦值。 |
| Math.asinh 函數 | 返回數字的反雙曲正弦。 |
| Math.atan 函數 | 返回數字的反正切值。 |
| Math.atan2 函數 | 將與 X 軸的角度（以弧度爲單位）返回到由 y 和 x 座標表示的點。 |
| Math.atanh 函數 | 返回數字的反雙曲正切。 |
| Math.ceil 函數 | 返回大於或等於提供的數值表達式的最小整數。 |
| Math.cos 函數 | 返回數字的餘弦值。 |
| Math.cosh 函數 | 返回數字的雙曲餘弦。 |
| Math.exp 函數 | 返回 e（自然對數的底）的乘冪數。 |
| Math.expm1 函數 | 返回 e（自然對數的底）的乘冪數減去 1 的結果。 |
| Math.floor 函數 | 返回小於或等於提供的數值表達式的最大整數。向下取整 |
| Math.hypot 函數 | 返回參數平方和的平方根。 |
| Math.imul 函數 | 返回被視爲 32 位帶符號整數的兩個數字的積。 |
| Math.log 函數 | 返回數字的自然對數。 |
| Math.log1p 函數 | 返回 1 加上一個數字的的自然對數。 |
| Math.log10 函數 | 返回數字以 10 爲底的對數。 |
| Math.log2 函數 | 返回數字以 2 爲底的對數。 |
| Math.max 函數 | 返回提供的兩個數值表達式中的較大值。 |
| Math.min 函數 | 返回提供的兩個數字中的較小值。 |
| Math.pow 函數 | 返回基表達式的指定乘冪數的值。 |
| Math.random 函數 | 返回介於 0 和 1 之間的僞隨機數。 |
| Math.round 函數 | 返回舍入到最近整數的指定數值表達式。 |
| Math.sign 函數 | 返回數字符號，它指示數字爲正數、負數還是 0。 |
| Math.sin 函數 | 返回數字的正弦值。 |
| Math.sinh 函數 | 返回數字的反雙曲正弦。 |
| Math.sqrt 函數 | 返回數字的平方根。 |
| Math.tan 函數 | 返回數字的正切值。 |
| Math.tanh 函數 | 返回數字的雙曲正切。 |
| Math.trunc 函數 | 返回數字的整數部分，刪除任何小數數字。 |
9.1.2 案例
-
求10-20之間的隨機數
求兩個數之間的隨機數,使用下面這個公式 :
Math.floor(Math.random() * (max - min)) + min);
var num = Math.floor(Math.random() * (20- 10) + 10) console.log(num);
-
讓p標籤隨機改變顏色
<body> <p id="p">這是一個p段落,我想讓它隨機改變顏色</p> </body> <script> //讓一個p標籤隨機改變顏色 var getRandomColor = function () { return "rgb(" + Math.round(Math.random() * 255) + "," +Math.round(Math.random() * 255) +',' + Math.round(Math.random() * 255) + ')'; } document.getElementById('p').style.color = getRandomColor(); </script>
9.2 Date對象（構造函數）
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date
9.2.1 使用
創建 Date 實例用來處理日期和時間。Date 對象基於1970年1月1日（世界標準時間）起的毫秒數。
// 獲取當前時間，UTC世界時間，距1970年1月1日（世界標準時間）起的毫秒數
var now = new Date();
console.log(now.valueOf()); // 獲取距1970年1月1日（世界標準時間）起的毫秒數
Date構造函數的參數
1. 毫秒數 1498099000356 new Date(1498099000356)
2. 日期格式字符串 '2015-5-1' new Date('2015-5-1')
3. 年、月、日…… new Date(2015, 4, 1) // 月份從0開始
-
獲取日期的毫秒形式
var now = new Date(); // valueOf用於獲取對象的原始值 console.log(date.valueOf()) // HTML5中提供的方法，有兼容性問題 var now = Date.now(); // 不支持HTML5的瀏覽器，可以用下面這種方式 var now = + new Date(); // 調用 Date對象的valueOf()
-
日期格式化方法
toString() // 轉換成字符串 valueOf() // 獲取毫秒值 // 下面格式化日期的方法，在不同瀏覽器可能表現不一致，一般不用 toDateString() toTimeString() toLocaleDateString() toLocaleTimeString()
-
獲取日期指定部分
getTime() // 返回毫秒數和valueOf()結果一樣，valueOf()內部調用的getTime() getSeconds() // 返回0-59 getMinutes() // 返回0-59 getHours() // 返回0-23 getDay() // 返回星期幾 0週日 6周6 getDate() // 返回當前月的第幾天 getMonth() // 返回月份，***從0開始*** getFullYear() //返回4位的年份 如 2016
//不支持HTML5的瀏覽器可以使用下面的方式 var dt = +new Date(); //調用Date對象的valueOf()
9.2.2 案例
-
案例1：寫一個函數，格式化日期對象，返回yyyy-MM-dd HH:mm:ss的形式
-
計算時間差，返回相差的天/時/分/秒
function getInterval(start, end) {
var day, hour, minute, second, interval;
interval = end - start;
interval /= 1000;
day = Math.round(interval / 60 /60 / 24);
hour = Math.round(interval / 60 /60 % 24);
minute = Math.round(interval / 60 % 60);
second = Math.round(interval % 60);
return {
day: day,
hour: hour,
minute: minute,
second: second
}
}
Date對象 的方法。
| 方法 | 描述 |
|---|---|
| getDate 方法 | 使用當地時間返回一個月某天的值。 |
| getDay 方法 | 使用當地時間返回一個星期某天的值。 |
| getFullYear 方法 | 使用當地時間返回年份值。 |
| getHours 方法 | 使用當地時間返回小時值。 |
| getMilliseconds 方法 | 使用當地時間返回毫秒值。 |
| getMinutes 方法 | 使用當地時間返回分鐘值。 |
| getMonth 方法 | 使用當地時間返回月份值。 |
| getSeconds 方法 | 使用當地時間返回秒值。 |
| getTime 方法 | 將 Date 對象中的時間值返回爲自 1970 年 1 月 1 日午夜起經過的毫秒數。 |
| getTimezoneOffset 方法 | 返回主機的時間與協調通用時間 (UTC) 之間的分鐘差值。 |
| getUTCDate 方法 | 使用 UTC 返回一個月某天的值。 |
| getUTCDay 方法 | 使用 UTC 返回一個星期某天的值。 |
| getUTCFullYear 方法 | 使用 UTC 返回年份值。 |
| getUTCHours 方法 | 使用 UTC 返回小時值。 |
| getUTCMilliseconds 方法 | 使用 UTC 返回毫秒值。 |
| getUTCMinutes 方法 | 使用 UTC 返回分鐘值。 |
| getUTCMonth 方法 | 使用 UTC 返回月份值。 |
| getUTCSeconds 方法 | 使用 UTC 返回秒值。 |
| getVarDate 方法 | 將 Date 對象中的 VT_DATE 值返回。 |
| getYear 方法 | 返回年份值。 |
| hasOwnProperty 方法 | 返回一個布爾值，該值指示一個對象是否具有指定名稱的屬性。 |
| isPrototypeOf 方法 | 返回一個布爾值，該值指示對象是否存在於另一個對象的原型鏈中。 |
| propertyIsEnumerable 方法 | 返回一個布爾值，該值指示指定屬性是否爲對象的一部分以及該屬性是否是可枚舉的。 |
| setDate 方法 | 使用當地時間設置一個月中某一日的數值。 |
| setFullYear 方法 | 使用當地時間設置年份值。 |
| setHours 方法 | 使用當地時間設置小時值。 |
| setMilliseconds 方法 | 使用當地時間設置毫秒值。 |
| setMinutes 方法 | 使用當地時間設置分鐘值。 |
| setMonth 方法 | 使用當地時間設置月份值。 |
| setSeconds 方法 | 使用當地時間設置秒值。 |
| setTime 方法 | 設置 Date 對象中的日期和時間值。 |
| setUTCDate 方法 | 使用 UTC 設置一個月中某一日的數值。 |
| setUTCFullYear 方法 | 使用 UTC 設置年份值。 |
| setUTCHours 方法 | 使用 UTC 設置小時值。 |
| setUTCMilliseconds 方法 | 使用 UTC 設置毫秒值。 |
| setUTCMinutes 方法 | 使用 UTC 設置分鐘值。 |
| setUTCMonth 方法 | 使用 UTC 設置月份值。 |
| setUTCSeconds 方法 | 使用 UTC 設置秒值。 |
| setYear 方法 | 使用當地時間設置年份值。 |
| toDateString 方法 | 以字符串值的形式返回一個日期。 |
| toGMTString 方法 | 返回使用格林尼治標準時間 (GMT) 轉換爲字符串的日期。 |
| toISOString 方法 | 以字符串值的形式返回採用 ISO 格式的日期。 |
| toJSON 方法 | 用於在 JSON 序列化之前轉換目標類型的數據。 |
| toLocaleDateString 方法 | 將一個日期以字符串值的形式返回，該字符串應適合於宿主環境的當前區域設置。 |
| toLocaleString 方法 | 返回使用當前區域設置轉換爲字符串的對象。 |
| toLocaleTimeString 方法 | 以字符串值的形式返回一個時間，此字符串值應與宿主環境的當前區域設置相適應。 |
| toString 方法 | 返回表示對象的字符串。 |
| toTimeString 方法 | 以字符串值形式返回時間。 |
| toUTCString 方法 | 返回使用 UTC 轉換爲字符串的日期。 |
| valueOf 方法 | 返回指定對象的原始值。 |
9.3 Array對象
9.3.1 數組對象的屬性及方法
length屬性: 返回數組的成員數量。
var arr = ['a', 'b'];
console.log(arr.length) // 2
數組對象的常用方法舉例
-
push方法用於在數組的末端添加一個或多個元素，並返回添加新元素後的數組長度。注意，該方法會改變原數組。
var a = []; a.push(1) // 1 a.push('a') // 2 a.push(true, {}) // 4 console.log(a); //[1, 'a', true, {}] -
pop方法用於刪除數組的最後一個元素，並返回該元素。注意，該方法會改變原數組
var a = ['a', 'b', 'c']; a.pop() // 'c' console.log(a);// ['a', 'b'] -
slice方法用於提取原數組的一部分，返回一個新數組，原數組不變。
它的第一個參數爲起始位置(從0開始)，第二個參數爲終止位置(但該位置的元素本身不包括在內)。 如果省略第二個參數，則一直返回到原數組的最後一個成員。
var a = ['a','b','c','d','e']; console.log(a.slice(0)) // "a", "b", "c", "d", "e"] console.log(a.slice(1)) // ["b", "c", "d", "e"] console.log(a.slice(1,3)); // ["b", "c"] -
返回數組的字符串表示形式。
var arr = [1, 2, 3, 4]; console.log(arr.toString()); //1,2,3,4
9.3.2 方法和屬性
Array 對象的屬性。
| 屬性 | 描述 |
|---|---|
| constructor 屬性 | 指定創建數組的函數。 |
| length 屬性（數組） | 返回一個整數值，此整數比數組中所定義的最高位元素大 1，是實際元素個數。 |
| prototype 屬性 | 返回對數組的原型。 |
Array 對象的方法。
| 方法 | 描述 |
|---|---|
| concat 方法（數組） | 返回由兩個數組組合而成的新數組。 |
| entries 方法 | 返回包含數組的鍵/值對的迭代器。 |
| every 方法 | 檢查定義的回調函數是否爲數組中的所有元素返回 true。 |
| fill 方法 | 使用指定值填充數組。 |
| filter 方法 | 對數組的每個元素調用定義的回調函數，並返回回調函數爲其返回 true 的值的數組。 |
| findIndex 方法 | 返回滿足回調函數中指定的測試條件的第一個數組元素的索引值。 |
| forEach 方法 | 爲數組中的每個元素調用定義的回調函數。 |
| hasOwnProperty 方法 | 返回一個布爾值，該值指示某個對象是否具有指定名稱的屬性。 |
| indexOf 方法（數組） | 返回某個值在數組中的第一個匹配項的索引。 |
| isPrototypeOf 方法 | 返回一個布爾值，該值指示某個對象是否存在於另一個對象的原型鏈中。 |
| join 方法 | 返回由一個數組的所有元素串聯而成的 String 對象。 |
| keys 方法 | 返回包含數組的索引值的迭代器。 |
| lastIndexOf 方法（數組） | 返回指定值在數組中的最後一個匹配項的索引。 |
| map 方法 | 對數組的每個元素調用定義的回調函數並返回包含結果的數組。 |
| pop 方法 | 從數組中移除最後一個元素並將該元素返回。 |
| propertyIsEnumerable 方法 | 返回一個布爾值，該值指示指定屬性是否爲對象的一部分且是否可枚舉。 |
| push 方法 | 將新元素追加到一個數組中，並返回數組的新長度。 |
| reduce 方法 | 通過對數組中的所有元素調用定義的回調函數來累積單個結果。 回調函數的返回值是累積的結果，並且作爲對回調函數的下一個調用中的參數提供。 |
| reduceRight 方法 | 通過對數組中的所有元素調用定義的回調函數來按降序順序累積單個結果。 回調函數的返回值是累積的結果，並且作爲對回調函數的下一個調用中的參數提供。 |
| reverse 方法 | 將元素順序被反轉的 Array 對象返回。 |
| shift 方法 | 從數組中移除第一個元素並將返回該元素。 |
| slice 方法（數組） | 返回一個數組中的一部分。 |
| some 方法 | 檢查定義的回調函數是否爲數組的任何元素返回 true。 |
| sort 方法 | 返回一個元素已經進行了排序的 Array 對象。 |
| splice 方法 | 從一個數組中移除元素，如有必要，在所移除元素的位置上插入新元素，並返回所移除的元素。 |
| toLocaleString 方法 | 返回使用當前區域設置的字符串。 |
| toString 方法 | 返回數組的字符串表示形式。 |
| unshift 方法 | 在數組的開頭插入新元素。 |
| valueOf 方法 | 獲取對數組的引用。 |
| values 方法 | 返回包含數組的值的迭代器。 |
9.4 String對象
var s = 'JavaScript';
// length屬性返回字符串的長度。
var i = s.length; //返回參數在字符串中第一次出現的位置
var i = s.indexOf('b'); //從原字符串取出子字符串並返回，不改變原字符串
var i = s.substr(2,4);//從下標第二個開始截取4個長度的字符串
//toLowerCase方法用於將一個字符串全部轉爲小寫
//toUpperCase則是全部轉爲大寫
var i = s.toLowerCase();
var i = s.toUpperCase();
// 用於替換匹配的子字符串,只替換第一個匹配
var i = s.replace('a','b');
console.log(i);
String 對象的屬性。
| 屬性 | 描述 |
|---|---|
| constructor 屬性 | 指定用於創建對象的函數。 |
| length 屬性（字符串） | 返回 String 對象的長度。 |
| prototype 屬性 | 爲對象的類返回原型的引用。 |
String 對象的方法。
| 方法 | 描述 |
|---|---|
| anchor 方法 | 將具有 NAME 特性的 HTML 定位點放置在文本兩側。 |
| big 方法 | 將 HTML <BIG> 標記放置在文本兩側。 |
| blink 方法 | 將 HTML <BLINK> 標記放置在文本兩側。 |
| bold 方法 | 將 HTML <B> 標記放置在文本兩側。 |
| charAt 方法 | 返回指定索引處的字符。 |
| charCodeAt 方法 | 返回指定字符的 Unicode 編碼。 |
| codePointAt 方法 | 返回一個 Unicode UTF-16 字符的碼位。 |
| concat 方法（字符串） | 返回由提供的兩個字符串串聯而成的字符串。 |
| EndsWith 方法 | 返回一個布爾值，該值指示字符串或子字符串是否以傳入字符串結尾。 |
| includes 方法 | 返回一個布爾值，該值指示傳入字符串是否包含在字符串對象中。 |
| fixed 方法 | 將 HTML <TT> 標記放置在文本兩側。 |
| fontcolor 方法 | 將具有 COLOR 特性的 HTML <FONT> 標記放置在文本兩側。 |
| fontsize 方法 | 將具有 SIZE 特性的 HTML <FONT> 標記放置在文本兩側。 |
| hasOwnProperty 方法 | 返回一個布爾值，該值指示某個對象是否具有指定名稱的屬性。 |
| indexOf 方法（字符串） | 返回字符串內第一次出現子字符串的字符位置。 |
| isPrototypeOf 方法 | 返回一個布爾值，該值指示某個對象是否存在於另一個對象的原型鏈中。 |
| italics 方法 | 將 HTML <I> 標記放置在文本兩側。 |
| lastIndexOf 方法（字符串） | 返回字符串內子字符串的最後一個匹配項。 |
| link 方法 | 將具有 HREF 特性的 HTML 定位點放置在文本兩側。 |
| localeCompare 方法 | 返回一個值，該值指示兩個字符串在當前區域設置中是否相等。 |
| match 方法 | 通過使用提供的正則表達式對象來搜索字符串並以數組形式返回結果。 |
| normalize 方法 | 返回指定字符串的 Unicode 範式。 |
| propertyIsEnumerable 方法 | 返回一個布爾值，該值指示指定屬性是否爲對象的一部分且是否可枚舉。 |
| repeat 方法 | 返回一個新的字符串對象，它的值等於重複了指定次數的原始字符串。 |
| replace 方法 | 使用正則表達式替換字符串中的文本並返回結果。 |
| search 方法 | 返回正則表達式搜索中第一個子字符串匹配項的位置。 |
| slice 方法（字符串） | 返回字符串的片段。 |
| small 方法 | 將 HTML <SMALL> 標記放置在文本兩側。 |
| split 方法 | 返回一個字符串拆分爲若干子字符串時所產生的字符串數組。 |
| StartsWith 方法 | 返回一個布爾值，該值指示字符串或子字符串是否以傳入字符串開頭。 |
| strike 方法 | 將 HTML <STRIKE> 標記放置在文本兩側。 |
| sub 方法 | 將 HTML <SUB> 標記放置在文本兩側。 |
| substr 方法 | 返回一個從指定位置開始且具有指定長度的子字符串。 |
| substring 方法 | 返回 String 對象中指定位置處的子字符串。 |
| sup 方法 | 將 HTML <SUP> 標記放置在文本兩側。 |
| toLocaleLowerCase 方法 | 返回一個字符串，其中所有字母字符都轉換爲小寫形式，並將考慮主機環境的當前區域設置。 |
| toLocaleString 方法 | 返回使用當前區域設置轉換爲字符串的對象。 |
| toLocaleUpperCase 方法 | 返回一個字符串，其中所有字母字符都轉換爲大寫形式，並將考慮主機環境的當前區域設置。 |
| toLowerCase 方法 | 返回一個字符串，其中所有字母字符都轉換爲小寫形式。 |
| toString 方法 | 返回字符串。 |
| toUpperCase 方法 | 返回一個字符串，其中所有字母字符都轉換爲大寫形式。 |
| trim 方法 | 返回已移除前導空格、尾隨空格和行終止符的字符串。 |
| valueOf 方法 | 返回字符串。 |
9.5 包裝對象
基本包裝類型 : 本身是基本類型 , 但在執行代碼的過程中,如果這種類型的變量調用了屬性或者是方法 , 那麼這種類型就不再是基本類型了,而是基本包裝類型 , 這個變量也不是普通的變量了 , 而是基本包裝類型對象
var str = "hello";
str = str.replace("ll","HH");
console.log(str);
var num = 10; //number
console.log(num.toString());
如果是一個對象&&true,那麼結果是true
如果是一個true&&對象,那麼結果就是對象
var flag = new Boolean(false);
var result = true&&flag;
console.log(result);
var num = 10;
var num2 = Newber("10"); //基本類型,沒有new,只是類型轉換
var num3 = new Newber("10"); //基本包裝類型
對象是 JavaScript 語言最主要的數據類型，三種原始類型的值——數值、字符串、布爾值——在一定條件下，也會自動轉爲對象，也就是原始類型的“包裝對象”。
所謂“包裝對象”，就是分別與數值、字符串、布爾值相對應的Number、String、Boolean三個原生對象。這三個原生對象可以把原始類型的值變成（包裝成）對象。
var v1 = new Number(123);
var v2 = new String('abc');
var v3 = new Boolean(true);
typeof v1 // "object"
typeof v2 // "object"
typeof v3 // "object"
v1 === 123 // false
v2 === 'abc' // false
v3 === true // false
包裝對象的最大目的，首先是使得 JavaScript 的對象涵蓋所有的值，其次使得原始類型的值可以方便地調用某些方法。
原始類型的值，可以自動當作對象調用，即調用各種對象的方法和參數。
這時，JavaScript 引擎會自動將原始類型的值轉爲包裝對象實例，在使用後立刻銷燬實例。
比如，字符串可以調用length屬性，返回字符串的長度。
'abc'.length // 3
上面代碼中，abc是一個字符串，本身不是對象，不能調用length屬性。
JavaScript 引擎自動將其轉爲包裝對象，在這個對象上調用length屬性。
調用結束後，這個臨時對象就會被銷燬。這就叫原始類型與實例對象的自動轉換。