精簡《JavaScript高級程序設計》5、引用類型（上）

第五章概況

5.1 Object類型

引用類型是一種數據結構，用於將數據和功能組織在一塊兒。對象是某個特定引用類型的實例

建立Object實例的方式有兩種：

1. new+Object構造函數

var person = new Object()

2. 使用對象字面量

var person = {
	name:"fur",
	age:"1"
}
//或者
var person = {}
person.name = "fur"
person.age = "1"

注意：屬性名也能夠爲字符串，可是數值屬性名會自動轉換爲字符串 eg

let person = {
"name":"fur",
"age":"1",
5:true  //5自動轉換爲字符串
}
//console.log(person.5)直接打印報錯
console.log(typeof person[5])//只能用方括號的形式
//驗證數字5 被 轉換爲字符串
for (let i in person) {
    console.log(i + ' 類型是：'+ typeof i )
}

運行結果如圖：

訪問對象屬性的方式兩種：

點表示法：簡單經常使用

方括號表示法：能夠經過遍歷訪問屬性，經常使用於遍歷，或者不能用點表示法時候

let person = {
"name":"fur",
"age":"1",
5:true  //5自動轉換爲字符串
"first name" : "jiang"
}
//如下只能用方括號表示，不提倡這樣定義
console.log(typeof person[5])
console.log(typeof person["first name"])

5.2 Array類型

建立數組的方式兩種：

第一種 使用Array構造函數，new能夠省略

let arr = new Array()
let arr = new Array(20)
let arr = new Array("fur","frufur")

第二種，數組字面量表示法

let arr = []
let arr = ["fur","furfur"]

注意：數組長度不是一個只讀屬性，能夠被修改

驗證：

let arr = ['fur','furfur','furfur-jiang']
console.log(arr[2])//furfur-jiang
arr.length = 2
console.log(arr[2])//undefined

能夠方便的句末添加屬性

let arr = ['fur','furfur','furfur-jiang']
arr[arr.length]= "fur1"
arr[arr.length]= "fur2"
console.log(arr)
//Array(5) [ "fur", "furfur", "furfur-jiang", "fur1", "fur2" ]

注意：數組上限4294967295項

Array.isArray()用於檢測是否爲數組，當網頁包含多個框架，存在不一樣版本的Array構造函數時，經過這個方法肯定是否是數組

let arr = ['fur','furfur','furfur-jiang']
console.log(Array.isArray(arr))//true

轉換方法

全部對象都具備toLocaleString(),toString(),valueOf()

toLocaleString(),toString()輸出以逗號隔開的字符串

valueOf()返回一個數組

注意：alert默認會調用toString方法，全部輸出的都是字符串

join()能夠用不一樣分隔符構建字符串，只接受一個參數

let arr = ['fur','furfur','furfur-jiang']
console.log(arr.join("!!!"))//fur!!!furfur!!!furfur-jiang
console.log(arr.join("___"))//fur___furfur___furfur-jiang

若是數組中間某一項是null或者undefined，在toLocaleString(),toString(),join()返回的結構中以空字符串表示，而valueOf()會返回對應元素（valueOf()運行結果與書裏的解釋不一樣，書中將其與前面三種方法歸爲一類）

let arr = ['fur',null,undefined,'furfur-jiang']
arr[5] = "fur0"
console.log(arr.toString())//fur,,,furfur-jiang,,fur0
console.log(arr.toLocaleString())//fur,,,furfur-jiang,,fur0
console.log(arr.join(","))//fur,,,furfur-jiang,,fur0
console.log(arr.valueOf())
//火狐結果
//Array(6) [ "fur", null, undefined, "furfur-jiang", undefined, "fur0" ]
//谷歌結果
//(6) ["fur", null, undefined, "furfur-jiang", empty, "fur0"]

棧方法

棧方法是一種LIFO（Last-In-First-Out,後入先出）的數據結構，棧中項的插入（推入）和移除（彈出），只發生在棧的頂部。對應push()和pop()方法

push()接受任意數量的參數，把他們逐個添加到數組末尾，並返回修改後的數組長度。

pop()從數組末尾移除最後一項並返回

let arr = ['fur',"furfur",'furfur-jiang']
console.log(arr.push("fur1","fur2"))//5
console.log(arr.pop())//fur2
console.log(arr.length)//4

push進行推入操做，操做結束後返回數組長度，pop進行移除操做，操做結束後返回被移除的那一項，數組長度減一

隊列方法

棧方法是一種LIFO（First-In-First-Out,先入先出）的數據結構，隊列的末端添加項，從隊列前端移除項，對應push()和shift()方法

shift() 移除數組第一項並返回該項

let arr = ['fur',"furfur",'furfur-jiang']
console.log(arr.push("fur1","fur2"))//5
console.log(arr.shift())//fur
console.log(arr.length)//4

unshift()能在數組前端添加任意個項並返回新數組長度

總結：

• unshift()和push()都是添加任意元素，前者在數組前端添加，後者在數組末尾添加
• shift()和pop()都是移除一個元素，前者在數組前端移除，後者在數組末尾移除

重排序方法

數組已經存在reverse()和sort()兩個方法

reverse()具備從反轉數組項的順序

let arr = ['fur','furfur-jiang',"furfur"]
console.log(arr.reverse())
//Array(3) [ "furfur", "furfur-jiang", "fur" ]

sort()按升序排列數組項，每一個數組項調用toString()方法，也就是比較的實際上是字符串，即便數組內的元素都是數字

let arr = ['fur','aaa',"abc"]
console.log(arr.sort())
// Array(3) [ "aaa", "abc", "fur" ]

let arr = [5,16,11]
console.log(arr.sort())
// Array(3) [ 11, 16, 5 ]

因此sort()正確使用方式是接受一個比較函數做爲參數

let arr = [5,16,11]
//升序
function compareUp (value1,value2){
    return value1 - value2;
}
//降序
function compareDown (value1,value2){
    return value2 - value1;
}
console.log(arr.sort(compareUp))
//Array(3) [ 5, 11, 16 ]
console.log(arr.sort(compareDown))
//Array(3) [ 16, 11, 5 ]

操做方法

concat()，slice()，splice()三種方法

concat()能夠基於當前數組中的全部項建立新數組，若是傳遞的是一個或多個數組，會將這些數組的每一項添加到結果數組裏；若是不是數組，則簡單添加到結果數組末尾，不會干擾原來的數組。

let arr = ['fur',"furfur"]
console.log(arr.concat("furfur-jiang"))
//[ "fur", "furfur", "furfur-jiang" ]
console.log(arr.concat(['fur1',"fur2"]))
//[ "fur", "furfur", "fur1", "fur2" ]

slice()能夠基於當前數組在的一個或多個項建立一個新數組，接受一或兩個參數，返回項的起始和結束位置。若是隻有一個參數即從這個參數到數組末尾全部項。返回對應的值，包括起始位置而不包括結束位置的元素（包頭不包尾）

let arr = ['fur',"furfur","furfur-jiang","fur1"]
console.log(arr.slice(1))
//[ "furfur", "furfur-jiang", "fur1" ]
console.log(arr.slice(1,3))
//[ "furfur", "furfur-jiang" ]

splice()主要用於向數組中部插入項，返回刪除的元素，會影響原數組，使用方法有以下三種

• 刪除：只需指定兩個參數，要刪除的第一項和要刪除的項數
• 插入：只需指定3個參數：起始位置，0（要刪除的項數），要插入的項
• 替換：向指定位置插入任意數量的項，同時刪除任意數量的項，只需指定三個參數：起始位置，要刪除的項數，要插入的任意數量的項

//刪除操做，第一項furfur開始刪除，刪除兩個
let arr1 = ['fur',"furfur","furfur-jiang","fur1"]
console.log(arr1.splice(1,2))
//[ "furfur", "furfur-jiang" ]
console.log(arr1)
// [ "fur", "fur1" ]

//插入操做，從第一項furfur開始插入，插入兩個元素
let arr2 = ['fur',"furfur","furfur-jiang","fur1"]
console.log(arr2.splice(1,0,"fur2","fur3"))
//[]
console.log(arr2)
// [ "fur", "fur2", "fur3", "furfur", "furfur-jiang", "fur1" ]

//替換操做，從第一項furfur開始插入，插入兩個同時刪除原來的兩個的位置
let arr3 = ['fur',"furfur","furfur-jiang","fur1"]
console.log(arr3.splice(1,2,"fur2","fur3"))
//[ "furfur", "furfur-jiang" ]
console.log(arr3)
//[ "fur", "fur2", "fur3", "fur1" ]

位置方法

indexOf()和lastIndexOf()兩個方法都接收兩個參數：要查找的項和（可選的）表示要查找起點位置的索引。

其中indexOf()從數組開頭開始向後查找，lastIndexOf()表示從數組的末尾向前查找。兩個方法都返回查找項在數組的位置，沒找到返回-1。

注意：要求查找的項必須嚴格相等（就像使用===同樣）

let arr = ['fur',"furfur","furfur-jiang"]
console.log(arr.indexOf("furfur"))//1
console.log(arr.indexOf("furfur",1))//1
console.log(arr.indexOf("furfur",2))//-1

console.log(arr.lastIndexOf("furfur",2))//1
console.log(arr.lastIndexOf("fur-fur"))//-1

迭代方法

ES5定義了五個迭代的方法，每一個方法就收兩個參數：要在每一項上運行的函數和（可選的）運行該函數的做用域對象–影響this的值，其中傳入的函數接受三個參數：數組項的值，該項在數組中的位置和數組對象自己，數組對象自己

every()，對數組的每一項運行給定函數，若是該函數對每一項都返回true，則返回true

filter()， 對數組的每一項運行給定函數，返回該函數會返回true的項組成的數組

forEach() ，對數組的每一項運行給定函數，則這個沒有返回值，參照個人另外一篇文章

map()， 對數組的每一項運行給定函數，返回每次函數調用的結果組成的數組

some()，對數組的每一項運行給定函數，若是該函數對任一項返回true，則返回true，再也不繼續

以上函數不會修改原數組包含的值

let arr = [1,2,3,4,5,6,3]

console.log(arr.every(function(item,index,array){
    return (item >2)
}))//false
console.log(arr.some(function(item,index,array){
    return (item >2)
}))//true
console.log(arr.filter(function(item,index,array){
    return (item >2)
}))//[ 3, 4, 5, 6, 3 ]
console.log(arr.map(function(item,index,array){
    return (item * 2)
}))//[ 2, 4, 6, 8, 10, 12, 6 ]

歸併方法

reduce() 和reduceRight()都會迭代數組的全部項，而後構造一個最終返回的值。區別在於reduce() 是從數組第一項，reduceRight()是從數組最後一項，向前遍歷。

接收兩個參數：一個在每一項是調用的函數和（可選的）做爲歸併基礎的初始值

傳給這兩個方法的函數接受四個參數：前一個值，當前值，項的索引，數組對象

這個函數返回的任何值都會做爲第一個參數自動傳給下一項，第一次迭代發生在數組第二項上，所以第一個參數是數組的第一項，第二個參數是數組的第二項

let arr = [1,2,3,4,5,6,3]

let sum1 = arr.reduce(function(pre,cur,index,array){
    console.log("pre:"+pre+",cur:"+cur) 
    return pre + cur
})
console.log(sum1)//24
let sum2 = arr.reduceRight(function(pre,cur,index,array){
    console.log("pre:"+pre+",cur:"+cur)
    return pre + cur
})
console.log(sum2)//24

5.3 Date類型

Date基本方法

Date.parse() ,Date.UTC(),Date.now()

Date.parse()會接受一個表示日期的字符串，而後嘗試根據這個字符串返回相應日期的毫秒數。

console.log(new Date(Date.parse("Jan 23,2020")))
//Date Thu Jan 23 2020 00:00:00 GMT+0800 (中國標準時間)
console.log(new Date("Jan 23,2020"))
//Date Thu Jan 23 2020 00:00:00 GMT+0800 (中國標準時間)

Date構造函數會在後臺調用Date,parse(),因此上面兩種寫法是相同的

當輸入的字符串不能表示日期，谷歌和火狐會輸出Invalid Date，（運行結果與書上不一樣，書上說是NaN或者其餘奇怪的結果）

console.log(new Date("Jan 32,2020"))//Invalid Date

Date.UTC()接受的參數年份，基於0的月份，月中的哪一天（1到31），小時數（0到23），分鐘，秒以及毫秒數，這些參數只有前兩個參數（年和月）是必需的。其餘參數通通假設爲0。

var utc = Date.UTC(y,m,d,h,M,s);
//這裏，y、m、d、h、M、s分別表明步驟2中獲取的年、月、日、時、分、秒數值。

​ UTC + 時區差 ＝ 本地時間

• 時區差格式爲 符號+ 24小時制數字 + 分鐘，如：北京與UTC時差記爲+0800
• 時區差東爲正，西爲負。

整個地球分爲二十四時區，每一個時區都有本身的本地時間。在國際無線電通訊場合，爲了統一塊兒見，使用一個統一的時間，稱爲通用協調時(UTC, Universal Time Coordinated)。UTC與格林尼治平均時(GMT, Greenwich Mean Time)同樣，都與英國倫敦的本地時相同。

看個例子：

console.log(new Date(Date.UTC(2020,0,23,9,55,55)))
//Thu Jan 23 2020 17:55:55 GMT+0800 (中國標準時間)

注意：

• 月份輸入會比輸出-1，由於月是基於0 的，因此輸入0輸出Jan
• UTC = 本地時間 - 0800 = 1755-0800 = 0155 中國位於倫敦以東，爲正，因此減去對應時區差，求出UTC時間，與運行結果一致

（這一部分書上講得不多，幾乎都是本身理解+參考別人博客）

Date.now()返回表示調用這個方法時的日期和時間的毫秒數，在不支持這寫法可使用下面第二種寫法獲取時間戳，結果相同；通常用於計算運行速度

let now = Date.now()
console.log(now)//1579781768327
console.log(+new Date())//1579781768327
doSome() //執行某些函數

let result = +new Date() - now

繼承方法

Date類型重寫了toLocaleString()，toString()，valueOf()，具體結果依據瀏覽器不一樣而不一樣，valueOf()通常用來比較日期值

這裏以火狐和谷歌爲例：（二者相同）

console.log(new Date(2020,0,23).toString())
//Thu Jan 23 2020 00:00:00 GMT+0800 (中國標準時間)
console.log(new Date(2020,0,23).toLocaleString())
//2020/1/23 上午12:00:00
let a = new Date(2020,0,23).valueOf()
console.log(a)
//1579708800000
let b = new Date(2020,1,23).valueOf()
console.log(b)
//1582387200000
console.log(a < b)
//true

日期格式化方法

toDateString()–以特定於實現的格式顯示星期幾、月、日和年

toTimeString()–以特定於實現的格式顯示時，分，秒，時區

toLocaleDateString()–以特定於地區的格式顯示星期幾、月、日和年

toLocaleTimeString()–以特定於地區的格式顯示時，分，秒

toUTCString()–以特定於實現的格式完整的UTC日期

console.log(new Date(2020,0,23,20,55,55).toDateString())
//Thu Jan 23 2020
console.log(new Date(2020,0,23,20,55,55).toTimeString())
//20:55:55 GMT+0800 (中國標準時間)
console.log(new Date(2020,0,23,20,55,55).toLocaleDateString())
//2020/1/23
console.log(new Date(2020,0,23,20,55,55).toLocaleTimeString())
//下午8:55:55
console.log(new Date(2020,0,23,20,55,55).toUTCString())
//Thu, 23 Jan 2020 12:55:55 GMT

日期/時間組件方法

getTime()–返回日期的毫秒數，於valueOf()方法返回的值相同

getFullYear() --取4位數的年份（2020）

getMonth()–返回日期的月份，0表示1月份

getDate()–返回日期的天數，（1-31）

getDay()–返回日期中星期的星期幾（0表示星期日，6表示星期六）

getHours()–返回日期的小時數（0-23）

getMinutes()–返回日期的分鐘數（0-59）

getSeconds()–返回日期的秒數（0-59）

console.log(new Date(2020,0,23,20,55,55).getTime())
//1579784155000
console.log(new Date(2020,0,23,20,55,55).getFullYear())
//2020
console.log(new Date(2020,0,23,20,55,55).getMonth())
//0
console.log(new Date(2020,0,23,20,55,55).getDate())
//23
console.log(new Date(2020,0,23,20,55,55).getDay())
//4
console.log(new Date(2020,0,23,20,55,55).getHours())
//20
console.log(new Date(2020,0,23,20,55,55).getMinutes())
//55
console.log(new Date(2020,0,23,20,55,55).getSeconds())
//55

上一篇第四章

《JavaScript高級程序設計》目錄