目录
1.for
循环:for
循环是最常见和经典的循环结构之一。它允许你明确指定循环的起始条件、终止条件和每次迭代后进行的操作。
?for (let i = 0; i < length; i++) {
? ?// 循环体内的操作
?}
2.while
循环:while
循环在每次迭代之前检查指定的条件,并在条件为真时执行循环体内的操作。
?let i = 0;
?while (i < length) {
? ?// 循环体内的操作
? ?i++;
?}
3.do...while
循环:do...while
循环与 while
循环类似,但它在循环体的操作之后检查指定的条件。
?let i = 0;
?do {
? ?// 循环体内的操作
? ?i++;
?} while (i < length);
4.for...in
循环:for...in
循环用于迭代对象的可枚举属性。它将遍历对象的属性,并对每个属性执行指定的操作。但需要注意遍历的顺序是不确定的,
写法:
?for (let key in object) {
? ?// 循环体内的操作
?}
案例:
?1.遍历对象的属性:
? ? ?const obj = {
? ? ? ?name: 'John',
? ? ? ?age: 30,
? ? ? ?occupation: 'Developer'
? ? };
??
? ? ?for (let key in obj) {
? ? ? ?console.log(key + ':', obj[key]);
? ? }
? /**
? ? 输出:
? ? ? ? ? ? name: 'John',
? ? ? ? ? ? age: 30,
? ? ? ? ? ? occupation: 'Developer'
? */
?// 该代码将遍历对象 obj 的可枚举属性,并打印每个属性的键和对应的值。
??
??
?2.统计对象属性个数:
? ? ?const obj = {
? ? ? ?name: 'John',
? ? ? ?age: 30,
? ? ? ?occupation: 'Developer'
? ? };
??
? ? ?let count = 0;
? ? ?for (let key in obj) {
? ? ? ?count++;
? ? }
? ? ?console.log('Property count:', count);
? /**
? ? 输出: Property count:3
? */
?//该代码通过 for...in 循环遍历对象 obj 的属性,每遍历到一个属性就将计数器
//count 加一。最后,打印对象属性的个数。
注意:
for...in
循环遍历的是对象的可枚举属性,包括原型链上的属性。如果不想遍历原型链上的属性,可以使用 hasOwnProperty()
方法进行过滤:
?for (let key in obj) {
? ?if (obj.hasOwnProperty(key)) {
? ? ?// 循环体内的操作
? }
?}
??
?//这样可以确保只遍历对象自身的属性,而不包括继承的属性。
5.for...of
循环:for...of
循环是 ES6 中引入的新特性,用于迭代可迭代对象(如数组、字符串等)的元素。它可以更方便地遍历集合对象中的元素。
写法:
for (let element of iterable) {
? ?// 循环体内的操作
?}
案例:
?1.遍历数组元素:
? ? ?const arr = [1, 2, 3, 4, 5];
??
? ? ?for (let element of arr) {
? ? ? ?console.log(element);
? ? }
?// ? 该代码将遍历数组 arr 的元素,并将每个元素打印到控制台。
??
?2.遍历字符串的字符:
? ? ?const str = "Hello";
??
? ? ?for (let char of str) {
? ? ? ?console.log(char);
? ? }
?// ? 该代码将遍历字符串 str 的字符,并将每个字符打印到控制台。
??
?3.遍历可迭代对象的自定义类型:
? ? ?const iterableObj = {
? ? ? ? ?*[Symbol.iterator]() {
? ? ? ? ? ? ?yield "a";
? ? ? ? ? ? ?yield "b";
? ? ? ? ? ? ?yield "c";
? ? ? ? }
? ? };
??
? ? ?for (let element of iterableObj) {
? ? ? ? ?console.log(element);
? ? }
?// 该代码定义了一个可迭代对象 iterableObj,它使用生成器函数(Generator)
// 定义了自己的迭代器。然后,通过 for...of 循环遍历该可迭代对象的元素,并打印每个元素。
??
注意:
for...of
循环只能用于遍历可迭代对象,而不能用于遍历普通对象(非可迭代对象)。如果想要遍历普通对象的属性,请使用 for...in
循环。
6.forEach()
循环:forEach()
方法需要一个函数作参数
?let perArr = ["孙悟空","红孩儿","猪八戒","二郎神","唐三藏","沙悟净"];
?function fun (){
? ? ?console.log("我有多少个"); // 执行6遍,因为有perArr 有6个元素
?}
?perArr.forEach(fun);
但一般直接写函数
?let perArr.forEach(function(){
? ? ?console.log("我有多少个"); // 执行6遍,因为有perArr 有6个元素
?});
而这种函数是由开发人员创建
,但却不是
由开发人员调用
的,称为回调函数
并且数组中有几个元素,改函数就执行多少遍,如果有添加上形参
1、遍历的元素
let perArr = ["孙悟空","红孩儿","猪八戒","二郎神","唐三藏","沙悟净"];
?perArr.forEach(function(a){
? ? ?console.log(a); // 孙悟空 红孩儿 猪八戒 二郎神 唐三藏 沙悟净
?});
2、遍历元素的索引(下标)
let perArr = ["孙悟空","红孩儿","猪八戒","二郎神","唐三藏","沙悟净"];
?perArr.forEach(function(a,b){
? ? ?console.log(b); // 0 1 2 3 4 5
?});
3、正在遍历的数组对象
?let perArr = ["孙悟空","红孩儿","猪八戒","二郎神","唐三藏","沙悟净"];
?perArr.forEach((a,b,c)=>{
? ? ?console.log(c); ?// (孙悟空 红孩儿 猪八戒 二郎神 唐三藏 沙悟净)*6
?});
总结
?let perArr = ["孙悟空","红孩儿","猪八戒","二郎神","唐三藏","沙悟净"];
?perArr.forEach((value,index,object)=>{
? ? ?console.log(value);
? ? ?console.log(index);
? ? ?console.log(object);
?});
注意
:forEach()
方法它并不支持在循环中使用 break
或 return
来提前终止循环,
7.map
方法array.map(function(currentValue, index, arr), thisValue)
??
?/**
?* currentValue:当前处理的元素;
?* index:当前处理元素的索引;
?* arr:当前处理元素的数组。
?*/
不修改原数组:map
方法创建一个新数组,而不修改原始数组。这对于保持数据的不可变性很有用,因为你不必担心在处理数据时不小心更改原数组。
函数式编程:map
是函数式编程中的常见工具之一,它允许你以声明性的方式处理数据,从而使代码更易读和维护。
数据转换:在很多情况下,你可以使用 map
来将一种数据格式转换为另一种,例如,将对象数组中的特定属性提取出来,以创建一个包含这些属性值的新数组。
转换数组元素:map
允许你将数组中的每个元素通过一个回调函数进行处理,从而创建一个新的数组,其中的元素是原数组经过处理后的结果。这可以用于将数组中的数据进行转换,修改或映射到一个新数组。
?javascriptconst numbers = [1, 2, 3, 4, 5];
?const squaredNumbers = numbers.map((num) => num * num);
?// squaredNumbers 现在包含 [1, 4, 9, 16, 25]
遍历数组:通过 map
,你可以遍历数组中的元素,执行一些操作,而不需要显式的 for
循环或 forEach
方法。
?javascriptconst fruits = ['apple', 'banana', 'cherry'];
?fruits.map((fruit) => console.log(fruit));
?// 输出每个水果