JavaScript對(duì)象、內(nèi)置對(duì)象、值類型和引用類型詳解

2021-7-1    前端達(dá)人

對(duì)象

JS中的對(duì)象是屬性和行為的結(jié)合體，其中屬性是對(duì)象的靜態(tài)特征，行為又稱方法，是對(duì)象的動(dòng)態(tài)特征。

JavaScript中的對(duì)象主要分為三大類：

  • 內(nèi)置對(duì)象
    由ES標(biāo)準(zhǔn)中定義的對(duì)象 在任何的ES的實(shí)現(xiàn)中都可以使用，比如Math String Number Boolean Function Object
  • 宿主對(duì)象
    由JS的運(yùn)行環(huán)境提供的對(duì)象，目前來講主要是瀏覽器提供的對(duì)象，比如BOM DOM
  • 自定義對(duì)象
    由開發(fā)人員自己創(chuàng)建的對(duì)象

對(duì)象的定義

定義非空對(duì)象 

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

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 




 var p1 = { color: '黑色',//給對(duì)象添加屬性 weight: '188g',//屬性之間用逗號(hào)隔開 screenSize: 6.5, call: function(name){//給對(duì)象添加方法 console.log("打出電話："+name); }, sendMassage: function(msg){ console.log("發(fā)出的信息是："+msg); }, playVideo: function(){ console.log("播放視頻"); }, playMusic: function(){ console.log("播放音樂"); } } console.log("手機(jī)顏色:"+p1['color']);//也可以使用 對(duì)象['屬性']來輸出屬性值 console.log("手機(jī)重量:"+p1.weight); console.log("屏幕尺寸:"+p1.screenSize); p1.call("張三");//調(diào)用對(duì)象的發(fā)方法 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()創(chuàng)建對(duì)象 

 var p = new Object(); // 創(chuàng)建一個(gè)空對(duì)象p 

    

    
  • 
        1
    
    • 




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

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    •

可以使用構(gòu)造函數(shù)來創(chuàng)建對(duì)象：
語(yǔ)法： new 構(gòu)造函數(shù)名( ) 

 function Student(name,sex,age){ this.name = name;//這里的this指向的是構(gòu)造函數(shù)新創(chuàng)建的對(duì)象 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為構(gòu)造函數(shù)創(chuàng)建的新對(duì)象 即實(shí)例 s1.show(); var s2 = new Student('段譽(yù)','男',23); s2.show(); 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    •

注意："構(gòu)造函數(shù)"可以有參數(shù)，也可以沒有參數(shù)，如果沒有參數(shù)小括號(hào)可以省略

遍歷對(duì)象的成員

遍歷對(duì)象的屬性和方法：使用for…in循環(huán) 

 for(var 變量名 in 對(duì)象名){ 循環(huán)語(yǔ)句 } 

    

    
  • 
        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是要遍歷的對(duì)象 var s2 = new Student('段譽(yù)','男',23); for(var k in s2){ console.log(k);//依次輸出 name sex age show() console.log(s2[k]);//依次輸出 段譽(yù) 男 23  } 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    •

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

JS內(nèi)置對(duì)象

JavaScript提供了很多常用的內(nèi)置對(duì)象，包括數(shù)學(xué)對(duì)象Math、日期對(duì)象Date、數(shù)組對(duì)象Array以及字符串對(duì)象String等。

Math對(duì)象

Math對(duì)象：用來對(duì)數(shù)字進(jìn)行與數(shù)學(xué)相關(guān)的運(yùn)算，不需要實(shí)例化對(duì)象，可以直接使用其靜態(tài)屬性和靜態(tài)方法. 

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

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    •

Date對(duì)象

Date對(duì)象：需要使用new Date()實(shí)例化對(duì)象才能使用，創(chuàng)建一個(gè)對(duì)象 Date()是一個(gè)構(gòu)造函數(shù)，可以給該構(gòu)造函數(shù)傳遞參數(shù)生成一個(gè)日期對(duì)象。
在這里插入圖片描述
在這里插入圖片描述 

 // 1.創(chuàng)建一個(gè)Date對(duì)象 沒有參數(shù) var date1 = new Date(); console.log(date1); // 2.傳入年 月 日 時(shí) 分 秒 創(chuàng)建一個(gè)指定日期時(shí)間的Date對(duì)象 // 月份是 0-11 var date2 = new Date(2021,4,22,10,17,55); console.log(date2); // 3.傳入一個(gè)日期和時(shí)間字符串創(chuàng)建一個(gè)Date對(duì)象 var date3 = new Date("2021-5-22 18:19:25"); console.log(date3); console.log(date3.getMonth())//4 console.log(date3.getTime())//表示Date對(duì)象距離1970年1月1日午夜之間的毫秒數(shù) 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
    
    •

數(shù)組對(duì)象

數(shù)組：是一些類型相同的數(shù)據(jù)的集合，它和普通的對(duì)象功能類似，也是用來存儲(chǔ)一些值，數(shù)組是使用數(shù)字來作為索引操作內(nèi)部的元素。
數(shù)組的創(chuàng)建

  • 使用字面量 
 var arr=[]//創(chuàng)建一個(gè)空數(shù)組 

    

    
  • 
        1
    
    •
  • 使用new Array創(chuàng)建 
var arr = new Array();//定義一個(gè)空數(shù)組 

    

    
  • 
        1
    
    •

判斷一個(gè)對(duì)象是不是數(shù)組的兩種方法：

  • isArray(對(duì)象名)
  • instanceof: 對(duì)象名 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
    
    •

在這里插入圖片描述
關(guān)于數(shù)組的其他方法之前的文章要有詳細(xì)介紹，這里不多做解釋。

String對(duì)象

String對(duì)象:字符串對(duì)象，必須使用new String()來創(chuàng)建

字符串常用方法 

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

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    •

字符串對(duì)象練習(xí) 

 // 輸入一個(gè)由字母組成的字符串,統(tǒng)計(jì)串中每個(gè)字母出現(xiàn)的次數(shù) var str = 'abBSdXbdea'; var lower = new Array(26);// 存放26個(gè)小寫字母各自出現(xiàn)的次數(shù) var upper = new Array(26);// 存放26個(gè)大寫字母各自出現(xiàn)的次數(shù) // 初始化兩個(gè)數(shù)組 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
    
    • 




 /* 輸入一個(gè)十進(jìn)制整數(shù)和一個(gè)數(shù)制（2、8、16）將該十進(jìn)制整數(shù)轉(zhuǎn)換成
        對(duì)應(yīng)的數(shù)值格式輸出
            取余法：
               m=15 k=8
               m%k 將余數(shù)存放在數(shù)組中
        */ var m = parseInt(prompt('請(qǐng)輸入一個(gè)整數(shù)：')); var k = parseInt(prompt('請(qǐng)輸入一個(gè)數(shù)制(2~16)')); var result = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F']; var arr = new Array();//存放數(shù)制轉(zhuǎn)換的結(jié)果 var i = 0; while(m!=0){//對(duì)m進(jìn)行數(shù)制轉(zhuǎn)換 將余數(shù)放在arr數(shù)組里 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('轉(zhuǎn)換的結(jié)果為：'+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
    
    •

值類型和引用類型

值類型: 簡(jiǎn)單的數(shù)據(jù)類型(字符串,數(shù)值型,布爾型,undefined,null)
引用類型: 復(fù)雜數(shù)據(jù)類型(對(duì)象) 變量中保存的是引用的地址

注意： 引用類型的特點(diǎn)是，變量中保存的僅僅是一個(gè)引用的地址，當(dāng)對(duì)變量進(jìn)行賦值時(shí)，并不是將對(duì)象復(fù)制了一份，而是將兩個(gè)變量指向了同一個(gè)對(duì)象的引用。

下面對(duì)內(nèi)存中的棧和堆進(jìn)行分析
棧(stack)：會(huì)自動(dòng)分配內(nèi)存空間，會(huì)自動(dòng)釋放，簡(jiǎn)單數(shù)據(jù)類型存放到棧里面。
堆(heap)：動(dòng)態(tài)分配的內(nèi)存，大小不定也不會(huì)自動(dòng)釋放，復(fù)雜數(shù)據(jù)類型存放到堆里面。

在這里插入圖片描述
由此可見存放在堆內(nèi)存中的對(duì)象，變量實(shí)際保存的是一個(gè)指針，這個(gè)指針指向另一個(gè)位置，通過這個(gè)指針來尋找堆中存儲(chǔ)的對(duì)象的屬性和值，并且每個(gè)空間大小不一樣，要根據(jù)情況開進(jìn)行特定的分配。




藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png


轉(zhuǎn)自：csdn
分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

日歷

鏈接

個(gè)人資料

存檔