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

时间：2022-10-19 20:53:44

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毫秒。
JS基础入门篇（三）— for循环，取余，取整。

分析：需要这么长时间的原因是，以下代码造成的，因为每次都要重新读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毫秒。
JS基础入门篇（三）— for循环，取余，取整。

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循环条件的判断有时候会需要。
JS基础入门篇（三）— 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. shell脚本集合

    慢慢学习,慢慢记吧 第一个shell脚本,创建用户,默认密码用户名,使得用户第一次登陆强制修改密码的脚本 #/bin/bash #创建用户,指定初始密码用户名,第一次登陆后强制修改用户名 userad ...

  2. 多态（Java）

    一.多态 1.什么是多态? 解析:不同的对象对于同一个操作,做出的响应不同 具有表现多种形态的能力的特征 2.使用多态的优点 解析:为了实现统一调用 一个小例子:<父类类型作为参数> 父类 ...

  3. Spring中加载配置文件的方式

    原文:http://blog.csdn.net/snowjlz/article/details/8158560 Spring 中加载XML配置文件的方式,好像有3种, XML是最常见的Spring 应 ...

  4. iOS 动态特性和RunTime

    过去的几年中涌现了大量的Objective-C开发者.有些是从动态语言转过来的,比如Ruby或Python,有些是从强类型语言转过来的,如Java或C#,当然也有直接以Objective-C作为入门语 ...

  5. xshell linux传文件

    yum  install lrzsz 安装完毕即可使用 rz,sz是便是Linux/Unix同Windows进行ZModem文件传输的命令行工具 windows端需要支持ZModem的telnet/s ...

  6. 为什么使用&quot&semi;use strict&quot&semi;可以节约你的时间

    转: http://ourjs.com/detail/52f572bf4534c0d806000024 "use strict"是JavaScript中一个非常好的特性,而且非常容 ...

  7. 并发系列（5）之 Future 框架详解

    本文将主要讲解 J.U.C 中的 Future 框架,并分析结合源码分析其内部结构逻辑: 一.Future 框架概述 JDK 中的 Future 框架实际就是 Future 模式的实现,通常情况下我们 ...

  8. Spatial Sound Research

    Spatial Sound Research What are our goals? The basic goal of our research is to develop cost-effecti ...

  9. http协议tcp协议ip协议三次握手四次挥手，为什么三次握手，为什么四次挥手，sockete套接字理解

    1.1 TCP是什么? TCP是Tranfer Control Protocol的简称,TCP协议是一种面向连接的.可靠的.基于字节流的运输层通信协议.通过TCP协议传输,得到的是一个顺序的无差错的数 ...

  10. ApiPost的环境变量的定义和使用「ApiPost环境变量」

    新版的ApiPost(Chrome拓展V2.0.8+/客户端V2.2.1+)已经支持环境变量的定义和使用. 本文主要介绍ApiPost环境变量的第一课:如何定义环境变量,并如何使用它. ApiPost ...

相关文章