使用JavaScript-入门-(初阶二)

目录

三、运算符

1.算术运算符

1.1基础运算符

1.2 一元运算符  ++ 和 --

2.关系运算符

3.赋值运算符

4.比较运算符

5.逻辑运算符

6.运算符优先级

四、语句

1.表达式和语句

2.分支语句if...else

2.1单分支

2.2双分支

2.3判断闰年案例

2.4多分支

2.5成绩判断案例

3.三元运算符

3.1数字补0案例

4.switch语句

5.循环语句

5.1while()循环

5.2for()循环

5.3退出循环

5.4循环嵌套

5.5实战案例

五、数组

1.声明数组

2.修改

3.增加

3.1末尾新增元素

3.2开头新增元素

4.删除

4.1删除数组最后一个元素 .pop()

4.1删除数组第一个元素 .shift()

4.1根据索引开始删除 .splice()

---

三、运算符 1.算术运算符

算术运算符用于表达式计算。

1.1基础运算符

运算符	描述	实例写法
+	加法	a + b 例如  1 + 1= 2
-	减法	a -  b 例如 1 - 1 = 2
*	乘法	a * b  例如 1 * 1 = 1
/	除以	a / b 例如  2 / 1 = 2
%	求余	a % b 例如  3 % 2 == 1

1.2 一元运算符  ++ 和 --

运算符	描述	写法一	写法二
++	自增1	++num 先自加后输出	num++  先输出后自加
--	自减1	--num 先自减后输出	num--  先输出后自减

前置自增与后置自增   前置自减与后置自减   单独使用没有任何区别

前置自增（自减）和后置自增（自减）的区别 参与运算的区别

++num 先自加后输出  num++先输出后自加  --num先自减后输出  num--先输出后自减

2.关系运算符

关系运算符在逻辑语句中使用，以测定变量或值是否相等。

运算符	<	>	<=	>=
描述	小于	大于	小于或等于	大于或等于

比较运算的结果为布尔类型 只会返回 true 或 false

3.赋值运算符

赋值运算符用于给 JavaScript 变量赋值。

运算符	描述
=	将等号右边的值赋予左边，要求左边必须是个容器

4.比较运算符

比较运算符用来比较两个值是否相等，如果相等会返回true，否则返回false。

运算符	描述
==	判断 值 是否 相等
===	判断 值 和 类型 是否 全相等
!=	值 不相等
!==	值 和 类型 不全相等

当使用==来比较两个值时，如果值的类型不同，则会自动进行类型转换，将其转换为相同的类型，然后在比较

 NaN不等于任何人 包括自己

字符串比较，是比较的字符对应的ASCII 码 

5.逻辑运算符

逻辑运算符用于测定变量或值之间的逻辑。

运算符	描述
&&	逻辑与 并且
||	逻辑或 或者
!	逻辑非 取反

6.运算符优先级

运算符优先级由上到下依次减小，左向右依次执行。

1	小括号	()
2	一元运算符	++   --   !
3	算数运算符	*   /   %   +  -
4	关系运算符	>   >=   <   <=
5	比较运算符	==   ！=   ===   ！==
6	逻辑运算符	&&   ||
7	赋值运算符	=
8	逗号运算符	,

四、语句 1.表达式和语句

表达式是可以被求值的代码，JavaScript 引擎会将其计算出一个结果。(简单理解表达式就是一个式子)

语句是一段可以执行的代码。(比如： prompt() 可以d出一个输入框)

2.分支语句if...else

if语句有三种使用：单分支、双分支、多分支

2.1单分支

语法:
if(条件){
    满足条件执行的代码
} 

括号内的条件为true时，进入大括号里执行代码

小括号内的结果若不是布尔类型时，会发生隐式转换转为布尔类型

如果大括号只有一个语句，大括号可以省略，但是，个人不提倡这么做~

2.2双分支

2.3判断闰年案例

需求：让用户输入年份，判断这一年是闰年还是平年并d出对应的警示框

分析：

①：能被4整除但不能被100整除，或者被400整除的年份是闰年，否则都是平年

②：需要逻辑运算符

2.4多分支

先判断条件1，若满足条件1就执行代码1，其他不执行

若不满足则向下判断条件2，满足条件2执行代码2，其他不执行

若依然不满足继续往下判断，依次类推

若以上条件都不满足，执行else里的代码n

语法:
    if(条件1){
        代码1
    }else if (条件2){
		代码2
    }else if (条件3){
		代码3
    }else{
		代码n
    }

2.5成绩判断案例

需求：根据输入不同的成绩，反馈不同的评价

注：

①：成绩90以上是 优秀

②：成绩70~90是 良好

③：成绩是60~70之间是 及格

④：成绩60分以下是 不及格

3.三元运算符

其实是比 if 双分支更简单的写法，可以使用 三元表达式

语法:

条件 ? 满足条件执行代码1 : 不满足条件执行代码2

    // 三元运算符
    // 条件 ? 代码1 : 代码2
 	 console.log(3 > 5 ? 3 : 5)
        if (3 < 5) {
           alert('真的')
         } else {
          alert('假的')
        }
	// 三元写法
     3 < 5 ? alert('真的')  : alert('假的')
	// 
	let sum = 3 < 5 ? 3 : 5
    console.log(sum)// 3

3.1数字补0案例

需求：用户输入1个数，如果数字小于10，则前面进行补0， 比如 09 03 等

4.switch语句

找到跟小括号里数据全等的case值，并执行里面对应的代码

若没有全等 === 的则执行default里的代码

注意事项:

switch case语句一般用于等值判断,不适合于区间判断

switch case一般需要配合break关键字使用 没有break会造成case穿透

switch (表达式) {
      case 值1:
        代码1
        break  
      case 值2:
        代码2
        break  
      case 值3:
        代码3
        break  
      default:
        代码n
        break
    }

4.1月份季节案例

需求：输入1-12，页面打印出相应的月份

春季 3 4 5  夏季 6 7 8  秋季 9 10 11  冬季 12 1 2

5.if 多分支语句和 switch的区别： 5.1共同点

都能实现多分支选择， 通常使用if

大部分情况下可以互换

5.2区别

switch…case语句通常处理case为比较确定值的情况，而if…else…语句更加灵活，通常用于范围判断(大于，等于某个范围)。

switch 语句进行判断后直接执行到程序的语句，效率更高，而if…else语句有几种判断条件，就得判断多少次

switch 一定要注意 必须是 === 全等，一定注意 数据类型，同时注意break否则会有穿透效果

5.3结论

当分支比较少时，if…else语句执行效率高。

当分支比较多时，switch语句执行效率高，而且结构更清晰。

6.循环语句

循环作用:重复执行一些 *** 作,如while循环 for循环.

循环三要素:

1.变量起始值

2.终止条件(没有终止条件，循环会一直执行，造成死循环)

3.变量变化量（用自增或者自减)

6.1while()循环

    while (循环条件){
      要重复执行的代码(循环体)
    } 

跟if语句很像，都要满足小括号里的条件为true才会进入 循环体 执行代码

while大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后再回到小括号判断条件，直到括号内条件不满足，即跳出

6.2页面输出1~100 累加和

6.3for()循环

      执行规则

      (1)执行语句1(变量初始化，只会执行一次)

      (2)判断语句2是否成立(条件判断)

          (2.1)成立 执行循环体代码

              循环体执行结束后，执行语句3(变量更新)

          (2.2)不成立 循环结束 执行大括号后面的代码

      (3)重复步骤(2)  

    for循环基本语法

    for (变量初始化; 条件判断; 变量更新) {

      循环体

    }

变化量和死循环， for 循环和  while  一样，如果不合理设置增量和终止条件，便会产生死循环。

当如果明确了循环的次数的时候推荐使用 for 循环,当不明确循环的次数的时候推荐使用 while 循环

6.4循环嵌套

    for(外部声明记录循环次数的变量;循环条件；变量值){
      for(内部声明记录循环次数的变量；循环条件；变化值){
        循环体
      }
    } 

6.5实战案例

九九乘法表

打印多行多排五角星

7.退出循环

break 退出整个循环，一般用于结果已经得到, 后续的循环不需要的时候可以使用 若有多个循环嵌套，退出所在层的循环

continue 退出本次循环，一般用于排除或者跳过某一个选项的时候, 可以使用continue

7.1吃包子案例

使用break

使用continue

 

 

五、数组

数组：(Array)是一种可以按顺序保存数据的数据类型

使用场景：如果有多个数据可以用数组保存起来，然后放到一个变量中，管理非常方便

1.数组的基本使用 1.1定义数组和数组单元

 通过  [  ] 定义数组，数据中可以存放真正的数据，如小明、小刚、小红等这些都是数组中的数据，我们这些数据称为数组单元，数组单元之间使用英文逗号分隔。

1.2访问数组和数组索引

使用数组存放数据并不是最终目的，关键是能够随时的访问到数组中的数据（单元）。其实 JavaScript 为数组中的每一个数据单元都编了号，通过数据单元在数组中的编号便可以轻松访问到数组中的数据单元了。

我们将数据单元在数组中的编号称为索引值，也有人称其为下标。

索引值实际是按着数据单元在数组中的位置依次排列的，注意是从0 开始的，如下图所示：

 观察上图可以数据单元【小明】对应的索引值为【0】，数据单元【小红】对应的索引值为【2】

1.3数据单元值类型

数组做为数据的集合，它的单元值可以是任意数据类型

1.4数组长度属性

数组在 JavaScript 中并不是新的数据类型，它属于对象类型。

2. *** 控数组

数组做为对象数据类型，不但有 length 属性可以使用，还提供了许多方法：

push 动态向数组的尾部添加一个单元

unshift 动态向数组头部添加一个单元

pop 删除最后一个单元

shift 删除第一个单元

splice 动态删除任意单元

使用以上4个方法时，都是直接在原数组上进行 *** 作，即成功调任何一个方法，原数组都跟着发生相应的改变。并且在添加或删除单元时 length 并不会发生错乱。