ES6循环对象的用法介绍(es6循环对象)

一、ES6循环对象数组

const arr = ['a', 'b', 'c', 'd'];
for (let i of arr) {
  console.log(i);
}

以上代码使用ES6的for of循环对数组arr进行遍历，输出结果分别为a，b，c，d。使用for of循环可以更好地遍历数组，代码简洁易懂，且不需要手动指定循环变量的下标。

二、JS循环对象

const obj = {'name': 'Tom', 'age': 20, 'gender': 'male'};
for (let key in obj) {
  console.log(key + ': ' + obj[key]);
}

以上代码使用JS for in循环遍历了对象obj，输出结果为name: Tom，age: 20，gender: male。for in循环能够获取到对象的属性名，通过属性名，就可以方便地获取对象中的值。

三、如何循环对象

ES6的for of循环可以循环所有可迭代对象，包括数组、字符串、Map、Set等，而for in循环遍历对象属性，但不包括原型链上的属性。同时，在循环对象时，如果对象中存在Symbol.iterator属性，则for of会调用该属性遍历对象。

四、v-for循环对象

  
{{index}} - {{value}}

以上代码使用Vue的v-for指令循环对象obj，输出相应的值。v-for指令提供了绑定数组的其他特性，例如获取索引、动态修改、过滤等操作，十分方便。

五、for循环对象

const obj = {'name': 'Tom', 'age': 20, 'gender': 'male'};
const keys = Object.keys(obj);
for (let i = 0; i < keys.length; i++) {
  console.log(keys[i] + ': ' + obj[keys[i]]);
}

以上代码使用for循环遍历对象，需要先获取对象的属性名再进行遍历。这种方式相比ES6的for of和JS的for in循环略显繁琐，但是使用Object.keys方法可以获取到对象的所有属性名，遍历可以十分方便。

六、for in循环对象

const obj = {'name': 'Tom', 'age': 20, 'gender': 'male'};
for (let key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(key + ': ' + obj[key]);
  }
}

以上代码使用JS的for in循环遍历对象，但是需要判断属性是否属于对象本身，而不是原型链上的属性。使用hasOwnProperty方法就可以判断对象上是否存在该属性。

七、循环new对象

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}
const list = [
  new Person('Tom', 20),
  new Person('Jerry', 22),
  new Person('Mike', 18)
];
for (let item of list) {
  console.log(`${item.name}: ${item.age}`);
}

以上代码使用ES6的class创建新的对象，并使用for of循环遍历对象。这种方式相比直接使用字面量创建对象，可以更加灵活地定义对象的属性、方法等。

八、for循环创建对象

function createObject() {
  let obj = {};
  for (let i = 0; i < 10; i++) {
    obj[i] = i + 1;
  }
  return obj;
}
const obj = createObject();
for (let key in obj) {
  console.log(key + ': ' + obj[key]);
}

以上代码使用for循环创建对象，并使用for in循环遍历对象。使用该方式可以快速创建对象，进行相应的操作。

通过以上的详细阐述，可以发现ES6循环对象有很多种方式，不同的方式有不同的适用场景，可以根据实际需要进行选择。