jS遍历的方法?其中哪些是遍历数组的,哪些是遍历对象的?

本文深入探讨了数组和对象的遍历方法,包括普通for循环、优化版for循环、forEach、map及for-of循环。对比了各种遍历方式的性能和适用场景,特别指出for-of循环的优点以及for-in循环在数组遍历上的不足。

数组

  • 普通for循环,经常用的数组遍历 ;

  • 优化版for循环:使用变量,将长度缓存起来,避免重复获取长度,数组很大时优化效果明显;

    for(var j = 0,len = arr.length; j < len; j++){
        console.log(arr[j]);
    }
  • forEach,ES5推出的,数组自带的循环,主要功能是遍历数组,实际性能比for还弱

    arr.forEach(function(value,i){
      console.log('forEach遍历:'+i+'--'+value);
    })
    - 有一个小缺陷:你不能使用break语句中断循环,也不能使用return语句返回到外层函数。
  • map遍历,map即是 “映射”的意思 用法与 forEach 相似

    - map遍历支持使用return语句,支持return返回值
    - forEach、map都是ECMA5新增数组的方法,所以ie9以下的浏览器还不支持
  • for-of遍历 是ES6新增功能

    for( let i of arr){
        console.log(i);
    }
    - for-of这个方法避开了for-in循环的所有缺陷
    - 与forEach()不同的是,它可以正确响应break、continue和return语句 

对象

for-in遍历

for-in是为遍历对象而设计的,不适用于遍历数组。
遍历数组的缺点:数组的下标index值是数字,for-in遍历的index值"0","1","2"等是字符串
for (var index in arr){
    console.log(arr[index]);
    console.log(index);
}
### 遍历对象方法 在 Vue 3 中使用 JavaScript 遍历对象时,可以采用多种方法来访问对象的键值对。以下是一些常见的遍历方式: #### 使用 `for...in` 循环 通过 `for...in` 循环可以迭代对象的所有可枚举属性,这种方式会遍历包括原型链上的属性[^1]。 ```javascript const person = { name: 'Alice', age: 25, gender: 'female' }; for (const key in person) { if (person.hasOwnProperty(key)) { console.log(`键 ${key} 对应的值为:`, person[key]); } } ``` #### 使用 `Object.keys()` 方法方法返回一个由给定对象自身可枚举属性成的数,然后可以使用数的 `.forEach()` 或其他数方法进行处理。 ```javascript const person = { name: 'Alice', age: 25, gender: 'female' }; Object.keys(person).forEach((key) => { console.log(`键 ${key} 对应的值为:`, person[key]); }); ``` #### 使用 `Object.entries()` 方法方法返回一个给定对象自身可枚举属性的键值对数。它可以与 `for...of` 循环结合使用以同时获取键和值。 ```javascript const person = { name: 'Alice', age: 25, gender: 'female' }; for (const [key, value] of Object.entries(person)) { console.log(`键 ${key} 对应的值为:`, value); } ``` #### 使用 `Reflect.ownKeys()` 方法方法返回一个包含目标对象自身的所有属性(包括不可枚举属性)的数。 ```javascript const person = { name: 'Alice', age: 25, gender: 'female' }; Reflect.ownKeys(person).forEach((key) => { console.log(`键 ${key} 对应的值为:`, person[key]); }); ``` #### 使用 `Object.getOwnPropertyNames()` 方法 这个方法返回一个非继承的、所有自身属性的名称数,无论这些属性是否是可枚举的。 ```javascript const person = { name: 'Alice', age: 25, gender: 'female' }; Object.getOwnPropertyNames(person).forEach((key) => { console.log(`键 ${key} 对应的值为:`, person[key]); }); ``` 以上就是在 Vue 3 中使用 JavaScript 遍历对象的一些常用方法
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值