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;//在给list
console.timeEnd("a");
</script>
</body>所用时长：只用了2毫秒。
3.取余
1. % 这个运算符主要用来取到两数相除的余数。
<body>
<script>
//打印两数相除结果
console.log( 7/3 );//2.3333333333
//打印余数
console.log( 7%3 );//1
console.log( 4%2 );//0
console.log( 11%7 );//4
console.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.333333333
console.log( Math.floor( 7/3 ) );//2
console.log( Math.floor( 3.3333 ) );//3
console.log( Math.floor( 3.9 ) );//3
console.log( Math.floor( 3.0 ) );//3
console.log( Math.floor( -1.2 ) );//-2
console.log( Math.floor( -1.6 ) );//-2
</script>
</body>5.V字型变换练习
JS基础入门篇（三）— for循环，取余，取整。的更多相关文章
- JS基础入门篇（三十五）—面向对象（二）
如果没有面向对象这种抽象概念的小伙伴,建议先看一下我写的JS基础入门篇(三十四)-面向对象(一)
- JS基础入门篇（二十七）—BOM
虽然上次写到js基础篇(二十四),这次直接写到(二十七).是为了提醒自己中间有几篇没写.特此说明一下啊. 1.window.open() 使用a标签呢,点击一下a标签页面才会跳转,有时候我们需要做的操 ...
- JS基础入门篇（七）—运算符
1.算术运算符 1.算术运算符 算术运算符:+ ,- ,* ,/ ,%(取余) ,++ ,-- . 重点:++和--前置和后置的区别. 1.1 前置 ++ 和 后置 ++ 前置++:先自增值,再使用值 ...
- JS基础入门篇（ 三 ）—使用JS获取页面中某个元素的4种方法以及之间的差别（ 一 ）
1.使用JS获取页面中某个元素的4种方法 1.通过id名获取元素 document.getElementById("id名"); 2.通过class名获取元素 document.g ...
- JS基础入门篇（三十六）—面向对象（ 三 ）
1.class class es6 中 为 关键字用来声明 一个 类 1.只能通过new调用 2.不存在变量提升 3.多个方法之间直接书写,不需要,隔开 4.类的方法是直接定义在类的原型上的 5.定义 ...
- JS基础入门篇（三十四）— 面向对象（一）
1.对象 对象的定义 : 对象 是 由 键值对 组成的无序集合. 创建对象两种方法 : 方法一 : 字面量方法 var obj = {name: "k"}; 方法二 : new O ...
- JS基础入门篇（四）—this的使用，模拟单选框，选项卡和复选框
1.this的使用 this js中的关键字 js内部已经定义好了,可以不声明 直接使用 this的指向问题 1. 在函数外部使用 this指向的是window 2. 在函数内部使用 有名函数 直接调 ...
- JS基础入门篇（六）— 数据类型
1.数据类型 数据类型:我感觉就是对数据的种类进行分类.就好比把人分为儿童,青少年,中年,老年一样. 基础数据类型: Number(数字),String(字符串),Null(空),Undefined( ...
- JS基础入门篇（二十四）—DOM（下）
1.offsetLeft/offsetTop offsetLeft/offsetTop : 到定位父级节点的距离. <!DOCTYPE html> <html lang=" ...
随机推荐
- 年薪100万的人都是怎么玩Excel的？
年薪100万的人都是怎么玩Excel的? 2017-12-21 13:42美国 作者:珍妮Jenny 来源:一周进步(ID:weekweekup) 本文已获原作者转载授权,如需转载请联系原公号 本文重 ...
- DAY 5 上午
或者跑一个dp dp[i]表示总花费不超过i的情况下的最短路 dij套dp o(nk)个点 对于每一个点u,建立k+1个点表示到点u花费费用为i 比如u-->v长度为c u,0-->v,c ...
- Powershell指令集_2
目录 目录 获取证书 Get-Childitem 调用REST API Invoke-RestMethod 选择对象属性 Select-Object 导入模块 Invoke-Expression 路径 ...
- 阶段1 语言基础+高级_1-3-Java语言高级_1-常用API_1_第4节 ArrayList集合_13-ArrayList集合概述和基本使用
新建类 多了个尖括号,大写字母E,这是什么意思呢? 尖括号当中叫做泛型.存储的统一的类型,这个类型就在尖括号里面写上,我们用一个字母占位表示. 如何创建呢 构造方法有三个,最常用的就是无参构造 先掌握 ...
- 42 grant与flush privileges
42 grant与flush privileges 在mysql里, grant是给用户赋权的,一些文档中经常提到在grant执行后,马上执行一个flush privileges,才能使赋权语句生效, ...
- JSONPath解析json
JSONPath - 用于JSON的XPath 用来解析多层嵌套的json数据;JsonPath 是一种信息抽取类库,是从JSON文档中抽取指定信息的工具. 考虑到接下来计划开发一个自动化测试平台,在 ...
- Spring Boot 之 springcache的使用
一.开启 springcache,启动类添加 @EnableCaching 注解 @SpringBootApplication @EnableCaching public class Gatherin ...
- Node.js 的环境配置
1.安装node.js 官网上面最新版本的nodejs 都是自带npm的.http://nodejs.cn/至于安装过程选择默认下载就行 2.安装淘宝镜像,也就是将国外的一些资源代理到国内. 步骤:1 ...
- shell命令传参数（参数长度不定）
脚本 sudo echo "[mysqlMaster<$1>]" >> /home/admin/hostrecord count= ];do >> ...
- 前端 CSS的选择器 基本选择器 类选择器
类选择器 符号是.开头 然后类的名字 样式类名不要用数字开头(有的浏览器不认). 所谓类就是class,.class与id非常相似,任何标签都可以加类,但是类可以重复 通过样式类选择元素: 示例: & ...