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 可以在文档中查找。

目录
相关文章
|
3天前
|
前端开发 JavaScript
前端 js 经典:数组常用方法总结
前端 js 经典:数组常用方法总结
13 0
|
2天前
|
移动开发 JavaScript iOS开发
WKWebView和js互调方法的实现
WKWebView和js互调方法的实现
7 0
|
3天前
|
JavaScript 前端开发
Symbol在JavaScript中还有哪些内置的Symbol可以用于定义特定的方法或属性
Symbol在JavaScript中还有哪些内置的Symbol可以用于定义特定的方法或属性
|
3天前
|
前端开发 JavaScript
前端 JS 经典:数组去重万能方法
前端 JS 经典:数组去重万能方法
7 0
|
3天前
|
前端开发 JavaScript 流计算
前端 js 经典:字符串超全方法总结
前端 js 经典:字符串超全方法总结
13 0
|
4天前
|
Web App开发 存储 开发框架
使用Node.js构建RESTful API
【5月更文挑战第20天】本文指导使用Node.js和Express构建RESTful API。首先确保安装了Node.js,然后初始化项目,安装Express框架。在`app.js`中创建API,定义GET路由`/api/users`返回用户列表。运行服务器并测试API,最后讨论如何扩展API和提升其功能。这是一个构建RESTful API的基础入门教程。
|
5天前
|
前端开发 JavaScript 开发者
JavaScript中的异步编程方法总结
在JavaScript开发中,处理异步操作是非常常见的情况。本文将总结JavaScript中常用的异步编程方法,包括Callback、Promise、Async/Await等,分析其优缺点,并提供使用建议。
|
6天前
|
缓存 前端开发 JavaScript
React和Next.js开发常见的HTTP请求方法
React和Next.js开发常见的HTTP请求方法
9 0
|
6天前
|
前端开发 JavaScript
前端 JS 经典:Math 常用方法汇总
前端 JS 经典:Math 常用方法汇总
10 0
|
6天前
|
前端开发 JavaScript
前端 js 经典:Object 常用原生方法
前端 js 经典:Object 常用原生方法
12 2