前端javaScript基础学习第三天

目前在从事前端工作,特别总结javaScript基础知识供大家学习,本人特总结一下使用方法献给目前正在学习web前端的小伙伴们,希望你们在前端领域闯出属于自己的一片天空来,需要sublime软件安装包的或者前端资料的可以留言

一、循环语句
循环语句:重复执行一段代码,执行遇见某个指令(条件为假),结束循环语句

for循环,do while, while, for in语句

2.1 for循环语句

for循环是前测试循环语句:先判断条件是否满足,当满足条件时,才执行循环语句。直到条件为假结束循环语句。

for语句比较灵活。

for(循环变量初始值; 条件表达式 ; 步长){

循环语句;

}

原理:for循环判断条件表达式,当条件表达式为真时执行循环语句,直到条件为假时跳出循环。结束循环后再执行for循环后面的语句。

第一次执行:

先执行且只执行一次语句1,然后进行条件的判断语句2,如果满足循环条件,向内执行循环语句3,然后执行语句4变量的改变;如果不满足条件,结束for循环,执行for循环后面的其他js语句;

第二次执行:如果能执行语句4,继续执行语句2,判断判断条件表达式是否满足,如果满足循环条件,向内执行循环语句3,然后执行语句4变量的改变;如果不满足条件,结束for循环,执行for循环后面的其他js语句;

……

当条件为真时,重复执行语句2,语句3,语句4.直到条件为假时,执行后面的其他js语句。(只要想执行循环语句3必须先判断2是满足条件)

可以直接根据for原理的到结果。

1 for(var i = 3; i < 13; i +=3 ) {

2 console.log(i);

3 }

4 console.log("结束");

5 /*

6 第一次执行:i=3,i<13真,才执行循环语句,输出3

7 第二次执行:i=6,i<13真,执行循环语句,输出6

8 第三次执行:i=9,i<13真,执行循环语句,输出9

9 第四次执行:i=12,i<13真,执行循环语句,输出12

10 第五次执行:i=15,i<13假,当循环条件为假,才结束for循环

11 for循环结束才执行后面的其他js语句

12 输出“结束”

13 */

for循环中的变量称为循环变量,可以是任意的名字,一般我们习惯书写i,j,k

循环变量是全局变量。可以在任何地方书写,可以书写在for循环外面或者里面。

1 // 2循环变量是全局变量,循环语句有可能一次都不执行

2 var i = 3;

3 for(console.log(++ i); i < 1 ; i ++) {

4 console.log(i);

5 }

6 /*

7 第一次执行:i= 3,语句1只会执行一次输出4,i<1假,结束for循环

8 */

语句2可以书写为任何条件表达式,只要可以判断真假就可以。

1 // 语句2可以书写成任意形式

2 for(var i = 4; i != 10; i += 3) {

3 console.log(i);

4 }

5 /*

6 第一次执行:i=4, i!=10真,执行循环语句输出4

7 第二次执行:i=7, i!=10真,执行循环语句输出7

8 第三次执行:i=10, i!=10假,立即结束循环

9 */

循环语句可能会一直循环,这种是死循环。

1 // 当循环条件为真,循环语句会一直执行

2 for(var i = 1; i >= 0 ; i ++) {

3 console.log(i);

4 }

1 for(var i = 3; i < 10 ; i += 3) {

2 console.log(i);

3 }

4 console.log(i);

5 /*

6 第一次执行:i=3,i<10真进入循环语句输出3

7 第二次执行:i=6,i<10真进入循环语句输出6

8 第三次执行:i=9,i<10真进入循环语句输出9

9 第四次执行:i=12,i<10假,立即结束循环语句

10 执行后面的其他js语句

11 console.log(i)12

12 */

for循环里面的循环语句也可以书写为if语句,if结构体想执行必须同时满足for循环条件和if语句的条件。

1 for(var i = 4; i < 25 ; i +=4) {

2 // 当i<25,同时i能被5整除才输出i

3 if(i % 5 == 0) {

4 console.log(i);

5 }

6 }

7 console.log(i);

8 /*

9 第一次执行:i=4,i<25真,进入循环语句if判断i%5==0假结束if语句3;

10 第二次执行:i=8,i<25真,进入循环语句if判断i%5==0假结束if语句3;

11 第三次执行:i=12,i<25真,进入循环语句if判断i%5==0假结束if语句3;

12 第四次执行:i=16,i<25真,进入循环语句if判断i%5==0假结束if语句3;

13 第五次执行:i=20,i<25真,进入循环语句if判断i%5==0真执行if语句输出20;

14 第六次执行:i=24,i<25真,进入循环语句if判断i%5==0假结束if语句

15 第七次执行:i=28,i<25假,结束for循环语句

16 执行后面的其他js语句输出i=28

17 */

for循环嵌套for循环,一层一层去执行,每一层for循环变量不同。

1 for(var i = 1 ; i < 4; i ++) {

2 for(var j = 1; j < 4 ; j ++) {

3 console.log(i,j);

4 }

5 }

6 console.log(i,j);

7 /*

8 第一次:i=1,i<4真,进入循环语句j=1,j<4真,(1,1),j++

9 j=2,j<4真,(1,2),j++

10 j=3,j<4真,(1,3),j++

11 j=4,j<4假结束j循环

12 第*次:i=2,i<4真,进入循环语句,j=1,j<4真(2,1)j++

13 j=2,j<4真,(2,2),j++

14 j=3,j<4真,(2,3),j++

15 j=4,j<4假结束j循环

16

17 第*次:i=3,i<4真,进入循环语句,j=1,j<4真(3,1)j++

18 j=2,j<4真,(3,2),j++

19 j=3,j<4真,(3,3),j++

20 j=4,j<4假结束j循环

21

22 第*次:i=4,i<4假,结束i循环。执行后面的其他js语句

23 输出(i=4,j=4)

24 */

2.2 穷举思想

概念:我们经常想得到一组数据,有一些特定的要求,计算机没法自己帮我们输出这些数据。我们人为的需要编写一段程序,让计算机去帮我们实现程序。将所有的可能情况,一一的列举出来,然后我们人为限定判断条件,把符合条件的数据就给它输出,不满足的就跳过,继续验证下一个数据是否满足条件,直到把所有可能情况都验证一个遍。这个方法就叫做全举法,也叫穷举法。

外层:一一列举,for循环。

内层:进行判断,if语句。

案例1:在控制台输出一个数的所有约数。

约数概念:a %b ==0,那么a叫做b的倍数,b叫做a的约数或者因数。

一个数的约数,最小是1,最大是它本身。

1 // 用户输入一个正数,输出这个数所有的约数

2 // 比如用户输入12 约数1,2,3,4,6,12

3 // 的到用户输入

4 var num = parseInt(prompt("请输入数字"));

5 // 输出约数

6 // 约数范围区间1-数字本身,将这些可能性一一列举

7 for(var i = 1; i <= num; i ++) {

8 // 只输出约数

9 // 整除

10 if(num % i == 0) {

11 // 这个i才是约数,输出

12 console.log(i);

13 }

14 }

2.3 累加器和累乘器

累加器:有时我们在计算时不想知道直接的过程,只想要最终的数值,有一个满足条件的结果就自加1.

注意:

1 累加器变量,必须书写在for外面(以防变量被每次重置为0),初始值设置0.

2 当有满足条件的数值,累加器自加1

3 最终的结果也必须书写在for循环外面。

1 // 用户输入数字,输出约数的总个数

2 // 的到用户的输入

3 var num = parseInt(prompt("请输入数字"));

4 // 输出总个数

5 // 累加器必须书写在for外面初始值0

6 var sum = 0;

7 // 一一列举所有的可能性

8 for(var i = 1; i <= num ; i ++) {

9 if(num % i == 0) {

10 // i是num的约数,累加器自加1

11 sum ++;

12 }

13 }

14 //累加器最终结果在for结束输出

15 console.log(sum);

累乘器:我们不想要中间的过程,想需要得到最终的乘积

1 累乘器变量,必须书写在for外面(以防变量被每次重置为1),初始值设置1.

2 当有满足条件的数值,累加器自乘

3 最终的结果也必须书写在for循环外面。

阶乘:比如4! = 432*1

1 // 用户输入数字,输出该数阶乘

2 // 的到用户的输入

3 var num = parseInt(prompt("请输入数字"));

4 // 输出阶乘

5 // 累乘器必须书写在for循环外面,初始值是1

6 var cheng = 1;

7 // 阶乘1-num

8 for(var i = 1 ; i <= num ; i ++) {

9 // 阶乘

10 cheng *= i;

11 }

12 // 结果在最终输出

13 console.log(cheng);

案例:用户输入一个数字,判断这个数是不是质数

质数:除了1和他本身两个约数之外没有其他约数。比如3

合数:除了1和他本身两个约数之外还有其他约数。比如4

1既不是质数也不是合数。

1 // 的到用户输入

2 var num = parseInt(prompt("请输入数字"));

3 // 找约数总个数

4 // 累加器,变量必须书写在for循环外初始值0

5 var sum = 0;

6 // num约数的所有可能性一一列举for循环

7 for(var i = 1 ; i <= num; i ++) {

8 // 找约数

9 if(num % i === 0) {

10 // i是num的约数

11 // 总个数

12 sum ++;

13 }

14 }

15 // 最终sum值在for循环外面输出

16 // console.log(sum);

17 // 判断是不是质数

18 // sum如果是2那么num是质数

19 if(sum === 2) {

20 console.log(num + "是质数");

21 }else {

22 console.log(num + "不是质数");

23 }

原文地址:https://blog.51cto.com/14334627/2408635

时间: 2024-10-14 23:47:10

前端javaScript基础学习第三天的相关文章

javascript基础学习(三)

javascript之运算符 学习要点: 表达式 运算符:一元运算符,算术运算符,关系运算符,逻辑运算符,*位运算符,赋值运算符 一.表达式 表达式有常量表达式,变量表达式,复合表达式. 二.算术运算符 一元:+(正号).-(负号).++.—— 二元:*./.%.+.- 三.关系运算符 ==.=== ps:等同运算符比相等运算符要求更为严格,等同运算符只有在两个操作数类型相同,并且值也相同的情况下才会返回true. <.<=.>.>= instanceof运算符.       in

JavaScript 基础学习(三)

BOM对象 BOM(浏览器对象模型),可以对浏览器窗口进行访问和操作.使用 BOM,开发者可以移动窗口.改变状态栏中的文本以及执行其他与页面内容不直接相关的动作. 使 JavaScript 有能力与浏览器"对话". Window 对象方法 alert() 显示带有一段消息和一个确认按钮的警告框. confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框. prompt() 显示可提示用户输入的对话框. open() 打开一个新的浏览器窗口或查找一个已命名的窗口. close(

前端开发基础学习—1

前端开发的学习还没有找到很好的入门点,就做些题吧. http://www.cnblogs.com/jQing/archive/2012/07/01/2571987.html 第一部分:用CSS实现布局 让我们一起来做一个页面 首先,我们需要一个布局. 请使用CSS控制3个div,实现如下图的布局. 第二部分:用javascript优化布局 由于我们的用户群喜欢放大看页面 于是我们给上一题的布局做一次优化. 当鼠标略过某个区块的时候,该区块会放大25%, 并且其他的区块仍然固定不动. 提示: 也许

菜鸟学前端--javascript基础

在学习过css相关的知识,有了前端工程师的一些基础知识.但要较好的掌握前端,必须要学习好javascript的知识. 下面将从基本语法.变量.关键字.保留字.语句.函数.BOM等角度阐释. 一.基本语法 javacript作为一种面向对象的.脚本级的轻量语言,与java一脉相承. 命名:区分大小写,弱类型定义(一般采用var,不限制类型). 行末分号可有可无(从经验上来看,推荐写,可以提高代码阅读质量). 括号用于代码段. 注释与C.java类型,单行用"//",段注释用"/

javascript基础学习(十)

javascript之数组 学习要点: 数组的介绍 定义数组 数组元素 数组的方法 一.数组的介绍 数组中的元素类型可以是数字型.字符串型.布尔型等,甚至也可以是一个数组. 二.定义数组 1.通过数组的构造函数来定义数组: var arr=new Array(); var arr=new Array(size); var arr=new Array(element1,element2,...); 2.直接定义数组: var arr=["字符串",true,13]; ps: 和Objec

javascript基础学习(十五)

javascript之cookie 学习要点: cookie介绍 创建与获取cookie cookie的编码 cookie的生存期 cookie的路径 cookie的domain cookie的secure 一.cookie介绍 cookie实际上就是一些信息,这些信息以文件的形式存储在客户端计算机上.在javascript中,cookie主要用来保存状态,或用于识别身份. 二.创建与获取cookie 创建cookie的语法代码如下所示:document.cookie="name=value&q

javascript基础学习(八)

javascript之日期对象 学习要点: 日期对象 将日期对象转换为字符串 将日期对象中的日期和时间转换为字符串 日期对象中的日期 日期对象中的时间 设置日期对象中的日期 设置日期对象中的时间 与毫秒相关的方法 一.日期对象 在javascript中并没有日期型的数据类型,但是提供了一个日期对象可以操作日期和时间. 日期对象的创建: new Date(); 二.将日期对象转换为字符串 将日期对象转换为字符串可以使用以下4种方法: date.toString();//将日期对象转换为字符串时,采

javascript基础学习(二)

javascript的数据类型 学习要点: typeof操作符 五种简单数据类型:Undefined.String.Number.Null.Boolean 引用数据类型:数组和对象 一.typeof操作符 typeof操作符用来检测变量的数据类型,操作符可以操作变量也可以操作字面量. 对变量或值运用typeof操作符得到如下值: undefined----如果变量是Undefined类型: boolean-------如果变量是Boolean类型: number-------如果变量是Numbe

javascript基础学习(十二)

javascript之BOM 学习要点: 屏幕对象 History对象 Location对象 一.屏幕对象 Screen对象是一个由javascript自动创建的对象,该对象的主要作用是描述客户端的显示器的信息. 目前显示器分辨率为800X600或1024X768两种. screen.height:屏幕的高度 screen.width:屏幕的宽度 screen.availHeigh:屏幕的有效高度 screen.availWidth:屏幕的有效宽度 二.History对象 History对象可以