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

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

遍历数组

for 循环:

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

javascript

var array = 1, 2, 3, 4, 5;

for (var i = 0; i < array.length; i++) {

console.log(arrayi);

}

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, objkey);

}

}

Object.keys() 方法:

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

javascript

var obj = {a: 1, b: 2, c: 3};

Object.keys(obj).forEach(function(key) {

console.log(key, objkey);

});

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);

});

相关推荐
琹箐1 分钟前
chrome 插件下载安装;Manifest file is missing or unreadable
前端·chrome
云飞云共享云桌面2 分钟前
面向机械研发:双服务器架构搭配云飞云运行 SolidWorks 方案详解
运维·服务器·前端·网络·架构·制造
catchadmin10 分钟前
PHP 在领域驱动(DDD)设计中的核心实践
开发语言·php
乐兮创想 小林15 分钟前
B2B 内容营销的工程化运营:从内容矩阵建模到 SEO/GEO 联动的完整体系
前端·线性代数·矩阵·网站建设·北京网站建设公司
2501_9400417415 分钟前
全栈开发提速指南:可以直接用的项目生成提示词
前端·prompt
BomanGe217 分钟前
NSK直线导轨LH55EL与NH55EM替代指南
前端·javascript·数据库·经验分享·规格说明书
云水一下17 分钟前
Vue.js从零到精通系列(四):前端路由与Vue Router——打造多页单页应用
前端·javascript·vue.js
糯米导航19 分钟前
浏览器解析HTML头部的底层逻辑:从字节流到渲染树的关键一步
前端·html
baozj20 分钟前
把徒步轨迹做成 3D 地形模型:开源工具「印迹 TrailPrint 3D」
前端·vue.js·github
ViavaCos20 分钟前
前端SSE实战指南
前端