js之实现for-in/of循环对象

一、in/of对比

for-in是es5出的循环方法, for-of是es6推出。借用mdn官网对这两个方法描述一下 for…in/for…of语句都是迭代一些东西。
区别 =>
for…in 语句以任意顺序迭代对象的可枚举属性。=> 根据key值来遍历
for…of 语句遍历可迭代对象定义要迭代的数据。

1.1) in的表现及mdn描述

//表现
let obj = {  a: 1, b: '2',  c: false, d: undefined,  e(){}, f: {  } };
obj.z = "zzz";
for(let key in obj){
  console.log(key);
}
//a  b  c  d e  f  z =>这说明for in 是根据key值遍历

//再来看看mdn上对for in的解释

上面一大堆话总结起来两句话
1、forin不推荐遍历有索引对象(即数组);
2、forin适合用作检测对象是否存在某属性值时(之前看过一位同事用forin对必填项做校验, 不认可这是最佳校验方法, 但是也不否定他不能实现)
值得注意的是, forin循环会遍历所有可枚举属性,而在es5之前, 所有给对象原型新添加的方法都是可枚举的
(关于可枚举属性和不可枚举属性,等下一篇文章出来再做介绍,这里不做过多赘述)

1.2) forof

//表现
let array = [false, 1,"2", undefined, {}, function(){}];
for (let item of  array){
   console.log(item);
}
//false, 1, 2, undefined,  {}, ƒ (){} => 不难看出

//mdn解释

一句话: 可迭代对象都可使用forof遍历循环
可迭代对象 => 一个实现了iterator 方法的对象(可通过Symbol.iterator方法改属性)(Symbol是es6引入的一种新的数据类型 感兴趣可以到mdn官网查看)

二、forin/forof是否都可以遍历对象

//如果不改造js是不能的,但是人和动物的区别就在这里, 人可以自己造工具, 手写实现一下两者
第一段我们了解到forof可遍历可迭代对象, 那么我们把对象实现了Symbol.iterator接口不就可以使用了嘛

//代码实现

let obj = {  a: 1, b: '2',  c: false, d: undefined,  e(){}, f: {  } };
obj[Symbol.iterator] = function () {
  let index = 0;
  let keys = Object.keys(this);
  return {
    next: () => {
      return (index < keys.length
        ? {
          value: {value: this[keys[index++]], index: keys[index]},
          done: false,
        } : {
          value: undefined,
          done: true
        })
    }
  }
}

for (let {value, index} of obj) {
  console.log(value, index);
}

1,2, false, undefined, ƒ e() { }, {}
//至此, 成功
//需要注意的是因为forof支持for (let item, index of array)写法所以自己改造版的不能读取index属性

三、forin/forof区别总结

1、版本号区别
forin es5 => es5之前方法都不能定义不可枚举
forof es6 => es6引入了Symbol数据类型和Symbol.iterator接口

2、使用区别
forin =>遍历具有key值对象
forof => 遍历实现了Symbol.iterator(可迭代接口)对象

3、两者可否实现遍历对象
可以, 将对象接入Symbol.iterator接口

四、代码优化

有代码洁癖的可以继续往下看

在给forof添加接口的时候我们一个一个迭代value上去, 这和我们所认识的generator函数不是一样的吗

//这里我只介绍generator使用方法和思路 剩下的请有兴趣的同志自己尝试

function* it() {
	 let keys = Object.keys(obj);
	 let len = keys.length;
	 for (let i = 0; i < len; i++) {
	   yield {
	     index: keys[i], 
	     value: obj[keys[i]]
	   };
	 }
}

let t = it();

console.log(t.next());// {value: {index: "a", value: 1}, done: false}
console.log(t.next());// {value: {index: "b", value: "2"}, done: false}
console.log(t.next());// {value: {index: "c", value: false}, done: false}
console.log(t.next());// {value: {index: "d", value: undefined}, done: false}

总结: generator函数可以相互嵌套 然后yield必须在*内使用