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字型变换练习

V字型变换练习

JS基础入门篇(三)— for循环,取余,取整。的更多相关文章

  1. JS基础入门篇(三十五)—面向对象(二)

    如果没有面向对象这种抽象概念的小伙伴,建议先看一下我写的JS基础入门篇(三十四)-面向对象(一)

  2. JS基础入门篇(二十七)—BOM

    虽然上次写到js基础篇(二十四),这次直接写到(二十七).是为了提醒自己中间有几篇没写.特此说明一下啊. 1.window.open() 使用a标签呢,点击一下a标签页面才会跳转,有时候我们需要做的操 ...

  3. JS基础入门篇(七)—运算符

    1.算术运算符 1.算术运算符 算术运算符:+ ,- ,* ,/ ,%(取余) ,++ ,-- . 重点:++和--前置和后置的区别. 1.1 前置 ++ 和 后置 ++ 前置++:先自增值,再使用值 ...

  4. JS基础入门篇( 三 )—使用JS获取页面中某个元素的4种方法以及之间的差别( 一 )

    1.使用JS获取页面中某个元素的4种方法 1.通过id名获取元素 document.getElementById("id名"); 2.通过class名获取元素 document.g ...

  5. JS基础入门篇(三十六)—面向对象( 三 )

    1.class class es6 中 为 关键字用来声明 一个 类 1.只能通过new调用 2.不存在变量提升 3.多个方法之间直接书写,不需要,隔开 4.类的方法是直接定义在类的原型上的 5.定义 ...

  6. JS基础入门篇(三十四)— 面向对象(一)

    1.对象 对象的定义 : 对象 是 由 键值对 组成的无序集合. 创建对象两种方法 : 方法一 : 字面量方法 var obj = {name: "k"}; 方法二 : new O ...

  7. JS基础入门篇(四)—this的使用,模拟单选框,选项卡和复选框

    1.this的使用 this js中的关键字 js内部已经定义好了,可以不声明 直接使用 this的指向问题 1. 在函数外部使用 this指向的是window 2. 在函数内部使用 有名函数 直接调 ...

  8. JS基础入门篇(六)— 数据类型

    1.数据类型 数据类型:我感觉就是对数据的种类进行分类.就好比把人分为儿童,青少年,中年,老年一样. 基础数据类型: Number(数字),String(字符串),Null(空),Undefined( ...

  9. JS基础入门篇(二十四)—DOM(下)

    1.offsetLeft/offsetTop offsetLeft/offsetTop : 到定位父级节点的距离. <!DOCTYPE html> <html lang=" ...

随机推荐

  1. mysql中的collate关键字是什么意思?

    CREATE TABLE `tb_order` ( `order_id` varchar(50) COLLATE utf8_bin DEFAULT NULL COMMENT '订单id', `paym ...

  2. mysql 5.6多库并行复制原理

    首先,要开启这个并行复制,需要设定slave_parallel_workers参数,这个参数如果设定成0的话代表不使用并行,relaylog由sql线程执行,表现和之前版本一致.当这个参数设置成n时, ...

  3. leetcode 36有效的数独

    建立一个哈希表,每次查找,如果对应的列col,行row,小方格box中的数出现第二次,那么数独不合法: 据说还有深度优先搜索的方法,表示没有听懂:) class Solution { public: ...

  4. Delphi XE2 之 FireMonkey 入门(26) - 数据绑定: TBindingsList: TBindExprItems

    Delphi XE2 之 FireMonkey 入门(26) - 数据绑定: TBindingsList: TBindExprItems 如果要给一对 "源控件" 和 " ...

  5. 【openstf】自己的云测平台——mac安装openstf

    openstf的github地址:https://github.com/openstf/stf 上图可以清晰看出openstf的使用场景和效果   openstf是一个web应用程序,用于远程调试智能 ...

  6. 编程语言分类,Python代码执行,应用程序使用文件的三步骤,变量,常量,垃圾回收机制

    编程语言分为 机器语言(直接用二进制01跟计算机直接沟通交流,直接操作硬件) 优点:计算机能够直接读懂,速度快 缺点:开发效率极低 汇编语言(用简单的英文标签来表示二进制数,直接操作硬件) 优点:开发 ...

  7. 在使用spring中的ContextConfiguration、test注解时出现的错误

    错误: 在使用测试注解时出现ContextConfiguration注解和test注解无法正常导包使用的编译异常,如图: 解决办法: 将pom.xml文件中以下依赖管理 中的<scope> ...

  8. 实验报告2&&第四周课程总结

    实验报告: 写一个名为Rectangle的类表示矩形.其属性包括宽width.高height和颜色color,width和height都是double型的,而color则是String类型的.要求该类 ...

  9. C语言作业总结

    .## 一.我学到的内容 二.我的收获 作业 学到的知识点简介 C语言I博客作业01 学习了markdown语法. C语言I博客作业02 学习了<提问的智慧>. C语言I博客作业03 了解 ...

  10. [Web 前端] 017 css 浮动

    1. 文档流 指盒子按照 html 标签编写的顺序依次从上到下,从左到右排列 块元素占一行 行内元素在一行之内 从左到右排列 先写的先排列 后写的排在后面 每个盒子都占据自己的位置 2. 浮动的特性 ...