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

关注「松宝写代码」，精选好文，每日一题

​时间永远是本身的

每分每秒也都是为本身的未来铺垫和增值

做者：saucxs ｜ songEagle

1、前言

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

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

往期「每日一题」：

• 第 6 题 [每日一题]面试官问：Async/Await 如何经过同步的方式实现异步？

• 第 5 道「每日一题」到底该如何回答：vue数据绑定的实现原理？

• 第 4 道「每日一题」与面试官手撕代码：如何科学高效的寻找重复元素？

• 第 3 道「「每日一题」面试官问你对 Promise 的理解？多是须要你能手动实现各个特性」

• 第 2 道「[每日一题]ES6 中为何要使用 Symbol？」

• 第 1 道「一道面试题是如何引起深层次的灵魂拷问？」

2、for in和for of 的区别和原理？

这个题目自己不是特别难，只能说是做为社招的基础面试题，可是若是想回答好这道题也不是很容易。

不信接着往下看：

一、简单回答

不少人会去问：for in 和for of的区别，

我说：for in是获取属性名，for of获取属性值。

二、看一些例子

首先咱们先看一个对象遍历的例子

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
}

三、for in的特色

for in 循环返回的值都是数据结构的键名。

遍历对象返回的是对象的key值，遍历数组返回的是数组的下标。

还会遍历原型上的值和手动添加的值

总的来讲：for in适合遍历对象。

四、for of的特色

for of 循环获取一对键值中的键值。

一个数据结构只要部署了Symbol.iterator属性，就被视为具备iterator接口，能够使用for of。

for of不一样于forEach，for of是能够break，continue，return配合使用，for of 循环能够随时退出循环。

总的来讲：for of遍历全部数据结构的统一接口。

五、深刻探索

哪些数据结构部署了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属性。

各类福利

「松宝写代码」：开发知识体系构建，技术分享，项目实战，实验室，每日一题，带你一块儿学习新技术，总结学习过程，让你进阶到高级资深工程师，学习项目管理，思考职业发展，生活感悟，充实中成长起来。问题或建议，请公众号留言。

一、字节内推福利

回复「校招」获取内推码

回复「社招」获取内推

回复「实习生」获取内推

后续会有更多福利

二、学习资料福利

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

三、每日一题

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

• 第 6 题 [每日一题]面试官问：Async/Await 如何经过同步的方式实现异步？

• 第 5 题：「每日一题」到底该如何回答：vue数据绑定的实现原理？

• 第 4 道「每日一题」与面试官手撕代码：如何科学高效的寻找重复元素？

• 第 3 道「「每日一题」面试官问你对 Promise 的理解？多是须要你能手动实现各个特性」

• 第 2 道「[每日一题]ES6 中为何要使用 Symbol？」

• 第 1 道「一道面试题是如何引起深层次的灵魂拷问？」