js筆記（3）--引用類型

原創 N， 2020-06-23 16:15

文章目錄


引用類型的值（對象）是引用類型的一個實例。引用類型實際上是一種數據結構，類似於面對對象語言中類的概念。ECMAScript提供了一些原生的引用類型可以直接使用。以下介紹一些常用的引用類型。

Object類型

創建的方式

  1. new操作符
Var obj=new Object()
Obj.name='marry'
  1. 對象字面量
Var obj={
	name:'marry',
	age:14
}

使用對象字面量的方式創建對象不會調用Object構造函數。

訪問屬性的方式

  • 點訪問
obj.name //marry
  • 方括號訪問（方括號值爲字符串）
obj["name"] //marry

Array類型

數組中每一項可以存儲任意不同的數據類型，數組大小可以動態變化。

創建的方式

  1. new 操作符
var a=new Array()
var a1=new Array(10) //爲數組指定長度
  1. 數組字面量
var a=[1,2,3]

讀取數組

  • 訪問數組索引
var a=[1,2,3]
console.log(a[0])  //1,下標索引從0開始

檢測數組

  • instanceof，問題在一個全局作用域下有效，若網頁中包含多個框架，會出現問題
  • Array.isArray(),IE9以上支持
var a=new Array()
console.log(a instanceof Array)  //true
console.log(Array.isArray(a))  //true

屬性與方法

屬性

length屬性表示數組的長度，可以爲該屬性賦值，指定數組的長度。

方法

  1. 棧方法
  • push(),傳入任意個參數，放到數組的末尾，返回數組的長度；
  • pop()，返回數組的最後一項，在棧中相當於棧頂。
    棧是一種先進先出的數據結構。
var a=[1,2,3]
a.push(2) //4
console.log(a)  //[1,2,3,2]
a.pop() //2
console.log(a)  //[1,2,3]
  1. 隊列方法
  • unshift(),傳入任意個參數，插入到數組的最前面，返回插入後數組的長度；
  • pop()
    隊列是一種先進後出的數據結構。
var a=[1,2,3]
a.unshift(12,23) //5
console.log(a)  //[12,23,1,2,3]
a.pop() //3
console.log(a)  //[12,23,1,2]
  1. 重排序方法
  • reverse()，反轉數組
var a=[1,2,3]
a.reverse() //[3,2,1]
  • sort()，調用toString()方法，按升序排列
var a=[1,12,3,2]
a.sort() //[1,12,2,3]
a.sort(function(a,b){
	return a-b
}) //[1,2,3,12]
a.sort(function(a,b){
	return b-a
}) //[12,3,2,1]
  1. 操作方法
  • concat()，將傳入的數據添加到原來的數組中；
var a=[1,2]
a.concat([3,4],5) //[1,2,3,4,5]
  • join()，傳入分隔符，將數組用分隔符隔開轉換爲字符串,返回字符串；
var a=[1,2]
a.join('||') //"1||2"
  • slice(),傳入一個參數，表示開始位置，傳入兩個參數，表示開始位置和結束位置（不包含開始位置）
var a=[1,2,3,4]
a.slice(1) //[2,3,4]
a.slice(1,2) //[2]
  • splice()
    • 兩個參數，要刪除的第一項的位置和要刪除的個數；
    • 三個參數，起始位置，要刪除的項數和要插入的任意數量的項。
var a=[1,2,3,4]
a.splice(0,2) 
console.log(a) //[3,4]
a.splice(0,0,1) 
console.log(a) //[1,3,4]
a.splice(1,1,2,5)
console.log(a) //[1,2,5,4]
  1. 位置方法
    -indexOf()
    -lastIndexOf()
    傳入兩個參數，要查找的項和（可選的）表示查找的位置的索引，一個是從前查找一個是從後查找。
var a=[1,2,3,1]
a.indexOf(1) //0
a.lastIndexOf(1) //3
  1. 迭代方法
    接收兩個參數，在每一項運行的函數和（可選的）運行該函數的作用域對象；傳入的函數有3個參數，數組項的值，數組項的索引和數組對象本身。
  • every()，對數組中每一項運行給定的函數，若每一項都返回true，則返回true;
var  a=[2,4,6]
a.every(function(item,i,a){
	return (item%2 ==0)
})   //true
  • filter()，對數組中每一項運行給定的函數，返回爲true的數組項；
var  a=[-1,4,6]
a.filter(function(item,i,a){
	return item>0
})   //[4,6]
  • forEach()，對數組中每一項運行給定的函數；
var  a=[-1,4,6]
a.forEach(function(item,i,a){
	a[i]=item*2
})  
console.log(a) //[-2,8,12]
  • map()，對數組中每一項運行給定的函數，返回調用函數的結果組成的數組；
var  a=[-1,4,6]
a.map(function(item,i,a){
	return item*2
})   //[-2,8,12]
  • some()，對數組中每一項運行給定的函數，如果其中任意一項返回true,則返回true。
var  a=[-1,4,6]
a.some(function(item,i,a){
	return item<0
})   //true
  1. 歸併方法
    接收兩個參數，一個是在每一項上調用的函數（4個參數，前一個值，當前值，項的索引，數組對象）和（可選的）作爲歸併基礎的初始值。下面兩個方法一個從前開始歸併一個從後開始歸併。
  • reduce()
var a=[1,2,3,4,5]
a.reduce(function(prev,next,i,arr){
	return prev+next
})  //15
a.reduce(function(prev,next,i,arr){
	return prev+next
},10)  //25
  • reduceRight()
var a=[1,2,3,4,5]
a.reduceRight(function(prev,next,i,arr){
	return prev+next
})  //15
a.reduceRight(function(prev,next,i,arr){
	return prev+next
},10)  //25

這兩種方法的結果是一樣的，只是遍歷數組的方式不一樣。

Date類型

UTC時間，1970年1月1日之前或之後285616年

創建的方式

  • new
    不傳入參數，會獲取當前的日期和時間；
    傳入參數須傳入日期的毫秒數，會獲得指定的日期。
var d=new Date()
console.log(d) //Thu Oct 03 2019 18:40:42 GMT+0800 (中國標準時間)
var d1=new Date(1000)
console.log(d) //Thu Jan 01 1970 08:00:01 GMT+0800 (中國標準時間)
  • Date.parse(),接收一個表示日期的字符串參數，返回相應的毫秒數。
    字符串的格式可以爲：
    • 月/日/年
    • 英文月名 日，年
    • 英文星期幾 英文月名 日 年 時：分：秒 時區
    • ISO 8601擴展格式 YYYY-MM-DDTHH:mm:ss:sssZ(2004-05-25T00:00:00)
Date.parse('10/3/2019')  //1570032000000
Date.parse('May 3,2019') //1556812800000
Date.parse('2019-10-03T08:00:00') //1570060800000
  • Date.UTC(),年份，月份（0-11），月的那一天（1-31），小時(0-23),分鐘，秒和毫秒數。年份和月份必須，日默認爲1號，其餘默認值爲0。
Date.UTC(2019,9,3) //1570060800000
  • Date.now()，返回調用這個方法的當前時間，值爲毫秒數。
Date.now()  //1570100113914

日期格式化方法

  • toDateString()
  • toTimeString()
  • toLocaleDateString()
  • toLocaleTimeString()
  • toUTCString()
var d=new Date()
d.toDateString() //"Thu Oct 03 2019"
d.toTimeString() //"08:00:00 GMT+0800 (中國標準時間)"
d.toLocaleDateString() //"2019/10/3"
d.toLocaleTimeString() //"上午8:00:00"
d.toUTCString()  //"Thu, 03 Oct 2019 00:00:00 GMT"

日期/時間組件方法

  • getTime()

  • setTime(毫秒)

  • getFullYear()

  • getUTCFullYear()

  • setFullYear(年)

  • setUTCFullYear(年)

  • getMonth(),0-11

  • getUTCMonth()

  • setMonth(月)

  • setUTCMonth(月)

  • getDate()

  • getUTCDate()

  • setDate(日)

  • setUTCDate(日)

  • getDay()，0(星期日)-6(星期六)

  • getUTCDay()

  • getHours()

  • getUTCHours()

  • setHours(時)

  • setUTCHours(時)

  • getMinutes()

  • getUTCMinutes()

  • setMinutes(分)

  • setUTCMinutes(分)

  • getSeconds()

  • getUTCSeconds()

  • setSeconds(秒)

  • setUTCSeconds(秒)

  • getMilliseconds()

  • getUTCMilliseconds()

  • setMilliseconds(毫秒)

  • setUTCMilliseconds(毫秒)

  • getTimezoneOffset()

var d=new Date() //Thu Oct 03 2019 22:42:51 GMT+0800 (中國標準時間)
d.getFullYear()  //2019
d.getUTCFullYear() //2019
d.getMonth()  //9
d.getDay() //4
d.getDate() //3

RegExp類型

創建方式

  1. new

var r=new RegExp(‘pattern’,‘flags’)

  1. 正則字面量

var expression=/pattern/flags;

  • pattern爲正則表達式
  • flags爲正則表達式的匹配模式，有以下幾種：
    • g，全局模式
    • i，不區分大小寫模式
    • m，多行模式

實例屬性和方法

屬性

每個實例擁有的屬性：

  • global，布爾值，表示是否設置了g標誌；
  • ignoreCase，布爾值，表示是否設置了i標誌；
  • lastIndex，整數，表示開始搜索下一個匹配項的字符位置，從0開始。
  • multiline，布爾值，表示是否設置了m標誌；
  • source，正則表達式的字符串表示。

方法

  • exec(),接收一個參數，要匹配的模式的字符串，返回第一個包含匹配項的數組。若沒有匹配項返回null。返回的數組擁有兩個特殊的屬性index（匹配項在字符串中的位置）和input（應用正則表達式的字符串）。
var r=/[ab](c)/g
var result=r.exec('bacg')
console.log(result)  //["ac", "c", index: 1, input: "bacg", groups: undefined]
  • test()，接收一個字符串參數，在字符串與模式匹配的情況下返回true。
var r=/[ab](c)/g
r.test('bacg') //true

RegExp構造函數屬性

相當於Java中的靜態屬性

長屬性名 短屬性名 意義
input $_ 最近一次要匹配的字符串
lastMatch $& 最近一次匹配的項
lastParen $+ 最近一次匹配的捕獲組
leftContext $` input字符串中lastMatch之前的文本
mutiline $* 布爾值，表示是否所有表達式都使用多行模式。
rightContext $’ input字符串中lastMatch之後的文本

Function類型

在js中函數其實是對象，每一函數都是Function類型的實例。

沒有重載

函數名相當於指針，若有兩個同名的函數，後面的函數會覆蓋前面的函數，因爲函數名的指針改變了。不能通過函數參數區別函數，函數沒有重載。

函數聲明與函數表達式

解析器在執行環境中解析數據時，會先讀取函數聲明，使其在執行任何代碼前可用，這就是函數聲明的提升。函數表達式需要等到執行到哪一行時執行，函數表達式不會提升。

sayName() //hello
function sayName(){
	console.log('hello')
}

sayName() //報錯
var sayName=function sayName(){
	console.log('hello')
}

作爲值的函數

函數名相當於變量，可以作爲值來使用，作爲函數參數和函數的返回值。

function plus(a,b){
	return a+b
}
function multi(a,b){
	return a*b
}
function com(a,b){
	return a-b
}
function callPlus(plus,a,b){
	return plus(a,b)
}
com(plus(1,1),multi(3,2))  //-4
callPlus(plus,1,3) //4

函數內部屬性

函數內部有兩個特殊對象：arguments和this，以及caller屬性。

  • arguments
    arguments是一個類數組對象，包含所有的函數參數。arguments有一個callee屬性，該屬性爲一個指針，指向擁有這個arguments對象的函數。
function f(num){
	if(num<=1) {
		return 1
	}else{
		//return num*f(num-1)
		return num*arguments.callee(num-1)
}
}
  • this
    this的值爲當前函數所在的環境對象，在全局作用域下this指向window。在函數被某個對象調用時，this指向這個對象。
  • caller
    caller屬性指向調用當前函數的函數的引用。
function outer(){
	inner()
}
function inner(){
	console.log(inner.caller)
}
outer()  //ƒ outer(){inner()}

caller屬性和arguments.callee.caller的功能是一樣的。

function outer(){
	inner()
}
function inner(){
	console.log(arguments.callee.caller)
}
outer()  //ƒ outer(){inner()}

函數屬性和方法

屬性

每個函數都有這兩個屬性：length和prototype，length屬性表示函數希望接收命名參數的個數，prototype屬性表示函數的原型對象。

方法

  • apply()，接收兩個參數，一個是在其中運行函數的作用域，一個是參數數組（可以爲Array,也可以爲arguments對象）
  • call()，與apply作用一樣，參數不是以數組方式傳遞，而是逐個傳遞。
  • bind()，傳入一個對象，會創建一個指向該對象的函數實例。
var o={
	name:'marry',
	a:1,
	b:2
}
function sayName(){
	console.log(this.name)
}
function plus(a,b){
	return this.a+this.b
}
plus(1,2) //NaN
plus.apply(o,[1,2]) //3
plus.call(o,1,2) //3

var newO=plus.bind(o)
newO() //3

基本包裝類型

每一次讀取基本類型的值時，後臺會創建一個對應的基本包裝類型的對象，調用相應的方法。
基本包裝類型和引用類型的區別在於對象的生存期，使用new操作符生成的對象，在當前執行環境執行完前會一直存在，而基本包裝對象只存在於一行代碼中。

Boolean類型

  1. 創建

var b=new Boolean(true)

  1. 判斷類型
var b1=new Boolean(true)
var b2=true
typeof b1 //"object"
typeof b2 //"boolean"
b1 instanceof Boolean //true
b2 instanceof Boolean ///false

Number類型

  1. 創建

var n=new Number(10)

  1. 方法
  • toFixed()，接收一個參數，按照指定的小數位返回數值的字符串表示；
  • toExponential()，返回以指數形式的字符串表示；
  • toPrecision()，接收一個參數，表示數值的所有數字的位數(不包括指數部分)
var n=12.3
n.toFixed(2) //"12.30"
n.toExponential() //"1.23e+1"
n.toPrecision(1) //"1e+1"
n.toPrecision(2) //"12"
n.toPrecision(3) //"12.3"

3.判斷類型

var n1=new Number(10)
var n2=10
typeof n1//"object"
typeof n2//"number"
n1 instanceof Number//true
n2 instanceof Number///false

String類型

屬性和方法

屬性

length屬性表示字符串的長度。

方法

  • charAt()，接收一個參數，字符的位置，從0開始，返回該位置的字符。

  • charCodeAt()，接收一個參數，字符的位置，從0開始，返回該位置的字符編碼。

var s='hello'
s.charAt(1)  //'e'
s.charCodeAt(1)  //101
  • concat()，將一個或多個字符拼接起來，返回新拼接的字符串；
var s1='hello'
s1.concat(' world',' ','!') //"hello world !"
  • slice()，接收兩個參數，第一個參數指定字符串開始的位置，第二個參數（可選）指定字符串結束的位置。
var s='hello world'
s.slice(1,3)  //"el"
s.slice(2)  //"llo world"
  • substr()，接收兩個參數，第一個參數指定字符串開始的位置，第二個參數（可選）指定返回字符串的個數。
var s='hello world'
s.substr(1,3)  //"ell"
s.substr(2)  //"llo world"
  • substring()，接收兩個參數，第一個參數指定字符串開始的位置，第二個參數（可選）指定字符串結束的位置。
var s='hello world'
s.substring(1,3)  //"el"
s.substring(2)  //"llo world"
  • indexOf()，接收兩個參數，第一個參數爲要搜索的字符串，第二個參數（可選）搜索字符串的位置，返回字符串位置從頭開始搜索。
  • lastIndexOf()，接收兩個參數，第一個參數爲要搜索的字符串，第二個參數（可選）搜索字符串的位置，返回字符串位置從最後開始搜索。
var s='hello world'
s.indexOf('l')//2
s.indexOf('l',3) // 3
s.lastIndexOf('l') // 9
s.lastIndexOf('l',4) // 3
  • trim()，返回刪除前綴和後綴所有空格的字符串
var s=' hello world  '
s.trim()  //"hello world"
  • 大小寫轉換方法
    • toLowerCase()
    • toLoacaleLowerCase()
    • toUpperCase()
    • toLocaleUpperCase()
var s='hello'
s.toUpperCase() //"HELLO"
  • match()，接收一個參數，爲正則表達式或RegExp對象，返回一個數組，數組的第一項爲與整個模式匹配的字符串，之後保存着與捕獲組匹配的字符串。
var s='catdateat'
var result=s.match(/[a-z][at]/g)
console.log(result) //["ca", "da", "ea"]
  • search()，接收一個參數，爲正則表達式或RegExp對象，返回字符串中第一個匹配項的索引。若沒有匹配項，返回-1。
var s='tdateat'
s.search(/[a-z][at]/g)  //1
  • replace()，接收兩個參數，第一個參數爲正則表達式或RegExp對象，第二個參數爲字符串或函數。
var s='catdateat'
var result=s.replace(/[a-z][at]/g,'--')
console.log(result) //"--t--t--t"
  • split()，傳入一個字符串分隔符將一個字符串分割成多個字串放入數組中。
var s='1||2||3'
s.split('||')  //["1", "2", "3"]
  • localeCompare()，比較兩個字符串，若字符串比另一個字符串靠前返回負數，相等返回0，靠後返回1。
var s1='yellow'
s1.localeCompare('bat') //1
s1.localeCompare('zaa') //-1
s1.localeCompare('yellow') //0
  • fromCharCode(),是String的靜態方法，接收多個字符編碼，轉換爲字符串。
String.fromCharCode(97,98,99) //"abc"

單體內置對象

不需要實例化的對象，可以直接使用。

Global對象

在全局作用域中定義的屬性和函數都是global對象的屬性和方法。以下介紹一些可以直接使用的方法。

  • encodeURI()，不會對url特有的字符進行編碼；
  • encodeURIComponent()，會對所有的特殊字符進行編碼；
  • decodeURI()，對encodeURI()編碼的字符進行解碼；
  • decodURIComponent()，對encodeURIComponent()編碼的字符進行解碼。
var url='http://www.baidu.com/名稱/'
encodeURI(url) //"http://www.baidu.com/%E5%90%8D%E7%A7%B0/"
encodeURIComponent(url) //"http%3A%2F%2Fwww.baidu.com%2F%E5%90%8D%E7%A7%B0%2F"
  • eval(),接收一個參數，要執行的ECMAScript字符串。
eval(alert('hello'))

Math對象

Math對象提供了一些常用的關於計算的屬性和方法，下面介紹一些常用的方法。

  • min()，確定一組數值中的最小值；
  • max()，確定一組數值中的最大值；
Math.min(99,1,23)  //1
Math.max(99,1,23)  //99
  • ceil()，向上舍入；
  • floor()，向下舍入；
  • round()，四捨五入；
Math.ceil(4.3)  //5
Math.floor(4.3)  //4
Math.round(4.3) //4
Math.round(4.5) //5
  • random()，返回大於0小於1的一個隨機數；
Math.random() //0.34127108953258833
  • abs(num)，返回數值的絕對值；
  • exp(num)，返回以e爲底數的num次冪；
  • pow(num,power)，返回num的power次冪；
  • sqrt(num)，返回num的平方根。
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

JavaScript與設計模式

js沒有傳統語言中的類式繼承，通過原型委託方式實現對象間的繼承 面向對象三大特性：抽象、繼承、多態 1.1 動態語言和鴨子類型 靜態類型語言在編譯時便已確定變量的類型，而動態類型語言的變量類型要到程序運行的時候，待變

滴滴答答 。。。 2020-07-03 22:11:56

this 、call與apply的使用

this js 的this總是指向一個對象，而具體指向哪個對象是在運行時基於函數的環境動態綁定的，而非函數被聲明時的環境 this的指向 除去with和eval情況，this的指向大致分爲以下4種 作爲對象的方法調用 作爲普通函

滴滴答答 。。。 2020-07-03 22:11:55

JavaScript 原型鏈基礎詳解

在面向對象編程中，類和對象可想象爲鑄模和鑄件地關係，對象總是從類中創建。 在原型編程地思想中，類不是必須的，對象也不一定從類中創建。對象是通過克隆另一個對象得到的，如果需要一個和某對象一摸一樣的對象，就可以用原型模式

滴滴答答 。。。 2020-07-03 22:11:52

閉包和高階函數

許多模式都可以使用閉包和高階函數來實現 3.1 閉包 閉包的形成與變量的作用域以及變量的生命週期密切相關 3.1.1 變量的作用域 變量的作用域，就是指變量的有效範圍。我們最常談到的是在函數中聲明的變量作用域。 在 JavaSc

滴滴答答 。。。 2020-07-03 22:11:52

徹底搞懂 ES6 Promise（前端異步編程）

https://blog.csdn.net/qq_34645412/article/details/81170576

ppxin 2020-07-02 22:03:24

JQuery框架入門、選擇器分類及DOM操作

JQuery 基礎： （一）、概念： 一個JavaScript框架。簡化JS開發 jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之後又一個優秀的JavaScript代碼庫（或JavaScript框架

兮尹 2020-06-27 05:46:15

JavaScript之Bootstrap響應式框架

Bootstrap 概念：一個前端開發的框架，Bootstrap，來自Twitter，是目前很受歡迎的前端框架。Bootstrap是基於HTML、CSS、JavaScript的，它簡介靈活，使得Web開發更加的快捷。 框架：一個

兮尹 2020-06-27 05:46:15

JavaScript之Bom對象

JavaScript之Bom對象 概念：Browser Object Model 瀏覽器對象模型 將瀏覽器的各個組成部分封裝成對象。 （一）、Window：窗口對象 1、Window：窗口對象方法 1.1 與彈出框有關的方法：

兮尹 2020-06-27 04:56:32

JQuery插件機制

插件：增強JQuery的功能 實現方式： $.fn.extend(object) 增強通過Jquery獲取的對象的功能，如：$("#id") <!DOCTYPE html> <html> <head> <meta

兮尹 2020-06-27 04:56:31

JQuery框架動畫、遍歷以及事件的綁定、案例【廣告顯示和隱藏、抽獎】

JQuery 高級 一、JQuery動畫 （一）、三種方式顯示和隱藏元素 1、默認顯示和隱藏方式 show([speed,[easing],[fn]]) 參數： ①、 speed：動畫的速度。三個預定義的值(“slow”,“

兮尹 2020-06-27 04:56:31

JavaScript之Dom對象

DOM 概念：Docunment Object Model 文檔對象模型。 將標記語言文檔的各個組成部分，封裝爲對象，可以使用這些標記語言文檔進行CRUD的動態操作。 HTML DOM 樹： （一）、核心：DOM - 針對任

兮尹 2020-06-27 04:56:31

3 Javascript:探索客戶端-定時器

JavaScript定時器 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml

WeAreZero 2020-06-25 15:28:21

ES6語法摘要二

這些內容是我學習《fullstack-react-book》一書，自己翻譯整理出來的要點。 JSON JSON代表了JavaScript對象標記（JavaScript Object Nation）。JSON能夠讓我們加載一個Ja

沐风的心 2020-06-25 10:51:03

尾遞歸以及在瀏覽器中的實現

這是阮一峯大神的《ES6標準入門》一書中寫道的，沒看過這節的童鞋可以狠戳這裏。 當時我就很不理解：除了最後一次調用不是尾遞歸，其餘 y 大於 0 的時候，都是尾遞歸；那麼，按照書“尾調用優化”上所說的，尾遞歸本身已經是“尾調用優

沐风的心 2020-06-25 10:51:03

前端緩存總結

前端緩存總結 1 緩存 緩存從宏觀上分爲私有緩存和共享緩存，共享緩存就是那些能被各級代理緩存的緩存。私有緩存就是用戶專享的，各級代理不能緩存的緩存。 緩存從微觀上可以分爲以下幾類： http緩存 瀏覽器緩存 cdn緩存 應

viviScript 2020-06-23 17:39:53