JavaScript入門-物件

lovelyk發表於2021-01-18

js物件

本篇主要介紹js裡如何建立物件,以及for迴圈訪問物件的成員...

什麼是物件?

  • 物件,並不是中文裡有男女朋友意思,它是從英文裡翻譯來的,英文叫[Object],目標,物體,物品的意思。
  • 在程式設計裡,我們經常聽到有人說,物件導向。那這個物件,你簡單來理解,就是一個容器,一個能裝變數、函式體的容器。也可以在裡面繼續裝下物件。

物件的建立

    //方法一(推薦)
    var obj = {
        name : 'rainbow',
        run : function(){
            console.log('跑步中...')
        }
    }
    //方法二(不推薦)
    var obj = new Object()
    obj.name = 'rainbow'
    obj.run = function(){
        console.log('running...')
    }

    //方法三(推薦)
    var obj = {}
    obj.name = 'rainbow'
    obj.say = function(){
        console.log('saying ...')
    }

ps:

  1. 以上就是建立物件的三種方法,儘量避免第二種方法,因為new Object效率低,建議使用第三種或者第一種
  2. 屬性名可以單引,可以雙引,也可以不引,但他的型別永遠都是string型別
  3. 變數裡的成員變數,也可以被賦值方法。但是不推薦這麼做。

for迴圈訪問物件成員

for...in

    //先定義一個物件
    var obj =  {
        name : 'rainbow',
        age : 20,
        sex : 'man',
        run : function(){
            console.log('I'm running...')
        }
    }

    for ( var key in obj ){
        if('function' == typeof obj[key]){
            obj[key]()
            break
        }
        console.log(obj[key])
    }

    //輸出結果如下
    rainbow
    20
    man
    I am running...

    /*估計有些人會問,為什麼不是用obj.key訪問呢??
    那我們不妨列印看看,boj.key是什麼?
    那請往下看:*/
    for (var key in obj) {
        console.log(key , typeof key)
        console.log(obj.key)//undefined
    }
  • 列印如下

ps:我們可以知道,在js裡,for...in不能用點運算訪問,而是用obj[key]訪問,並且方法名也可以訪問。

for...of

    //1.使用js內建的物件,建立一個陣列物件
    var array = new Array(11,56,89,78,-12)
    console.log( typeof array )//object
    for ( var val of array){
        console.log(val)//11,56,89,78,-12
    }

    //2.用的自定義的物件
    var obj =  {
        name : 'rainbow',
        age : 20,
        sex : 'man',
        run : function(){
            console.log('I'm running...')
        }
    }
    for ( var val of obj ){
        console.log(obj)//obj is not iterable
    }
    這裡報錯的意思是,obj這個物件是不可迭代的

總結

  • 用for...of不能迭代自定義物件
  • 用for...in,不能用點運算訪問成員,而是用物件[屬性名],可以訪問一個不存在的屬性,但是返回值為undefined
  • 不要使用普通for迴圈訪問物件成員

相關文章