（24）2021-01-06（物件object）（未完成）
阿新 • • 發佈：2021-01-08
物件object
一、物件
1、資料型別
-
基礎型別
number string boolean null undefined -
引用型別
陣列 函式 物件
2、物件
物件是指一個具體的事物。萬物皆物件。
手機：
行為：打電話 聊微信 玩和平精英 重新整理聞
特徵：顏色 螢幕解析度 攝像頭畫素
物件的行為------js物件的函式
物件的特徵------js物件的屬性
- JavaScript中的物件
JavaScript中的物件可以看做生活中具體事物的抽象。
js物件是屬性+函式的集合。
屬性：可以是基本資料型別，也可以是引用資料型別。
3、建立一個物件
（1）使用new關鍵字類建立
（2）使用字面量
3.1新增屬性
hero.name = “韓信”;
hero[“age”] = “30”;
3.2使用屬性
物件名.屬性名
3.3新增方法
物件名.屬性名=function(){
};
<script>
// 3.建立一個物件
// ( 1.)使用new關鍵字建立一個物件。
var hero = new Object();
// ( 2.)使用字面量建立一個物件
var hero = {
"heroName":"亞索",
"age":30,
skillOne:function (){
console.log("斬鋼閃");
},
skillThree:function(){
console.log("E去不復返");
}
};
// 3.1新增屬性
hero.heroName = "韓信";
hero.age = "30";
hero["age"] = "30";
// 3.2使用屬性
alert(hero.heroName);
alert(hero.age);
alert(hero["age"]);
// 3.3新增方法
hero.skillTow = function() {
console.log("對方對你使用了二技能");
alert("對方對你使用了二技能");
};
// 呼叫
hero.skillTow();
</script>
3.4遍歷屬性
for…in語法
key ：表示屬性名
屬性值：物件名[key],
（屬性值之間用逗號隔開）
格式：
<script>
for(var key in obj){
}
</script>
<script>
// 使用字面量建立一個物件
var hero = {
"heroName":"亞索",
"age":30,
skillOne:function (){
console.log("斬鋼閃");
},
skillThree:function(){
console.log("E去不復返");
}
};
// 3.4遍歷屬性
for(var key in hero){
console.log(key+"===="+hero[key]);
}
</script>
控制檯輸出結果：（函式程式碼會直接打印出來）
3.5 刪除屬性
delete 物件名.屬性名;
<script>
var hero = {
"heroName": "亞索",
"age": 30,
skillOne: function() {
console.log("斬鋼閃");
},
skillThree: function() {
console.log("E去不復返");
}
};
delete hero.age;
alert(hero.age);
</script>
刪除前：
刪除後：
二、物件的分類
1.內建物件
由ES標準定義的物件，在任何ES實現中都可以使用 （ js提供的物件）。
Math String Number Boolean Function Object
2.宿主物件
主要由（瀏覽器提供的物件）。
兩大類：BOM DOM
3.自定義物件
開發人員自己定義的物件。
三、基本型別與引用型別的區別
-
區別：
基礎資料型別的資料儲存在棧中，變數直接指向的是基礎資料型別的值。
引用資料型別的資料儲存在堆中，變數指向的是引用資料型別的地址（地址儲存在棧中）。 -
比較：
基本資料型別比較時，比較值。
而引用資料型別比較時，比較記憶體地址，如果記憶體地址相同，指向了同一個物件，則相等，否則不相等。
四、Math物件
Math物件：
提供了很多關於運算的方法。
Math.random(); 返回0-1之間的隨機數。
- 假如我們需要一個n-m之間的數。
Math.round(Math.random()*(m-n)+n)
Math.floor(Math.random() * (m - n + 1) + n);
例如：獲取一個3-6之間的隨機整數：
<script>
alert(Math.round(Math.random() * 3) + 3);
</script>
Math.round() 四捨五入
<script>
alert(Math.round(3.6));
</script>
彈出結果：4
Math.max() 返回最大值
<script>
alert(Math.max(1,5,20,15));
</script>
彈出結果：20
Math.min() 返回最小值
<script>
alert(Math.min(1,5,20,15));
</script>
彈出結果：1
Math.abs() 返回絕對值
<script>
alert(Math.abs(-5));
</script>
彈出結果：5
Math.ceil()向上取整
<script>
alert(Math.ceil(9.000000000));
</script>
彈出結果：9
<script>
alert(Math.ceil(9.000000001));
</script>
彈出結果：10
Math.floor() 向下取整
<script>
alert(Math.floor(-9.9999999));
</script>
彈出結果：-10
Math.pow(x,y) x的y次方
<script>
alert(Math.pow(2, 3));
</script>
彈出結果：8
Math.sqrt(num) 開平方
<script>
alert(Math.sqrt(9));
</script>
彈出結果：3
Math.PI = 180° 弧度。
1弧度=Math.PI/180.
練習
練習：
封裝一個函式：隨機生成一個十六進位制的顏色值，然後將結果返回。
#ff6700 #b0b0b0
0-f 放入一個數組
0-1 0-15下標
var str = “#”
<script>
//方法一
//陣列arr寫到函式裡面，直接呼叫函式即可。
// 0-9 a-f
function getColor() {
var str = "#";
var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "a", "b", "c", "d", "e", "f"];
for (var i = 0; i < 6; i++) {
str += arr[Math.floor(Math.random() * 16)];
}
return str;
}
document.write(getColor());
</script>
<script>
//方法二
//陣列arr寫到函式外面，呼叫函式時，寫入實參arr。
// 0-9 a-f
var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "a", "b", "c", "d", "e", "f"];
function color() {
var str = "#";
for (var i = 0; i <= 5; i++) {
str += arr[Math.round(Math.random() * 15)];
// str += arr[parseInt(Math.random() * 15)];
// str += arr[Math.floor(Math.random() * 16)];
}
return str;
}
document.write(color(arr));
</script>
輸出結果：#b8d1ad（隨機）
五、Date物件
5.1、建立日期物件
// 如果什麼引數都不傳，預設為當前時間。
<script>
var d = new Date();
document.write(d);
</script>
輸出結果：當前時間，實時更新。
Wed Jan 06 2021 14:38:02 GMT+0800 (中國標準時間)
星期 月 日 年 時分秒 時區\
-
建立日期物件時，可以指定日期。時分秒若不填寫，則預設為00:00:00
-
指定日期的幾種方式:
1.new Date(“2021/01/07”)
2.new Date(2020,09,30,15,33,20);
3.new Date(1576800000000);
4.new Date(“2020-12-31 12:30:20”);
【注意】 在國外，月份是從0開始的，0-11
星期是從週日開始。
指定日期：方式1：
// 呼叫建構函式 建構函式的作用：生成物件。
<script>
var d = new Date();
//建立日期物件時，可以指定日期。時分秒若不填寫，則預設為00:00:00,輸出結果顯示00:00:00。
var d = new Date("2021/01/07");
alert(d);
</script>
指定日期：方式2：
// 呼叫建構函式 建構函式的作用：生成物件。
<script>
var d = new Date();
// 年 月 日 時 分 秒
var d = new Date(2020, 09, 30, 15, 33, 20);
alert(d);
</script>
指定日期：方式3：
// 呼叫建構函式 建構函式的作用：生成物件。
<script>
var d = new Date();
// 毫秒數
var d = new Date(1576800000000);
alert(d);
</script>
指定日期：方式4：
// 呼叫建構函式 建構函式的作用：生成物件。
<script>
var d = new Date();
var d = new Date("2020-12-31 12:30:20");
alert(d);
</script>
5.2、日期物件方法
建立一個日期物件：
<script>
var d = new Date();
alert(d);
</script>
若什麼引數都不傳，可以實時生成當前時間。
-
日期物件方法：
格式：Date.parse(日期物件);例：Date.parse(d)；
功能：將日期物件轉為毫秒數。 -
獲取日期：
d.getTime() 獲取當前的毫秒數。
d.getDate() 返回日
d.getDay() 返回周幾。
d.getMonth() 獲取月份 從0開始 範圍為：0-11
d.getFullYear() 返回年
d.getHours() 獲取小時數
d.getMinutes() 獲取分鐘數
d.getSeconds() 獲取秒數
d.getMilliseconds() 獲取毫秒數
d.getTimezoneOffset() 獲取本地時間與格林威治時間的分鐘差。 -
設定日期：
d.setDate() 設定日期的天數。
d.setMonth() 設定月份
d.setFullYear() 設定日期的年份
d.setHours() 設定小時數
d.setMinutes() 設定分鐘數
d.setSeconds() 設定秒數
d.setMilliseconds() 設定毫秒數
練習
1、更改當前時間為三月份。（月份數字為2）
<script>
var d = new Date();
var d2 = d.setMonth(2);
alert(d2);
</script>
2、把當前時間轉換為毫秒數，也可以把毫秒數轉化為時間。
<script>
var d = new Date();
//把當前時間轉換為毫秒數
var result = Date.parse(d);
alert(result);
//把毫秒數轉化為時間
var d2 = new Date(1609916867000);
alert(d2);
</script>
3、將當前時間以（yyyy-MM-DD hh:mm:ss）這個格式輸出到頁面上。
2021-01-06 19:42:8
<script>
//建立一個日期物件，不傳任何引數，生成當前時間
var d = new Date();
//獲取
var year = d.getFullYear();
var month = d.getMonth() + 1;
var date = d.getDate();
var hours = d.getHours();
var minutes = d.getMinutes();
var seconds = d.getSeconds();
//運用到三元運算子判斷、字串拼接
var str = year + "-" + (month < 10 ? ("0" + month) : month) + "-" +
(date < 10 ? ("0" + date) : date) + " " + hours + ":" + minutes + ":" + seconds;
document.write(str);
</script>
輸出結果：2021-01-06 19:42:8
5.3、日期格式化
（1）、 d.toDateString() ，以特定格式顯示： 星期幾 月 日 年
<script>
var d = new Date();
// 以特定格式顯示： 星期幾 月 日 年
alert(d.toDateString());
</script>
（2）、d.toTimeString()， 以特定格式顯示： 時:分:秒 時區
<script>
var d = new Date();
//以特定格式顯示： 時:分:秒 時區
alert(d.toTimeString());
</script>
（3）、d.toLocaleDateString()，以特定格式顯示： 年/月/日
<script>
var d = new Date();
//以特定格式顯示： 年/月/日
alert(d.toLocaleDateString());
</script>
（4）、d.toLocaleTimeString()，以特定格式顯示： 上午/下午 時:分:秒
<script>
var d = new Date();
//以特定格式顯示： 上午/下午 時:分:秒
alert(d.toLocaleTimeString());
</script>
（5）、d.toUTCString()，顯示格林威治時間
<script>
var d = new Date();
//以特定格式顯示： 顯示格林威治時間
alert(d.toUTCString());
</script>
練習
1、顯示當前時間格式為：2021年1月6日 星期三 16:48:50
<script>
// 定義函式
function showTime() {
var d = new Date();
// 獲取年
var year = d.getFullYear();
// 獲取月
var month = d.getMonth() + 1;
// 獲取日
var date = d.getDate();
// 小時數
var hours = d.getHours();
// 獲取分鐘數
var m = d.getMinutes();
// 獲取秒數
var seconds = d.getSeconds();
// 獲取星期幾
var day = d.getDay();
var str = year + "年" + doubleNum(month) + "月" + doubleNum(date) +
"日 星期" + numToChinese(day) + " " + hours + ":" + m + ":" + seconds;
return str;
}
// 呼叫函式
document.write(showTime());
// 給小於10的前面補0
function doubleNum(n) {
if (n < 10) {
return "0" + n;
} else {
return n;
}
}
//星期幾： 數字轉中文
function numToChinese(num) {
var arr = ["日", "一", "二", "三", "四", "五", "六"];
return arr[num];
}
</script>
2.輸入n,輸出n天后的時間。
<script>
function afterDay(n) {
// 獲取當前時間。
var d = new Date();
d.setDate(d.getDate() + n);
return d;
}
document.write(afterDay(26));
</script>
3.輸入n,輸出n天后的時間。顯示時間格式為：2021年1月6日 星期三 16:48:50
<script>
// 定義函式
function showTime(d) {
// var d = new Date(); //要註釋掉
// 獲取年
var year = d.getFullYear();
// 獲取月
var month = d.getMonth() + 1;
// 獲取日
var date = d.getDate();
// 小時數
var hours = d.getHours();
// 獲取分鐘數
var m = d.getMinutes();
// 獲取秒數
var seconds = d.getSeconds();
// 獲取星期幾
var day = d.getDay();
var str = year + "年" + doubleNum(month) + "月" + doubleNum(date) + "日 星期" + numToChinese(day) + " " + hours + ":" + m + ":" + seconds;
return str;
}
// 呼叫函式
// document.write(showTime());
// 給小於10的前面補0
function doubleNum(n) {
if (n < 10) {
return "0" + n;
} else {
return n;
}
}
//星期幾： 數字轉中文
function numToChinese(num) {
var arr = ["日", "一", "二", "三", "四", "五", "六"];
return arr[num];
}
// 1.輸入n,輸出n天后的時間。
function afterDay(n) {
// 獲取當前時間。
var d = new Date();
d.setDate(d.getDate() + n);
return d;
}
// document.write(afterDay(26));
document.write(showTime(afterDay(26))); //時間會自動更新到下月。
</script>
4.獲取兩個日期之間的天數.