for...of 与 for...in

for...of

for...of语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句

const array1 = ['a', 'b', 'c'];

for (const element of array1) {
  console.log(element);
}

// expected output: "a"
// expected output: "b"
// expected output: "c"

for...in

for...in语句以任意顺序遍历一个对象的除Symbol以外的可枚举属性，包括继承的可枚举属性。

let hd={
    name:"jack",
    age:12
};

console.log(Object.keys(hd));
console.log(Object.values(hd));
console.log(Object.entries(hd));


for (const key in hd) {
    if (Object.hasOwnProperty.call(hd, key)) {
        const element = hd[key];
        console.log(element);
        console.log(key);
        
    }
    
}

let arr=[
    {
    name:"jack",
    age:12
    }
    ,
    {
    name:"lili",
    age:13
    }
]

let ul=document.createElement("ul");
for (const iterator of arr) {
    let li=document.createElement("li");
    li.innerHTML=`${arr.name}-${arr.age}`;
    ul.appendChild(li);
}
document.body.appendChild(ul);


for (const [key,value] of Object.entries(hd)) {
    console.log(key+"-"+value);
}