JavaScript中的對象

知識內容：

1.JavaScript對象

2.JavaScript對象的分類

3.訪問對象的屬性和方法

4.JavaScript內建對象

 

 

 

1、JavaScript對象

1.什麼是JavaScript對象

JavaScript對象：

• JavaScript對象能夠說是JavaScript基本數據類型之一，不過是複合類型
• JavaScript中幾乎全部事物都是對象
• JavaScript對象是擁有屬性和方法的數據

 

 

2.如何理解JavaScript對象

能夠把JavaScript對象簡單理解爲鍵值對(name:value)的形式：

• JavaScript對象相似python中的字典、PHP中的關聯數組等數據類型
• 名稱(name)能夠是變量名也能夠是函數名
• 值(value)能夠是任何數據類型(固然也包括對象)

 

 

 

2、JavaScript對象的分類

1.JavaScript中對象分爲兩類：自定義對象和內建對象

自定義對象由咱們本身去定義，內建對象則是JavaScript自帶的，相似python中的內置模塊

 

 

2.JavaScript自定義對象

在經典的面嚮對象語言中，對象是指數據和在這些數據上進行的操做的集合。與 C++ 和 Java 不一樣，JavaScript 是一種基於原型的編程語言，並無 class 語句，而是把函數用做類

 

(1)自定義對象的建立方法以下：

 

(2)建立對象實例：

 1 // 上面第二種:
 2 var person = Object()
 3 person.name = "wyb"
 4 person.age = 21
 5 
 6 
 7 // 對象字面量法:
 8 var person = {
 9     name: "xasdf",
10     age: 21  
11 }
12 // 注：這裏的屬性名可使用字符串也能夠不用字符串，不用字符串的屬性名會自動轉化成字符串

 

(3)注意屬性名能夠放在引號之間，也能夠不放在引號之間直接寫上去，當屬性名有如下的狀況時必須加引號：

 

 

3.JavaScript內建對象

JavaScript內建對象有：Date、RegExp、Error、數組對象(Array)、Object、Function、Math等，將在最後介紹

 

 

 

3、訪問對象的屬性和方法

1.對象中的屬性

對象中的屬性能夠分爲數據屬性和存取器屬性，以下圖所示(瞭解便可)：

 

 

2.屬性操做和訪問方法

(1)對屬性可進行的操做以下所示：

實例：

 1 var person={
 2     username:'wyb',
 3     age: 21,
 4     salary: 6666,
 5     addr:'武漢',
 6     sex:'男'
 7 };
 8 
 9 // 訪問屬性
10 console.log('用戶名爲：'+person.username+"\n"+'性別'+person.sex);
11 console.log('薪水：'+person['salary']+'\n'+'地址：'+person["addr"]);
12 
13 // 若是屬性不肯定須要使用[]
14 var key='username';
15 console.log(person.key);
16 console.log(person[key]);
17 console.log(person['key']);
18 
19 
20 function PersonInfo(name,age,sex){
21     this.name=name;
22     this.age=age;
23     this.sex=sex;
24 }
25 var person1=new PersonInfo('wyb',21,'男');
26 console.log(person1.name+person['sex']);
27 
28 // 添加屬性
29 var obj={};//空對象
30 obj.username='wyb666';
31 obj.age=22;
32 obj.addr='武漢';
33 obj['test']='this is a test';
34 console.log(obj.username+'\n'+obj.age+'\n'+obj.addr+'\n'+obj['test']);
35 
36 //修改指定屬性
37 obj.username='sss';
38 obj['test']='666';
39 console.log('修改以後的名字: '+obj.username);
40 console.log(obj['test']);
41 
42 //經過delete刪除指定屬性
43 delete obj.test;
44 console.log(obj['test']);
45 delete obj.username;
46 console.log(obj['username']);
47 
48 //經過for/in遍歷屬性
49 var obj1={
50     x:1,
51     y:2,
52     test:'this is a test',
53 };
54 for(var p in obj1){
55     console.log(p+'\n');
56 }

 

(2)訪問方法

對象中方法的訪問：對象名.方法名()

另外注意若是用對象名.方法名將返回定義函數的字符串

實例：

 1 //對象中有方法
 2 var obj={
 3     username: 'sdf',
 4     age: 22,
 5     addr: '武漢',
 6     sayHi: function (){
 7         return 'say Hi';
 8     },
 9     info: function(){
10         return '用戶名：'+this.username+'\n'+'年齡：'+this.age+'\n地址：'+this.addr;
11     }
12 };
13 console.log(obj2.sayHi());
14 console.log(obj2.info());
15 console.log(obj2.info);
16 
17 function Person(username,age,sex,addr){
18     this.username=username;
19     this.age=age;
20     this.sex=sex;
21     this.addr=addr;
22     this.info=function(){
23         return this.username+this.addr;
24     }
25 }
26 var p1=new Person('zl',22,'女','上海');
27 console.log(p1.info());
28 p1.test='this is a test';
29 console.log(p1.test);
30 p1.info1=function(){
31     return 'this is a test1111';
32 };
33 console.log(p1.info1()); 

 

 

 

4、JavaScript內建對象

1.JavaScript中有哪些內建對象

JavaScript內建對象有：Date、RegExp、Error、數組對象(Array)、Object、Function、Math等，詳情看下面的介紹：

 

 

2.Object類型

(1)建立Object實例

 1 // 第一種:
 2 var person = Object()
 3 person.name = "wyb"
 4 person.age = 21
 5 
 6 
 7 // 第二種:
 8 var person = { 9 name: "xasdf", 10 age: 21 11 } 12 // 注：這裏的屬性名可使用字符串也能夠不用字符串，不用字符串的屬性名會自動轉化成字符串

上述兩種方法開發人員應該使用第二種，第二種更直接、代碼量更少

 

(2)訪問對象的屬性

 1 var person = {
 2     name: "wyb",
 3     age: 20
 4 }
 5 
 6 // 訪問對象的屬性有如下兩種方法: 方括號法或者點表示法
 7 console.log(person["name"])
 8 console.log(person.name)
 9 
10 // 訪問不存在的屬性時返回undefined
11 console.log(person["666"])
12 
13 // 通常推薦使用點表示法，可是當屬性名中包含可能致使語法錯誤的字符(空格時)
14 // 或者屬性名使用的是關鍵字或保留字，就不能使用點表示法就只能使用方括號表示法
15 eg: person["first name"] = "xxxx"

 

 

3.Array類型

(1)Array類型 -> 其餘語言中的數組，在後面咱們稱它爲JavaScript中的數組

JavaScript中的數組中的每一項能夠保存任意類型的數據，另外JavaScript數組的大小能夠動態調整便可以隨着數據的添加自動增加以容納新數據

Array類型其實就是數組，在這裏面也有詳細的介紹：http://www.javashuo.com/article/p-cymgwpas-h.html

 

(2)建立數組

 1 // 第一種: 直接使用Array構造函數建立數組
 2 var colors = new Array()        // 建立空數組
 3 var colors = new Array(20)    // 指定數組的長度
 4 var colors = new Array("red", "blue", "green")  // 建立帶初值的數組
 5 // 注: 也能夠省略上述中的new操做符
 6 
 7 // 第二種: 數組字面量表示法
 8 var colors = ["aaa", "wyb", 21]
 9 
10 注：上述兩種方法推薦使用第二種，緣由就是第二種簡單

 

(3)數組的經常使用方法

 1 // 訪問數組 用下標訪問
 2 var colors = ["red", "blue", "green"]
 3 console.log(colors[0])   // 顯示第一項
 4 
 5 // 修改數組的值
 6 colors[2] = "black"     // 修改第三項值
 7 colors[3] = "brown"   // 新增第四項     
 8 console.log(colors)     // ["red", "blue", "black", "brown"]
 9 
10 
11 // 返回數組長度
12 var names = [] 13 console.log(names.length) // 0 14 names[0] = "wyb" 15 console.log(names.length) // 1 16 names[1] = "sz" 17 console.log(names.length) // 2 18 19 20 // 利用length屬性在數組末尾添加新項 21 var colors = ["red", "blue", "green"] 22 colors[colors.length] = "xxxx" 23 colors[colors.length] = "yyyy" 24 console.log(colors) 25 26 27 // 檢測數組 isArray方法和instanceof操做符 下面的value表明待檢測的數據 28 if (value isinstanceof Array){ 29 // 對數組進行操做 30 } 31 32 is (Array.isArray(value)){ 33 // 對數組進行操做 34 }

 

(4)數組的高階用法

棧方法

JavaScript中的數組能夠像棧同樣，值的插入與刪除只在棧的頂部發生，JavaScript中提供了push和pop方法以便實現相似棧的行爲

 1 // push方法: 接受任意數量的參數，把它們逐個添加到數組末尾，並返回修改後的數組長度
 2 // pop方法: 從數組末尾移除最後一項，減小數組的length值，而後返回移除的項
 3 var colors = new Array()
 4 var count = colors.push("red", "green") 5 console.log(count) 6 7 count = colors.push("black") 8 console.log(count) 9 console.log(colors) 10 11 var item = colors.pop() 12 console.log(item) 13 console.log(colors.length)

 

隊列方法

JavaScript中的數組也能夠像隊列同樣，在列表的末端添加項而後在列表的前端移除項，使用JavaScript中的push和shift方法既能夠實現隊列

// push方法: 接受任意數量的參數，把它們逐個添加到數組末尾，並返回修改後的數組長度
// shift方法:  移除數組中第一項並返回數據，同時將數組長度減1
var colors = []
var count = colors.push("red", "green") console.log(count) count = colors.push("blue") console.log(count) console.log(colors) var item = colors.shift() console.log(item) console.log(colors.length) console.log(colors)

注：JavaScript中還有unshift方法能夠實如今數組前端添加任意個項的值並返回數組長度

 

排序方法

數組中以及有兩個用來排序的方法: reverse方法和sort方法

• reverse方法：反轉數組項的順序
• sort方法：默認升序排序

以上方法實例：

1 var values = [1, 5, 3, 9, 7]
2 values.reverse() 3 console.log(values) 4 values.sort() 5 console.log(values)

注：關於降序排序能夠先用sort升序排序而後再用reverse逆序便可

 

數組的其餘操做方法:

concat() - 基於當前數組建立新數組

var colors = ["red", "green", "blue"]
var colors2 = colors.concat("yellow", ["black", "brown"]) console.log(colors) console.log(colors2) // 輸出結果: // ["red", "green", "blue"] // ["red", "green", "blue", "yellow", "black", "brown"]

 

slice() - 切片: 基於當前數組的一項或多項建立新數組

1 var colors = ["red", "green", "blue", "yellow", "purple"]
2 var colors2 = colors.slice(1) 3 var colors3 = colors.slice(1, 4) 4 5 console.log(colors2) 6 console.log(colors3) 7 // 輸出結果: 8 // ["green", "blue", "yellow", "purple"] 9 // ["green", "blue", "yellow"]

 

splice() - 刪除、插入、替換

刪除：只需指定兩個參數便可刪除任意數量的項，指定要刪除的第一項的位置和要刪除的項數，eg：splice(0, 2)刪除數組中的開始兩項

插入：只需提供三個參數便可向數組中插入任意數量的項，指定要插入的起始位置、要刪除的項數和要插入的項，eg：splice(2, 0, "red", "green")從當前數組的位置2開始插入字符串"red"和"green"                             

替換：只需提供三個參數便可向指定位置插入任意數量的項，且同時刪除任意數量的項，指定要插入的起始位置、要刪除的項數和要插入的項，eg：splice(2, 1, "red", "green")會刪除當前數組位置爲2的項，而後再從位置2開始插入字符串"red"和"green"

 1 var colors = ["red", "green", "blue"]
 2 var removed = colors.splice(0, 1)      // 刪除第一項
 3 console.log(colors)                    // ["green", "blue"]
 4 console.log(removed)                   // ["red"]
 5 
 6 removed = colors.splice(1, 0, "yellow", "orange")  // 從位置1開始插入兩項
 7 console.log(colors)                                // ["green", "yellow", "orange", "blue"]
 8 console.log(removed)                               // []
 9 
10 removed = colors.splice(1, 1, "red", "purple")  // 插入兩項 刪除一項
11 console.log(colors)                             // ["green", "red", "purple", "orange", "blue"]
12 console.log(removed)                            // ["yellow"]

 

indexOf()和lastIndexOf()

 1 var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1]
 2 console.log(numbers.indexOf(4))          // 3
 3 console.log(numbers.lastIndexOf(4))    // 5
 4 
 5 var person = { name: "wyb"} 6 var people = [{name: "wyb"}] 7 8 var morePeople = [person] 9 10 console.log(people.indexOf(person)) // -1 11 console.log(morePeople.indexOf(person)) // 0

 

迭代方法

• every()：對數組中每一項運行給定函數，若是該函數對每一項都返回true則返回true
• filter()：對數組中每一項運行給定函數，返回該函數會返回true的項組成的項組成的數組
• some()：對數組中的每一項運行給定函數，若是該函數對任一項返回true則返回true
• forEach()：對數組中的每一項運行給定函數，這個方法沒有返回值
• map()：對數組中的每一項運行給定函數，返回每次函數調用的結果組成的數組

注：以上方法均不會修改數組中的包含的值

 

歸併方法

reduce()和reduceRight()：這兩個方法都會迭代數組中全部項，reduce方法從前日後迭代，而reduceRight方法從後往前迭代

這兩個方法都接收兩個參數：一個在每一項上調用的函數和可選的做爲歸併基礎的初始值；傳給reduce方法和reduceRight方法的函數則接受四個參數：前一個值、當前值、項的索引和數組對象

使用reduce方法執行求數組中全部值之和的操做：

1 var values = [1, 2, 3, 4, 5]
2 var sum = values.reduce(function(prev, cur, index, array){ 3 return prev + cur 4 }) 5 console.log(sum)

 

使用reduceRight方法執行求數組中全部值之和的操做：

1 var values = [1, 2, 3, 4, 5]
2 var sum = values.reduceRight(function(prev, cur, index, array){ 3 return prev + cur 4 }) 5 console.log(sum)

 

 

4.Date類型

Date類型中提供了JavaScript中提供了時間相關的操做，時間操做中分爲兩種時間：

• 時間統一時間
• 本地時間（東8區）

更多操做參見：http://www.shouce.ren/api/javascript/main.html

 1 // JavaScript中的時間對象 -> Date對象
 2 // ===
 3 // 經常使用用法以下:
 4 /*
 5 var d = new Date()
 6 
 7 d.getFullYear()
 8 年份, 2016
 9 
10 d.getMonth()
11 月份, 0-11
12 
13 d.getDate()
14 日期, 1-31
15 
16 d.getHours()
17 小時, 0-23
18 
19 d.getMinutes()
20 分鐘, 0-59
21 
22 d.getSeconds()
23 秒數, 0-59
24 
25 d.getMilliseconds()
26 毫秒, 0-999
27 
28 d.getDay()
29 星期幾, 0-6
30 */

 

 

5.RegExp類型

JavaScript中經過RegExp支持正則表達式，使用如下語法能夠建立一個正則表達式：

var expression = / pattern / flags ;

上面的pattern是模式，能夠是任意簡單或者複雜的正則表達式，flags是正則表達式的標誌用來代表正則表達式的做用，正則表達式的匹配模式支持下列3個標誌：

• g：全局模式
• i：不區分大小寫模式
• m：多行模式

關於正則表達式語法：http://www.runoob.com/regexp/regexp-syntax.html

正則表達式的做用：檢測字符串、判斷字符串是否合法 -> 登錄註冊驗證

(1)定義正則表達式

• /.../  用於定義正則表達式
• /.../g 表示全局匹配
• /.../i 表示不區分大小寫
• /.../m 表示多行匹配
• JS正則匹配時自己就是支持多行，此處多行匹配只是影響正則表達式^和$，m模式也會使用^$來匹配換行的內容
• 也可使用RegExp構造函數，它接受兩個參數：一個是要匹配的字符串模式，另外一個是可選的標誌字符串

實例：

 1 // 匹配字符串中全部"at"的實例
 2 var pattern1 = /at/g                       // 等同於 var pattern1 = new RegExp("at", "g") 3 4 // 匹配第一個"bat"或"cat"，不區分大小寫 5 var pattern2 = /[bc]at/i // 等同於 var pattern2 = new RegExp("[bc]at", "i") 6 7 // 匹配字符串中全部以"at"結尾的3個字符的組合，不區分大小寫 8 var pattern3 = /.at/gi 9 10 // 匹配第一個"[bc]at"，不區分大小寫 11 var pattern4 = /\[bc\]at/i 12 13 // 匹配字符串中全部".at"，不區分大小寫 14 var pattern5 = /\.at/gi

 

(2)匹配

JavaScript中支持正則表達式，其主要提供了兩個功能：

• test(string)     檢查字符串中是否和正則匹配
• exec(string)    獲取正則表達式匹配的內容，若是未匹配，值爲null，不然，獲取匹配成功的數組

 1 // test實例
 2 // test: 判斷字符串是否和正則匹配 3 // 判斷字符串中是否有數字: 4 rep = /\d+/ 5 rep.test("asfasfaf32") // true 6 rep.test("asfasfafadfasdfas") // false 7 8 // 判斷字符串中只能含數字 9 rep = /^\d+$/ 10 rep.test("asfasfafadfasdfas") // false 11 rep.test("34523542344") // true 12 13 14 // exec實例 15 // exec: 獲取正則表達式匹配的內容 16 // 若是未匹配，值爲null，不然，獲取匹配成功的數組。 17 rep = /\d+/; 18 str = "wyb is a 21 years old boy!23333" 19 res = rep.exec(str) 20 console.log(res) 21 22 非全局模式: 23 獲取匹配結果數組，注意：第一個元素是第一個匹配的結果，後面元素是正則子匹配（正則內容分組匹配） 24 pattern = /\bJava\w*\b/; 25 text = "JavaScript is more fun than Java or JavaBeans!"; 26 result = pattern.exec(text) 27 // 匹配到JavaScript 28 29 pattern = /\b(Java)\w*\b/; 30 text = "JavaScript is more fun than Java or JavaBeans!"; 31 result = pattern.exec(text) 32 // 匹配到JavaScript和Java 33 34 全局模式: 35 須要反覆調用exec方法，來一個一個獲取結果，直到匹配獲取結果爲null表示獲取完畢 36 pattern = /\bJava\w*\b/g; 37 text = "JavaScript is more fun than Java or JavaBeans!"; 38 result = pattern.exec(text) // 反覆執行這一句 39 40 pattern = /\b(Java)\w*\b/g; 41 text = "JavaScript is more fun than Java or JavaBeans!"; 42 result = pattern.exec(text) // 反覆執行這一句

 

(3)字符串中相關方法

1 obj.search(regexp)                   獲取索引位置，搜索整個字符串，返回匹配成功的第一個位置(g模式無效)
2 obj.match(regexp) 獲取匹配內容，搜索整個字符串，獲取找到第一個匹配內容，若是正則是g模式找到所有 3 obj.replace(regexp, replacement) 替換匹配替換，正則中有g則替換全部，不然只替換第一個匹配項， 4  $數字：匹配的第n個組內容； 5 $&：當前匹配的內容； 6  $`：位於匹配子串左側的文本； 7 $'：位於匹配子串右側的文本 8 $$：直接量$符號

 

(4)JavaScript正則實例

 

 

 

6.Math對象

詳細：http://www.w3school.com.cn/jsref/jsref_obj_math.asp

實例1-最大最小數：

1 var max = Math.max(3, 54, 33, 21)  
2 console.log(max)  // 54
3 
4 var min= Math.min(3, 54, 33, 21) 5 console.log(min) // 3 6 7 var values = [1, 2, 3, 4, 5, 6, 7, 8] 8 var max = Math.max.apply(Math, values) 9 console.log(max) // 8

 

實例2-舍入：

 1 // 向上舍入
 2 console.log(Math.ceil(25.9))  // 26
 3 console.log(Math.ceil(25.5))  // 26
 4 console.log(Math.ceil(25.1))  // 26
 5 
 6 // 向下舍入
 7 console.log(Math.floor(25.9))  // 25
 8 console.log(Math.floor(25.5))  // 25
 9 console.log(Math.floor(25.1))  // 25
10 
11 // 四捨五入
12 console.log(Math.round(25.9))  // 26
13 console.log(Math.round(25.5))  // 26
14 console.log(Math.round(25.1))  // 25

 

實例3-隨機數生成：

 1 // Math.random(): 返回一個大於等於0 小於1的一個隨機數
 2 console.log(Math.random())
 3 
 4 // 經典使用方法: 值 =Math.floor(Math.random() * 值的最大數 + 值的最小數)
 5 var num =Math.floor(Math.random() * 10 + 1) 6 console.log(num) // num是介於1和10之間(包括1和10)的一個數值 7 8 // 把上述方法封裝成一個函數來使用: 9 var selectFrom = function(lowerValue, upperValue){ 10 var choices = upperValue - lowerValue + 1 11 return Math.floor(Math.random() * choices + lowerValue) 12 } 13 14 var num = selectFrom(2, 10) 15 console.log(num) // num是介於2和10之間(包括2和10)的一個數值

補充：利用上述的函數隨機從數組中選擇元素

1 var colors = ["red", "green", "blue", "yellow", "black", "purple", "brown"]
2 var color = colors[selectFrom(0, colors.length-1)] 3 console.log(color)