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