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