主要內容:
對象的創建鍵名和鍵值對象的引用Math對象Date對象學習目標:
為什麼要使用對象?
因為對象能幫我們解決一些複雜的問題
一、對象概述
在JavaScript 中的所有事物都是對象:字符串(new String)、布爾(new Boolean())、數值(Number)、數組(Array)、函數(Function)等。
1.1 什麼是類
類:就是具有相同的屬性和方法的集合。人類,動物類,家電類等。
1.2 什麼是對象
對象:就類中的一個具體的實物。人類-具體某一個人(張三丰)。
動物類-(一個具體的動物-東北虎),家電類-(具體一個比如說電視。)
js 中我們包含哪些對象呢?
內置對象(本地對象):Math對象,Number對象,Date對象等,系統給我們提供好的,我們拿過來用就可以了。宿主對象:dom(文檔對象模型),bom(瀏覽器對象)。自定義對象:我們自己定義和開發的對象。二、對象的創建(重點)
2.1怎樣創建對象
語法:var obj = { key : value };
上面代碼定義了一個對象,它被賦值給變量obj。
key是「鍵名」
value是「鍵值」
ps:如果對象內部包含多個鍵值對,每個鍵值對之間用逗號分隔。最後一個鍵值對末尾不用加逗號
var obj = {key1:value1,key2:value2};
2.2 對象的構成
對象是JavaScript的核心概念,也是最重要的數據類型。JavaScript的所有數據都可以被視為對象。此外,JavaScript 允許自定義對象。
對象(object)是大括號定義的無序的數據集合,由鍵值對構成,鍵名,鍵名與鍵值之間用冒號分隔,大括號末尾要使用分號表示對象定義結束。
2.3 創建對象
a.直接使用大括號創建對象
b.使用new命令生成一個Object對象的實例
c.使用Object.create方法創建對象
var obj1 = {};
var obj2 = new Object();
var obj3 = Object.create(null);
Object是在javascript中一個被我們經常使用的類型,而且JS中的所有對象都是繼承自Object對象的
三、對象的鍵名和鍵值(重點)
3.1關於鍵名
鍵名也被稱為屬性(property),對象的所有屬性都是字符串,所以加不加引號都可以。
因此上面的代碼也可以寫成下面這樣:
var obj = { 'key': value };
但是,如果屬性不符合標識符的條件(比如第一個字符為數字,或者含有空格或運算符),則必須加上引號。
var obj = {
'1p': "Hello World",
'h w': "Hello World",
'p+q': "Hello World"
};
上面對象的三個屬性,都不符合標識名的條件,所以必須加上引號。
ps:JavaScript的保留字可以不加引號直接當作對象的屬性。
3.2關於鍵值
鍵值是屬性所對應的具體的值。javascript的對象的鍵值可以是任何數據類型。
var frank = {
name: "Frankenstein Add",
age: 18,
sex: "male"
ability: eat();//eat()表示函數
};
ps:如果一個屬性的值(ability)為函數,通常把這個屬性稱為「方法」。
四、對象的引用(重點)
4.1 對象屬性的讀取和設置
讀取對象的屬性,有兩種方法:
一種是使用點運算符(.),還有一種是使用方括號運算符([])。
需要注意的是,使用方括號讀取對象屬性的時候需要加引號
點運算符用來為對象的屬性寫入值。
[]的使用總結說明:
1.可以使用一個變量存儲對象的屬性,.是不能使用的
2.可以使用純數字的方式來訪問,.是不能使用的
.的使用的總結說明:
1.點(.)運算符可以將js的關鍵字(var,if等)作為屬性來訪問。
4.2 對象屬性的操作
【Object.keys()】獲取對象所有屬性
【Object.values()】獲取對象所有的值
【Object.entries()】獲取對象所有的鍵值對
【delete】刪除一個屬性
【in】檢查對象是否包含一個屬性(true,false)
【for in】遍歷對象所有屬性
【for of】遍歷對象所有屬性
4.3 對象的遍歷
4.3.1 for..in的遍歷
4.3.2 for...of的遍歷
4.4 實例:對象排序
回想一下,數組的排序用什麼方法。
sort(function(a,b){
return a - b;
});
按年齡進行排序:
如果年齡相等,按薪水進行排序
4.5 對象中求工資的最大值
五、Math對象
5.1 Math對象的介紹
Math對象是數學對象
5.2 Math對象的屬性和方法
Math對象的屬性:PI(圓周率)
Math對象的方法:
random():隨機函數(0-1)
floor():向下取整
ceil():向上取整
round():四省五入取整
pow():求一個數的冪數
max():求最大值
min():求最小值
abs():絕對值
sqrt():求平方根
5.3 實例:獲取一個範圍的隨機數
Math.random():返回0-1之間的隨機數
公式:求一個數的範圍
max:最大數
min:最小數
parseInt((max-min+1)*Math.random()+min)
5.4 實例:單擊隨機生成四位數字驗證碼
六、Date對象
6.1 Date對象的介紹
Date對象是JavaScript提供的日期和時間的操作接口。
在JavaScript內部,所有日期和時間都儲存為一個整數。
這個整數是當前時間距離1970年1月1日00:00:00的毫秒數,正負的範圍為基準時間前後各1億天
同Math對象一樣,javascript也為Date對象提供了很多內置的方法。
6.2 Date函數
Date對象是一個構造函數,對它使用new命令,會返回一個Date對象的實例。
一些其他合法的日期字符串寫法
new Date(datestring)
new Date("2013-2-15")
new Date('2013/2/15')
new Date("2013-FEB-15")
new Date("FEB, 15, 2013")
new Date("FEB 15, 2013")
new Date("Feberuary, 15, 2013")
new Date("Feberuary 15, 2013")
new Date("15, Feberuary, 2013")
Sun Jan 06 2013 00:00:00 GMT+0800 (中國標準時間)
6.3 Date的方法
getTime():獲取距離1970年1月1日的毫秒數
getYear():獲取年份(距離1900的年數)
getFullYear():獲取全年(4位數)
getMonth():獲取月份(0-11)
getDate():獲取日期
getDay():獲取星期幾(0-6),0:星期日,6:星期六
getHours():獲取小時(0-23)
getMinutes():獲取分鐘(0-59)
getSeconds():獲取秒數(0-59)
toLocaleString():獲取當地的日期和時間
toLocaleDateString():獲取當地的日期
toLocaleTimeString():獲取當地的時間
6.4顯示當前的日期時間和星期
6.5 顯示距離新中國成立多少年
6.6 實例:產品剩餘幾天幾小時幾分幾秒
3p理論:persist,practise,patient
分析一下:
setInterval(),Date(),innerHTML
Var date = new date();
Var fdate = new date(「2019-9-13」);
Time = fdate - date;//獲取的毫秒數
6.7 實例:圖書商城展示(數組和對象)
分析一下:
獲取相應的元素的值,通過添加按鈕的單擊事件,將文本框元素的值添加到數組中。
圖書商城展示(對象)