前端学习之几种常见for循环

1.循环数组

区别一:for in 和 for of 都可以循环数组,for in 输出的是数组的index下标,而for of 输出的是数组的每一项的值。
const arr = [1,2,3,4]
// for … in
for (const key in arr){
console.log(key) // 输出 0,1,2,3
}
// for … of
for (const key of arr){
console.log(key) // 输出 1,2,3,4
}

2.循环对象

区别二:for in 可以遍历对象,for of 不能遍历对象,只能遍历带有iterator接口的,例如Set,Map,String,Array
const object = { name: ‘lx’, age: 23 }
// for … in
for (const key in object) {
console.log(key) // 输出 name,age
console.log(object[key]) // 输出 lx,23
}
// for … of
for (const key of object) {
console.log(key) // 报错 Uncaught TypeError: object is not iterable
}

3.数组对象

const list = [{ name: ‘lx’ }, { age: 23 }]
for (const val of list) {
console.log(val) // 输出{ name: ‘lx’ }, { age: 23 }
for (const key in val) {
console.log(val[key]) // 输出 lx,23
}
}
总结:for in适合遍历对象,for of适合遍历数组。for in遍历的是数组的索引,对象的属性,以及原型链上的属性。

参考大佬的原文链接

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一些常见的Vue前端面试题及其答案: 1. Vue的优点是什么? Vue有以下几个优点: - 简单易学:Vue的API简单易懂,学习曲线较为平缓,可以快速上手。 - 组件化开发:Vue采用组件化开发,可以将复杂的UI拆分为独立的组件,提高代码的可复用性和可维护性。 - 响应式数据绑定:Vue采用双向数据绑定的方式,可以实时响应数据的变化,从而简化了代码的编写。 - 高效性能:Vue采用虚拟DOM技术,可以减少DOM操作的次数,提高页面渲染效率。 2. Vue的生命周期有哪些? Vue实例有以下生命周期钩子函数: - beforeCreate:实例刚被创建,数据观测和事件机制都未初始化。 - created:实例已经完成数据观测和事件机制的初始化,但未挂载到DOM上。 - beforeMount:模板编译完成,但未挂载到DOM上。 - mounted:实例已经挂载到DOM上。 - beforeUpdate:数据更新时调用,但尚未进行DOM重新渲染。 - updated:数据更新且DOM已重新渲染。 - beforeDestroy:实例销毁前调用。 - destroyed:实例销毁后调用。 3. Vuex是什么以及其核心概念? Vuex是Vue的状态管理库,用于集中管理应用程序的所有组件的状态。Vuex包含以下核心概念: - state:用于存储应用程序的状态。 - mutations:用于修改state的方法,必须是同步的。 - actions:可以包含任意异步操作,最终调用mutations来修改state。 - getters:用于从state中派生出一些状态,类似于计算属性。 4. Vue中的路由是什么以及其核心概念? Vue的路由是用于管理页面之间导航的库。Vue路由的核心概念包括: - 路由器:Vue的核心路由管理器,用于处理导航请求。 - 路由:定义导航规则的对象,包含URL路径和对应的组件。 - 路由视图:用于渲染路由匹配到的组件的地方。 - 命名视图:允许同时渲染多个组件的视图。 5. Vue中的指令是什么? 指令是Vue提供的一种特殊属性,用于在模板中添加响应式的行为。Vue中常见的指令包括: - v-if:根据表达式的值条件性地渲染元素。 - v-for:根据数组或对象的值循环渲染元素。 - v-bind:绑定元素的属性或组件的props到表达式。 - v-on:绑定事件监听器到元素上。 - v-model:双向绑定表单元素和数据。 - v-show:根据表达式的值条件性地显示或隐藏元素。 希望这些答案能够对你有所帮助。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值