首页 > 编程语言 >Javascript 常见的循环方式总结

Javascript 常见的循环方式总结

时间:2023-05-18 18:23:04浏览次数:51  
标签:总结 遍历 console log Javascript 循环 let 数组

本文地址: https://www.cnblogs.com/zichliang/p/17412968.html
在Javascript中有很多种循环方式。有多种循环方式可以用来遍历数组、对象、以及执行一些重复性任务
但是有很多方式甚至从未用过,所以简单来总结一下JS中的循环

for循环

for 循环是在您希望创建循环时经常使用的工具。

例:

for (let i = 0; i < 5; i++) {
    console.log(`第${i + 1}次循环遍历`)
}

结果

while 循环

While语句包括一个循环条件和一段代码块,只要条件为真,就不断循环执行代码块。

例:

let i = 0;
while (i < 100) {
    i = i + 1;
    console.log(`第${i}次循环遍历`)
}

结果

do……while循环

先运行循环代码 再执行判断条件

let a = 3;
let b = 0;

do {
    console.log("打印b的值>>>>>",b);
    b++;
} while (b < a); // 当a小于等于b的时候终止她。

结果

while:先判断后执行; do-while:先执行再判断,即使初始条件不成立, do-while循环至少执行一次;

for-in循环

fo…in循环一般用于对象的遍历

let kj = {
    "a": 1,
    "b": 2,
    "c": 3
}


//使用for-in遍历这个对象
for (let k in kj) {
    console.log(k, kj[k])
}

结果

注! 最好不要用for in遍历数组

for-of循环

for...of 循环是 ES6 中新增的一种循环类型,它允许您遍历可迭代对象(例如数组、字符串、Map 或 Set)中的每个元素,并对其执行指定的操作。
for-of 可以更方便的循环遍历数组等

let arr = [1, 2, 4, 5, 6, 7]
for (let v of arr) {
    console.log(v);
}

结果

for in遍历的是数组的索引(即键名),而for of遍历的是数组元素值。 for in更适合遍历对象,不要使用for in遍历数组 使用for in会遍历数组所有的可枚举属性,包括原型。例如上栗的原型方法method和name属性

map()循环

map()是一种常用的数组方法,它可以将一个数组中的每个元素按照一定规则映射为一个新的数组

const originalArray = [1, 2, 3, 4, 5];
const newArray = originalArray.map((number) => {
  console.log(number)
  return number * 2;
});

console.log(newArray); // Output: [2, 4, 6, 8, 10]

结果

forEach循环

forEach()是一种常用的数组方法,可以帮助我们遍历一个数组并对其中的每个元素执行指定的操作。
例子

const originalArray = [1, 2, 3, 4, 5];
originalArray.forEach((number) => {
  console.log(number * 2);
});

结果

forEach()方法没有返回值,因此我们不能将其运行结果赋值给其他变量

filter()过滤循环

filter()是一种常用的数组方法,它可以帮助我们按照特定条件筛选出一个数组中的部分元素并返回一个新的数组

const originalArray = [1, 2, 3, 4, 5];
const filteredArray = originalArray.filter((number) => {
  // 只返回能被2整除的数 也就是偶数
  return number % 2 === 0;
});

console.log(filteredArray);

结果

filter()方法不会修改原始数组,而是返回一个新的数组作为其运行结果。因此,如果我们需要在原始数组中删除一些元素,那么就应该使用splice()方法

JS实现Python中的zip循环

熟悉python的都知道ZIP循环面对循环两个数组很好用 那么在python中如何实现呢?

例子

function* zip(...arrays) {
    let minLength = Math.min(...arrays.map(arr => arr.length));
    for (let i = 0; i < minLength; i++) {
        yield arrays.map(arr => arr[i]);
    }
}

let aList = [1, 2, 3]
let bList = ["a", "b", "c"]

for (let [a, b] of zip(aList, bList)) {
    console.log(a, b)
}

结果

some()和every()

some() 和 every() 方法是很有用的数组方法,它们都是用来遍历数组并返回布尔值。

some() 方法

some() 方法用来检测数组中是否有至少一个元素满足指定条件。当任意一个元素满足条件,则该方法返回 true;否则,返回 false。

例子:

const numbers = [2, 4, 6, 8, 12];
const hasLargeNumber = numbers.some(function(element) {
  return element > 10;
});

console.log(hasLargeNumber); 

结果

很显然 只要有一个结果满足了 大于10的条件 就返回了true

every() 方法

every() 方法与 some() 方法类似,不过它要求所有元素都满足指定条件。当所有元素都满足条件,则该方法返回 true;否则,返回 false。
例子

const numbers = [2, 4, 6, 8, 12];
const hasLargeNumber = numbers.every(function(element) {
  return element > 10;
});

console.log(hasLargeNumber);

结果

很显然 只要有一个结果不满足 大于10的条件 就返回了false 和some方法相反

reduce() 和 reduceRight()

是 JavaScript 数组中常用的两个方法,它们都是用于将数组中的元素归纳为单个值。
它们可以帮助您迭代和聚合数组中的元素

reduce() 方法

reduce() 方法对数组中的每个元素执行一个由您提供的函数,并将其结果汇总为单个返回值。该方法需要传入两个参数:一个回调函数和一个可选的初始值。

const numbers = [1, 2, 3, 4, 5];
//accumulator: 表示当前已经累积的值初始值是0 currentValue 表示当前正在被遍历的数组元素。
const sum = numbers.reduce(function(accumulator, currentValue) {
  console.log(accumulator,currentValue)
  return accumulator + currentValue;
}, 0);

console.log(sum)

结果

accumulator: 表示当前已经累积的值初始值是0 currentValue 表示当前正在被遍历的数组元素。

reduceRight() 方法

reduceRight() 方法与 reduce() 方法类似,不过它是从数组的末尾开始遍历数组并执行回调函数。该方法也需要传入两个参数:一个回调函数和一个可选的初始值。

const numbers = [1, 2, 3, 4, 5];
//accumulator: 表示当前已经累积的值初始值是0 currentValue 表示当前正在被遍历的数组元素。
const sum = numbers.reduceRight(function(accumulator, currentValue) {
  console.log(accumulator,currentValue)
  return accumulator + currentValue;
}, 0);

console.log(sum)

结果

本文地址: https://www.cnblogs.com/zichliang/p/17412968.html

标签:总结,遍历,console,log,Javascript,循环,let,数组
From: https://www.cnblogs.com/zichliang/p/17412968.html

相关文章

  • 论文、专利、文献检索及图像数据工具总结
    一、文献检索1、中文文献检索参考中文文献途径网址用途1知网https://www.cnki.net/文献检索、下载2万方数据网https://www.wanfangdata.com.cn/文献检索、下载3维普期刊http://lib.cqvip.com/文献检索、下载4浙江图书馆https://www.zjlib.cn/#se......
  • 测试心得:一个不断总结,不断思考的过程
    1.测试不仅仅是我写了多少用例,测了多少需求多少功能点,搞了多少自动化脚本,更要对整个项目进行把控,把握项目存在的风险,督促项目进度。一个亲身经历:一位同事在测试的时候,最后收尾阶段发现了三个新的问题,两个是第三方平台的问题,无法解决,一个问题可以解决,项目经理给出了5天的时间,同事同......
  • 总结:C语言条件编译
    条件编译指令选择哪些代码被编译,哪些代码不被编译。可以根据表达式的值或某个特定宏是否被定义来确定编译条件。#空指令#include包含一个源代码文件#define定义宏#undef取消已定义的宏#error停止编译并显示错误信息#if,如果给定条件为真,则编......
  • JavaScript全解析——Ajax是什么(上)
    AJAX是AsynchronousJavaScriptAndXML的缩写。它不是一种编程语言。它是一种基于HTML、CSS、JavaScript和XML,让开发更好、更快和更有互动的Web应用的技术。什么是ajax认识前后端交互前后端交互就是前端与后端的一种通讯方式,主要使用的技术栈就是ajax(asyncjavascript......
  • Java实现输出九九乘法表—for循环和递归算法
    Java实现输出99乘法表for循环publicclassninenine{publicstaticvoidmain(String[]args){for(inti=1;i<10;i++){for(intj=1;j<=i;j++){System.out.printf("%d*%d=%d\t",j,i,j*i);}......
  • javascript创建数组
    javascript数组:vararray=[]等于创建一个数组array[0]代表给数组的第一个位置上赋值,值为32array[5]代表给数组的第六位置上赋值。值为3在位置0,1,2,5位置上都赋值,维度3,4位置上未赋值,但有一栏占位,所以会导致array.lenth获取数组的长度为6dor(vari=0;<array.lenth;i++){}代表的......
  • muduo库总结
    第5章高效的多线程日志muduo没有用标准库中的iostream,而是自己写的LogStreamclass,这主要是出于性能原因(§11.6.6)。为什么不通过网络写日志信息:无法判断网络问题、可能使发送日志的一方内存爆掉、消耗带宽日志文件的滚动:达到一定时间或文件达到一定大小后,会新建日志文件。创......
  • 开发经验总结
    1、在多端小程序融合一端的情况下,login操作不适宜放在app.js里边,会导致多端用户互相影响的情况。  正确的做法是,在有可能成为普通用户入口页的地方,做login操作。  非普通用户端用户,连续进入非普通用户入口,可根据缓存通过服务器验证登录态的方式,实现自动登录,不会受到普......
  • win10定时开关机(很多地方总结的定时开机不生效),要用主板bios设置才可以
    1.定时关机(可以使用windows中计划任务)1.此电脑右键-->管理-->系统工具-->任务计划程序库-->右侧创建基本任务2.名称:定时关机,触发器:每天,开始时间2023/05/1817:30:00,启动程序:浏览选择C:\Windows\System32\shutdown.exe,参数:-s 2.定时开机(系统中设置开机,肯定不行。......
  • JavaScript中变量类型间的转化
    转到数值字符串布尔nullundefined数值Number()parsenInt()-0,/1,*1Number(true)→1Number(false)→0Number(null)→0Number(undefind)→NaN字符串String()toString()+""String(true)→trueString(false)→falseError:null.toString()Error:undefined.......