JavaScript笔记第一部分（简介+基础语法）

最新推荐文章于 2022-07-31 01:46:06 发布

二五25

最新推荐文章于 2022-07-31 01:46:06 发布

阅读量417

点赞数

分类专栏：学习笔记 js基础文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_44741716/article/details/109556952

版权

学习笔记同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

js基础

2 篇文章 0 订阅

订阅专栏

说明：该笔记为学习《尚硅谷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中所有可以由我们自主命名的，都可以称作时标识符
例如：变量名、函数名、属性名都属于标识符
命名一个标识符时需要遵守如下的规则
1. 标志符中可以含有字母、数字、_、$。
2. 标识符不能以数字开头
3. 标识符不能是ES中的关键字或保留字
4. 按照惯例，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——>数字：0
undefined——>数字：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笔记第二部分（对象）

二五25

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript笔记第一部分（简介+基础语法）

说明：该笔记为学习《尚硅谷JavaScript》时整理JS基础JavaScript简介起源JavaScript诞生于1995年，它的出现主要是用于处理网页中的前端验证。所谓的前端验证，就是指检查用户输入的内容是否符合一定的规则。比如：用户名的长度，密码的长度，邮箱的格式等。简史JavaScript是由网景公司发明，起初命名为LiveScript，后来由于SUN公司的介入更名为了JavaScript。1996年微软公司在其最新的IE3浏览器中引入了自己对JavaScrip
复制链接

扫一扫