怎樣動態循環的在同一循環下取出並打印對象內容

方法一：創建數組，動態的將對象內的內容push到數組內，而後經過對button設置`id = "字符串" + i;`的方式來保存一個僞下標，便於咱們在取數組內容時使用；

經過對button設置onclick事件來動態打印對象內容，在函數內，咱們經過對id的字符串的拆分來分解出數組須要的下標的index，最後直接經過`objArr[i].info();動態打印對應數據

function stuFuc(){
　　var arr = [1,2,3,4];
　　var objArr = [];
　　for (var i = 0; i < 30; i++) {
　　　　var objA = {
　　　　name:"張"+(i+1),
　　　　age:23,
　　　　infoData:arr,
　　　　info: function(){
　　　　　　　　console.log("objA的姓名：" + this.name + "年齡：" + this.age + "data:" + this.infoData);
　　　　　　}
　　　　};
　　　　objArr.push(objA);
　　　　var btn = document.createElement("button");
　　　　btn.innerHTML = objA.name;
　　　　btn.id = "btn_" + i;
　　　　btn.onclick = function(){
　　　　//使用獲取數組下標的方式來進行對象內容的調用
　　　　var btnId = event.target.id;
　　　　var _index = btnId.slice(btnId.indexOf("_") + 1);
　　　　objArr[_index].info();
　　　}
　　document.getElementsByTagName("body")[0].appendChild(btn);
}

}

方法二：直接將for循環的循環變量 i 使用 let 來聲明，便可直接用 i 來做爲數組下標動態打印數據

function stuFuc(){
　　var arr = [1,2,3,4];
　　var objArr = [];
　　for (let i = 0; i < 30; i++) {
　　　　var objA = {
　　　　name:"張"+(i+1),
　　　　age:23,
　　　　infoData:arr,
　　　　info: function(){
　　　　　　　　console.log("objA的姓名：" + this.name + "年齡：" + this.age + "data:" + this.infoData);
　　　　　　}
　　　　};
　　　　objArr.push(objA);
　　　　var btn = document.createElement("button");
　　　　btn.innerHTML = objA.name;
　　　　btn.id = "btn_" + i;
　　　　btn.onclick = function(){
　　　　//將for循環遍歷的變量類型var修改成let來獲取數組下標
　　　　objArr[i].info();
　　}
　　document.getElementsByTagName("body")[0].appendChild(btn);
}

}

 

 

 

總結：對於ES6新增的內容進行全面瞭解，區分let和var之間的做用域區別