JS基础入门篇（三）— for循环，取余，取整。

1.for循环

1.for的基本简介

    作用:根据一定的条件，重复地执行一行或多行代码语法:for( 初始化 ; 判断条件 ; 条件改变 ){代码块}

2.for循环的执行顺序

<body><script>    for( var a = 0;a < 5;a++ ){        alert(1);            }alert(2);
//------------------------------------------
//        1-初始化:                         var a = 0;
//        2-判断条件:                         a < 5
//        3-如果条件成立,执行 代码块 :         alert(1);
//            条件不成立,跳出 for 循环(for循环结束)
//        4-条件改变:                         a++//        1- (2-3-4-)( 2-3-4-)(2-3-4-)...2-判断不成立 -结束for，执行alert(2);
//------------------------------------------</script>
</body>

2.利用for循环生成html内容的性能问题

以下代码作用，利用for循环生成1000个li

<script>console.time("a");var list = document.getElementById("list");for( var i = 0;i < 1000;i++ ){list.innerHTML = list.innerHTML+ "<li>"+ i +"</li>";}console.timeEnd("a");//计算生成1000个li所需时间。</script>

所需时间：是大约1177毫秒。

分析：需要这么长时间的原因是，以下代码造成的，因为每次都要重新读list中的内容，然后增添一个li。这造成性能过低。如果要添加100000个li，需要耗时更长时间。

list.innerHTML = list.innerHTML+ "<li>"+ i +"</li>";

性能改进：

<body><ul id="list"></ul><script>console.time("a");var list = document.getElementById("list");var str = "";//声明并赋值一个空字符串for( var i = 0;i < 1000;i++ ){str = str+ "<li>"+ i +"</li>";//统一往str塞完了li}list.innerHTML = str;//在给listconsole.timeEnd("a");</script>
</body>

所用时长：只用了2毫秒。

3.取余

1. % 这个运算符主要用来取到两数相除的余数。

<body><script>//打印两数相除结果console.log( 7/3 );//2.3333333333//打印余数console.log( 7%3 );//1console.log( 4%2 );//0console.log( 11%7 );//4console.log( 3%7 );//3</script>
</body>

2. % 的重要使用
总结规律：%后的结果，取余都会小于除数。

<body><script>for( var i=0;i<20;i++ ){console.log( i%5 );}</script>
</body>

结果为：都小于5，之后for循环条件的判断有时候会需要。

4./ 和Math.floor（）；

/，就是加减乘除中的除法在计算机中的符号。
Math.floor(); 是向下取整，取到的数总比原始值小。

<body><script>console.log( 7/3 );//2.333333333console.log( Math.floor( 7/3 ) );//2console.log( Math.floor( 3.3333 ) );//3console.log( Math.floor( 3.9 ) );//3console.log( Math.floor( 3.0 ) );//3console.log( Math.floor( -1.2 ) );//-2console.log( Math.floor( -1.6 ) );//-2</script>
</body>

5.V字型变换练习

V字型变换练习

JS基础入门篇（三）— for循环，取余，取整。相关推荐

JS基础入门篇（一）
1.JS存放在代码中的位置 1.JS写在行间 <div style="background-color: red;" onclick="alert(1)" ...
JS基础入门篇（一）
1.JS存放在代码中的位置 1.JS写在行间 <div style="background-color: red;" onclick="alert(1)" ...
JS基础入门篇（四）—this的使用，模拟单选框，选项卡和复选框
1.this的使用 thisjs中的关键字js内部已经定义好了,可以不声明直接使用 this的指向问题1. 在函数外部使用this指向的是window2. 在函数内部使用有名函数直接调用函数 thi ...
Vue学习-基础入门篇(三万字收藏篇)
目录前言一.Vue介绍 1.Vue是什么 2.Vue的特点二.Vue.js的安装 1.使用Vite创建三.Vue声明式渲染四.Data Property 和方法 1.Data Propert ...
Java基础入门篇之For循环
一.for循环语句 1.在java中一般用在次数确定情况下.如果要进行重复性指令执行,可以用for循环.基本语法如下所示: for(初始化表达式:循环条件:操作表达式){ c1:执行语句 ...... ...
JS基础入门篇（四十三）—ES6（二）
1.对象简洁表示法原来写法 var name = "lzf";var gender = "male";var fn = function(){console. ...
JAVA中整型常量的长度,Java基础入门篇（三）——Java常量、变量，
Java基础入门篇(三)--Java常量.变量, 一.Java常量 (一)什么是常量常量指的是在程序中固定不变的值,是不能改变的数据.在Java中,常量包括整型常量.浮点型常量.布尔常量.字符常量等 ...
EGE基础入门篇（三）：开场动画
EGE专栏:EGE专栏上一篇:EGE基础入门篇(二):开始使用EGE 下一篇:EGE基础入门篇(四):窗口简单操作文章目录开场动画 1. EGE开场动画的默认方式 2. 开场动画的开启 3. 开 ...
〖Python零基础入门篇㉚〗- Python中的循环
订阅 Python全栈白宝书-零基础入门篇可报销!白嫖入口-请点击我.推荐他人订阅,可获取扣除平台费用后的35%收益,文末名片加V! 说明:该文属于 Python全栈白宝书专栏,免费阶段订阅数量43 ...