JS系统性学习笔记
JavaScript简介
起源
● JavaScript诞生于1995年,它的出现主要是用于处理网页中的前端验证.
● 所谓的前端验证,就是检查用户输入的内容是否符合一定的规则.
● 比如:用户名的长度/密码的长度/邮箱的格式等等.
简史
● JavaScript是由网景公司发明,起初命名为LiveScript,后来由SUN公司的介入更名为JavaScript.
● 1996年微软公司在其最新的IE3浏览器中引入了自己对JavaScript的实现JScript.
● 于是在市面上存在两个版本的JavaScript,一个是网景公司JavaScript,另一个是微软的JScript.
● 为了确保不同的浏览器上运行的JavaScript标准一致,所以几个公司共同定制了JS的标准,命名为ECMAScript.
时间表
时间 事件
1995 网景公司开发了JavaScript
1996 微软发布了和JavaScript兼容的JScript
1997 ECMAScript第一版
1998 ECMAScript第二版
1998 DOMLevel1制定
1998 新型语言DHTML登场
1999 ECMAScript第三版
2000 DOMLevel2制定
2002 ISO/IEC 16262:2002确立
2004 DOMLevel3制定
2005 新型语言AJAX登场
2009 ECMAScript第五版
2009 新型语言HTML5登场
实现
● ECMAScript是一个标准,而这个标准需要各个厂商去实现.
● 不同的浏览器厂商对该标准会有不同的实现.
ECMAScript是JavaScript的标准,JavaScript的含义要更大一点,一个完整的JavaScript实现应该有以下三个部分构成:
学习内容
● 我们现在已经知道了一个完整的JavaScript实现包含三个部分:ECMAScript/DOM和BOM
● 由此我们也知道了我们所要学习的内容就是这三部分:
- ECMAScript
- DOM
- BOM
特点
● 解释型语言
● 类似于C和Java的语法结构
● 动态语言
● 基于原型的面向对象
解释型语言
● JavaScript是一门解释型语言,所谓解释型语言指不需要被编译为机器码再执行,而是直接执行.
● 由于少了编译这一步骤,所以解释型语言开发起来尤为轻松,但是解释型语言运行比较慢,也是他的劣势.
类似于C和java的语法结构
● JavaScript的语法结构于C和Java很像,像for/if/while等语句和java基本上是一模一样.
● 所以有过C和Java基础的同学,学习起来会轻松很多.
● 不过JavaScript和Java的关系仅仅只是看起来像而已.
动态语言
● JavaScript是一门动态语言,所谓的动态语言可以暂时理解为在语言中的一切内容都是不确定的.比如一个变量,这一时刻是个整形,下一时刻可能会变成字符串了.
● 动态语言一般相比静态语言性能上要差一点,不过由于JavaScript中应用了JIT技术,所以JS可能是目前运行速度最快的动态语言了.
基于原型的面向对象
● JavaScript是一门面向对象的语言.
● Java也是一门面向对象的语言,但是于java不同的是JavaScript是基于原型的面向对象.
JavaScript基本语法
编写位置
● 我们目前学习的js全都是客户端的js,也就是说全都需要在浏览器中运行,所以我们的js代码全都需要写在网页中.
● 我们的js代码需要编写到结果如下:
Undefined转换为Boolean
● 如果是声明后为初始化的undefined值,可以直接赋值true或false即可转换为Boolean类型
● 也可以使用Boolean()函数转为boolean值,但是转化后此时该值的默认值为false.
代码如下:<script> var a; console.log(typeof a); //直接赋值 a = true; console.log(typeof a); console.log(a); var b; console.log(typeof b); // 使用Boolean()方法 b = Boolean(b); console.log(typeof b); console.log(b); </script>结果如下:
Undefined类型
● Undefined类型只有一个值,即特殊的undefined.
● 在使用var声明变量但未对其初始化时,这个变量的值就是undefined.
代码如下:<script> var a; console.log(typeof a); console.log(a); //当一个变量声明后却没有初始化,此时它的数据类型为Undefined,值为undefined </script>结果如下:
● typeof对没有声明的变量也会返回undefined
如下:Null类型
● Null类型是第二个只有一个值的数据类型,这个特殊的值是null.
● 从语义上看null表示的是一个空的对象,所以使用typeof检查null会返回一个Object.
● undefined值实际上是由null值衍生出来的,所以比较undefinde和null是否相等,会返回?;
代码如下:<script> var a = null; console.log(typeof a); var b = undefined; console.log(typeof b); // 使用==判断null和undefinde结果为true console.log(a == b); // 使用===判断null和undefinde结果为false console.log(a === b); </script>结果如下:
强制类型转换
● 指将一个数据类型转换为其他数据类型
● 类型转换主要是指,将其他的数据类型,转换为String.Number.Boolean
将其他数据类型转换为String
方式一:toString()
● 调用被转换的数据类型的toString()方法
● 该方法不会影响到原来的变量,它会将转换的结果返回(具体使用方式及代码演示可以参考上面2.8.2.3小节)
● 但是注意:null和undefined这两个值
代码如下:<script> var a = null; a = a.toString(); console.log(typeof a); var b = undefined; b = b.toString(); console.log(typeof b); //null和undefined两个值没有toString()方法,如果调用,就会报错! </script>结果如下:
方式二:String( )
● 调用String()函数,并将被转换的数据作为参数传递给该函数(具体使用方式及代码演示可以参考上面2.8.2.3小节)
● 使用String( )函数做强制类型转换时:
○ 对于Number和Boolean实际上就是调用了toString()方法
○ 但是对于null和undefinde,就不会调用toString( )方法,它会将null直接转换为"null",会将undefinde直接转换为"undefinde".
代码如下:var c = null; c = String(c); console.log(typeof c); console.log(c); var d = undefined; d = String(d); console.log(typeof d); console.log(d); //对于null和undefinde,它会将null直接转换为"null", //会将undefinde直接转换为"undefinde".结果如下:
运算符
● JS中为我们定义了一套对数据进行运算的运算符.
● 这其中包括:算数运算符、位运算符、关系运算符.
算数运算符
● 算数运算符顾名思义就是进行算数操作的运算符.
● js中为我们提供了多种运算符:
运算符 说明 运算符 说明- 加法 ++(前置) 自增
- 减法 --(前置) 自减
乘法 ++(后置) 自增
/ 除法 --(后置) 自减
% 取模(取余) + 符号不变- 符号反转
一元运算符
● 一元运算符,只需要一个操作符
● + 正号(正号不会对数字产生任何影响)
● - 负号(负号可以对数字进行取反操作)
● 对于非Number类型的值,会先将其转换成Number,然后再运算,可以对一个其他类型的数据使用+,来将其转换成number,它的原理和Number()函数一样
代码演示如下:<script>/*
* 一元运算符,只需要一个操作符 * + 正号(正号不会对数字产生任何影响) * - 负号(负号可以对数字进行取反操作) * 对于非Number类型的值 * 会先将其转换成Number,然后再运算 * 可以对一个其他类型的数据使用+,来将其转换成number * 它的原理和Number()函数一样 * */var a = 123;
console.log(a);a = -a;
console.log(a);a = true;
console.log(a);a = "18";
console.log(typeof a);
console.log(a);a = +a;
console.log(typeof a);
console.log(a);var result = 1 + "2" + 3;
console.log("result = "+result);var result2 = 1 + +"2" + 3;
console.log("result2 = "+result2);</script>结果如下:
自增和自减
● 自增++
○ 通过自增可以使变量在自身基础上增加1
○ 对于一个变量自增以后,原变量的值会立即增加1
○ 自增分两种:后++(a++)和前++(++a):
○ 这两种都会立即使原变量的值加1
○ 不同的是a++ 和 ++a 的值不一样
○ 1. a++的值,等于原变量的值(自增前的值)
○ 2. ++a的值等于新值(自增后的值)
● 自减--同上
代码演示:<script> // ● 自增++ // ○ 通过自增可以使变量在自身基础上增加1 // ○ 对于一个变量自增以后,原变量的值会立即增加1 // ○ 自增分两种:后++(a++)和前++(++a): // ○ 这两种都会立即使原变量的值加1 // ○ 不同的是a++ 和 ++a 的值不一样 // ○ 1. a++的值,等于原变量的值(自增前的值) // ○ 2. ++a的值等于新值(自增后的值) // ● 自减--同上 var num = 10; // num--; // console.log(num); //结果为9 // --num; // console.log(num); //结果为9 // console.log(num--); //结果为10 // console.log(--num); //结果为9 </script>逻辑运算符
● 一般情况下,使用逻辑运算符会返回一个布尔值.
● 逻辑运算符主要有三个:非/与/或.
● 在进行逻辑操作时:如果操作的值不是布尔类型则会转换为布尔类型,再进行计算.
js中的逻辑运算符如下:
运算符 说明 短路规则
! 非(NOT) 无
&& 与(AND) 若左边值为假,则不运算右的值
|| 或(OR) 若左边值为真,则不运算右的值
非
● 运算符"非" 使用 ! 表示.
● 运算符"非"可以应用于任意值,无论值是什么类型,这个运算符都会返回一个布尔值.
● 运算符"非"会对原值取反,比如原值是true,使用"非"会返回false.
代码演示如下:var a = false; a = !a; console.log(a); var b = 10; console.log(typeof b); b = !b; console.log(typeof b); console.log("b1=" + b); var c = 10; console.log(typeof c); c = !!c; console.log(typeof c); console.log("b2=" + c);效果如下:
与
● 运算符"与" 使用 && 表示
● 运算符"与"也可以应用于任何数据类型,且不一定返回布尔值
● 对于非布尔值运算,会先将其转换为布尔值.
● 对布尔值做运算时,如果两个值都为true,则返回true,否则返回false.
● 对非布尔值:如果两个都为true,则返回第二个值,如果两个值中有false,则返回靠前的false的值.
代码演示如下:/** * 与 && * - && 对&&号两边的值进行运算并返回结果 * - 两个值中,只要有一个值为false,就返回false * - 两个值都为true时,才会返回true * - 如果第一个值为false,则不会看第二个值,直接返回false */ var result = true && true; console.log(result); result = true && false; console.log(result); result = false && true; console.log(result); result = false && false; console.log(result); true && alert("前面的值为true,后面的值需要被判定"); //会弹出 false && alert("前面的值为false,后面的值不用被判定"); //不会弹出效果如下:
或
● 运算符或用"||"表示.
● 运算符或"||"可以应用于任何数据类型,且不一定返回布尔值.
● 对于非布尔值的运算,会先将其转换为布尔类型.
● 对于布尔值的运算,如果两个值都为false则返回false,否则返回true.
● 对于非布尔值运算时:如果两个都为false,则返回第二个值,否则返回靠前true的值.
代码如下:/** * 或 || * -或 || 可以对自身两侧的值进行运算并返回结果 * -运算规则: * -两个值只要有一个为true,就返回true * -两个值都为false,才返回false * -如果第一个值为true,则不会检查第二个值. */ var result2 = false || false; //左右都是false,则返回false console.log(result2); //左右只要有一个值为true,就返回true result2 = true || false; console.log(result2); result2 = false || true; console.log(result2); result2 = true || true; console.log(result2); false || alert("第一个值为false,则会检查第二个值"); true || alert("第一个值为true时,则不再检查第二个值");结果如下:
"与"和"或"在运算非布尔值时的情况
● 对于非布尔值的运算,会先将其转换为布尔类型.然后再运算,并且返回原值!
代码演示如下:<script> /** * 与 和 或 对于非布尔值的运算 * 对于非布尔值的运算,会先将其转换为布尔类型.然后再运算,并且返回原值! * - 与运算 * -如果第一个值为true,则必然返回第二个值 * -如果第一个值为false,则直接返回第一个值 * - 或运算 * - 如果第一个值为true,则直接返回第一个值 * - 如果第一个值为false,则返回第二个值 * */ //转为布尔类型后,第一个数为true,则返回第二个数的原值 var result = 5 && 6; console.log(result); //转为布尔类型后,第一个数为false,则返回第一个数的原值 result = 0 && 2; console.log(result); //转为布尔类型后,第一个数为true,则返回第二个数的原值 result = 2 && 0; console.log(result); //转为布尔类型后,第一个数为false,则返回第一个数的原值 result = NaN && 0; console.log(result); //转为布尔类型后,第一个数为false,则返回第一个数的原值 result = 0 && NaN; console.log(result); console.log("-----------------------"); //如果第一个值为true,则直接返回第一个值 var result2 = 2 || 1; console.log(result2); //如果第一个值为true,则直接返回第一个值 result2 = 2 || NaN; console.log(result2); //如果第一个值为true,则直接返回第一个值 result2 = 2 || 0; console.log(result2); //如果第一个值为false,则返回第二个值 result2 = NaN || 1; console.log(result2); //如果第一个值为false,则返回第二个值 result2 = NaN || 0; console.log(result2); //如果第一个值为false,则返回第二个值 var result3 = "" || "hello"; console.log(result3); //如果第一个值为true,则直接返回第一个值 result3 = -1 || "你好"; console.log(result3); </script>结果如下:
赋值运算符
● 简单的赋值操作符由等于号( = )表示,其作用就是把右侧的值赋值给左侧的变量.
● 如果在等于号左边添加 加减乘除 等运算符,就可以完成复合赋值操作.
○ 举例:a += 10 和 a = a + 10;是一样的.
代码如下:<script> // = 可以将符号右侧的值赋值给符号左侧的变量 var a = 10; //+= a += 5 等价于 a = a + 5; //-=,*=,/=同理 // [ %= ] a %= 5 等价于 a = a % 5; // a = a % 3; a %= 3; console.log(a); </script>关系运算符
基本使用
● 小于<,大于>,小于等于<=,大于等于.这几个关系运算符用于对两个值进行比较,比较的规则与数学中的一样.
● 这几个运算符都是返回一个布尔值.用来表示两个值之间的关系是否成立.
○ 5 > 10 --> false
○ 5 < 10 -->true
○ 5 <= 10 -->true
○ 5 >= 10 -->false
非数值的情况
● 对于非数值进行比较时,会将其转换为数字然后再比较
● 如果符号两侧的值都是字符串时,不会将其转换成数字进行比较,而会分别比较字符串中字符的Unicode编码(并且是逐一比较编码数字)
代码演示如下:<script> //关系运算符在比较非数值类型时的演示 console.log(1 > true); //false console.log(1 >= true); //true console.log(1 > "0"); //true console.log(10 > null); //true console.log("---------1"); console.log(1 > NaN); console.log(1 < NaN); console.log(NaN >= 1); console.log(NaN <= 1); //任何值和NaN做任何比较结果都是false console.log("---------2"); console.log(10 <= "hello"); //false console.log(true > false); //true console.log("---------3"); console.log("1" < "5"); //true console.log("11" < "5"); //true console.log("a" < "b"); //true console.log("abc" < "bcd"); //true console.log("张三" > "李四"); //false /** * 比较两个字符串时,比较的是字符串的Unicode字符编码 * 比较字符编码的时候是一位一位进行比较 * 如果两位一样,则比较下一位,所以使用它来对英文进行排序 * 比较中文时,没有意义 * * 所以根据上面的规则,比较两个字符串类型的数字,可能会得到不可预期的结果 * 比如:上面的console.log("11" < "5");结果是为true * * 所以:[警告]在比较两个字符串类型的数字时,一定一定要先转为数值类型,再去比较! */ console.log("154654654684654654684" < "2"); </script>结果如下:
相等运算符
相等
● js中使用"==" 来判断两个值是否相等,如果相等则返回true.
● 使用"!="来表示两个值是否不相等,如果不等则返回true.
● 注意:null和undefined使用==判断时是相等的(结果为true).
表达式 值 表达式 值
null == undefined true true == 1 true
"NaN" == NaN false true == 2 false
5 == NaN false undefined == 0 false
NaN == NaN false null == 0 false
NaN != NaN true "5" == 5 true
false == 0 true
代码如下:<script> console.log(null == undefined); console.log(true == 1); console.log("NaN" == NaN); console.log(true == 2); console.log(5 == NaN); console.log(undefined == 0); console.log(NaN == NaN); console.log(null == 0); console.log(NaN != NaN); console.log("5" == 5); console.log(false == 0); </script>效果如下:
全等
● 除了"==" 以外,JS中还提供了全等"==="
● "===" 表示全等,他和"=="基本一致,不过==在判断两个值时会进行自动类型转换,而全等"==="不会.
○ 举例:"55" == 55结果为true,而"55" === 55 时结果为false;
● 同样 !== 表示不全等,同样比较时也不会自动转型.
○ 举例:"55" != 55结果为false,而"55" !== 55 时结果为true;
除了数据类型不同时,全等与相等大部分情况下都差不多,极个别情况下会有所不同,举例如下://全等 === console.log("---------------"); console.log("5" === 5); console.log(null === undefined); console.log(1 !== "1");结果如下:
逗号
● 使用逗号可以在一条语句中执行多次操作.
● 比如:var num1 = 1,num2 = 2,num3 = 3;
● 使用逗号运算符分隔的语句会从左到右顺序依次执行.
条件运算符
● 条件运算符也被称之为三元运算符.通常运算符写为? :
● 这个运算符需要操作三个操作数,第一个操作数在?之前,第二个操作数在?和:之间,第三个操作数在:之后.
○ 例如: x > 0 ? x : -x //求x的绝对值
● 上面的例子,首先会执行x > 0,
○ 如果返回true则执行冒号(:)左边的代码,并将结果返回,在上面的例子中就是返回了x本身.
○ 如果返回false则执行冒号(:)右边的代码,并将结果返回.
演示代码如下:<script> /** * 条件运算符也被称之为三元运算符 * 语法: * 条件表达式 ? 语句1 : 语句2; * 执行流程: * 条件运算符在执行时,首先对条件表达式进行求值, * -如果该值为true,则执行语句1,并返回执行结果. * -如果该值为false,则执行语句2,并返回执行结果. * 如果条件表达式的求值结果是一个非布尔值 * -会先将其转换成布尔值,然后再运算 */ var a = 300, b = 152, c = 50; // a > b ? alert("a大"):alert("b大"); //获取a和b的最大值 // var max = a > b ? a : b; //获取a b c 中的最大值 // max = max > c ? max : c; // alert(max); var max = a > b ? (a > c ? a : c) : (b > c ? b : c); // alert(max); "hello" ? alert("语句1") : alert("语句2"); </script>效果可以复制代码后取消代码注释运行查看
运算符的优先级
在加减乘除中，乘除要大于加减的优先级
var i = 3 + 4 * 2;
可以看出，结果如下：默认情况下各种运算符优先级都不一样，但是所有的操作符优先级如下,只是参考：
一元运算符里面的 逻辑 非 优先级很高
逻辑与【&&】 > 逻辑或【||】（优先级）
判断是否能被整除：取余为0- 小括号（）
- 一元运算符++ -- !
- 关系运算符 > >= < <=
- 相等运算符 == ！= === ！==
- 逻辑运算符号 先&& 后||
- 赋值运算符 =
- 逗号运算符，
只要记住括号里面的优先级最高，代码如下：
var j = (3 + 4) * 2;
console.log("运算的结果是="+j);
结果如下：
语句
如果说我们之前所说的表达式和运算符等内容可以理解成我们一门语言中的单词、短语.那么 语句 (statement)就是我们这个语言中一句完整的话.
语句是一个程序的基本单位,js的程序就是由一条一条的语句构成,每一条语句都使用 ; 结尾.
js中语句与语句之间默认是由上至下顺序执行的,但是我们也可以通过一些流程控制语句来控制语句的执行顺序.
代码块
● 代码块是在大括号 { } 中所写的语句,以此将多条语句的集合视为一条语句来使用.
○ 例如:{ var a = 123; a++; alert(a); }● 我们一般使用代码块将需要一起执行的语句进行分组,需要注意的是:代码块的结尾不需要加分号.
代码演示如下:{ var b = 10; // alert("hello"); console.log("你好"); document.write("语句"); } console.log("b = " + b); //代码块内部的内容,在外部也是完全可见的.(全局变量)效果如下:
条件语句
● 条件语句就是通过判断指定的表达式的值来决定执行还是跳过某些语句。
○ if ... else
○ switch ... case
if ... else语句
● if ... else语句是一种最基本的控制语句,它让JavaScript可以有条件的执行语句.
● if ... else语句一般有三种形式
第一种形式
语法:
if(expression)
statement如果(满足此处条件)
则执行此处代码举例:
var age = 19;if (age >= 18) {
alert("您已经成年!");
}
第二种形式
语法:
if(expression)statementelse
statement如果(满足此处条件)
则执行此处代码否则
就执行此处代码举例:
//第二种形式
/**- if ... else ...语句
- 当该语句执行时,会先对if后的条件表达式进行求值判断:
- 如果值为true,则执行if后的语句;
- 如果值为false,则执行else后的语句.
*/
- 如果值为false,则执行else后的语句.
age = 60;
if (age >= 60) {alert("您已经退休了~~");} else {
alert("您还没退休~~");}
第三种形式
语法:
if(expression)statementelse if(expression)
statementelse if(expression)
statementelse if(expression)
statementelse if(expression)
statement...
elsestatement如果(满足此处条件)
则执行此处代码否则 继续判定(如果满足此处条件)
则执行此处代码否则 继续判定(如果满足此处条件)
则执行此处代码否则 继续判定(如果满足此处条件)
则执行此处代码否则 继续判定(如果满足此处条件)
则执行此处代码...
如果上面的条件都不满足则执行此处的代码举例:
//第三种形式 /** * if..else if ..else * 当执行该语句时,会从上到下依次对条件表达式进行求值判断 * - 如果值为true,则执行当前语句. * - 如果值为false,则继续向下判断. * - 如果所有的条件都不满足,则执行最后一个else中的语句 * 该语句中,只会有一个代码块会被执行,一旦代码块被执行了,则直接结束语句. */ age = 200; if (age > 100) { alert("活着挺没意思的~~"); } else if (age > 80) { alert("已经比较长寿了,不知道活不活得到~~"); }else if (age > 60) { alert("成功活到退休~~"); }else if (age > 30) { alert("你已人至中年,活着真累啊~~"); } else if (age > 17) { alert("你已成年,现在是你一辈子最美好的时间~~"); }else{ alert("你还是个小屁孩,最无忧无虑的时候~~"); }switch...case语句
● 条件分支语句也叫作switch语句,他是另一种流程控制语句.
● switch语句更适合用于多条分支使用同一条语句的情况.
语法:
switch(条件值){
case 表达式1:语句...case 表达式2:
语句...case 表达式n:
语句...default:
语句...}
switch(传入一个值)
如果(满足表达式1条件)则执行此处代码否则 继续判定(如果满足表达式2条件)
则执行此处代码否则 继续判定(如果满足表达式3条件)
则执行此处代码否则 继续判定(如果满足表达式n条件)
则执行此处代码如果上面的条件都不满足
则执行此处的代码举例:
/** * switch语句的执行流程: * 在执行时会一次匠case后的值和switch后的值进行全等比较. * - 如果比较结果为true,则从当前case处开始执行代码 * 当前case后的代码都会被执行,包括之后case内的代码,所以我们可以在case的后面加一个break关键字. * break可以打断当前语句,这样可以确保只会执行当前case后的语句,而不会执行其他的case * - 如果结果为false,则继续向下比较. * - 如果所有比较结果都为false,则只执行default后的语句. * * switch语句和if语句的功能实际上有重复的,使用switch可以使用if的功能 * 同样使用if也可以实现switch的功能,所以我们使用时,可以根据自己的习惯选择. * * 注意: * switch开始之后,case语句只是标示着我们程序运行的起点,并不是终点, * 所以一旦符合case的条件程序,程序会一直运行到结束. * 所以我们一般会在case中添加break作为语句的结束. */ var num = 1; switch (num) { case 1: console.log("壹"); break; case 2: console.log("贰"); break; case 3: console.log("叁"); break; default: console.log("非法数字~~~"); break; }注意:switch开始之后,case语句只是标示着我们程序运行的起点,并不是终点,所以一旦符合case的条件,程序会一直运行到结束.所以我们一般会在case中添加break作为语句的结束.
循环语句
● 和条件语句一样,循环语句也是基本的控制语句.
● 循环中的语句只要满足条件,将会一直执行.
while循环
● while语句是一个最基本的循环语句
● while语句也被称为while循环
语法:while (条件表达式) { 要执行的代码 }举例1:
while (true) { console.log("周海东好帅!"); }注意:上面的例子中会一直重复在浏览器控制台输出"周海东好帅!",无法终止,为了避免浏览器卡顿,所以要及时关闭
那如何让while循环在重复固定的次数后就终止呢? 可以使用如下的方式,在while中添加一个变量用作计数器:举例2:
//那如何让while循环在重复固定的次数后就终止呢? //可以使用如下的方式,在while中添加一个变量用作计数器 var n = 1; while (n < 100) { n++; console.log("小张~"); }课堂练习:
//使用while循环输出1000以内3的倍数 var i = 0; while (i < 1000) { console.log(i); i = i + 3; }do...while循环
● do...while和while非常类似,只不过它会在循环的尾部而不是顶部检查表达式的值.
● do...while循环会至少执行一次.
语法://do...while语句语法: do{ 循环语句... }while(条件表达式);举例:
var a = 0; // while (a > 1) { // a++; // console.log("周海东很帅!"); // } //使用while上面的内容不会被输出 do{ a++; console.log("周海东很帅!"); }while(a > 1); //使用do...while则会无限次输出● 相比于while,do...while的使用情况并不是很多.
小总结
死循环
● 上面两种while循环都必须设定循环条件,如果将循环条件的表达式写死为true,叫做死循环.
● 死循环不会停止,除非浏览器关闭,死循环在开发中慎用.
● 如果循环条件设置为true时,可以使用break,来终止循环.
举例:var i = 0; while (true) { console.log(i); } //这是一个死循环如果循环条件设置为true时,可以使用break,来终止循环.如下:
var i = 0; while (true) { console.log(i++); if (i == 10) { //退出循环 break; } } //使用break关键字辅助中断while循环的执行一个完整的循环
创建一个循环,往往需要3个步骤:- 创建并且初始化一个变量
var a = 0; 在while循环中创建一个条件表达式
var a = 0;//在循环中创建一个条件表达式
while (a <= 10) {}
定义一个变量的更新表达式,每循环一次或循环多次时,变量的值必须要发生变化
var a = 0;//在循环中创建一个条件表达式
while (a <= 10) {//定义一个变量的更新表达式,每循环一次或循环多次时,变量的值必须要发生变化
a++;console.log(a);
}
一个合格的while循环,一般都必须满足以上3个条件.
for循环
● for语句也是循环控制语句,我们也称他为for循环
● 大部分循环都会有一个计数器用以控制循环执行的次数
● 计数器的三个关键操作时:初始化/检测和更新.
● for语句就将这三步操作明确为了语法的一部分.
语法:
// for (开始变量; 结束变量; 每循环一次就要执行的操作) {
// 每次循环需要执行的代码
// }
代码演示:
for (var i = 0; i < 10; i++) {console.log(i);}
for循环的执行顺序：
// for循环的执行循序
// for(①，②，④){
// ③
// }
// for循环会一直执行，直到②处的结果为false（假）时，中断。
结果如下：
for循环和if判断结合
在上面for循环的基础上，判断如果是7的倍数，就在控制台打印出来：for (var i = 1; i <= 100; i++) { //用i求余7，如果余数为0，则说明i能整除7，i是7的倍数 if (i%7 == 0) { console.log(i); } }结果如下：
● 使用for循环做一个死循环
/** * for循环后小括号内的三个部分都可以省略,也可以写在外部 * 此时循环是一个死循环会一直执行下去,慎用! */ for (;;) { console.log("周海东好帅!"); }嵌套循环
● 循环与循环以及判断之间都可以嵌套使用
举例1://外部的for循环决定了图形输出了多少行 for (var i = 0; i <= 5; i++) { //在循环内部再创建一个循环,用来控制了图形每一行的宽度 //当前该循环中,外部的for循环执行1次,内部的for循环就会执行8次 //内循环可以决定图形的宽度,执行几次图形的宽度就是多少! for (var j = 0; j < i + 1; j++) { document.write("* "); } document.write("<br/>"); } document.write("-------------------------<br/>"); //外部的for循环决定了图形输出了多少行 for (var i = 0; i <= 5; i++) { //在循环内部再创建一个循环,用来控制了图形每一行的宽度 //当前该循环中,外部的for循环执行1次,内部的for循环就会执行8次 //内循环可以决定图形的宽度,执行几次图形的宽度就是多少! for (var j = 0; j < 5 - i; j++) { document.write("* "); } document.write("<br/>"); }效果如下:
举例2:
效果如下:break和continue
● break和continue语句用于在循环中精确地控制代码的执行.
● 使用break语句会让程序立刻退出最近的循环,强制执行循环后面的语句.
● 使用continue语句会使程序跳过当次循环,继续执行下一次循环,并不会结束整个循环.
● break和continue语句只在循环和switch语句中使用生效.
● continue只能在循环中使用生效,不能出现在其他的结构中.
举例://使用break语句会让程序立刻退出最近的循环 for(var i = 0; i<=100;i++){ if (i == 50) { break; } console.log(i); } console.log("---------------------------------"); //使用continue语句会使程序跳过当次循环,继续执行下一次循环,并不会结束整个循环. for(var i = 0; i<=100;i++){ if (i == 50) { continue; } console.log(i); }效果如下:
label
● 使用label语句可在代码中添加标签,以便将来使用.
● 语法: label: statement
举例:for(var i = 0; i <= 5; i++){ console.log("外层循环:"+i); for(var j = 0;j < 5; j++){ break; console.log("内层循环:"+j); } } console.log("---------------------------------"); /** * 可以为循环语句创建一个label,来表示当前的循环 * label:循环语句 * 使用break这样的语句时,可以在break后跟一个label. * 这样break将会结束指定的循环,而不是最近的. */ outer: for (var i = 0; i <= 5; i++) { console.log("外层循环:" + i); for (var j = 0; j < 5; j++) { break outer; console.log("内层循环:" + j); } }效果如下:
对象
https://www.yuque.com/heaven-ajq6d/oqdle6/wwwge9xbtzzbtcp7