8.26 一周学习总结

Posted 2020-10-04

switch-case结构

1、结构写法：

var num=5;//一个操作数是一个最简单的表达式

switch (num+3){

case 1:

document.write("第一个case");

break;

case 2:

document.write("第二个case");

break;

case 3:

document.write("第三个case");

break;

default:

document.write("case都不成立，执行default");

break;

}

2、注意事项：

①switch结构()中的表达式，可以使用各种js支持的数据类型

②switch结构在进行判断的时候，使用全等判断(var num=1,case "1",就不可以，因为数据类型不一样)

③switch结构中case()中的表达式可以是各种数据类型，但是值必须各不相同，即使相同，也只会执行第一个式子

④break作用：执行完case代码后，跳出当前switch结构

缺少 break 后果：从第一个正确的 case 项之后开始，执行后面所有的 case 和 default，原因：⑤ ↓

⑤switch结构默认所有 case 项各不相同，所以在进行判断的时候，只会判断一次正确答案，当遇到正确的 case 之后，

就不会判断后续的项目

⑥switch结构的执行效率比多重 if 快。在多路分支结构中，推荐优先使用 switch。

 

一、while 循环

1、循环结构的执行步骤：

①声明循环变量

②判断循环条件

③执行循环体操作

④更新循环变量

然后循环执行②~④，直至条件不成立时，跳出循环

 

while循环()中的表达式，运算结果可以是各种类型，但最终都会转换为真假，转换 规则同 if 结构

 

二、do while 循环

while循环特点： 先判断，再执行

do while循环特点：先执行，再判断；即使初始条件不成立，也至少执行一次

 

三、for 循环

 

1、for 循环有三个表达式：① 声明循环变量 ②判断循环条件 ③更新循环变量

三个表达式之间，用 ; 分隔

for 循环三个表达式都可以省略，但是两个 ; 缺一不可

2、for 循环 执行特点：先判断，再执行，与while相同

3、for 循环 三个表达式都可以由多个表达式组成；第二部分多个判断条件用 && || 连接 ，第一三部分用逗号分隔

 

四、循环控制语句

1、 break:跳出本层循环，继续执行循环后面的语句，如果循环有多层嵌套，则 break 只能跳出一层

2、continue:跳过本次循环中剩余代码，继续下一次循环

①对于 for 循环，continue 之后执行的语句，是循环变量更新语句

②对于 while、do while 循环，continue 之后执行的语句，是循环条件判断

因此，使用这两个循环时，必须将 continue 放到 i++(变量更新语句) 之后使用，否则将导致死循环

3、return:JS 中，return 只能出现在函数中，作用:结束掉整个函数

 

函数的声明及调用

1、函数的声明格式:

function 函数名(参数1,参数2,...){

//函数体代码

return 返回值;

}

函数的调用

①直接调用: 函数名(参数1的值,参数2的值...);

②事件调用方式: html标签中，使用 事件名="函数名()"

<button onmouseout="saySth(‘789‘,‘yellow‘)">点击按钮,打印内容</button>

2、 函数的注意事项:

①函数名必须要符合小驼峰法则!!(首字母小写,之后每个单词字母大写)

②函数名后面的()中，可以有参数，也可以没有参数，分别称为有参函数和无参函数

③声明函数时的参数列表，称为形参列表，形式参数(变量的名字)

function saySth(sth,color){}

调用函数时的参数列表，称为实参列表，实际参数(变量的赋值)

saySth("123","blue");

④函数的形参列表个数，与实参列表个数，没有实际关联关系

函数列表的个数，取决于实参列表

如果实参列表的个数小于形参列表，则未赋值的形参，将为undefined

⑤函数可以有返回值，使用 return 返回结果

调用函数时，可以使用一个变量接受函数的返回结果，如果函数没有返回值，则接收的结果为 undefined

⑥函数中声明变量的作用域:

在函数中，使用 var 声明的变量，为局部变量，只能在函数内部访问

不用 var 声明的变量，为局部变量， 在函数外部也可访问

函数的形参列表，默认为函数的局部变量，只能在函数内部使用

⑦函数的声明语句与调用语句没有先后之分，即可以在声明函数前调用函数

func();//声明 func() 之前调用也是可以的

function func();

//单行注释

多行注释 Ctrl+Shift+/

/**

* 文档注释: 开头两个*，写在函数上访，在调用函数时，可以看到文档中的描述信息

*/

/**

str: 您想要打印的内容

color:您想要打印的内容的颜色

*/

function saySth(str,color){

document.write("<div style=‘color: "+color+";‘>"+str+"</div>");

}

saySth("123","blue");

saySth("456","red");

 

JS 中只有函数作用域，没有块级作用域(大括号包起来的作用域叫函数作用域),函数声明的局部变量只在函数中可以用，for 循环中声明的变量可以在循环外部使用，因为 for 循环不是函数

 

一、匿名函数的声明使用

1、声明一个匿名函数，直接赋值给某一个事件

window.onload=function(){};

2、使用匿名函数表达式，将匿名函数，赋值给一个变量

声明: var func=function(){}

调用: func();

注意: 使用匿名函数表达式时，函数的调用语句，必须在声明语句之后!!!(与普通函数的区别!!!)

3、自执行函数，也是一个匿名函数

①!function(){}();//可以使用多种运算符开头，但一般使用 !

!function(形参列表){}(实参列表);

②(function(){}());//使用 () 将函数及函数后的 () 包裹

③(function(){})();//使用 () 包裹函数部分

三种写法特点:

①使用 ! 开头,结构清晰,不容易混乱,推荐使用

②能够表明匿名函数与调用的 () 为一个整体，官方推荐使用

③ 无法表明函数与之后 () 的整体性,不推荐使用, 在它之前的匿名函数后要加 ;

二、JS 代码的执行顺序问题

JS 代码在运行时,会分为两大部分,检查装载和执行阶段

①检查装载阶段: 会先检查代码的语法错误，进行变量、函数的声明

②执行阶段 : 变量的赋值、函数的调用等,都属于执行阶段

以下列代码为例:

console.log(num);//undefined

var num=10;

func1();//函数可以正常执行

function func1(){}

func2();//函数不能执行，打印func2时显示undefined

var func2=function(){}

原因: 上述代码的执行顺序为:

检查装载阶段:

var num;

function func1(){}

var func2;

代码执行阶段:

console.log(num);

func1();

func2();

function(){}

三、函数的内部属性

1、arguments 数组对象

①作用: 用于储存调用函数时的所有实参,实际上参数列表已经保存到 arguments 数组中,可以在函数中,使用 arguments[n] 的形式调用 , n 从0开始

②arguments数组中的元素个数,取决于实参列表,与形参无关

但是,一旦第 n 个位置的形参、实参、arguments都存在时,形参将 与 arguments 绑定,同步 变化 (即使在函数中修改形参的值,arguments 也会改变; 反之,亦成立 )

 

③arguments.callee() 是 arguments 的重要属性,表示 arguments 所在函数的引用地址

在函数里面,可以使用 arguments.callee()调用函数本身

在函数内部,调用函数自身的写法,叫做递归

递归分为两部分: 递和归,以递归调用语句为界限,可以将函数分为上下两部分

递: 当函数执行上半部分,遇到自身的调用语句时,继续进入内层函数,再执行上半部分;直至执行完最内层函数

归: 当最内层函数执行完后,再从最内层函数开始,逐渐执行函数的下半部分

当最外层函数执行时,遇到自身的调用语句,会进入内层函数执行,而外层函数的后半部分暂不执行,直至最内层函数执行完后, 再逐步向外执行

 

DOM树节点:

3大类:元素节点、属性节点、文本节点

文本节点、属性节点属于元素节点的子节点。操作时，均需先取到元素节点，

查看元素节点:

1、getElementById:通过 id 取到唯一节点;如果 id 重名,只能取到第一个

getElementByName()

getElementByTagName()

getElementByClassName()

>>> 获取元素节点时,一定要注意:获取节点的语句,必须在 DOM 渲染完成之后执行。2种方式实现:

①将 JS 代码写在 body 之后

②将代码写到window.onload 函数之中

>>>后面三个，取到的是数组格式,不能直接添加各种属性,而应该取出数组的每一个单独操作

例如: getElementByName()

查看/设置属性节点:

1、查看属性节点:getAttribute("属性名");

2、设置属性节点:setAttribute("属性名","新属性值");

>>>查看和设置属性节点,必须先取到元素节点,才能使用