1. 程式人生 > >《JavaScript高級程序設計》讀書筆記(五)引用類型

《JavaScript高級程序設計》讀書筆記(五)引用類型

ron 新增 訪問 -s 字符 版本 組織 返回 obj

內容
---使用對象
---創建並操作數組
---理解基本的JavaScript類型
---使用基本類型和基本包裝類型


引用類型
--引用類型的值(對象)是引用類型的一個實例
--在ECMAScript中,引用類型是一種數據結構
--用於將數據和功能組織在一起,也常稱為類(並不妥當)
--盡管ECMAScript從技術上講是一門面向對象的語言
--但是它不具備傳統的面向對象語言所支持的類和接口等基本結構
--引用類型有時候也被成為對象定義,描述一類對象所句有的屬性和方法
--引用類型和類並不是一個概念

--使用new操作符後跟一個構造函數來創造新的對象
--構造函數本身就是一個函數,只不過該函數處於創建新對象的目的而定義

var person = new Object();
--創建Object引用類型的一個新實例,並保存在變量person中
--Object只為新對象定義了默認的屬性和方法


Object類型
--使用new操作符後跟一個構造函數來創建Object實例

var person = new Object();
person.name = "luking";
person.age = 22;
--使用對象字面量表示法
--不會調用Object構造函數

var person = {
name:"luking",
age:22,
"str":"asdasd"
};
--數值屬性名會自動轉化為字符串

var person = {}; //等同於new Object()

--訪問對象屬性時,可以使用點表示法,也可使用方括號語法
--方括號語法可以接受變量

person.name;
person["name"];
var name = "name";
person[name];
person["first name"]; //點表示法無法訪問這種屬性


Array類型
--ECMAScript中的數組的每一項可以保存不同類型的值
--大小是動態的,可以隨著數據的添加自動增長

--使用Array構造函數,創建數組

var colors = new Array(); //[]
var colors = new Array(10); //[empty x 10]
var colors = new Array("red","green","blue"); //["red","green","blue"]

--可以省略new 操作符
--使用數組字面量表示法創建
--不會調用Array構造函數

var colors = [];
var colors = ["red","green","blue"];
var colors = [1, 2, , ]; //不建議
--空的逗號代表值為undefined
--最後一位加逗號,一般瀏覽器不識別,IE8-會識別並多一位undefined

--從0開始的索引,讀取數組
--數組length屬性表示數組長度
--length是動態的,修改其值,會增加(undefined)或著刪除數組項
--為超出length的索引項設置值,會更新length屬性
--中間的未賦值項是undefined
--length上限為42億
--添加超過上限的項會異常
--初始大小於上限接近的數組,會運行時間超長的腳本錯誤


檢測數組
--對於同一個全局作用域 instanceof可以判斷是不是array
-- value instanceof Array
--如果頁面中包含多個框架,就會有多個全局執行環境
--就會有兩個以上不同版本的Array構造函數
--es5新增Array.isArray()方法判斷是不是數組


轉換方法
--對象都具有,toLocaleString().toString()和valueOf()方法
--toString()方法返回數組每一項的字符串形式以逗號拼接的一個字符串
--會調用每一項的toString()方法,拼接成整個字符串
--valueOf() 返回這個數組的指針
--alert(),會自動調用toString()方法用於輸出字符串
var a = [1,2,"red"];
a.toString(); //"1,2,red"
a.valueOf(); //[1,2,"red"]

--toLocaleString()方法於toString()類似
--toLocaleString()會調用每一項的tolocalString()方法

var person1 = {
toLocaleString:function() {
return "local1";
},
toString:function() {
return "string1";
}
};
var person2 = {
toLocaleString:function() {
return "local2";
},
toString:function() {
return "string2";
}
};

var people = [person1,person2];
people.toString(); //"string1,string2"
people.toLocaleString();//"local1,local2"

--tolocaleString(),toString(),valueOf()默認以逗號分隔
--join(String)函數會返回以String為分割符的數組字符串
--String不寫或傳遞undefined 默認以逗號分隔
--傳入null 則會以"null"為分割符
--如果某一項是null或者undefined,
--tolocaleString(),toString(),valueOf(),join()都以空字符串對待

var colors = ["red", "blue", "green"];
colors.join("-"); //"red-blue-green"
colors.join(); //"red,blue,green"
var u = undefined;
var n = null;
colors.join(u); //"red,blue,green"
colors.join(n); //"rednullbluenullgreen"


棧方法
--數組提供實現棧操作的方法,來把數組當成棧數據結構來使用
--棧 LIFO(last-in-first-out,後進先出),最新添加的項最早被移除
--棧中項的插入(推入)和移除(彈出),只發生在棧頂
--push() 入棧,pop() 出棧
--push(args,....) 可推入任意數量的參數,推入棧中,並修改length的長度,並返回
--pop() 彈出最後一項,並length-1


隊列方法
--FIFO first-in-first-out 先進先出
--shift(); 取得數組第一項,並length-1
--push(args,...),同上

--unshift(args,...) 在數組前端插入任意長度項,並修改length長度,並返回length
--參數順序 就是插入後 項的順序,不會顛倒過來
--結合pop()方法,可實現反向隊列


重排序方法
--返回值都是重排之後的數組的索引值

reverse() 反轉數組序列
--直接對原數組反轉,影響原數組

sort(function) 排序
--默認升序排序,調用每一項的toSting()方法,進行字符串排序
--可接受一個比較函數實現自定義排序
--比較函數接受兩個參數a,b
--a<b return 負數, a==b return 0,a>b return 正數

function compare(v1, v2) {
if(v1 < v2) {
return-1;
} else if (v1 > v2) {
return 1;
} else {
return 0;
}
}
var vs = [0, 1, 5, 10, 15];
vs.sort(); //[0, 1, 10, 15, 5]
vs.sort(compare); //[0, 1, 5, 10, 15]

--改變compare的返回值可以實現不同的排序
--對於數值類型或者valueOf()會返回數值的對象類型可以簡化compare函數

function compare(v1, v2) {
return v2 - v1;
}


數組操作方法

concat(args,....);
--基於當前數組的所有項創建一個新副本,並把接受的參數添加到這個副本的末尾
--如果參數是數組,則把每一項都添加到副本中
--如果不是數組,則簡單的添加

var colors = ["red", "green", "blue"];
var colors2 = colors.concat("yellow", ["blcak", "brown"]);

colors; //["red", "green", "blue"]
colors2; //["red", "green", "blue", "yellow", "blcak", "brown"]

slice(start[,end])
--基於當前數組的一段(一個或者多個)創建新數組,一個參數或者兩個
--參數表示返回項的起始和結束,[start,end) 左閉右開
--如果參數是負數,表示倒數,
--開始位置必須在結束位置左邊,否則取段無效,返回空數組
--不在範圍的取段 返回空數組

var v = [0,1,2,3,4,5];
v.slice(0,3); //[0, 1, 2]
v.slice(2,3); //[2]
v.slice(2); //[2, 3, 4, 5]
v.slice(0,-2); //[0, 1, 2, 3]
v.slice(-1,-2); //[]
v.slice(-2,-1); //[4]

《JavaScript高級程序設計》讀書筆記(五)引用類型