当前位置: 首页 > 工具软件 > Fortune.js > 使用案例 >

js—for of和 for in

吴展
2023-12-01

for…in和for…of都是用来遍历属性的
for…in循环:只能获得对象的键名,不能获得键值
for…of循环:允许遍历获得键值 (es6的新方法)

  // 1.遍历对象的区别
    function Foo() {
      this.name = '努力';
      this.age = 18
    }
    Foo.prototype.getName = function () {
      return this.name
    }
    var foo = new Foo();
    for(var inkey in foo) {
      if(foo.hasOwnProperty(inkey)){
        console.log(inkey)
      }
    }
    // for...of用来遍历具有interator接口的数据结构
    // 在此处使用会报错
    for(var ofKey of foo){
      console.log(ofKey);
    }
 //  2.遍历数组
  // for...in遍历数组输出的是数组的索引值,而并不是数组本身

  var arr = ['one','two','three']
  for(var arrInKey in arr){
    console.log(arrInKey);
  }
    // for...of会输出数组每一个值
  for(var arrOfKey of arr){
    console.log(arrOfKey);
  }
// 3.forEach 不能使用break continue关键字
  // for in和for of是可以使用的
  var arr = ['one','two','three'];
  for(var arryofKey of arr){
    console.log(arryofKey)
    if(arryofKey === 'two'){
      break;
    }
  }
  // 4.for of遍历对象,可以使用Object.keys方法去获取所有属性遍历
  var foo = new Foo();
  function Foo() {
      this.name = '努力';
      this.age = 18
    }
  for(var objKey of Object.keys(foo)) {
    console.log(objKey)
  }
// 5.arguments 
  function foo2(){
    for(var argKey of arguments){
      console.log(argKey)
    }
  }
  foo2(1,2,3,4)
  // 6.不能遍历到symbol属性
  var as = Symbol('a')
  var bs = Symbol('b')
  var obj = {
    [as]:'as',
    [bs]:'bs',
    name:'king',
    age:30
  };
  for (var objInkey in obj){
    console.log(objInkey);
  }
  // 使用Object.getOwnPropertySymbols()可以遍历symbol属性
  var symbolKeys = Object.getOwnPropertySymbols(obj)
  // for in 获取的是索引
  for( var key2 in symbolKeys){
    console.log(key2)
  }
  // for of可以获取到值
  for( var key2 of symbolKeys){
    console.log(key2)
  }
  总结:
  for in 主要遍历对象
  for of遍历具有interator接口的数据结构
    关于遍历器
    遍历器(Iterator)是一种接口,为各种不同的数据结构提供统一的访问机制。
    任何数据结构只要部署Iterator接口,就可以完成遍历操作(即依次处理该数据结构的所有成员)。
    Iterator的作用有三个:
    一是为各种数据结构,提供一个统一的、简便的访问接口;
    二是使得数据结构的成员能够按某种次序排列;
    三是ES6创造了一种新的遍历命令for...of循环,Iterator接口主要供for...of使用。
补充:
在ES6中,有些数据结构原生具备Iterator接口(比如数组),即不用任何处理,就可以被for...of循环遍历,
有些就不行(比如对象)。原因在于,这些数据结构原生部署了Symbol.iterator属性,另外一些数据结构没有。凡是部署了Symbol.iterator属性的数据结构,就称为部署了遍历器接口。调用这个接口,就会返回一个遍历器对象。
在ES6中,有三类数据结构原生具备Iterator接口:数组、某些类似数组的对象、Set和Map结构。
for...of循环可以使用的范围包括数组、Set和Map结构,某些类似数组的对象。
 类似资料: