数组

最简单的while循环

while循环虽然简单，问题是如果条件无法满足，可能遇到死循环。

let array = ["111","222","333","444","555"];
let index = 0;
while(index < array.length){
  console.log(array[index]); //"111" "222" "333" "444" "555"
  index += 1;
}

for循环

for循环的必要信息都包含在的循环的第一行，我们需要初始化一个计算器变量本身。

let array = ["111","222","333","444","555"];
for(let i = 0;i < array.length;i++){
    console.log(array[i]); //"111" "222" "333" "444" "555"
}

对于循环机制来说，计数器变量是不必要的，所以有了for of

for … of

for of优于之前的两种循环，使得开发者只需要专注于循环本身。

let array = ["111","222","333","444","555"];
for(let i of array){
    console.log(i); //"111" "222" "333" "444" "555"
}

for each

forEach是JavaScript中的一个内置方法，它允许我们在没有额外信息的情况下遍历数组。

普通写法

let array = ["111","222","333","444","555"];
array.forEach(function(i){
    console.log(i);
});

箭头函数写法

let array = ["111","222","333","444","555"];
array.forEach(i => console.log(i));

forEach允许在需要时访问索引，是非常有用的。示例如下：

array.forEach((i, index) =>
    console.log(`${index}. ${i}`)); // "0. 111" "1. 222" "2. 333" "3. 444" "4. 555"

forEach是 JavaScript 开发者可以使用的最高级别的循环之一。这段代码几乎隐藏了循环的所有低级实现，同时将循环迭代的逻辑压缩到一行。但是，需要注意的是。与较低级别的循环不同，forEach 除了抛出错误之外，不提供使用 break 语句提前退出循环的方法。

对象

JavaScript 提供了上述几种方法遍历数组。数组方法不适用于具有非整数键的其他类型的对象。所以，JavaScript 提供了循环对象的方法。

for...in

通过for..in循环，可以通过属性名称遍历该对象以访问所有属性。

let animal = {  
   cat: {name:"招财",age:2},
   dog: {name:"旺财",age:3}
}

for(let item in animal){
    console.log(animal[item].name); //"招财" "旺财"
}

Object.keys(myObj)

Object.keys的工作方式类似于for..in，本质上是在对象的属性名称上移动。主要区别在于此函数返回一个数组，其元素是与直接在对象上找到的可枚举属性相对应的字符串。代码以与手动完成相同的顺序迭代属性。示例如下：

let animal = {  
   cat: {name:"招财",age:2},
   dog: {name:"旺财",age:3}
}

Object.keys(animal).forEach(item =>console.log(animal[item].name))//"招财" "旺财"

上面的代码做了同样的操作，for..in有点冗长。Object.keys有这几个优点。 1.可以按照最初定义的正确顺序迭代对象属性。 2.拥有数组形式的对象键具有优势。例如，开发者可以通过查找返回数组的长度来查找对象中属性的数量。

Object.entries(myObj)

Object.entries很像Object.keys, Object.entries返回一个数组。但是，Object.entries返回一个键值对数组，以实现更多功能。就像Object.keys，代码以与手动完成相同的顺序迭代属性。与Object.keys相比. 在于Object.entries可以直接访问属性名称和属性本身。

let animal = {  
   cat: {name:"招财",age:2},
   dog: {name:"旺财",age:3}
}

console.log(Object.entries(animal));
//[["cat",{"name": "招财","age": 2}],["dog",{"name": "旺财","age": 3}]]

前端基础：遍历数组和对象常见方法

数组