H5W3
当前位置:H5W3 > JavaScript > 正文

【JS】[每日一题]面试官问:for in和for of 的区别和原理?

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

​时间永远是自己的

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

一、前言

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

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

【JS】[每日一题]面试官问:for in和for of 的区别和原理?

往期「每日一题」:

  • 第 6 题 [[每日一题]面试官问:Async/Await 如何通过同步的方式实现异步?](https://mp.weixin.qq.com/s/UA…
  • 第 5 道「每日一题」到底该如何回答:vue数据绑定的实现原理?
  • 第 4 道「每日一题」与面试官手撕代码:如何科学高效的寻找重复元素?
  • 第 3 道「「每日一题」面试官问你对 Promise 的理解?可能是需要你能手动实现各个特性」
  • 第 2 道[「[每日一题]ES6 中为什么要使用 Symbol?」](https://mp.weixin.qq.com/s/om…
  • 第 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、每日一题

1、JavaScript && ES6

  • 第 17 题:【每日一题】(17题)面试官问:JS中事件流,事件处理程序,事件对象的理解?
  • 第 16 题:【每日一题】面试官问:JS中如何全面进行客户端检测?
  • 第 15 题:【每日一题】面试官问:JS类型判断有哪几种方法?
  • 第 14 题:【每日一题】面试官问:谈谈你对JS对象的创建和引申
  • 第 13 题[[每日一题]面试官问:[‘1’, ‘2’, ‘3’].map(parseInt)输出,原因,以及延伸?](https://mp.weixin.qq.com/s/DJ…
  • 第 12 题[[每日一题]面试官问:JS引擎的执行过程(二)](https://mp.weixin.qq.com/s/CC…
  • 第 11 题[[每日一题]面试官问:JS引擎的执行过程(一)](https://mp.weixin.qq.com/s/Lh…
  • 第 10 题[[每日一题]面试官问:详细说一下JS数据类型](https://mp.weixin.qq.com/s/wm…
  • 第 8 题[[每日一题]面试官问:谈谈你对ES6的proxy的理解?](https://mp.weixin.qq.com/s/8l…
  • 第 7 题[[每日一题]面试官问:for in和for of 的区别和原理?](https://mp.weixin.qq.com/s/Rs…
  • 第 6 题[[每日一题]面试官问:Async/Await 如何通过同步的方式实现异步?](https://mp.weixin.qq.com/s/UA…
  • 第 3 道「「每日一题」面试官问你对 Promise 的理解?可能是需要你能手动实现各个特性」
  • 第 2 道[「[每日一题]ES6 中为什么要使用 Symbol?」](https://mp.weixin.qq.com/s/om…

2、浏览器

  • 第 9 题[[每日一题]requestAnimationFrame不香吗?](https://mp.weixin.qq.com/s/4O…

3、Vue

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

4、算法

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

5、Http

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

本文地址:H5W3 » 【JS】[每日一题]面试官问:for in和for of 的区别和原理?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址