1. 程式人生 > 其它 >物件分類、Math、Date物件、日期格式化

物件分類、Math、Date物件、日期格式化

技術標籤:JavaScripthtml5

物件

  • 基礎型別
    number 、string、 boolean、 null 、undefined
  • 引用型別
    陣列、 函式 、物件

物件是指一個具體的事物。萬物皆物件。

一個具體的事物一般都會有行為和特徵。

  • 物件的行為------js物件的函式
  • 物件的特徵------js物件的屬性

eg: 手機:
行為:打電話 聊微信 玩和平精英 重新整理聞
特徵:顏色 螢幕解析度 攝像頭畫素

JavaScript中的物件

  • JavaScript中的物件可以看做生活中具體事物的抽象。
  • js物件是屬性+函式的集合。
  • 屬性:可以是基本資料型別,也可以是引用資料型別。

建立一個物件

1.使用new關鍵字類建立
2.使用字面量
eg:

    <script>
        // 使用new關鍵字類新建一個物件。
        var hero = new Object();
        // 使用字面量新建一個物件。
        var hero = {

        };
    </script>

新增屬性

eg:

    <script>
        // 使用new關鍵字類新建一個物件。
        var hero = new Object();
        // 新增屬性
        hero.heroName =
"韓信"; hero["age"] = "30"; // 使用屬性 alert(hero.heroName); alert(hero["age"]); </script>

使用屬性

物件名.屬性名

    <script>
        // 使用new關鍵字類新建一個物件。
        // 使用new關鍵字類新建一個物件。
        var hero = new Object();
        // 新增屬性
        hero.
heroName = "韓信"; hero["age"] = "30"; // 使用屬性 alert(hero.heroName); alert(hero["age"]); </script>

新增方法

物件名.屬性名=function(){
函式體
};
eg:


    <script>
        // 使用new關鍵字類新建一個物件。
        var hero = new Object();
        // 新增屬性
        hero.heroName = "韓信";
        hero["age"] = "30";
        // 使用屬性
        alert(hero.heroName);
        alert(hero["age"]);
        // 新增方法
        hero.skillTwo = function () {
            console.log("對方對你使用了二技能");
        };
        hero.skillTwo();
    </script>

物件的分類

1.內建物件

  • 由ES標準定義的物件,在任何ES實現中都可以使用 ( js提供的對)象
  • Math Date String Number Boolean Function Object

2.宿主物件

  • 主要有瀏覽器提供的物件。
  • BOM DOM

3.自定義物件
開發人員自己定義的物件。

基本型別與引用型別的區別

區別:

  • 基礎資料型別的資料儲存在棧中,變數直接指向的是基礎資料型別的值。
  • 引用資料型別的資料儲存在堆中,變數指向的是引用資料型別的地址。

比較:

  • 基本資料型別比較時,比較值。
  • 而引用資料型別比較時,比較記憶體地址,如果記憶體地址相同,指向了同一個物件,則相等,否則不相等。
    eg:
    <script>
        var hero = {
            "hName": "亞索",
            "R": "狂風絕息斬"
        }
        var hero2 = hero;
        hero.R = "阿里亞克痛";
        alert(hero.R);
        alert(hero2.R);
        alert(hero == hero2);
    </script>

eg:

    <script>
        var hero = {
            "hName": "亞索",
            "R": "狂風絕息斬"
        }
        var hero2 = {
            "hName": "亞索",
            "R": "狂風絕息斬"
        }
        hero.R = "阿里亞克痛";
        alert(hero.R);
        alert(hero2.R);
        alert(hero == hero2);
    </script>

Math

Math物件 : 提供了很多關於運算的方法。

Math.random()

Math.random(); 返回0-1之間的隨機數。

    <script>
        // 返回0-1之間的隨機數
        alert(Math.random());
        // 返回3-7之間的隨機數(整數)
        alert(parseInt(Math.random() * 4) + 3);
    </script>

假如我們需要一個n-m之間的數。
Math.round(Math.random()*(m-n))+n

    <script>
        //  返回3-6之間的隨機數。
        alert(Math.round(Math.random() * 3) + 3);
    </script>

Math.round() 四捨五入

    <script>
        //  四捨五入
        alert(Math.round(6.1));
    </script>

Math.max() 返回最大值

    <script>
        //  返回最大值
        alert(Math.max(11, 55, 7, 78, ));
    </script>

Math.min() 返回最小值

    <script>
        //  返回最小值
        alert(Math.min(11, 55, 7, 78));
    </script>

Math.abs() 返回絕對值

    <script>
        //  返回絕對值
        alert(Math.abs(-254));
    </script>

Math.ceil() 向上取整

    <script>
        //  向上取整
        alert(Math.ceil(5.5));
        alert(Math.ceil(-5.5));
    </script>

Math.floor() 向下取值

    <script>
        // 向下取值
        alert(Math.floor(5.5));
        alert(Math.floor(-5.5));
    </script>

Math.pow(x,y) x的y次方

    <script>
        // x的y次方
        alert(Math.pow(2, 3));
    </script>

Math.sqrt(num) 開平方

    <script>
        // 開平方
        alert(Math.sqrt(9));
    </script>

Math.PI弧度

  Math.PI = 180°  弧度。
  1弧度=Math.PI/180.

Date物件

1.建立日期物件

    <script>
        //  呼叫建構函式 建構函式的作用:生成物件。
        var d = new Date();
        alert(d);
    </script>

在這裡插入圖片描述

  • Wed Jan 06 2021 15:28:12 GMT+0800 (中國標準時間)
    星期 月 日 年 時 分 秒 時區
    <script>
        //  呼叫建構函式 建構函式的作用:生成物件。
        var d = new Date("2021/01/07");
        alert(d);
    </script>

在這裡插入圖片描述

    <script>
        //  呼叫建構函式 建構函式的作用:生成物件。
        var d = new Date(2020, 09, 30, 15, 33, 20);
        alert(d);
    </script>

在這裡插入圖片描述

  • 建立日期物件是,可以指定日期。時分秒若不填寫,則預設為00:00:00
    -在國外,月份是從0開始的,0-11
    eg:
    <script>
        var d = new Date(1576800000000);
        alert(d);
    </script>

在這裡插入圖片描述

日期物件方法

格式:Date.parse(日期物件);
功能:將日期物件轉為毫秒數。

    <script>
        // 如果什麼引數都不傳,預設為當前時間。
        var d = new Date();
        var result = Date.parse(d);
        alert(d);
        alert(result);
    </script>

獲取日期

    d.getFullYear() 返回年
    d.getMonth()  獲取月份 從0開始  範圍為:0-11
    d.getDate()  返回日
    d.getDay()  返回周幾。
    d.getHours() 獲取小時數
    d.getMinutes() 獲取分鐘數
    d.getSeconds() 獲取秒數
    d.getMilliseconds() 獲取毫秒數
    d.getTimezoneOffset()  獲取本地時間與格林威治時間的分鐘差。
    d.getTime()  獲取當前的毫秒數。
    <script>
        var d = new Date();
        alert(d);
        alert(d.getFullYear());
        alert(d.getMonth() + 1);
        alert(d.getDate());
        alert(d.getDay());
        alert(d.getHours());
        alert(d.getMinutes());
        alert(d.getSeconds());
        alert(d.getMilliseconds());
        alert(d.getTime());
        alert(d.getTimezoneOffset());
    </script>

設定日期

    d.setFullYear() 設定年
    d.setMonth() 設定月份 從0開始 範圍為: 0 - 11
    d.setDate() 設定日
    d.setDay() 設定周幾。
    d.setHours() 設定小時數
    d.setMinutes() 設定分鐘數
    d.setSeconds() 設定秒數
    d.setMilliseconds() 設定毫秒數
    d.setTime() 設定當前的毫秒數。
   d.setTimezoneOffset() 設定本地時間與格林威治時間的分鐘差。

日期格式化

  • 以特定格式顯示 :星期幾 月 日 年
    <script>
        var d = new Date();
        // 以特定格式顯示 星期幾 月 日 年
        alert(d.toDateString());
    </script>

在這裡插入圖片描述

  • 以特定格式顯示 :時分秒 時區
    <script>
        var d = new Date();
        alert(d.toTimeString()); 
    </script>

在這裡插入圖片描述

  • 以特定格式顯示 : 年 月 日
    <script>
        var d = new Date();
        alert(d.toLocaleDateString()); //2021/1/6
    </script>

在這裡插入圖片描述

  • 以特定格式顯示 : 下午時:分:秒
 <script>
        var d = new Date();
        alert(d.toLocaleTimeString()); //下午4:34:58
    </script>

在這裡插入圖片描述

  • 顯示格林威治時間: 星期, 日 月 年 時:分:秒
    <script>
        var d = new Date();
        alert(d.toUTCString());
    </script>

在這裡插入圖片描述