关注「松宝写代码」，精选好文，每日一题
时间永远是自己的
每分每秒也都是为自己的将来铺垫和增值
作者：saucxs ｜ songEagle
一、前言
2020.12.23 日刚立的 flag，每日一题，题目类型不限制，可以是：算法题，面试题，阐述题等等。
本文是「每日一题」第 7 题：[每日一题]面试官问：for in和for of 的区别和原理？
[图片上传失败...(image-c31793-1611497864155)]
往期「每日一题」：
二、for in和for of 的区别和原理？
这个题目本身不是特别难，只能说是作为社招的基础面试题，但是如果想回答好这道题也不是很容易。
不信接着往下看：
1、简单回答
很多人会去问：for in 和for of的区别，
我说：for in是获取属性名，for of获取属性值。
2、看一些例子
首先我们先看一个对象遍历的例子
var obj = {name: 'saucxs',age: 21,sex: 1};
for(key in obj){
console.log(key, obj[key]);
// name saucxs
// age 21
// sex 1
}
for(key of obj){
console.log(key, obj[key]);
// typeError :obj is not iterable报错
}
说明obj对象没有iterable属性报错，使用不了for of。
我们现在再看一个数组遍历的例子
var array = ['a','b','c'];
for(var key in array){
console.log(key, array[key]);
// 0 a
// 1 b
// 2 c
}
for(var key of array){
console.log(key, array[key]);
// a undefined
// b undefined
// c undefined
}
这回没有报错，为什么呢？
我们再看一个例子：
var array = ['a', 'b', 'c'];
array.name = 'saucxs'
for(key in array){
console.log(key, array[key])
// 0 a
// 1 b
// 2 c
// name saucxs
}
3、for in的特点
for in 循环返回的值都是数据结构的键名。
遍历对象返回的是对象的key值，遍历数组返回的是数组的下标。
还会遍历原型上的值和手动添加的值
总的来说：for in适合遍历对象。
4、for of的特点
for of 循环获取一对键值中的键值。
一个数据结构只要部署了Symbol.iterator属性，就被视为具有iterator接口，可以使用for of。
for of不同于forEach，for of是可以break，continue，return配合使用，for of 循环可以随时退出循环。
总的来说：for of遍历所有数据结构的统一接口。
5、深入探索
哪些数据结构部署了Symbol.iterator属性？
以下数据结构的有iterator接口的：
- 数组Array
- Map
- Set
- String
- arguments对象
- Nodelist对象，类数组
凡是部署了iterator接口的数据结构都可以使用数组的扩展运算符(...)，和解构赋值等操作。
如果我非常想让对象用for of？
可以使用Object.keys()获取对象的key值集合，在用for of。
var obj = {name: 'saucxs',age: 18, sex: 1};
for(var key of Object.keys(obj)){
console.log(key, obj[key]);
// name saucxs
// age 21
// sex 1
}
这样也可以给一个对象部署Symbol.iterator属性。
谢谢支持
1、文章喜欢的话可以「分享，点赞，在看」三连哦。
2、作者昵称：saucxs，songEagle，松宝写代码。「松宝写代码」公众号作者，每日一题，实验室等。一个爱好折腾，致力于全栈，正在努力成长的字节跳动工程师，星辰大海，未来可期。内推字节跳动各个部门各个岗位。
3、长按下面图片，关注「松宝写代码」，是获取开发知识体系构建，精选文章，项目实战，实验室，每日一道面试题，进阶学习，思考职业发展，涉及到JavaScript，Node，Vue，React，浏览器，http，算法，端相关，小程序等领域，希望可以帮助到你，我们一起成长～
[图片上传失败...(image-94f541-1611497864155)]
字节内推福利
- 回复「校招」获取内推码
- 回复「社招」获取内推
- 回复「实习生」获取内推
后续会有更多福利
学习资料福利
回复「算法」获取算法学习资料
往期「每日一题」
1、JavaScript && ES6
第 16 题：【每日一题】面试官问：JS中如何全面进行客户端检测？
第 15 题：【每日一题】面试官问：JS类型判断有哪几种方法？
第 14 题：【每日一题】面试官问：谈谈你对JS对象的创建和引申
第 12 题[每日一题]面试官问：JS引擎的执行过程（二）
第 11 题[每日一题]面试官问：JS引擎的执行过程（一）
第 10 题[每日一题]面试官问：详细说一下JS数据类型
2、浏览器
3、Vue
4、HTML5
5、算法
第 31 道[【每日一题】(31题)面试官:你对图论了解多少？(一)
第 26 道【每日一题】(26题)算法题:最长公共前缀？
