[每日一题]面试官问：for in和for of 的区别和原理？

时间永远是自己的

每分每秒也都是为自己的将来铺垫和增值

一、前言

2020.12.23 日刚立的 flag，每日一题，题目类型不限制，可以是：算法题，面试题，阐述题等等。

本文是「每日一题」第 7 题：[每日一题]面试官问：for in和for of 的区别和原理？

往期「每日一题」：

第 6 题 第 5 道 第 4 道 第 3 道 第 2 道 第 1 道

二、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、学习资料福利

回复「算法」获取算法学习资料

3、每日一题

本文是「每日一题」第 7 题：面试官问：for in和for of 的区别和原理？ 第 6 题 第 5 题： 第 4 道 第 3 道 第 2 道 第 1 道

The End

1、点个「在看」，让更多的人也能看到这篇文章内容。

2、点个「赞」，是对文章的肯定。

3、点个「分享」到朋友圈，是为了让更多的人知道你在学习提升自己。