📖
blog
  • README
  • JavaScript
    • 元素的宽高位置信息梳理
    • dom-align 源码浅析
    • Event Loop
    • 函数实参为对象时的陷阱
    • export 与 utils 方法书写规范
    • 手写 Promise 及相关代码理解
    • call,apply,bind 等函数的模拟实现
    • JavaScript继承
    • JavaScript 数据类型与类型判断
    • for..of 和 for..in 的区别
    • 写给自己看的 next 函数
    • JS 可选链与双问号
    • mouseenter 与 mouseover 事件的区别
    • Immutable相关知识
  • CSS
    • 不简单的 z-index
    • 两列布局,三列布局
    • CSS 居中方案整理
    • CSS 像素,设备像素,2倍图梳理
    • iconfont 的使用
  • Node JS
    • 实现简易的 express
  • React 核心知识点整理
    • 高阶组件
    • React 事件处理
    • React Hooks
    • React Context
  • React 状态管理
    • Redux 基础概念
    • Redux 中间件和异步操作
    • Redux Saga
    • Redux 只能有一个 store 对象嘛
  • React 开发实践
    • Ant Design Menu 组件的使用与深入
    • 讲讲吸顶效果与 react sticky
    • 基于 express,搭建 react 的开发环境
    • 通过 antd input 组件分析受控与非受控组件
    • DebounceClick 组件
    • react component Align 组件分析
    • React Portal 之事件冒泡
    • React Transition Group 源码浅析
    • React.cloneElement 父组件向子组件注入 props
    • 一次 Align 组件的问题记录
    • 如何知道子组件的类型
    • React Router 源码简单分析
    • React Redux 源码简单分析
  • Vue.js
    • Vue.js 概览
    • scoped 样式中的 deep
  • TypeScript 语法
    • 基础类型
    • 变量声明
    • 接口
    • 类
    • 函数
    • 泛型
    • 枚举
    • 类型推论
    • 类型兼容性
    • 高级类型
    • Symbol
    • 迭代器和生成器
    • 模块
    • 命名空间
    • JSX
  • 玩转 webpack
    • 第一章: webpack 与构建发展简史
    • 第二章:webpack基础用法
    • 第三章:webpack进阶用法
    • 第四章:编写可维护的 webpack 构建配置
    • 第五章:webpack构建速度和体积优化策略
    • 第六章:通过源代码掌握webpack打包原理
    • 第七章:编写Loader和插件
  • webpack 实践
    • 如何配置 output.library
  • 测试
    • 初识代码测试
    • Jest 中 如何测试 setTimeout
    • Jest Enzyme React 测试实践记录
  • WEB 开发,过往工作沉淀
    • Web安全(DVWA)
    • 内存泄露与事件移除的必要性
    • url to pdf api 与 服务部署踩坑记录
    • 前端调试指南
    • Markdown 转 email
    • github travis ci 自动部署
    • 浏览器缓存知识梳理
    • WEB 系统登录相关知识梳理
    • 将-Axios-请求参数和返回值进行格式化
    • source-map与源码调试
    • HTTPS
    • 使用 rollup 打造自己的 npm 包 (全流程)
    • father-build 是如何工作的
  • 书籍
    • 图解 HTTP 协议
    • 编写可维护的 JavaScript
    • 鸟哥的 Linux 私房菜
    • JavaScript Promise迷你书
  • Linux
    • vimtutor
    • CURL 使用指南
  • Nginx
    • 一次 nginx 分享
  • Git
    • Git Commit Message 须知
    • .gitignore 模板
    • git tag标签
  • 摄影
    • 摄影基础知识
    • 手机摄影从小白到大师
  • 翻译
    • log4js
    • log4js-node
    • 介绍GitLab上的CI/CD
    • 为GitLab Pages创建并调整GitLab CI/CD
    • 关于 rel=noopener
    • AngularJS 团队 Git 提交信息约定
    • JSON Schema
  • Lifehack
    • 20 个 Google 搜索 Tips 来高效使用 Google
    • 37 个高级 Google 搜索 Tips
Powered by GitBook
On this page
  • 1. Symbol.iterator
  • 2. for..of vs for..in
  • 3. 更多示例
  • 3.1 for in 能得到自身及原型上的属性
  • 3.2 for..of 只能迭代数组自身的值
  • 4. 总结
  • 参考资料

Was this helpful?

  1. JavaScript

for..of 和 for..in 的区别

1. Symbol.iterator

如果一个对象实现了 Symbol.iterator 属性,那么这个对象就被认为是可迭代的。一些内置的类型,如 Array, Map, Set, String, Int32Array, Unit32Array 等等,它们的 Symbol.iterator 属性已经被实现了。 对象上的 Symbol.iterator 函数负责迭代,返回得到对象的值数组。

只有实现了 Symbol.iterator 属性,才能使用 for of 语法与展开运算符

  1. 数组

数组内部原生实现了 Symbol.iterator

const arr = [1,2,3]

for(let i of arr) {
    console.log(arr)  // 1, 2, 3
}
  1. 对象

初始化的对象没有实现 Symbol.interator, 因此在对象上使用 for of 会导致报错

const obj = {
  foo: 1,
  bar: 2
}

// 报错, obj is not iterable
for(let i of obj) {
  console.log(i,typeof i)
}

const obj1= [...obj];   // 报错 obj is not iterable


=============== 疑问 ===============
// 没有报错, 不知道 {...obj} 和 [...obj] 有什么区别
const obj2 = {...obj}

为了使得对象能够使用 for of 语法,可以主动实现 Symbol.iterator 属性:

let length = 2;
let arr = ['a','b'];
let index = 0;
const obj = {
  a: 1,
  b: 2,
  [Symbol.iterator]: function() {
    let next = () => {
      return {
        value: this[arr[index]],
        done: length === index++
      }
    }
    return {
      next
    }
  }
}

console.log([...obj]) // [1,2]
console.log('start');
for(let i of obj) {
    console.log(i)  // 1,2
}

如上所示,可以主动实现 Symbol.iterator 属性。注意以上示例中的两段代码不能同时存在,否则,[...obj] 将迭代器的 index 增加到了 2, 再次运行 for of 的语法,done 永远不能为 true, 因此会陷入无限循环。

2. for..of vs for..in

for..of 和 for.. in 都能够迭代数组,但是迭代的值是不一样的。 for..in 返回的结果是被迭代对象的key组成的数组,key均为字符串类型。而 for..of 返回的是迭代对象的属性值的数组。

const a = [4,5,6]

for(let i in a) {
  console.log(i)  // '0','1','2' 且为字符串
}

for(let i of a) {
  console.log(i)  // 4,5,6 
}

另外一个区别是, for..in 可以用在任何对象上,用来检查对象的属性。for..of 则主要关心可迭代对象的值,内置的对象如 Map, Set 实现了 Symbol.iterator 属性可以被访问到值。

let pets = new Set(['cat','dog','hamster']);

pets['specials'] = 'mammals';

for(let pet in pets) {
  console.log(pet)   // 只打印 specials
}

for (let pet of pets) {
    console.log(pet); // 打印出 "cat", "dog", "hamster"
}

当处于 ES5 或者 ES3 的编译环境时,迭代器只能用于迭代 Array 的值。将 for..of 用于非数组则会报错,即使这些非数组实现了 Symbol.iterator 属性.

对于数组的情况,编译器会生成一个简单的 for 循环,来代替 for..of 循环,比如:

let numbers = [1,2,3];
for(let num of numbers) {
    console.log(num);  // 1, 2, 3
}

将会被转换为:

var numbers = [1,2,3];
for(var _i - 0; _i < numbers.length; _i++) {
    var number = numbers[_i];
    console.log(num);
}

在 ES6(ECMAScript 2015) 和更高级的编译环境中,编译器会生成 for..of 循环来执行内置的迭代器。

3. 更多示例

3.1 for in 能得到自身及原型上的属性

数组原型

Array.prototype.sayHello = function() {}

Array.prototype.str = 'i am array'

const arr = [1,2,3]

arr.name = 'arr name'

for(let i in arr) {
  console.log(i);  // '0','1','2','name','str','sayHello'
}

对象原型

Object.prototype.str = 'obj str';
Object.prototype.sayHello = function() {}

var obj = {name:'obj name', age: 'obj age'}

for(let i in obj) {
  console.log(i);  // 'name',' age', 'str', 'sayHello'
}

即 for..in 能够得到对象(以及数组)原型上的属性(那为啥数组的 forEach, map,对象的 toString 等方法循环出来???)

由于可以遍历原型上的属性,如有需要,可以使用 hasOwnProperty 来进行属性的过滤:

过滤出自身的属性

for(let i in obj) {
    if(obj.hasOwnProperty(i)) {

    }
  console.log(i);  // 'name',' age'
}

3.2 for..of 只能迭代数组自身的值

  1. 如第一部分所讲,将 for..of 直接用于对象上会报错,因为对象默认没有实现 Symbol.iterator 属性

  2. 用于数组

    ```js

    Array.prototype.say = function() {}

const arr = ['1',2];

for(let i of arr) { // '1' string , 2 number console.log(i,typeof i) }

```

即 for..of 循环不能迭代到数组的原型上

4. 总结

  1. for..of 只能用在数组,或者实现了 Symbol.iterator 属性的对象上,得到的是 "值"

  2. for..in 能用到对象和数组上,都会查找原型对象上,得到的是 "属性"

参考资料

PreviousJavaScript 数据类型与类型判断Next写给自己看的 next 函数

Last updated 4 years ago

Was this helpful?

TypeScript 中的描述
JS 中 for..in 和 for..of 的区别