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

目录
相关文章
|
7天前
|
JavaScript
js 解析 byte数组 成字符串
js 解析 byte数组 成字符串
|
16天前
|
JavaScript 前端开发
JavaScript基础知识-数组的遍历
关于JavaScript数组遍历基础知识的文章。
27 2
JavaScript基础知识-数组的遍历
|
1天前
|
JavaScript 前端开发
js删除数组最后一个元素
js删除数组最后一个元素
|
16天前
|
JavaScript 前端开发
JavaScript基础知识-数组的练习
关于JavaScript基础知识中数组操作的练习,主要介绍了如何从一个包含Person对象的数组中过滤出成年人(年龄达到18岁及以上)并将他们放入一个新的数组中。
25 1
JavaScript基础知识-数组的练习
|
1天前
|
JavaScript 前端开发
JavaScript Array map() 方法
JavaScript Array map() 方法
|
1天前
|
存储 JavaScript
js切割截取字符串方法
js切割截取字符串方法
|
1天前
|
JavaScript
JS数组合并的常用方法
JS数组合并的常用方法
|
6天前
|
JavaScript
js 循环数组取值
js 循环数组取值
|
14天前
|
前端开发 JavaScript
前端ES5 | js —添加元素方法
前端ES5 | js —添加元素方法
|
12天前
|
存储 JavaScript 前端开发
JS中的数组有哪些常用操作函数和属性
【9月更文挑战第7天】JS中的数组有哪些常用操作函数和属性
9 1