Javascript OOP问题

Question

这是我的问题。我创建了一个复选框，如果它没有被选中，它会显示一个提醒（'未选中'），如果该框被选中，则显示该人的信息。问题是我不知道如何访问cars []数组。它显示[对象对象]而不是汽车的品牌和年份。

HTML：

<form name="myForm"> 
      <label for="person1">PersonOne</label> 
      <input type="checkbox" name="checkbox" id="person1"> 
</form> 
     <button id="moreInfo">CLICK</button> 
     <div id="info"></div> 

JS：

document.addEventListener("DOMContentLoaded",function(){ 


    var info = document.getElementById('info'); 

    var person1 = { 
     name:'Joro', 
     age:20, 
     cars: [ 
      { 
       brand:'BMW', 
       year:1998, 
      } , 
      { 
       brand:'Punto', 
       year:2000, 
      }   
     ], 
     fullName: function(){ 
      return 'Name: ' + this.name + ' ,, ' +'Age: ' + this.age; 
     } 
    } 

    document.getElementById('moreInfo').addEventListener('click',function(){ 
    if(document.myForm.checkbox.checked){ 
    info.innerHTML = person1.fullName() + person1.cars[1]; 
     } else{ 
      alert('not checked'); 
     } 

    }); 


}); 

Answer 1

 document.addEventListener("DOMContentLoaded",function(){ 
 

 

 
     var info = document.getElementById('info'); 
 

 
     var person1 = { 
 
      name:'Joro', 
 
      age:20, 
 
      cars: [ 
 
       { 
 
        brand:'BMW', 
 
        year:1998 
 
       } , 
 
       { 
 
        brand:'Punto', 
 
        year:2000 
 
       }   
 
      ], 
 
      fullName: function(){ 
 
       return 'Name: ' + this.name + ' ,, ' +'Age: ' + this.age; 
 
      }, 
 
      allCars : function(){ 
 
       var str=''; 
 
       
 
       this.cars.forEach(car=>{ 
 
        
 
        str += car.brand + ' ' + car.year+ '<br>'; 
 
      
 
       }); 
 
       return str; 
 
      } 
 
     } 
 

 
     document.getElementById('moreInfo').addEventListener('click',function(){ 
 
     if(document.myForm.checkbox.checked){ 
 
     info.innerHTML = person1.fullName() + person1.cars[1].brand; 
 
      info.innerHTML+='<br>allCars: ' + person1.allCars(); 
 
      } else{ 
 
       alert('not checked'); 
 
      } 
 

 
     }); 
 

 

 
    });

<form name="myForm"> 
 
       <label for="person1">PersonOne</label> 
 
       <input type="checkbox" name="checkbox" id="person1"> 
 
    </form> 
 
      <button id="moreInfo">CLICK</button> 
 
      <div id="info"></div>

你必须使用

person1.cars[1].brand 

或

person1.cars[1].year 

采取在对象

Answer 2

线person1.cars[1]的这一部分试图内部car对象转换为字符串日提交。为了得到所需要的对象属性使用点.或支架[]符号：

info.innerHTML = person1.fullName() + "," + person1.cars[1].brand + "," + person1.cars[1].year; 

或

info.innerHTML = person1.fullName() + "," + person1.cars[1].['brand'] + "," + person1.cars[1].['year']; 

---

问法（返回所有汽车人有）：

... 
fullName: function(){ 
    return 'Name: ' + this.name + ' ,, ' +'Age: ' + this.age; 
}, 
getAllCars: function(){ 
    var person_cars = "Cars: "; 
    this.cars.forEach(function(car){ 
     person_cars += car.brand + "," + car.year + "; "; 
    }); 
    return person_cars; 
} 
... 

Answer 3

在Json格式中，这是无效的：

 { 
      brand:'BMW', 
      year:1998, 
     } , 
     { 
      brand:'Punto', 
      year:2000, 
     } 

否,之前关闭}所以尽量避免它。