概述
说明: 该笔记为学习《尚硅谷JavaScript》时整理
JavaScript简介
- 起源
- JavaScript诞生于1995年,它的出现主要是用于处理网页中的
前端验证。 - 所谓的前端验证,就是指检查用户输入的内容是否符合一定的
规则。 - 比如:用户名的长度,密码的长度,邮箱的格式等。
- 简史
- JavaScript是由网景公司发明,起初命名为LiveScript,后来由于SUN公司的介入更名为了JavaScript。
- 1996年微软公司在其最新的IE3浏览器中引入了自己对JavaScript的实现JScript。
- 于是在市面上存在两个版本的JavaScript,一个网景公司的JavaScript和微软的JScript。
- 为了确保不同的浏览器上运行的JavaScript标准一致,所以几个公司共同定制了JS的标准名命名为ECMAScript。
- 时间表
- 实现
- ECMAScript是一个标准,而这个标准需要由各个厂商去实现。
- 不同的浏览器厂商对该标准会有不同的实现。
- 我们已经知道ECMAScript是JavaScript标准,所以一般情况下这两个词我们认为是一个意思。
- 但是实际上JavaScript的含义却要更大一些。
- 一个完整的JavaScript实现应该由以下三个部分构成:
JS基本语法
Hello World
- 创建一个html文件。
- 在html文件的的head标签中创建一个
script
标签,并编写如下代码。
<script type="text/javascript">
console.log("Hello World");
</script>
编写位置
- 我们目前学习的JS全都是客户端的JS,也就是说全都是需要在浏览器中运行的,所以我们我们的JS代码全都需要在网页中编写。
- 我们的JS代码需要编写到
<script>
标签中。 - 我们一般将script标签写到head中。(和style标签有点像)
- 属性:
– type:默认值text/javascript可以不写,不写也是这个值。
– src:当需要引入一个外部的js文件时,使用该属性指向文件的地址。
- 虽然可以写在标签的属性中,但是他们属于结构与行为耦合,不方便维护,不推荐使用
- 可以将js代码编写到标签的onclick属性中当我们点击按钮时,js代码才会执行
- 可以将js代码写在超链接的href属性中,这样当点击超链接时,会执行js代码
- 可以将js代码编写到script标签,script标签一旦用于引入外部文件了,就不能在编写代码了,即使编写了浏览器也会忽略
如果需要则可以在创建一个新的script标签用于编写内部代码 - 可以将js代码编写到外部js文件中,然后通过script标签引入写到外部文件中可以在不同的页面中同时引用,也可以利用到浏览器的缓存机制推荐使用的方式
输出方式
- alert(“要输出的内容”);
-
在浏览器中弹出一个对话框,然后把要输出的内容展示出来
-
alert都是把要输出的内容首先转换为字符串然后在输出的
-
document.write(“要输出的内容”);
直接的在页面中展示输出的内容
-
console.log(“要输出的内容”);
在控制台输出内容
-
value ->给文本框(表单元素)赋值内容
获取文本框中(表单元素)的内容
document.getElementById("search").value = "要给#search这个文本框添加的内容";
- innerHTML/innerText ->给除了表单元素的标签赋值内容
document.getElementById("div1").innerHTML = "吧啦吧啦吧啦吧啦";
document.getElementById("div1").innerText = "吧啦吧啦吧啦吧啦";
prompt()
prompt()
可以弹出一个提示框,提示框中会带有一个文本框,用户可以在文本框中输入一段内容,该函数需要一个字符串作为参数,该字符串将会作为提示框的提示文字
用户输入的内容将会作为函数的返回值返回,可以定义一个变量来接受该内容
prompt()
的返回值是String
类型
var number = prompt("请输入一个数字");
注释
要养成良好的编写注释的习惯,可以通过注释来对代码进行一些简单的调试
- 多行注释,注释中的内容不会被执行,但可以在源代码中查看
/*
js注释
*/
- 单行注释
// 单行注释
- JS中严格区分大小写
- JS中每一条语句以
;
结尾
- 如果不写分号,浏览器会自动添加,但会消耗一些系统资源,而且有些时候,浏览器会加错分号,所以在开发中,分号必须写。
- JS中会自动忽略多个空格和换行,所以我们可以利用空格和换行对代码进行格式化。
字面量和变量
字面量:
都是一些不可改变的值。
字面量都是可以直接使用的,但是我们一般都不会直接使用字面量。
变量:
- 可以用来保存字面量,而且变量的值是可以任意改变的
- 变量更加方便我们使用,所以在开发过程中都是通过变量去保存一个字面量,而很少直接使用字面量
- 可以通过变量对字面量进行描述
声明变量
在js中使用var关键字来声明一个变量
var a;
为变量赋值
a = 123;
声明和赋值同时进行
var b = 789;
var c = 0;
console.log(c);
标识符
- 在js中所有可以由我们自主命名的,都可以称作时标识符
- 例如:变量名、函数名、属性名都属于标识符
- 命名一个标识符时需要遵守如下的规则
- 标志符中可以含有字母、数字、_、$。
- 标识符不能以数字开头
- 标识符不能是ES中的关键字或保留字
- 按照惯例,ECMAScript 标识符采用驼峰命名法。
首字母小写,每个单词的开头字母大写。其余字母小写
例:helloWorld、xxYyyZzz
关键字
break | do | instanceof | typeof | case |
else | new | var | catch | finally |
return | void | continue | for | switch |
while | default | if | throw | delete |
in | try | function | this | with |
debugger | false | true | null |
保留字
class | enum | extends | super |
const | export | import | implements |
let | private | public | yield |
interface | package | protected | static |
其他不建议使用的标识符
数据类型
数据类型指的就是字面量的类型,
在js中一共有6种数据类型:
- String:字符串
- Number:数值
- Boolean:布尔值
- Null:空值
- Undefined:未定义
- Object:对象
其中String
、Number
、Boolean
、Null
、Undefined
属于基本数据类型
而Object
属于引用数据类型。
typeof运算符
typeof
运算符可以用来检查一个变量的数据类型
语法:typeof
变量
console.log(typeof a);
- 返回结果:
- typeof 数值 ——>number
- typeof 字符串——> string
- typeof 布尔型 ——>boolean
- typeof undefined ——>undefined
- typeof null ——>object
String字符串
在js中,字符串需要用引号引起来
var str = "Hello!";
使用双引号、单引号都可以,但是不要混着用
同类引号不能嵌套:双引号里不能放双引号、单引号里不能放单引号
var str = "我说:'双引号里套单引号'";
var str = '我说:"或单引号里套双引号"';
在字符串中我们可以使用作为转义字符,当表示一些特殊字符时可以用
进行转义
var str="我说:"这里的引号得转义"";
转义 | 含义 |
---|---|
" | " |
' | ’ |
\ |
|
n | 换行 |
t | 制表符 |
b | 空格 |
r | 回车 |
Number数值
在js中,所有的数值都是Number
类型,包括整数和浮点数(小数)
js中可以表示数字的最大值:
console.log(Number.MAX_VALUE);
Number.MAX_VALUE
1.7976931348623157e+308
Number.MIN_VALUE
最小正值
5e-324
如果使用Number
表示的数字超过了最大值,则会返回一个
+Infinity
表示正无穷。
-Infinity
表示负无穷。
使用typeof
检查Infinity
也会返回number
要确定一个值是不是有限大(即介于JavaScript能表示的最小值和最大值之间),可以使用isFinite()
函数。
var result = Number.MAX_VALUE + Number.MAX_VALUE;
console.log(isFinite(result)); //false
NaN
是一个特殊的数字,表示Not a Number。意思是“不是数值”,用于表示本来要返回数值的操作失败了(而不是抛出错误)
使用typeof
检查数值时也会返回number
js中整数的运算基本可以保证精确
但如果用js进行浮点运算,可能得到一个不精确的结果(所以千万不要用js进行对精确度要求比较高的运算)
Boolean布尔值
布尔值只有两个,主要用来做逻辑判断
true
表示真false
表示假
使用typeof
检查布尔值时,会返回boolean
Null和Undefined
Null
类型的值只有一个,就是null
null
专门用表来示一个为空的对象
使用typeof
检查一个null值时,会返回object
Undefined
类型的值只有一个,就是undefined
当声明一个变量,但是并不给变量赋值时,它的值就是undefined
使用typeof
检查一个undefined
值时,会返回undefined
强制类型转换
- 指将一个数据类型强制转换为其他数据类型
- 类型转换主要指,将其他的数据类型转换成:
String
、Number
、Boolean
转换为String
- 方式一:调用被转换数据类型的
toString()
方法
该方法不会影响到原变量,它会将转换的结果返回
但是注意:null
和undefined
这两个值没有toString()
方法,如果调用,则会报错。
var a = 123;
a=a.toString ();
console.log(typeof a);
console.log(a);
- 方式二:调用
String
函数,并将被转换的数据作为参数传递给函数
使用String
函数做强制类型转换时,对于Number
和Boolean
实际上就是调用toString()
方法
但是对于null
和undefined
就不会调用toString()
方法
它会将null
直接转换为“unll”
将undefined
直接转换为“undefined”
var a = 123;
a=String(a);
转换为Number
- 方式一:使用
Number()
函数
- 字符串——>数字
1.如果是纯数字的字符串,则直接将其转换为数字
2.如果字符串中有非数字内容,则转换为NaN
3. 如果字符串时一个空串或全为空格的字符串,则转为0 - 布尔——>数字
true
转成1
false
转成0 Null
——>数字:0undefined
——>数字:NaN
a=Number(a);
- 方式二:这种方式专门用来对付字符串
parseInt()
:把一个字符串转换为一个整数,可以将一个字符串中有效的整数内容取出来,然后转为Number
parseFloat()
:把一个字符串转换为一个浮点数,可以将一个字符串中有效的整数和小数内容取出来,然后转为Number
如果对非String
使用parseInt()
或parseFloat()
,它会先将其转为String
再操作。
其他进制数字
在js中,
如果需要表示16进制的数字,则需要以0x开头
如果需要表示8进制的数字,则需要以0开头
如果要表示2进制的数字,则需要以0b开头
(但不是所有的浏览器都支持)
a=0xab;
a=070;
a=0b10;
像“070”这种字符串,有些浏览器会当作8进制解析,有些会当成10进制解析
可以在parseInt()
中传递一个第二个参数,来指定数字的进制。
a=parseInt(a,10);
转换为Boolean
- 方式一:使用
Boolean()
函数
- 数字——>
Boolean
除了0
和NaN
其余的都是true。
var a = 123; //true
a = -123; //true
a = 0; //false
a = Infinity; //true
a = NaN; //false
a=Boolean(a);
console.log(typeof a);
- 字符串——>
Boolean
除了空串,其余的都是true
null
和undefined
——>Boolean
都会转换为false
- 对象
Object
——>Boolean
都会转换为true
数据类型 | 转换为true的值 | 转换为false的值 |
---|---|---|
Boolean | true | false |
String | 非空字符串 | " "(空字符串) |
Number | 非零数值(包括无穷值) | 0、NaN |
Object | 任意对象 | null |
Undefined | N/A(不存在) | undefined |
- 方式二:(隐式类型转换)
为任意的数据类型进行两次非运算,即可将其转换为布尔值
例子:
var a = "hello";
a = !!a; //true
运算符
运算符也叫操作符
通过运算符可以对一个或多个值进行运算
比如:typeof
就是运算符,可以用来获得一个值的类型,它会将该值的类型以字符串的形式返回
算数运算符
当对非Number
类型的值进行运算时,会将这些值转换为Number
,然后再运算 (字符串的加法除外)
任何值和NaN
做运算都得NaN
(字符串的加法除外)
+
加号
可以对两个值进行加法运算,并将结果返回- 如果对两个字符串做加法运算,则会做拼串操作(会将两个字符串拼接成一个字符串并返回)
- 任何值和字符串做加法运算,都会先转换成字符串,然后再和字符串做拼串的操作
我们可以利用这一特点,来将一个任意的数据类型转换为String
我们只需要为任意的数据类型+
一个" "
即可将其转换为String
这是一种隐式的类型转换,由浏览器自动完成,实际上它也是调用String
-
减号
可以对两个值进行减法运算,并将结果返回
*
可以对两个值进行乘法运算,并将结果返回
/
可以对两个值进行除法运算,并将结果返回
任何值做-
、*
、/
运算时都会转换成Number
我们可以利用这一特点做隐式的类型转换。
可以通过为一个值 -0
、*1
、/1
来将其转换为Number
原理和Number()
函数一样,使用起来更加简单
%
取模运算(取余数)
一元运算符
一元运算符:只需要一个操作数:
+
正号:正号不会对数字产生任何影响
-
负号:负号可以对数字进行符号的取反
对于非Number
类型的值,它会将其先转换成number
再运算
可以对一个其他的数据类型使用+
来将其转换为number
,它的原理和Number()
函数一样
自增自减
自增:++
- 通过自增可以使变量在自身的基础上增加1
- 对于一个变量自增以后,原变量的值会立即自增1
- 自增分为两种:后++(
a++
)和 前++(++a
)- 无论是
a++
还是++a
,都会立即使原变量的值自增1 - 不同的是
a++
和++a
的值不同a++
的值等于原变量的值(自增前的值)++a
的值等于新值(自增后的值)
- 无论是
//使a自增1
a++;
自减:--
- 通过自减可以使变量在自身的基础上减1
- 对于一个变量自减以后,原变量的值会立即自减1
- 自减分为两种:后- -(
a--
)和 前- -(--a
)- 无论是
a--
还是--a
,都会立即使原变量的值自减1 - 不同的是
a--
和--a
的值不同a--
的值等于原变量的值(自减前的值)--a
的值等于新值(自减后的值)
- 无论是
逻辑运算符
js中为我们提供了3种逻辑运算符
!
非
!
可以用来对一个值进行非运算- 所谓非运算就是指对一个布尔值进行取反操作,(true变false,false变true)
- 如果对一个值进行两次取反,它不会变化
- 如果对非布尔值进行运算,则会将其转换为布尔值,然后再取反
- 所以我们可以利用该特点将一个其他的数据类型转换为布尔值
- 可以为一个任意的数据类型取两次反,将其转换为布尔值,原理和
Boolean()
一样
&&
与
&&
可以对符号两侧的值进行“与”运算并返回结果- 运算规则:
- 如果两个值都是
true
则返回true
- 只要有一个值是
false
就返回false
- 如果两个值都是
- js中的“与”属于短路的与(如果第一个值为
false
则不会再看第二个值;第一个值为true
,会检查第二个值)
||
或
||
可以对符号两侧的值进行“或”运算并返回结果- 运算规则:
- 两个值中 只要有一个是
true
则返回true
- 如果两个值都是
false
就返回false
- 两个值中 只要有一个是
- js中的“或”属于短路的或(如果第一个值为
true
则不会再看第二个值;第一个值为false
,会检查第二个值)
&&
和||
非布尔值的情况
- 对于非布尔值进行与或运算时,会先将其转换为布尔值,然后再运算,并且返回原值
- 与运算
- 如果第一个值为
true
,则必然返回第二个值 - 如果第一个值为
false
,则直接返回第一个值
- 如果第一个值为
result = 5&&6; //返回6
result = 0&&2; //返回0
result = 2&&0; //返回0
result = NaN&&0; //返回NaN
result = 0&&NaN; //返回0
- 或运算
- 如果第一个值为
true
,则直接返回第一个值 - 如果第一个值为
false
,则必然返回第二个值
- 如果第一个值为
result = 5&&6; //返回5
result = 0&&2; //返回2
result = 2&&0; //返回2
result = NaN&&0; //返回0
result = 0&&NaN; //返回NaN
赋值运算符
=
可以将符号右侧的值赋给符号左侧的变量
+=
a += 5
等价于a = a + 5
-=
a -= 5
等价于a = a - 5
*=
a *= 5
等价于a = a * 5
/=
a /= 5
等价于a = a / 5
%=
a %= 5
等价于a = a % 5
关系运算符
通过关系运算符可以比较两个值之间的大小关系
如果关系成立,返回true
,如果关系不成立,则返回false
<
、<=
、 >
、 >=
- 非数值的情况
- 对于非数值进行比较时,会将其转换为数字,然后再比较
任何值和NaN作比较都是false
- 对于非数值进行比较时,会将其转换为数字,然后再比较
console.log(1 > true); //false
console.log(1 >= true); //true
console.log(1 > "0"); //ture
console.log(10 > null); //ture
//任何值和NaN作比较都是false
console.log(10 >= "Hello"); //false
- 如果符号两端的值都是字符串时,不会将其转换为数字进行比较,而会分别比较字符串中字符的Unicode编码
//比较两个字符串时,比较的是字符串的字符编码
console.log("a" < "b"); //true
//比较字符编码时是一位一位进行比较
//如果两位一样,则比较下一位
console.log("11" < "5"); //true
console.log("abc" < "b"); //true
console.log("bbc" < "b"); //false
-
如果比较两个字符串型的数字,可能会得到不可预期的结果
注意:在比较两个字符串型的数字时,一定要转型console.log("11" < +"5"); //false
Unicode编码
- 在字符串中使用转义字符输入Unicode编码
u四位编码 - 在网页中使用Unicode编码
&#编码; 这里的编码需要的是10进制
相等运算符
相等运算符用来比较两个值是否相等,
- 如果相等会返回
true
,否则返回false
- 使用
==
来做相等运算 - 当使用
==
来比较两个值时,如果值的类型不同,则会自动进行类型转换,将其转换为相同的类型,然后再比较
console.log(1 == 1); //true
var a = 10;
console.log(a == 4); //false
console.log("1" == 1); //true
console.log(true == "1"); //true
console.log(null == 0); //false
不相等不相等用来判断两个值是否不相等
- 如果不相等返回
true
,否则返回false
- 使用
!=
来做不相等运算 - 不相等也会对变量进行自动的类型转换,如果转换后相等它也会返回
false
console.log(10 != 5); //true
console.log(10 != 10); //false
console.log("abcd" != "abcd"); //false
console.log("1" != 1);//false
全等 ===
- 用来判断两个值是否全等,它和相等类似,不同的是它不会做自动的类型转换
- 如果两个值的类型不同,直接返回false
console.log("123" === 123);//false
console.log(null === undefined);//false
不全等 !==
- 用来判断两个值是否不全等,和不等类似,不同的是它不会做自动的类型转换
- 如果两个值的类型不同,直接返回true
console.log(1 !== "1"); //true
undefined
衍生自null
所以这两个值做相等判断时,会返回true
console.log(undefined == null);
NaN
不和任何值相等,包括他本身
console.log(NaN == NaN); //false
判断b的值是否是NaN
可以通过isNaN()
函数来判断一个值是否是NaN
如果该值是NaN
则返回true
,否则返回false
console.log(isNaN(b));
条件运算符
条件运算符也叫三元运算符
- 语法:
条件表达式?语句1:语句2
- 执行流程:
条件运算符在执行时,首先对条件表达式进行求值
如果该值为true
,则执行语句1,并返回执行结果
如果该值为false
,则执行语句2,并返回执行结果 - 如果条件的表达式的求值结果是一个非布尔值,
会将其转换为布尔值然后再运算
//false?alert("语句1"):alert("语句2");
var a = 300;
var b = 143;
var c = 50;
//a > b ? alert("a大"):alert("b大");
//获取a和b中的最大值
var max = a > b ? a : b;
//获取a b c 中的大值
max = max > c ? max : c;
//这种写法不推荐使用,不方便阅读
//var max = a > b ? (a > c ? a :c) : (b > c ? b : c);
console.log("max = "+max);
"hello"?alert("语句1"):alert("语句2"); //语句1
""?alert("语句1"):alert("语句2"); //语句2
,
运算符
- 使用,可以分割多个语句,一般可以在声明多个变量时使用,
//使用,运算符同时声明多个变量
var a , b , c;
//可以同时声明多个变量并赋值
var a=1 , b=2 , c=3;
alert(b);
运算符的优先级
- 就和数学中一样,在JS中运算符也有优先级,
比如:先乘除 后加减 - 在JS中有一个运算符优先级的表,
在表中越靠上优先级越高,优先级越高越优先计算,
如果优先级一样,则从左往右计算。
但是这个表我们并不需要记忆,如果遇到优先级不清楚
可以使用()来改变优先级
/*如果||的优先级高,或者两个一样高,则应该返回3
如果与的优先级高,则应该返回1*/
var result = 1 || 2 && 3;
console.log("result = "+result); //1
运算符优先级表:(看看就行,不用记住)
运算符 | 描述 |
---|---|
. [] () | 字段访问、数组下标、函数调用以及表达式分组 |
++ – - ~ ! delete new typeof void | 一元运算符、返回数据类型、对象创建、未定义值 |
* / % | 乘法、除法、取模 |
+ - + | 加法、减法、字符串连接 |
<< >> >>> | 移位 |
< <= > >= instanceof | 小于、小于等于、大于、大于等于、instanceof |
== != === !== | 等于、不等于、严格相等、非严格相等 |
& | 按位与 |
^ | 按位异或 |
| | 按位或 |
&& | 逻辑与 |
|| | 逻辑或 |
?: | 条件 |
= oP= | 赋值、运算赋值 |
, | 多重求值 |
语句
-
我们的程序是由一条一条语句构成的,语句是按照自上向下的顺序一条一条执行的
-
在JS中可以使用
{}
来为语句进行分组,同一个{}
中的语句我们称为是一组语句,它们要么都执行,要么都不执行,一个{}
中的语句我们也称为叫一个代码块
(在代码块的后边就不用再编写;
了) -
JS中的代码块,只具有分组的的作用,没有其他的用途
代码块内容的内容,在外部是完全可见的
{
var a = 10;
alert("hello");
console.log("你好");
document.write("语句");
}
console.log("a = "+a);
流程控制语句
- JS中的程序是从上到下一行一行执行的
- 通过流程控制语句可以控制程序执行流程,使程序可以根据一定的条件来选择执行
- 语句的分类:
- 条件判断语句
- 条件分支语句
- 循环语句
条件判断语句(if)
- 条件判断语句:
使用条件判断语句可以在执行某个语句之前进行判断,如果条件成立才会执行语句,条件不成立则语句不执行。 if
语句
- 语法一:
if(条件表达式){
语句...
}
if
语句在执行时,会先对条件表达式进行求值判断,如果条件表达式的值为true
,则执行if
后的语句,如果条件表达式的值为false
,则不会执行if
后的语句。if
语句只能控制紧随其后的那个语句,如果希望if
语句可以控制多条语句,可以将这些语句统一放到代码块中if
语句后的代码块不是必须的,但是在开发中尽量写上代码块,即使if
后只有一条语句
var a = 25;
if(a > 10 && a <= 20){
alert("a大于10,并且 a小于等于20");
}
- 语法二:
if(条件表达式){
语句...
}else{
语句...
}
if...else...
语句
当该语句执行时,会先对if后的条件表达式进行求值判断,
如果该值为true
,则执行if
后的语句
如果该值为false
,则执行else
后的语句
var age = 50;
if(age >= 60){
alert("你已经退休了~~");
}else{
alert("你还没退休~~~");
}
- 语法三:
if(条件表达式){
语句...
}else if(条件表达式){
语句...
}else if(条件表达式){
语句...
}else{
语句...
}
if...else if...else
当该语句执行时,会从上到下依次对条件表达式进行求值判断
如果值为true
,则执行当前语句。
如果值为false
,则继续向下判断。
如果所有的条件都不满足,则执行最后一个else
后的语句
该语句中,只会有一个代码块被执行,一旦代码块执行了,则直接结束语句
var age = 90;
if(age > 17 && age <= 30){
alert("你已经成年了");
}else if(age > 30 && age <= 60){
alert("你已经中年了");
}else if(age > 60 && age <= 80){
alert("你已经退休了");
}else{
alert("你岁数挺大的了~~");
}
条件分支语句(switch)
条件分支语句也叫switch
语句
语法:
switch(条件表达式){
case 表达式:
语句……
break;
case 表达式:
语句……
break;
default:
语句……
break;
}
执行流程:
switch...case..
语句
在执行时会依次将case后的表达式的值和switch后的条件表达式的值进行全等比较,
- 如果比较结果为
true
,则从当前case
处开始执行代码。
当前case
后的所有的代码都会执行,我们可以在case
的后边跟着一个break
关键字,这样可以确保只会执行当前case
后的语句,而不会执行其他的case
- 如果比较结果为
false
,则继续向下比较 - 如果所有的比较结果都为
false
,则只执行default
后的语句
switch
语句和if
语句的功能实际上有重复的,使用switch
可以实现if
的功能,
同样使用if
也可以实现switch
的功能,所以我们使用时,可以根据自己的习惯选择。
循环语句(while、for)
通过循环语句可以反复执行一段代码多次
while循环
while循环
语法:
while(条件表达式){
语句……
}
while语句在执行时,先对条件表达式进行求值判断,
- 如果值为true,则执行循环体,循环体执行完毕以后,继续对表达式进行判断,如果为true,则继续执行循环体,以此类推
- 如果值为
false
,则终止循环
do…while循环
语法:
do{
语句…
}while(条件表达式)
执行流程:
do…while
语句在执行时,
会先执行循环体,循环体执行完毕以后,则对while
后的条件表达式进行判断,
如果结果为true
,则继续执行循环体,执行完毕继续判断,以此类推。
如果结果为false
,则终止循环。
实际上这两个语句功能类似,不同的是while
是先判断后执行,
do…while
是先执行后判断。
do…while
可以保证循环体至少执行一次,而while
不能
创建一个循环往往需要三个步骤
- 初始化一个变量
- 在循环中设置一个条件表达式
- 定义一个更新表达式,每次更新初始化变量
var a = 0;
while(a<10){
alert(a);
a++;
}
for 循环
在for
循环中为我们提供了专门的位置来放三个表达式:
- 初始化表达式
- 条件表达式
- 更新表达式
for
循环的语法:
for(初始化表达式;条件表达式;更新表达式){
语句…;
}
执行流程:
- 执行初始化表达式,初始化变量
- 执行条件表达式,判断是否执行循环。
如果为true
,则执行循环;
如果为false
,则终止循环。 - 执行更新表达式,更新表达式重复完毕,继续重复第二步
for
循环中的三个部分都可以省略,也可以写在外部
如果for循环中不写任何表达式,只写两个;
此时循环是一个死循环。会一直执行下去,慎用
for(;;){
alert("hello");
}
嵌套的for循环
练习一:打印九九乘法表
for(var i = 1;i<=9;i++){
for(var j = 1;j<=i;j++){
document.write("<span>"+j+" * "+i+" = "+i*j+"</span>")
}
document.write("<br />");
}
练习二:打印1~100之间所有的质数
for(var i = 2 ; i<=100;i++){
//创建一个布尔值用来保存结果,默认i是质数
var flag = true;
//判断i是否为质数
//获取2~i之间所有的数
for(var j = 2;j < i;j++){
//判断i是否能被j整除
if(i % j == 0){
//如果进入判断则证明i不是质数,修改flag值为false
flag = false;
}
}
if(flag){
document.write(i+"<br />");
}
}
break和continue
break
break
语句用于立即推出循环,强制执行循环后的下一条语句
不能在if
语句中使用break
和 continue
break
关键字会立即终止离它最近的循环语句
可以为循环语句创建一个label
,来标识当前循环
label:循环语句
使用break
语句时,可以在break
后跟着一个label
,
这样break
将会结束指定的循环,而不是最近的
continue
continue
语句也用于立即退出循环,但会再次从循环顶部开始执行
同样continue
也是默认只会对离它最近的循环起作用
质数练习补充
优化:使用break跳出循环
测试如下程序的性能
在程序执行前开启计时器
console.time()
可以开启一个计时器
它需要一个字符串作为参数,这个字符串将会作为计时器的标识
终止计时器
console.timeEnd()
用来停止一个计时器,需要一个计时器的名字作为参数
//测试如下程序的性能
//在程序执行前开启计时器
//console.time()可以开启一个计时器
//它需要一个字符串作为参数,这个字符串将会作为计时器的标识
console.time("test");
for(var i = 2 ; i<=10000;i++){
var flag = true;
for(var j = 2;j < i;j++){
if(i % j == 0){
flag = false;
//一旦进入判断,则证明i不可能是质数了,此时循环再执行已经没有任何意义
//使用break来结束循环
// break;
}
}
if(flag){
//document.write(i+"<br />");
}
}
//终止计时器
//console.timeEnd()用来停止一个计时器,需要一个计时器的名字作为参数
console.timeEnd("test");
不用break
所用的时间:
用break
的用时:
进一步优化
给100分解因数 :
1 * 100
2 * 50
4 * 25
5 * 20
10 * 10
因此只需要遍历到10即可,也就是100开平方
通过Math.sqrt()
可以对一个数开平方
console.time("test");
for(var i = 2 ; i<=10000;i++){
var flag = true;
for(var j = 2;j <= Math.sqrt(i);j++){
if(i % j == 0){
flag = false;
//一旦进入判断,则证明i不可能是质数了,此时循环再执行已经没有任何意义
//使用break来结束循环
break;
}
}
if(flag){
//document.write(i+"<br />");
}
}
//终止计时器
//console.timeEnd()用来停止一个计时器,需要一个计时器的名字作为参数
console.timeEnd("test");
优化后用时:
第二部分:JavaScript笔记 第二部分(对象)
最后
以上就是谨慎御姐为你收集整理的JavaScript笔记 第一部分(简介+基础语法)JavaScript简介JS基本语法的全部内容,希望文章能够帮你解决JavaScript笔记 第一部分(简介+基础语法)JavaScript简介JS基本语法所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复