JavaScript循环遍历常用的7种方法以及常用的数组 API

简介: JavaScript循环遍历常用的7种方法以及常用的数组 API

一、JavaScript循环遍历常用的7种方法

1,for循环

for循环是最常用的循环遍历方法,可以遍历数组、对象等数据类型

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}
for (let key in obj) {
  console.log(key + ': ' + obj[key]);
}

通过初始化变量,判断循环条件,更新变量值来达到循环遍历的目的;

for (let i = 0; i < 10; i++) {
  console.log(i);
}

2,forEach方法

forEach方法是数组的方法,可以遍历数组每个元素

arr.forEach(function(item) {
  console.log(item);
});

可以对数组的每个元素执行指定的操作,不需要额外的计数器变量

例如,遍历一个数组:

const arr = [1, 2, 3, 4, 5];
arr.forEach(item => {
  console.log(item);
});

3,map方法

map方法也是数组的方法,可以遍历数组每个元素并返回一个新的数组。

let newArr = arr.map(function(item) {
  return item * 2;
});
console.log(newArr);

4,while循环

while循环可以在满足条件时重复执行代码块。

let i = 0;
while (i < arr.length) {
  console.log(arr[i]);
  i++;
}

5,do…while循环

do…while循环与while循环类似,但是会先执行一次代码块,然后再检查条件是否满足。

let i = 0;
do {
  console.log(arr[i]);
  i++;
} while (i < arr.length);

6,for…in循环

for…in循环可以遍历对象的属性。

for (let key in obj) {
  console.log(key + ': ' + obj[key]);
}

需要注意的是,for…in循环不保证属性的遍历顺序,而且会遍历到原型链上的属性,可能会导致不可预期的结果。因此,在遍历对象时,建议使用其他方法或者结合使用Object.keys()、Object.values()或Object.entries()等方法。

7,for…of循环

for…of循环是ES6新增的循环语法,可以遍历可迭代对象(如数组、字符串等)的元素。

for (let item of arr) {
  console.log(item);
}
for (let char of str) {
  console.log(char);
}

以上是JavaScript循环遍历常用的几种方法,不同的循环方法适用于不同的场景,需要根据具体情况选择使用。

二、JavaScript 数组 API

以下是一些常用的 JavaScript 数组 API 的代码示例:

1、push()

push(): 在数组末尾添加一个或多个元素,返回新的数组长度

const arr = [1, 2, 3];
const newLength = arr.push(4, 5);
console.log(arr); // [1, 2, 3, 4, 5]
console.log(newLength); // 5

2、pop()

pop(): 删除数组末尾的元素,返回被删除的元素

const arr = [1, 2, 3];
const lastElement = arr.pop();
console.log(arr); // [1, 2]
console.log(lastElement); // 3

3、unshift()

unshift(): 在数组开头添加一个或多个元素,返回新的数组长度

const arr = [1, 2, 3];
const newLength = arr.unshift(0, -1);
console.log(arr); // [-1, 0, 1, 2, 3]
console.log(newLength); // 5

4、shift()

shift(): 删除数组开头的元素,返回被删除的元素

const arr = [1, 2, 3];
const firstElement = arr.shift();
console.log(arr); // [2, 3]
console.log(firstElement); // 1

5、slice()

slice(): 返回一个新的数组,包含从开始到结束(不包括结束)的所有元素

const arr = [1, 2, 3, 4, 5];
const newArr = arr.slice(1, 4);
console.log(newArr); // [2, 3, 4]

6、splice()

splice(): 在数组中添加或删除元素,返回被删除的元素

const arr = [1, 2, 3, 4, 5];
const removedElements = arr.splice(1, 2, 6, 7);
console.log(arr); // [1, 6, 7, 4, 5]
console.log(removedElements); // [2, 3]

7、map()

map(): 创建一个新数组,其中的元素是调用提供的函数后返回的结果

const arr = [1, 2, 3];
const newArr = arr.map((element) => element * 2);
console.log(newArr); // [2, 4, 6]

8、filter()

filter(): 创建一个新数组,其中的元素是调用提供的函数后返回值为 true 的元素

const arr = [1, 2, 3, 4, 5];
const newArr = arr.filter((element) => element % 2 === 0);
console.log(newArr); // [2, 4]

9、reduce()

reduce(): 对数组中的所有元素进行累加或合并,返回一个累加或合并后的结果

const arr = [1, 2, 3, 4, 5];
const sum = arr.reduce((acc, element) => acc + element, 0);
console.log(sum); // 15

以上是一些常用的 JavaScript 数组 API 的代码示例,还有许多其他有用的数组 API 可以在文档中查找。

目录
打赏
0
0
0
0
36
分享
相关文章
Python 中调用 DeepSeek-R1 API的方法介绍,图文教程
本教程详细介绍了如何使用 Python 调用 DeepSeek 的 R1 大模型 API,适合编程新手。首先登录 DeepSeek 控制台获取 API Key,安装 Python 和 requests 库后,编写基础调用代码并运行。文末包含常见问题解答和更简单的可视化调用方法,建议收藏备用。 原文链接:[如何使用 Python 调用 DeepSeek-R1 API?](https://apifox.com/apiskills/how-to-call-the-deepseek-r1-api-using-python/)
有没有方法可以保证在JavaScript中多个异步操作的执行顺序?
有没有方法可以保证在JavaScript中多个异步操作的执行顺序?
87 58
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
深入理解 JavaScript 中的 Array.find() 方法:原理、性能优势与实用案例详解
Array.find() 是 JavaScript 数组方法中一个非常实用和强大的工具。它不仅提供了简洁的查找操作,还具有性能上的独特优势:返回的引用能够直接影响原数组的数据内容,使得数据更新更加高效。通过各种场景的展示,我们可以看到 Array.find() 在更新、条件查找和嵌套结构查找等场景中的广泛应用。 在实际开发中,掌握 Array.find() 的特性和使用技巧,可以让代码更加简洁高效,特别是在需要直接修改原数据内容的情形。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
通过array.some()实现权限检查、表单验证、库存管理、内容审查和数据处理;js数组元素检查的方法,some()的使用详解,array.some与array.every的区别(附实际应用代码)
array.some()可以用来权限检查、表单验证、库存管理、内容审查和数据处理等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
通过array.every()实现数据验证、权限检查和一致性检查;js数组元素检查的方法,every()的使用详解,array.some与array.every的区别(附实际应用代码)
array.every()可以用来数据验证、权限检查、一致性检查等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
最细最有条理解析:事件循环(消息循环)是什么?为什么JS需要异步
度一教育的袁进老师谈到他的理解:单线程是异步产生的原因,事件循环是异步的实现方式。 本质是因为渲染进程因为计算机图形学的限制,只能是单线程。所以需要“异步”这个技术思想来解决页面阻塞的问题,而“事件循环”是实现“异步”这个技术思想的最主要的技术手段。 但事件循环并不是全部的技术手段,比如Promise,虽然受事件循环管理,但是如果没有事件循环,单一Promise依然能实现异步不是吗? 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您
盘点原生JS中目前最没用的几个功能API
在JavaScript的发展历程中,许多功能与API曾风光无限,但随着技术进步和语言演化,部分功能逐渐被淘汰或被更高效的替代方案取代。例如,`with`语句使代码作用域复杂、可读性差;`void`操作符功能冗余且影响可读性;`eval`函数存在严重安全风险和性能问题;`unescape`和`escape`函数已被`decodeURIComponent`和`encodeURIComponent`取代;`arguments`对象则被ES6的剩余参数语法替代。这些变化体现了JavaScript不断优化的趋势,开发者应紧跟技术步伐,学习新技能,适应新技术环境。
51 10
JavaScript字符串的常用方法
在JavaScript中,字符串处理是一个非常常见的任务。JavaScript提供了丰富的字符串操作方法,使开发者能够高效地处理和操作字符串。本文将详细介绍JavaScript字符串的常用方法,并提供示例代码以便更好地理解和应用这些方法。
70 13
深入浅出Node.js:从零开始构建RESTful API
在数字化时代的浪潮中,后端开发作为连接用户与数据的桥梁,扮演着至关重要的角色。本文将引导您步入Node.js的奇妙世界,通过实践操作,掌握如何使用这一强大的JavaScript运行时环境构建高效、可扩展的RESTful API。我们将一同探索Express框架的使用,学习如何设计API端点,处理数据请求,并实现身份验证机制,最终部署我们的成果到云服务器上。无论您是初学者还是有一定基础的开发者,这篇文章都将为您打开一扇通往后端开发深层知识的大门。
86 12

热门文章

最新文章