JavaScript

最新推荐文章于 2022-11-19 17:33:45 发布

zjh0101

最新推荐文章于 2022-11-19 17:33:45 发布

阅读量133

点赞数

分类专栏：前端文章标签： javascript 前端 html

本文链接：https://blog.youkuaiyun.com/zjh0101/article/details/127892371

版权

前端专栏收录该内容

2 篇文章

订阅专栏

JavaScript

JavaScript 是一种基于对象和事件驱动的客户端脚本语言

动态、弱类型、基于原型，内置了支持类

解释器称为 JS 引擎，内置于浏览器中

ECMA 欧洲计算机制造商协会

Hello world

复杂的写法

JavaScript 基本语法

属性 type 用于说明脚本的 MIME 类型 text/javascript

js 脚本既可以写在 html 文件内部，也可以独立定义 js 文件，需要使用时进行连接引入。例如 <script

type="text/javascript" src=" 引入的 js 文件路径 "></script> 。引入外部文件的 <script> 标签之间

不能包含内容

加载外部的 css 文件使用的是 link 标签 <link rel="stylesheet" type="text/css"

href="style/aaa.css">

JavaScript 数据类型

js 是弱类型脚本语言，变量的数据类型是解释执行时动态决定的。

基本数据类型： Number 数值型、布尔类型 boolean 、字符串类型 string

undefined 类型只有一种可取值 undefined ，表示没有初始值的变量

null 类型表示已经赋值，只是值为空

< input type = "button" onclick = "ff()" value = "Click me" > onclick 就是给按钮绑定了一

个响应函数，点击按钮则会触发响应函数的执行

< script >

function ff (){

window . alert ( ' 点击操作处理 ...' );

}

< /script>

< button > Click me < /button>

< script >

window . onload = function (){ // 当窗口加载完毕后自动执行的回调处理

var btn = document . getElementsByTagName ( "button" )[ 0 ]; // 按照标签名称查找文

档中的所有指定标签，例如这里查找所有的 button 标签

btn . onclick = function (){ // 给查找的页面元素绑定单击响应函数

alert ( this . firstChild . nodeValue ); //this 用于指代当前事件源对象，也就是

button 按钮。获取按钮元素的第一个子元素

}

复合数据类型：对象、数组和函数

JavaScript 中严格区分大小写

JavaScript 中标识符的命名规范和 Java 一致

布尔类型

true ： true 、非零数字、非空字符串

false ： false 、数值 0 、空字符串、 undefined 、 null

函数

在 JS 中函数也是一个对象，可以将函数作为一个值赋给变量，函数名就是这个对象的引用

变量

变量定义可以使用关键字 var 和 let 进行定义，也可以不加任何关键字

JavaScript 是弱类型编程语言，声明变量时不需要指定类型，而且变量类型也随着赋值的改变而改变

正则式

正则表达式是一种用来匹配字符串的强有力的武器。它的设计思想是用一种描述性的语言来给字符串定

义一个规则，凡是符合规则的字符串就认为它匹配了，否则该字符串就是不合法的

正则式本质上就是一种允许使用通配符的特殊字符串，基础语法就是【

/ 表达式 / 】，最初的主要用于用

户输入数据的校验

通配符

var f=function(name){

alert('xxxx'+name);

}

f('lisi');

< script >

var kk = 999 ;

mm = "number:" ;

let sex = true ;

document . writeln ( "kk:" + kk + "<br/>" );

document . writeln ( "mm:" + mm + "<br/>" );

document . writeln ( "sex:" + sex + "<br/>" );

< /script>

特殊字

符

说明

？

指定前面的表达式可以出现零次或一次

指定前面的表达式可以出现零次或多次

指定前面的表达式可以出现一次或多次

{m, n}

表示法

这种写法最灵活，用于表示前面的表达式可以最少出现 m 次，最多出现 n 次。注意其中

的 m 和 n 都可以省略，省略 m 表示 0 ，省略 n 表示无限次

特殊字符表示频率修饰

固定组

固定组可以使用 () 表示，可以使用竖线 | 表示互斥

例如 (abc)|(efg) 表示可以匹配 abc 或者 efg

常用方法

基本使用方法 正则式对象的 test 方法

test() 方法用于判断正则式是否匹配某个字符串

如果要求输入 4 位数字，而且不能 0 开头。 /^[1 - 9][0 - 9]{3}$/

判断输入内容为中文字符，要求最少 2 个，最多 10 个

<form action = "./index.html" name = "form1" method = "post" onsubmit = "return

isSubmit();" >

onsubmit 就是在 form 表单提交之前所执行的函数

这里可以使用 return false 阻止 form 表单的提交

function isSubmit(){

if(checkSNO(document.form1.sno) && checkSname(document.form1.sname) &&

checkSbirthday(document.form1.sbirthday)){ 执行各个输入的验证，如果验证通过则返回

true ，使 form 表单提交，否则返回 false 阻止提交

return true;

}

return false;

}

< input type = "text" name = "sno" onBlur = "checkSNO(this)" />

< td id = "sno" >< /td>

当输入框失去焦点时自动回调 checkSno 函数 , 并将当前页面元素作为参数传递到函数中

function checkSNO ( n ){

var flag = true ;

var message = "ok" ;

var zz = /^\d{4}$/ ; 整个字符串内容必须以数字开头【 ^ 】，以数字结尾【 $ 】。 \ d 表示数

字，每个字符必须是 0 - 9 的数字， { 4 } 表示 \ d 需要出现 4 次，如果 { 4 ,} 表示最少出现 4 次，如果 {, 4 } 表示

0 次到 4 次

if ( ! zz . test ( n . value )){ 判断输入的内容是否复合正则式，符合则为 true ，否则为

false 。 n 是调用时候传入的页面元素， . value 则获取该页面元素的 value 值

message = "no" ;

flag = false ;

}

document . getElementById ( n . name ). innerHTML = message ;

return flag ;

}

function checkSname ( n ){

var flag = true ;

var message = "ok" ;

var zz = /^[\u4e00-\u9fa5]{2,10}$/ ;

if ( ! zz . test ( n . value )){

message = "no" ;

flag = false ;

}

document . getElementById ( n . name ). innerHTML = message ;

return flag ;

}

11 判断用户输入的日期类型样式

样例深入理解

初期开发中使用正则式的建议：到网络上查询，不建议自己写，除非有把握。

vscode 的插件 any-rule 按需求直接生成

没有通配符

使用通配符

其它通配符的含义比较清晰，重点理解 [] 的用法

function checkSbirthday ( n ){

var flag = true ;

var message = "ok" ;

var zz = /^\d{4,}-([1-9]|[1][012])-([1-9]|[12][0-9]|[3][01])$/ ;

if ( ! zz . test ( n . value )){

message = "no" ;

flag = false ;

}

document . getElementById ( n . name ). innerHTML = message ;

return flag ;

}

var str = "112yanjun" ;

var reg1 = /yan/ ; 表示 3 个字符，而且连接顺序确定。主要字符串中包含 yan 子串则返回 true

document . writeln ( reg1 . test ( str ));

添加特定符号

/^ yan / 表示要求以 yan 子串开头，例如 yanjun

/ yan$ / 表示要求以 yan 子串收尾，例如 junyan

要求字符串应该是由数字组成

\ d 表示字符串中的一个字符应该是数字

var str = "12" ;

var reg1 = /^\d$/ ;

document . writeln ( reg1 . test ( str )); 返回值为 false

使用 + 表示前面的字符可以出现一次或多次 , 但是由于 ^ 和 $ 的限制，所以 str 中包含字符 a 非数字，返回值

为 false

var str = "1243213421a2" ;

var reg1 = /^\d+$/ ;

document . writeln ( reg1 . test ( str ));

可以使用 [] 表示一个字符的条件

[ 1 - 9 ] 表示字符串中一个字符应该是 1 到 9 的数字

var str = "0" ;

var reg1 = /^[1-9]$/ ; reg1 . test 返回 false

var str = "1f" ;

var reg1 = /^[1-9a-f]{2}$/ ; // 可以匹配 1-9 的数字或者 a-f 的字符

var str = "yb" ;

var reg1 = /^[yan]{2}$/ ; // 每个字符可以使用 yan 中任意一个字符

其它用法【不重要】

new RegExp() 构建正则表达式对象，可以使用参数指定匹配模式 g 、 i 、 m

g 全文查找、 i 忽略大小写、 m 多行查找。也可以同时指定 3 个模式

compile 编译正则表达式，例如 reg1.compile("man","g") ; 修改正则式对象中的正则表达式

test 判断是否符合正则表达式 [ 主要应用 ]

exec 检索字串中指定的值，返回找到的值，并确定位置

字串的 replace 方法

replace( 正则式，替换内容 ) 用于进行符合正则式要求的字符串的替换

String 其它方法

search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串

match() 法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配

replace() 替换与正则表达式匹配的子串

split() 把字符串分割为字符串数组

search() 方法用于检索字符串中指定的子字符串或检索与正则表达式相匹配的子字符串。如果没有找到

任何匹配的子串，则返回 -1

var str="Mr. Bluehas a blue house";

document.write(str.search(/blue/i));

match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配

match() 方法将检索字符串 String Object ，以找到一个或多个与 regexp 匹配的文本。这个方法的行

为在很大程度上有赖于 regexp 是否具有标志 g 。如果 regexp 没有标志 g ，那么 match 方法就只能在

stringObject 中执行一次匹配。如果没有找到任何匹配的文本， match 将返回 null 。否则它将返回

一个数组，其中存放了与它找到的匹配文本有关的信息

var str = "The rain in SPAIN stays mainly in theplain";

var n=str.match(/ain/gi);

document.getElementById("demo").innerHTML=n;

输出值为： ain,AIN,ain,ain

var str = "Visit W3School, W3School is a place to studyweb tech." ;

var patt = new RegExp ( "W3School" , "g" );

var result ;

while (( result = patt . exec ( str )) != null ) {

document . write ( result );

document . write ( patt . lastIndex );

}

function trim ( str ){

return str . replace ( /(^\s*)|(\s*$)/g , "" ); // 剔除字符串两端的空格符，其中 ^\s* 表示

开头部分的多个空格 ,\s*$ 表示收尾的多个空格。默认只匹配一次，如果需要匹配所有满足条件的字符

串，则需要使用贪婪模式 g

}

alert ( trim ( " safdas " ));

split() 方法用于把一个字符串分割成字符串数组。如果把空字符串 "" 用作 separator ，那么 stringObject

中的每个字符之间都会被分割。 split 方法不改变原始字符串

var str="How areyou doing today?";

var n=str.split("",3);

输出值： How,are,you

var str="How areyou doing today?";

var n=str.split(/[a-e]/);

H5 的数据校验

html5 额外添加了一些输入校验属性进行简单的客户端校验，不符合规则则会弹出 tip 进行提示

required 指定必须填写

pattern 指定输入值必须符合指定的正则表达式

min/max 针对数值和日期的最大最小值

自定义报错信息

默认 html5 为每个校验规则提供相应的报错提示，这些错误提示信息是固定的。 html5 为表单控件提供

setCustomValidity() 方法实现用户自定义报错提示信息。但是注意浏览器对自定义错误提示的支持并不

是很理想，可能会有页面需要刷新一次的问题。

H5 验证总结

优点：简单方便

缺点：提示的 UI 不是太漂亮，无法做多个验证，必须表单提交才能验证（即 ajax 无效）

建议：在要求比较简单的时候可以考虑使用 H5 验证表单，也可以使用内置 JS 函数加各种事件自定义

一个验证函数，不过这样不仅兼容是个问题，而且还麻烦，倒不如直接使用 JQ 插件验证

Date 日期类型

Date 日期对象。这个对象可以储存任意一个日期，从 0001 年到 9999 年，并且可以精确到毫秒数

（ 1/1000 秒）

在内部，日期对象是一个整数，它是从 1970 年 1 月 1 日零时正开始计算到日期对象所指的日期的毫

秒数。如果所指日期比 1970 年早，则它是一个负数

</form>

var check = function (){

if ( ! document . getElementById ( "name" ). checkValidity ()){

document . getElementById ( "name" ). setCustomValidity ( " 名称是必须填写的！ " );

}

</script>

所有日期时间，如果不指定时区，都采用 UTC 世界时时区，它与 GMT 格林威治时间在数值基本上是一样

的

不指定参数日期 new Date()

参数为日期字符串： var nowd2=new Date("2019/3/20 11:12");

参数为毫秒数： var nowd3=new Date(5000);

参数为年月日小时分钟秒毫秒： var nowd4=new Date(2018,10,24,11,12,0,300);

常见方法：

getFullYear() 返回四位数的年、 getMonth() 返回月 0-11 、 getDate() 返回日、 getDay() 返回星

期

getHours() 返回小时 0-23 、 getMinutes() 返回分钟 0-59 、 getSeconds() 返回秒数 0-59

getMilliseconds() 返回 0-999 毫秒

以上都可以加 UTC 返回世界时间

UTC 协调世界时是以原子时秒长为基础，在时刻上尽量接近于世界时的一种时间计量系统。中国大陆为

UTC+8

getTime() 返回 1970 年 1 月 1 日至今的毫秒数

setFullYear(year,month,day) 、 setMonth(month,day) 、 setDate(day) 、

setHours(hour,min,sec,millisec) 、 setMinutes(min,sec,millisec) 、 setSeconds(sec,millisec) 、

setMilliseconds(millisec) 、 setTime(millisec)

需求：当用户浏览网页的时候，根据当前的时间，给出问候语 :

6:00-9:00 早上好

9:01-11:30 上午好

11:31-14:30 中午好

14:31-17:30 下午好

17:31-18:40 傍晚好

18:41-23:59 晚上好

0:00-5:59 凌晨好

定时器使用

setTimeout 和 setInterval 。 setTimeout 只执行一次， setInterval 会按照指定时间间隔反复执行

setTimeout(" 调用的函数 ", " 定时的时间 ") ，例如 var myTime ＝ setTimeout("disptime( )

",1000 ） ; 每隔 1000 毫秒调用函数 disptime( ) 执行

clearTimeout(myTime); 关闭定时器

动画效果

< img id = "img1" src = "images/T0.GIF" >

< button onclick = "ff()" > 开始播放 </ button >< button onclick = "ss()" > 停止播放

</ button >

< script >

var to = null ;

function ff (){

to = setTimeout ( "dd(0)" , 200 );

}

function dd ( kk ){

document . getElementById ( "img1" ). src = "images/T" + kk + ".GIF" ;

kk ++ ;

窗口定时关闭

复合类型

复合类型就是由多个基本数据类型，包括复合类型，组成的数据体。

复合类型包括对象 Object 、数组 Array 和函数 Function 三种

对象

对象是一系列命名变量、函数的集合。对象中的命令变量称为属性，对象中的函数称为方法。对象访问

成员的语法是点运算符【对象变量名 . 成员名称】实现

访问浏览器的版本号 navigator.appVersion ，这里的 navigator 就是 BOM 浏览器对象，编程显示使用

的 document 就是 DOM 文档对象

JavaScript 是基于对象的脚本语言，它提供了大量的内置对象。常见的内置类由数组类 Array 、日期类

Date 、错误类 Error 、函数类 Function 、数学类 Math 、数值 Number 、对象类 Object 和字串类 String

数组

数组实际上就是一系列变量，其中数组元素的类型可以不相同，可以通过使用 length 属性获取当前数组

中的元素个数，也可以修改 length 属性对数组进行裁剪

length 属性是一个可读可写的属性，通过设置 length 属性值可以对数组进行裁剪

if ( kk > 9 ) kk = 0 ;

to = setTimeout ( "dd(" + kk + ")" , 200 );

}

function ss (){

if ( to != null )

clearTimeout ( to );

}

</ script >

function ff (){

setTimeout ( "bb()" , 3000 );

}

function bb (){

alert ( ' 三秒到了 !' );

window . close ();

}

</script>

</body>

var arr1 = [ 1 , 2 , 34 , 5 ]; // 定义数组并同时进行数组元素赋值，下标从 0 开始，例如 arr1[0] 就是 1

var arr2 = new Array (); // 定义一个空数组

arr2 = new Array ( 6 ); // 定义一个数组，长度为 6. 每个数组元素为 undefined

arr2 = new Array ( 16 , 10 ); // 定义一个数组，长度为 2 ，其中第一个元素为 16 ，第二个元素为 10. 如果

参数更多则含义一致

数组的特点：

数组长度可变， new Array(3) 当添加第 4 个元素时，数组长度自动改为 4

同一个数组中的元素类型可以互不相同

访问数组元素不会产生数组越界问题，访问未赋值的数组元素时，值为 undefined

函数

函数可以包含一段可执行的代码，也可以接收调用者传入参数

基础语法 function 函数名称 ( 形参 1, 形参 2,...){ 函数体 ; }

特殊语法 arguments

调用函数的语法 var res= 函数名称 ( 实参 1 ，实参 2 ， ...) ;

运算符

通过运算符可以将变量连接成语句，语句是 JavaScript 代码中的执行单位

赋值运算符

赋值运算符就是使用 = 将一个常量值赋值给变量，并支持连续赋值 a=b=c=d=7

加强赋值运算符 += 、 -= 、 *= 、 /= 、 %= ，另外还有位运算符加强运算符 &= 、 |= 、 ^= 、 <<= 、 >>= 、

>>>= 。所谓的加强运算符就是所有的双目运算符和赋值运算符的结合

算术运算符

算术运算符用于执行基本的数学计算，例如加 + 、减 - 、乘 * 、除 / 、求余 % 、自加 ++ 和自减 -- 。

a=a+++a+++a

其它特殊计算可以使用数学库类 Math

次方计算 Math.pow(a,5) 计算 a 的 5 次方

平方根 Math.sqrt(a)

随机数 Math.random()

位运算符

与 & 、或 | 、非 ~ 、异或 ^ 、左移位 << 、右移位 >> 、无符号右移位 >>>

比较运算符

大于 > 、大于等于 >= 、小于 < 、小于等于 <= 、等于 == 、不等于 != 。这里注意针对 string 类型使用 == 进行比

较，不是 equals 方法

严格等于 === 、严格不等于 !==

var brr = [ 1 , 2 , 3 , 4 , 5 , 6 , 7 ];

brr . length = 3 ; // 自动删除 3 个元素以后的元素

for ( let k = 0 ; k < brr . length ; k ++ )

document . writeln ( brr [ k ]);

a = a + b 可以简写位 a += b

1 严格等于要求首先数据类型一致，然后比较其中内容，否则 false

逻辑运算符

与 && 、或 || 、非！，这里支持短路操作

注意：实际上逻辑运算还可以使用位运算符 & 和 | ，两者之间的区别是逻辑运算符支持短路操作，但是位

运算不支持短路操作

三目运算符

( 逻辑表达式 1) ？ ( 表达式 2):( 表达式 3) ，完全可以使用 if/else 替代

逗号运算符

逗号运算符允许将多个表达式连在一起，其中使用逗号分隔，整个表达式返回最右边表达式的值

void 运算符

void 运算符用于强制指定表达式不会返回值。

typeof 和 instanceof

typeof 运算符用户判断变量的数据类型， typeof 既可以当作运算符，也可以当作函数使用。

返回类型： undefined 、 null[Object] 、 boolean 、 number 、 string 、 object 和 function

instanceof 运算符用于判断变量是否为指定类型的实例，例如 arr instanceof Array

语句

JavaScript 脚本语言的基本构成是由控制语句、函数、对象、方法、属性等来实现编程的

JavaScript 是一种基于对象的事件驱动的设计语言，所以在编写程序的过程中要遇到各种各样的事件，所

以我们要给不同的事件设定一定的规则来控制该流程。

JavaScript 常用的流程控制有三种结构：顺序结构、选择结构、循环结构

语句块就是使用花括号 {} 包含的多个语句，但是语句块不能作为 var 变量的作用域

var str = "13" ;

var kk = "3" ;

document . write ( str > kk ); //false

var str = "13" ;

var kk = 3 ;

document . write ( str > kk ); //true

var a , b , c , d ; // 声明变量

a = ( b = 5 , c = 7 , d = 8 ); // 这里给 3 个变量 bcd 赋值，整个表达式的执行结果实际上就是最后 / 最右边的值，

d=8 返回值 8, 则最终执行 a=8

a = void ( b = 5 , c = 7 , d = 8 ); // 由于使用了 void 运算符，所以 () 中不会右返回值，最终 a 值为 undefined

1 异常抛出语句

JavaScript 中的所有异常都是 Error 对象，抛出异常的语法 throw new Error( 异常信息提示串 ) 。在程序

中一旦抛出异常则立即终止后续代码的执行，寻找可以处理异常的对应的异常捕捉代码块 catch 。如果

没有对应的异常捕捉块，异常将传播给浏览器，程序非正常终止。

基础语法结构

编码测试

js 异常和 java 异常的区别：

js 只有一个异常类 Error ，无需在定义异常时声明抛出，所以没有 throws 语句

js 是弱类型语言，所以在 catch 语句中异常类型无需执行

js 只有一个异常类，所以也只有一个 catch 语句

获取异常的描述信息是通过异常对象的 message 属性，不是通过 getMessage() 方法实现的。

with 语句

with 是一种简化写法，使用 with 语句可以避免重复书写对象

try {

语句块；

} catch ( e ) {

可以通过 e . message 获取异常的描述信息，可以通过 e . name 获取异常的名称

} finally {

最终执行的代码块 ;

}

function createErr (){

try {

var obj = new Object ();

obj . test ();

alert ( " 是否会被执行到 " );

} catch ( e ){

alert ( e . name );

} finally {

alert ( " 总是被执行的代码 " );

}

alert ( "createErr 函数结束 " );

//throw new Error(" 故意抛出的异常 ");

}

</script>

</div>

with ( document ){

writeln ( "Hello world ！ " ) ； // 不用再写作 document.writeln

}

流程控制

流程控制：就是程序代码执行顺序

流程控制：通过规定的语句让程序代码有条件的按照一定的方式执行

按照结构编程的原理，任何程序都是由顺序结构、选择结构和循环结构三种结构组成

基本分支语句： if 或者 if/else 、 switch

循环语句： while 、 do/while 、 for 、 for/in 循环、 break 和 continue 【注意可以使用语句标号】

分支选择

写法 1 ： if( 条件判断 ){ 语句块 ;}

写法 2 ： if( 条件判断 ){ 语句块 1;} else { 语句块 2 ； }

写法 3 ：

开关分支结构

工作原理：首先设置表达式（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比

较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个

case 运行

while 循环

语法结构 while( 条件判断 ){ 循环体 ; } ，反复执行循环体，直到条件不成立为止

阶乘值

if ( 条件判断 1 ){

语句块 1 ;

} else if ( 条件判断 2 ){

语句块 2 ；

} else if ( ... ){

......

} else {

语句块 n ;

}

switch ( 表达式 ){

case 常量值 1 :

代码块 1 ；

break ;

case 常量值 2 ：

代码块 2 ：

break ；

... ...

default :

语句 n ;

}

</form>

<div id = "div1" > 用于显示执行结果 </div>

do/while 循环

从 1 到输入正整数值的累加和

for 循环

九九乘法口诀表

function ff (){

var kk = document . fm1 . num1 . value ; 通过 DOM 树获取 name = num1 的输入框中用户输入

的数据

kk = parseInt ( kk ); 将获取到的数据转换为整型

var bb = kk ; 缓存 kk 值

var res = 1 ; 累乘器用于执行阶乘操作

while ( kk > 0 ){ 通过循环计算累乘值

res *= kk -- ;

}

res = bb + "!=" + res ; 生成输出的内容串

document . fm1 . reset (); 重置 form 表单，将显示内容回复为原始数据

document . getElementById ( "div1" ). innerHTML = res ; 查找显示的 div1 元素，并

再这里显示执行结果

}

</script>

do {

循环体 ;

} while ( expression );

< form >

< input type = "text" onchange = "ff(this)" value = "1" > 定义值变事件的回调函数，

调用回调函数时会将当前元素对象充当参数传递给函数，则可以省略获取输入元素的过程

< /form>

< div id = "div1" > 1 = 1 < /div>

< script >

function ff ( ele ){

var kk = ele . value ;

kk = parseInt ( kk );

var res = 0 ;

var k = 1 ;

var msg = "0" ;

do {

msg += ( "+" + k );

res += k ++ ;

} while ( k <= kk );

document . getElementById ( "div1" ). innerHTML = ( msg + "=" + res );

}

< /script>

for ( 初始化语句 ; 条件判断语句 ; 步长处理 ){

循环体 ;

}

for/in 循环

for in 循环本质上是一种 foreach 结构，可以遍历数组中的所有元素或者遍历 js 对象的所有属性

break 和 continue

continue 用于终止本次循环，接着开始下一次循环

break 用于完全终止循环，开始执行循环后续的代码

简单应用

终止标签

< script >

document . writeln ( "<table width='60%'>" );

document . writeln ( "<caption> 九九乘法口诀表 </caption>" );

for ( var k = 1 ; k <= 9 ; k ++ ) {

document . writeln ( "<tr>" );

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

document . write ( "<td>" + i + "*" + k + "=" + ( i * k ) + "</td>" );

}

for ( var i = 1 ; i <= 9 - k ; i ++ )

document . write ( "<td> </td>" );

document . writeln ( "</tr>" );

}

document . writeln ( "</table>" );

< /script>

< script >

for ( prop in navigator ) {

document . write ( ' 属性： ' + prop + ' 的值为 :' + navigator [ prop ] +

'<br/>' );

}

document . writeln ( "<hr/>" );

var arr = [ 1 , 2 , 3 , 4 , 5 , 6 ];

for ( k in arr ) { // 获取的是索引序号，不是每个具体的元素值

document . write ( ' 序号为 :' + k + " 的值为 " + arr [ k ] + "<br/>" );

}

< /script>

for ( i = 0 ; i < 10 ; i ++ ){

if ( i % 2 == 0 ) break ;

document . write ( i , " 再也不敢了 !" , "<br>" );

}

</script>