我是靠谱客的博主 谨慎御姐,最近开发中收集的这篇文章主要介绍JavaScript笔记 第一部分(简介+基础语法)JavaScript简介JS基本语法,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

说明: 该笔记为学习《尚硅谷JavaScript》时整理

JavaScript简介

  1. 起源
  • JavaScript诞生于1995年,它的出现主要是用于处理网页中的
    前端验证。
  • 所谓的前端验证,就是指检查用户输入的内容是否符合一定的
    规则。
  • 比如:用户名的长度,密码的长度,邮箱的格式等。
  1. 简史
  • JavaScript是由网景公司发明,起初命名为LiveScript,后来由于SUN公司的介入更名为了JavaScript。
  • 1996年微软公司在其最新的IE3浏览器中引入了自己对JavaScript的实现JScript。
  • 于是在市面上存在两个版本的JavaScript,一个网景公司的JavaScript和微软的JScript。
  • 为了确保不同的浏览器上运行的JavaScript标准一致,所以几个公司共同定制了JS的标准名命名为ECMAScript。
  1. 时间表
    在这里插入图片描述
  2. 实现
  • 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文件时,使用该属性指向文件的地址。
  1. 虽然可以写在标签的属性中,但是他们属于结构与行为耦合,不方便维护,不推荐使用
    • 可以将js代码编写到标签的onclick属性中当我们点击按钮时,js代码才会执行
    • 可以将js代码写在超链接的href属性中,这样当点击超链接时,会执行js代码
  2. 可以将js代码编写到script标签,script标签一旦用于引入外部文件了,就不能在编写代码了,即使编写了浏览器也会忽略
    如果需要则可以在创建一个新的script标签用于编写内部代码
  3. 可以将js代码编写到外部js文件中,然后通过script标签引入写到外部文件中可以在不同的页面中同时引用,也可以利用到浏览器的缓存机制推荐使用的方式

输出方式

  1. alert(“要输出的内容”);
  • 在浏览器中弹出一个对话框,然后把要输出的内容展示出来

  • alert都是把要输出的内容首先转换为字符串然后在输出的

  1. document.write(“要输出的内容”);

    直接的在页面中展示输出的内容

  2. console.log(“要输出的内容”);

    在控制台输出内容

  3. value ->给文本框(表单元素)赋值内容

    获取文本框中(表单元素)的内容

document.getElementById("search").value = "要给#search这个文本框添加的内容";
  1. innerHTML/innerText ->给除了表单元素的标签赋值内容
document.getElementById("div1").innerHTML = "吧啦吧啦吧啦吧啦";
document.getElementById("div1").innerText = "吧啦吧啦吧啦吧啦";

prompt()

prompt()可以弹出一个提示框,提示框中会带有一个文本框,用户可以在文本框中输入一段内容,该函数需要一个字符串作为参数,该字符串将会作为提示框的提示文字

用户输入的内容将会作为函数的返回值返回,可以定义一个变量来接受该内容

prompt()的返回值是String类型

var number = prompt("请输入一个数字");

注释

要养成良好的编写注释的习惯,可以通过注释来对代码进行一些简单的调试

  • 多行注释,注释中的内容不会被执行,但可以在源代码中查看
/*
js注释
*/
  • 单行注释
// 单行注释
  1. JS中严格区分大小写
  2. JS中每一条语句以结尾
  • 如果不写分号,浏览器会自动添加,但会消耗一些系统资源,而且有些时候,浏览器会加错分号,所以在开发中,分号必须写
  1. JS中会自动忽略多个空格和换行,所以我们可以利用空格和换行对代码进行格式化。

字面量和变量

字面量:
都是一些不可改变的值。
字面量都是可以直接使用的,但是我们一般都不会直接使用字面量。

变量:

  1. 可以用来保存字面量,而且变量的值是可以任意改变的
  2. 变量更加方便我们使用,所以在开发过程中都是通过变量去保存一个字面量,而很少直接使用字面量
  3. 可以通过变量对字面量进行描述

声明变量
在js中使用var关键字来声明一个变量

var a;

为变量赋值

a = 123;

声明和赋值同时进行

var b = 789;
var c = 0;
console.log(c);

标识符

  • 在js中所有可以由我们自主命名的,都可以称作时标识符
  • 例如:变量名、函数名、属性名都属于标识符
  • 命名一个标识符时需要遵守如下的规则
    1. 标志符中可以含有字母、数字、_、$。
    2. 标识符不能以数字开头
    3. 标识符不能是ES中的关键字或保留字
    4. 按照惯例,ECMAScript 标识符采用驼峰命名法。
      首字母小写,每个单词的开头字母大写。其余字母小写
      例:helloWorld、xxYyyZzz

关键字

breakdoinstanceoftypeofcase
elsenewvarcatchfinally
returnvoidcontinueforswitch
whiledefaultifthrowdelete
intryfunctionthiswith
debuggerfalsetruenull

保留字

classenumextendssuper
constexportimportimplements
letprivatepublicyield
interfacepackageprotectedstatic

其他不建议使用的标识符
在这里插入图片描述

数据类型

数据类型指的就是字面量的类型,
在js中一共有6种数据类型:

  1. String:字符串
  2. Number:数值
  3. Boolean:布尔值
  4. Null:空值
  5. Undefined:未定义
  6. Object:对象

其中StringNumberBooleanNullUndefined属于基本数据类型
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

强制类型转换

  • 指将一个数据类型强制转换为其他数据类型
  • 类型转换主要指,将其他的数据类型转换成:
    StringNumberBoolean

转换为String

  1. 方式一:调用被转换数据类型的toString()方法
    该方法不会影响到原变量,它会将转换的结果返回
    但是注意:nullundefined这两个值没有toString()方法,如果调用,则会报错。
	var a = 123;
a=a.toString ();
console.log(typeof a);
console.log(a);
  1. 方式二:调用String函数,并将被转换的数据作为参数传递给函数
    使用String函数做强制类型转换时,对于NumberBoolean实际上就是调用toString()方法
    但是对于nullundefined就不会调用toString()方法
    它会将null直接转换为“unll”
    undefined直接转换为“undefined”
	var a = 123;
a=String(a);

转换为Number

  1. 方式一:使用Number()函数
  • 字符串——>数字
    1.如果是纯数字的字符串,则直接将其转换为数字
    2.如果字符串中有非数字内容,则转换为NaN
    3. 如果字符串时一个空串或全为空格的字符串,则转为0
  • 布尔——>数字
    true转成1
    false转成0
  • Null——>数字:0
  • undefined——>数字:NaN
a=Number(a);
  1. 方式二:这种方式专门用来对付字符串
    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()函数
  1. 数字——>Boolean
    除了0NaN其余的都是true。

var a = 123; //true
a = -123; //true
a = 0; //false
a = Infinity; //true
a = NaN; //false
a=Boolean(a);
console.log(typeof a);
  1. 字符串——>Boolean
    除了空串,其余的都是true
  2. nullundefined——>Boolean
    都会转换为false
  3. 对象Object——>Boolean
    都会转换为true
数据类型转换为true的值转换为false的值
Booleantruefalse
String非空字符串" "(空字符串)
Number非零数值(包括无穷值)0、NaN
Object任意对象null
UndefinedN/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中的程序是从上到下一行一行执行的
  • 通过流程控制语句可以控制程序执行流程,使程序可以根据一定的条件来选择执行
  • 语句的分类:
  1. 条件判断语句
  2. 条件分支语句
  3. 循环语句

条件判断语句(if)

  • 条件判断语句:
    使用条件判断语句可以在执行某个语句之前进行判断,如果条件成立才会执行语句,条件不成立则语句不执行。
  • if语句
  1. 语法一:
	if(条件表达式){
语句...
}
  • if语句在执行时,会先对条件表达式进行求值判断,如果条件表达式的值为true,则执行if后的语句,如果条件表达式的值为false,则不会执行if后的语句。
  • if语句只能控制紧随其后的那个语句,如果希望if语句可以控制多条语句,可以将这些语句统一放到代码块中
  • if语句后的代码块不是必须的,但是在开发中尽量写上代码块,即使if后只有一条语句
var a = 25;
if(a > 10 && a <= 20){
alert("a大于10,并且 a小于等于20");
}
  1. 语法二:
if(条件表达式){
语句...
}else{
语句...
}

if...else...语句
当该语句执行时,会先对if后的条件表达式进行求值判断,
如果该值为true,则执行if后的语句
如果该值为false,则执行else后的语句

var age = 50;
if(age >= 60){
alert("你已经退休了~~");
}else{
alert("你还没退休~~~");
}
  1. 语法三:
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 表达式:
语句……
breakcase 表达式:
语句……
breakdefault:
语句……
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不能

创建一个循环往往需要三个步骤

  1. 初始化一个变量
  2. 在循环中设置一个条件表达式
  3. 定义一个更新表达式,每次更新初始化变量
var a = 0;
while(a<10){
alert(a);
a++;
}

for 循环

for循环中为我们提供了专门的位置来放三个表达式:

  1. 初始化表达式
  2. 条件表达式
  3. 更新表达式
    for循环的语法:
for(初始化表达式;条件表达式;更新表达式){
语句…;
}

执行流程:

  1. 执行初始化表达式,初始化变量
  2. 执行条件表达式,判断是否执行循环。
    如果为true,则执行循环;
    如果为false,则终止循环。
  3. 执行更新表达式,更新表达式重复完毕,继续重复第二步

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语句中使用breakcontinue
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基本语法所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(38)

评论列表共有 0 条评论

立即
投稿
返回
顶部