對象

JS中的對象是屬性和行為的結合體，其中屬性是對象的靜態特征，行為又稱方法，是對象的動態特征。

JavaScript中的對象主要分為三大類：

• 內置對象
  由ES標準中定義的對象 在任何的ES的實現中都可以使用，比如Math String Number Boolean Function Object
• 宿主對象
  由JS的運行環境提供的對象，目前來講主要是瀏覽器提供的對象，比如BOM DOM
• 自定義對象
  由開發人員自己創建的對象

對象的定義

定義非空對象

 // 非空對象： var 對象名 = { 屬性名： 值, ... 方法名: function([參數]){ 方法體語句; } ... } 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

 var p1 = { color: '黑色',//給對象添加屬性 weight: '188g',//屬性之間用逗號隔開 screenSize: 6.5, call: function(name){//給對象添加方法 console.log("打出電話："+name); }, sendMassage: function(msg){ console.log("發出的信息是："+msg); }, playVideo: function(){ console.log("播放視頻"); }, playMusic: function(){ console.log("播放音樂"); } } console.log("手機顏色:"+p1['color']);//也可以使用 對象['屬性']來輸出屬性值 console.log("手機重量:"+p1.weight); console.log("屏幕尺寸:"+p1.screenSize); p1.call("張三");//調用對象的發方法 p1["sendMassage"]("helo"); p1.playVideo(); p1.playMusic(); console.log(p1); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

    

        25
    

使用new Object()創建對象

 var p = new Object(); // 創建一個空對象p 


    

        1
    

 p2.name = '劉備'; p2.sex = '男'; p2.age = 32; p2.sayHello = function(){ console.log('Hello'); } p2.sayHello();//調用對象的方法 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

可以使用構造函數來創建對象：
語法： new 構造函數名( )

 function Student(name,sex,age){ this.name = name;//這里的this指向的是構造函數新創建的對象 this.sex = sex; this.age = age; this.show = function(){ console.log("姓名："+this.name) console.log("姓別："+this.sex) console.log("年齡："+this.age) } } var s1 = new Student('喬峰','男',28);//s1為構造函數創建的新對象 即實例 s1.show(); var s2 = new Student('段譽','男',23); s2.show(); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

注意："構造函數"可以有參數，也可以沒有參數，如果沒有參數小括號可以省略

遍歷對象的成員

遍歷對象的屬性和方法：使用for…in循環

 for(var 變量名 in 對象名){ 循環語句 } 


    

        1
    

    

        2
    

    

        3
    

 function Student(name,sex,age){ this.name = name; this.sex = sex; this.age = age; this.show = function(){ console.log("姓名："+this.name) console.log("姓別："+this.sex) console.log("年齡："+this.age) } } // s2是要遍歷的對象 var s2 = new Student('段譽','男',23); for(var k in s2){ console.log(k);//依次輸出 name sex age show() console.log(s2[k]);//依次輸出 段譽 男 23  } 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

in運算符
判斷成員(屬性)在對象中是否存在，存在返回true;不存在返回false。

JS內置對象

JavaScript提供了很多常用的內置對象，包括數學對象Math、日期對象Date、數組對象Array以及字符串對象String等。

Math對象

Math對象：用來對數字進行與數學相關的運算，不需要實例化對象，可以直接使用其靜態屬性和靜態方法.

 Math對象:不需要實例化
            Math.PI:算數常量PI Math.abs(x):返回x的絕對值
            Math.max(args...):返回最大數
            Math.min(args...):返回最小數
            Math.pow(x,y):返回x的y次方
            Math.sqrt(x):返回x的算術平方根
            Math.random():返回0.0到1.0之間的隨機數
            Math.round(x):返回最接近x的整數
            Math.floor(x):返回一個小于等于x 并且與它最接近的整數
            Math.ceil(x):返回一個大于等于x 并且與它最接近的整數 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

Date對象

Date對象：需要使用new Date()實例化對象才能使用，創建一個對象 Date()是一個構造函數，可以給該構造函數傳遞參數生成一個日期對象。

 // 1.創建一個Date對象 沒有參數 var date1 = new Date(); console.log(date1); // 2.傳入年 月 日 時 分 秒 創建一個指定日期時間的Date對象 // 月份是 0-11 var date2 = new Date(2021,4,22,10,17,55); console.log(date2); // 3.傳入一個日期和時間字符串創建一個Date對象 var date3 = new Date("2021-5-22 18:19:25"); console.log(date3); console.log(date3.getMonth())//4 console.log(date3.getTime())//表示Date對象距離1970年1月1日午夜之間的毫秒數 console.log(date1.toLocaleDateString())//2021/6/14 console.log(date1.toLocaleString())//2021/6/14 下午11:17:36 console.log(date1.getFullYear())//2021 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

數組對象

數組：是一些類型相同的數據的集合，它和普通的對象功能類似，也是用來存儲一些值，數組是使用數字來作為索引操作內部的元素。
數組的創建

• 使用字面量

 var arr=[]//創建一個空數組 


    

        1
    

• 使用new Array創建

var arr = new Array();//定義一個空數組 


    

        1
    

判斷一個對象是不是數組的兩種方法：

• isArray(對象名)
• instanceof: 對象名 instanceof Array

 var arr = []; var obj = {}; console.log(Array.isArray(arr));//true console.log(Array.isArray(obj));//false console.log(arr instanceof Array);//trrue 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

關于數組的其他方法之前的文章要有詳細介紹，這里不多做解釋。

String對象

String對象:字符串對象，必須使用new String()來創建

字符串常用方法

 - charAt(n) 返回n位置上的字符串 - concat(s1,s2,...) 連接多個字符串 - charCodeAt(n) 返回n位置上的ASCII碼 - split('分隔符') 將字符串按給定的分隔符 轉換成字符串數組 - substr(start,length) 從start開始提取length個字符構成一個新串 - substring(from,to) 提取from和to之間的字符串構成一個新串 - toLowerCase() 將串中的大寫字符轉換成小寫 不影響原字符串 返回一個新字符串 - toUpperCase() 將串中的所有小寫轉換成大寫 不影響原字符串 返回一個新字符串 - replace(str1,str2) 使用str2替換字符串中的str1 返回替換結果 不影響原字符串 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

字符串對象練習

 // 輸入一個由字母組成的字符串,統計串中每個字母出現的次數 var str = 'abBSdXbdea'; var lower = new Array(26);// 存放26個小寫字母各自出現的次數 var upper = new Array(26);// 存放26個大寫字母各自出現的次數 // 初始化兩個數組 for(var i=0;i<lower.length;i++){ lower[i] = 0 upper[i] = 0 } for(var k=0;k<str.length;k++){ if(str.charAt(k)>='a' && str.charAt(k)<='z'){ lower[str.charCodeAt(k)-97]++ }else if(str.charAt(k)>='A' && str.charAt(k)<='Z'){ upper[str.charCodeAt(k)-65]++ } } console.log(lower); console.log(upper); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

 /* 輸入一個十進制整數和一個數制（2、8、16）將該十進制整數轉換成
        對應的數值格式輸出
            取余法：
               m=15 k=8
               m%k 將余數存放在數組中
        */ var m = parseInt(prompt('請輸入一個整數：')); var k = parseInt(prompt('請輸入一個數制(2~16)')); var result = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F']; var arr = new Array();//存放數制轉換的結果 var i = 0; while(m!=0){//對m進行數制轉換 將余數放在arr數組里 arr[i] = m%k; m = parseInt(m/k); i++; } var str = ''; if(k==8){ str = '0'; }else if(k==16){ str = '0x'; } for(var i=arr.length-1;i>=0;i--){ str += result[arr[i]]; } console.log('轉換的結果為：'+str); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

    

        25
    

    

        26
    

    

        27
    

值類型和引用類型

值類型: 簡單的數據類型(字符串,數值型,布爾型,undefined,null)
引用類型: 復雜數據類型(對象) 變量中保存的是引用的地址

注意： 引用類型的特點是，變量中保存的僅僅是一個引用的地址，當對變量進行賦值時，并不是將對象復制了一份，而是將兩個變量指向了同一個對象的引用。

下面對內存中的棧和堆進行分析
棧(stack)：會自動分配內存空間，會自動釋放，簡單數據類型存放到棧里面。
堆(heap)：動態分配的內存，大小不定也不會自動釋放，復雜數據類型存放到堆里面。

由此可見存放在堆內存中的對象，變量實際保存的是一個指針，這個指針指向另一個位置，通過這個指針來尋找堆中存儲的對象的屬性和值，并且每個空間大小不一樣，要根據情況開進行特定的分配。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

轉自csdn博客

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務