JS遍历数组和对象的常用方法有哪些?

简介: JS遍历数组和对象的常用方法有哪些?

在JavaScript中,遍历数组和对象的常用方法有很多。以下是一些常用的方法:

遍历数组

   for 循环:

       这是最传统的遍历数组的方法。

   javascript

var array = [1, 2, 3, 4, 5];  
for (var i = 0; i < array.length; i++) {  
    console.log(array[i]);  

}

for...of 循环

(ES6+):

   专门用于遍历可迭代对象(包括数组、Map、Set、String、TypedArray、函数的 arguments 对象等等)。

javascript

var array = [1, 2, 3, 4, 5];  
for (var item of array) {  
    console.log(item);  

}

forEach 方法:

   forEach 是数组的一个方法,用于遍历数组的每个元素。

javascript

var array = [1, 2, 3, 4, 5];  
array.forEach(function(item) {  
    console.log(item);  

});

map 方法:

   map 方法也用于遍历数组,但通常用于生成新的数组,通过函数处理每个元素。

javascript

var array = [1, 2, 3, 4, 5];  
var newArray = array.map(function(item) {  
    return item * 2;  
});  

console.log(newArray); // [2, 4, 6, 8, 10] 

filter 方法:

   filter 方法用于过滤数组中的元素,返回满足条件的元素组成的新数组。

javascript

var array = [1, 2, 3, 4, 5];  
var filteredArray = array.filter(function(item) {  
    return item > 3;  
});  

console.log(filteredArray); // [4, 5] 

reduce 方法:

   reduce 方法对累加器和数组中的每个元素(从左到右)应用一个函数,将其减少为单个输出值。

javascript

var array = [1, 2, 3, 4, 5];  
var sum = array.reduce(function(accumulator, currentValue) {  
    return accumulator + currentValue;  
}, 0);  

    console.log(sum); // 15 

  some 和 every 方法:

       some 测试数组中是否至少有一个元素通过由提供的函数实现的测试。

       every 测试数组的所有元素是否都通过了由提供的函数实现的测试。


遍历对象


   for...in 循环:

       用于遍历对象的可枚举属性(包括继承的属性)。


   javascript

var obj = {a: 1, b: 2, c: 3};  
for (var key in obj) {  
    if (obj.hasOwnProperty(key)) { // 过滤掉继承的属性  
        console.log(key, obj[key]);  
    }  

} 

Object.keys() 方法:

   返回一个表示给定对象的所有可枚举属性的字符串数组(不包括继承的属性)。

javascript

var obj = {a: 1, b: 2, c: 3};  
Object.keys(obj).forEach(function(key) {  
    console.log(key, obj[key]);  

});

Object.values() 方法(ES2017+):

   返回一个给定对象自身可枚举属性的值组成的数组,其排列与使用 for...in 循环的顺序相同(两者的主要区别是 for-in 循环枚举原型链中的属性)。

javascript

var obj = {a: 1, b: 2, c: 3};  
Object.values(obj).forEach(function(value) {  
    console.log(value);  

});
相关文章
|
11天前
|
JavaScript API
js【最佳实践】遍历数组的八种方法(含数组遍历 API 的对比)for,forEach,for of,map,filter,reduce,every,some
js【最佳实践】遍历数组的八种方法(含数组遍历 API 的对比)for,forEach,for of,map,filter,reduce,every,some
24 1
|
13天前
|
JavaScript 前端开发
JavaScript中exec()方法详解
在这个示例中,exec()方法会找到两个匹配项,并打印出它们在字符串中的位置。
11 1
|
13天前
|
JavaScript
JS数组操作---删除,arr.pop()方法从数组中删除最后一个元素,并返回该元素的值,arr.shift() 删除第一个值,arr.splice()方法,删除指定元素,arr.splice,从第一
JS数组操作---删除,arr.pop()方法从数组中删除最后一个元素,并返回该元素的值,arr.shift() 删除第一个值,arr.splice()方法,删除指定元素,arr.splice,从第一
|
13天前
|
JavaScript
Js,定义数组的方法,let 数组名 = [数据1,数据2,........,数据n],取值方法,数组名[x],arr[0],let sum sum = sum + arr[0],求和的写法,平均值
Js,定义数组的方法,let 数组名 = [数据1,数据2,........,数据n],取值方法,数组名[x],arr[0],let sum sum = sum + arr[0],求和的写法,平均值
|
13天前
|
JavaScript
js 简易对象转字符串后恢复为简易对象(如 ^a=$1^b=2转对象)
js 简易对象转字符串后恢复为简易对象(如 ^a=$1^b=2转对象)
12 0
|
14天前
|
JavaScript
js 数组移除指定元素【函数封装】(含对象数组移除指定元素)
js 数组移除指定元素【函数封装】(含对象数组移除指定元素)
13 0
|
14天前
|
JavaScript
JS 数组去重(含简单数组去重【5种方法】、对象数组去重【2种方法】)
JS 数组去重(含简单数组去重【5种方法】、对象数组去重【2种方法】)
14 0
|
8天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
19 2
|
8天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
16 4
|
8天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
17 4