Vue前端面试总结（十八）for in 和 for of 详解

最新推荐文章于 2025-06-11 08:58:50 发布
最新推荐文章于 2025-06-11 08:58:50 发布
阅读量1.6k 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 面试 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Rick_and_mode/article/details/108645137
本文探讨了JavaScript中forin与forof循环语句的应用场景。forin适用于遍历数组并返回键值，而forof则用于循环对象并直接获取值，且需要配合object.keys()使用。此外，文章还提到了forof是为了解决forin存在的问题而在ES6中引入的新特性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

为什么要使用for in 和for of

for in 和for of 都是js里面的循环语句
那什么时候使用for in？
什么时候使用 for of?

1.for in

  1. for in 循环是用来遍历数组的
  2. for in 是有条件限制的
  3. for in 循环返回的是Key值

2. for of

for of 是用来循环对象的
循环出的是value值

而且 for of 循环的不是普通的对象 必需通过 object.keys()搭配使用

注意的是for of 是Es6 引入的新特性 是为了修复
for in 的不足

VUE列表渲染 FOR-IN和FOR-OF的区别
weixin_37877794的博客
07-08 569
全文总结 V-for循环遍历 数组 时推荐使用 of ，语法格式为 (item，index) item:迭代时不同的数组元素的值 index:当前元素的索引 V-for循环遍历 对象 时推荐使用 in，语法格式为 (item,name,index) item:迭代时对象的键名键值 name:迭代时对象的键名 index:当前元素的索引 在遍历对象时，会按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下都一致。 v-for也可以在实现了可迭
前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）持续更新
热门推荐
MingL520的博客
07-17 8万+
文档描述 本文是关注微信小程序的开发和面试问题， 由基础到困难循序渐进， 适合面试和开发小程序。 并有热点框架（vue react node.js 全栈）前端资源以及后端视频资源和源码 并基于前端进阶和面试的需求 总结了常用插件和js算法 以及html/css和js热点面试题 因为csdn不可以有外链 所以答案链接在评论区！！！ Vue面试题 生命周期函数面试题 1.什么是...
Vue v-for详细使用 + for in 、for of + 数组扁平化(flat）(1)
2401_84434954的博客
04-29 503
定义vue数据data: {//数组arr2: [{title: ‘星期一’}, {title: ‘星期二’}, {title: ‘星期三’}],//对象area: {“A”: [“安阳”, “安徽”],“B”: [“北京”, “保定”],“C”: [“长安”, “长沙”]},},vue循环数组v-for循环数组的时候有两个参数 第一个是数组项(表示数组中的每一项) 第二个是索引值 也叫下标。
Vue 中 v-for 进阶指南：in 与 of 的区别与使用场景
2401_86113453的博客
09-19 1699
in在JavaScript中，for...of是遍历可迭代对象的标准语法。类似地，在Vue.js中，v-for结合of可以遍历一切可迭代对象，如数组、字符串、SetMap等。尽管of并没有广泛应用于Vue.js文档中的例子，但它在处理特定数据结构时非常有效。ofv-for是Vue.js中非常强大和常用的指令，而理解in和of的差异能够帮助你更灵活地处理不同的数据结构。无论是遍历数组、对象，还是其他复杂数据结构，正确选择in或of都能让代码更加高效、易读。在你下次需要使用v-for。
《前端面试题：for...in 与 for...of 的区别》
最新发布
前端码农的博客
06-11 910
JavaScript 中的 for...in 和 for...of 循环有着本质区别：for...in 遍历对象可枚举属性（包括原型链），主要适用于普通对象；而 for...of 基于可迭代协议，专门用于遍历数组、Map、Set 等可迭代对象的元素值。性能方面，for...of 通常优于 for...in，但传统 for 循环在处理大型数组时效率最高。开发中应根据数据类型和需求选择合适的循环方式：对象属性遍历用 for...in，数组元素迭代用 for...of，性能关键场景考虑传统 for 循环。
vue for of 跟 for in的用法
weixin_46396187的博客
08-06 6552
vue for of 跟 for in的用法 对于普通的对象，for…of结构不能直接使用，会报错，必须部署了 Iterator 接口后才能使用,for-of用于数组对象。 但是，这样情况下，for…in循环依然可以用来遍历键名。 let obj = { sex: '男', age: "39", name: "kexiaokang" }; for (let e in obj) { console.log(e); } // sex // age //
vue中插值语法中v-for() of 与v-for() in 遍历对象数组的异同，以及for in for of在方法中遍历对象和数组的异同
weixin_47970316的博客
12-25 7432
前端for-of for-in 遍历对象和数组的区别以及v-for-of和v-for-in遍历对象和数组的区别
前端面试题，vue详解（组件传值）
01-08
看了很多关于vue组件传值的文章，于是想把文章总结一下，把关于vue组件传值好好聊聊，欢迎大家指正。 组件之间传值主要分两种 1、父子组件：props方法、ref方法、children和parent方法、 emit方法 2、非父子组件：...
17.Vue3面试真题（6题）.pdf
02-28
### Vue3面试真题知识点详解 #### 一、Composition API 的引入及意义 - **背景**：Vue3中推出的Composition API被广泛认为是Vue3最重要的特性之一。它旨在解决Vue2中存在的若干问题，特别是当项目逐渐庞大时，代码...
前端面试突破核心知识点备考-Vue
04-09
### Vue.js 核心知识点详解 #### Vue.js 简介 Vue.js 是一款轻量级、高效且灵活的前端框架，专为构建用户界面而设计。它支持单页面应用 (SPA) 和复杂的前端项目。Vue.js 的核心优势在于其易学性、灵活性以及高效的...
Vue前端面试题总结（三十三）Vue自定义指令如何使用？ 详解
Rick_and_mode的博客
09-18 3704
什么自定义指令？ 指令的注册方式和过滤器，组件是一样的 都是分为全局注册和局部注册 1.全局注册 Vue.directive('name',{}) 2.局部注册 directive:{ name:'' } 然后在模块中直接使用即可 Vue也提供了几种自定义指令的钩子函数 bind：指令第一次绑定到元素时调用，只执行一次。 inserted：被绑定的元素，插入到父节点的 DOM 中时调用。 update：组件更新时调用。 componentUpdated：组件与子组件更新时调用。 unbind：指令与元
for in和 for of的区别
yijiujiuqi的博客
10-13 203
for in用于遍历键名，for of用于遍历键值，for in它更适合遍历对象，不适用于遍历数组，for of适用遍历数/数组对象/字符串/map/set等拥有迭代器对象的集合.但是不能遍历对象，它循环内部调用的是数据结构的Symbol.iterator方法 ...
Vue12_使用for...in和for...of在循环遍历时的区别
linxwx的博客
02-23 2185
1. for…in遍历出的结果是key 2. for…of遍历出的结果是value； 3. v-for...in===v-for...of
for in与for of的区别
yjxkq99的博客
09-20 2173
区别二：for in 可以遍历对象，for of 不能遍历对象，只能遍历带有iterator接口的，例如Set,Map,String,Array。区别一：for in 和 for of 都可以循环数组，for in 输出的是数组的index下标，而for of 输出的是数组的每一项的值。for in 可以遍历对象，for of 不能遍历对象，只能遍历带有iterator接口的，例如Set,Map,String,Array。for in更适合遍历对象，当然也可以遍历数组，但是会存在一些问题。
Vue(19)v-for整数迭代(in、of通用)
大连赵哥的博客
06-18 556
Vue(19)v-for整数迭代(in、of通用)
vue中的v-for in 和js的for in
m0_58900588的博客
01-21 1049
在遍历的对象时，for的第一个参数返回对象中的值，第二个参数返回键。可见：vue中的v-for in遍历的是数组中的value。数组：返回的是索引值0，1，2。对象：返回的是键值a，b，c。
for in 和v-for in
weixin_43850458的博客
05-16 1367
1.for in 是原生js的循环语句，用于循环遍历对象的属性。 example0： var obj = { name: "sunn", age: 22, address: "sz" } for (let key in obj) { console.log("key", key); } 输出：key name key age key address ********尽量不用用它来操作数组。*********** 2. v-for in 是v...
vue中for...in常使用于对“数组或者对象的属性”进行循环遍历
pick_ears的博客
09-03 2320
vue中for...in常使用于对“数组的属性或者对象的属性”进行循环遍历 console.log(obj.length)无法计算对象的长度，显示undefined，因此采用for ... in 小习惯，使用for...in中的变量，习惯写成key或者k <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> .
前端开发面试宝典：Vue技术栈详解
前端面试宝典是前端开发工程师面试的必备知识总结，涵盖了个人简历模版、自我介绍话术、面试官问题、项目介绍、vue面试题等多方面的内容。本文将对前端面试宝典中的知识点进行详细的解析和总结。 一、个人简历模版 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值