第六天 JavaScript

3.递增和递减运算符

3.1 递增递减运算符概述

变量增加或减去一，可以使用递增（++）和递减（--）运算符来完成。

放变量前面时，我们可以称之为前置递增（递减）运算符，放变量后面时，称为后置递增（递减）运算符。

注意：递增和递减运算符必须和变量配合使用。

3.2 递增运算符

1.前置递增运算符

++num，口诀：先自加，后返回值。

2.后置递增运算符

num++，使用口诀：先返回值，后自加。

3.3 小结：

单独使用时运算结果相同；

与其他代码连用时，结果会不同；

后置：先原值运算，后自加（先人后己）；

前置：先自加，后运算（先己后人）。

4.比较运算符

4.1 比较运算符概述

是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值，作为比较运算的结果。

 4.2 =小结

 

console.log(18=='18');
console.log(18==='18');

 5. 逻辑运算符

5.1 逻辑运算符概述

用来进行布尔值运算的运算符，其返回值也是布尔值。

5.2 逻辑运算符

&&：两边都是true才返回true，否则返回false

 ||：两边都为false才返回false，否则都为true

 ！：逻辑非（!）也叫做取反符，用来取一个布尔值相反的值，如，true的相反值false。

var isOK = !true;
console.log(isOK);    //false

 5.3 短路运算

原理：当有多个表达式时，左边的表达式可以确定结果时，就不再继续运算右边的表达式的值。

1.逻辑与

语法：表达式1&&表达式2

如果第一个表达式的值为真，则返回表达式2

如果第一个表达式的值为假，则返回表达式1

2.逻辑或

如果第一个表达式的值为真，则返回表达式1

如果第一个表达式的值为假，则返回表达式2

console.log(123 || 456);  //123
console.log(0 || 456);    //456
console.log(123 || 456 || 789);  //123

5.4 逻辑中断

var num = 0;
console.log(123 || num++);  //123
console.log(num);    //0

6. 赋值运算符

概念：用来把数据赋值给变量的运算符。

 

var age = 10;
age += 5;  //相当于 age = age + 5;
age -= 5;  //相当于 age = age - 5;
age *= 10;  //相当于 age = age * 10;

7. 运算符优先级

 一元运算符里面的逻辑非优先级很高；

逻辑比逻辑或优先级高。

JavaScript 流程控制-分支

1.流程控制

流程控制就是来控制我们的代码按照什么结构顺序来执行。

流程控制主要有三种结构，分别是顺序结构、分支结构和循环结构，这三种代表三种代码执行的顺序。

2.顺序流程控制

其为程序中最简单、最基本的流程控制，它没有特定的语法结构，程序会按照代码的先后顺序、依次执行，程序中大多数代码都是这样执行的。

 

 3.分支流程控制if语句

3.1 分支结构

由上到下执行代码的过程中，根据不同的条件，执行不同的路径代码（执行代码多选一的过程），从而得到不同的结果。

 3.2 if语句

1.语法结构

//条件成立执行代码，否则什么也不做
if(条件表达式){
   //条件成立执行的代码语句
}

2.执行流程

 3.3 if else语句

1.语法结构

//条件成立执行代码，否则执行else里面的代码
if(条件表达式){
   //（如果）条件成立执行的代码语句
}else{
   //(否则)执行的代码
}

2.执行流程

3.4 if else if语句

1.语法结构

//适合于检查多重条件。
if(条件表达式1){
   语句1;
}else if(表达式2){
   语句2;
}else if(表达式3){
   语句3;
   ...
}else{
   //上述条件都不成立执行此代码
}

2.执行流程

 4.三元表达式

三元表达式也能做一些简单地条件选择，有三元运算符组成的式子称为三元表达式

三元表达式 ：      表达式?  表达式1 : 表达式2

5.分支流程控制switch语句

5.1 语法结构

 switch语句也是多分支语句，用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时，就可以使用switch。

switch(表达式){
   case value1:
        执行语句;
        break;
   case value2:
        执行语句;
        break;
   default:
      执行最后的语句（不等于任何一个value时要执行的代码）;
}

5.2 switch语句和if else if语句的区别

（1）一般情况下，它们两个语句可以互相替换

（2）switch...case语句通常处理case为比较确定值的情况，而if...else语句更加灵活，常用于范围判断

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

（4）当分支比较少时，if...else语句的执行效率比switch语句高。

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

JavaScript流程控制-循环

1.循环

循环目的

在实际问题中，有许多具有规律性的重复操作，因此在程序中要完成这类操作就需要重复执行某些语句。

2. for循环

在程序中，一组被重复执行的语句被称为循环体，能否继续重复执行，取决于循环的终止条件。由循环体及循环的终止条件组成的语句，被称之为循环语句。

2.1语法结构

for循环主要用于把某些代码循环若干次，通常跟计数有关系。其语法结构如下：

for(初始化变量;条件表达式；操作表达式){
   //循环体
}

2.2 for循环重复相同的代码

2.3 for循环重复不同的代码

2.4 for循环重复某些相同操作

3.双重for循环

n行n列星星

 打印倒三角形

 for循环小结

for循环可以重复执行某些相同代码

for循环可以重复执行些许不同的代码，因为有计数器

for循环可重复执行某些操作

双重for循环，外层循环一次，内层for循环全部执行

for循环是循环条件和数字直接相关的循环

4.while循环

while语句可以在条件表达式为真的前提下，循环执行指定的一段代码，直到表达式不为真时结束循环。

while语句语法结构：

while(条件表达式){
   //循环体代码
}

当条件表达式结果为true则执行循环体，否则退出循环

里面应该有计数器来初始化变量

里面也应该有操作表达式，完成计数器的更新，防止死循环

 5.do while循环

该循环会先执行一次代码块，然后对条件表达式进行判断，如果条件为真，就会重复执行循环体，否则退出循环。

do...while语句的语法结构如下：

do{
   //循环体代码-条件表达式为true时重复执行循环体代码
}while(条件表达式)

循环小结

JS中循环有for、while、do while

三个循环很多情况下都可以相互替代使用

如果是用来计次数，跟数字相关的，三者使用基本相同，但我们更喜欢用for

while和do...while可以做更复杂的判断条件，比for循环灵活一些

while和do...while执行顺序不一样，while先判断后执行，do...while先执行一次，再判断执行

while和do...while执行次数不一样，do...while至少会执行一次，再while可能一次也不执行

6. continue break

6.1 continue关键字

用于立即跳出本次循环，继续下一次循环。

6.2 break关键字

break关键字用于立即跳出整个循环（循环结束）。

JavaScript命名规范以及语法格式

1.标识符命名规范

变量、函数的命令必须要有意义

变量的名称一般用名词

函数的名称一般用动词

2.操作符规范 

3.单行注释规范 

 4.其他规范

 JavaScript 数组

1.数组的概念

数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。

//普通变量一次只能存储一个值
var num=10;
//数组一次可以存储多个值
var arr=[1,2,3,4,5];

2. 创建数组

2.1 数组的创建方式

JS中创建数组的方式有：

利用new创建数组

利用数组字面量创建数组

2.2 利用new创建数组

var 数组名=new Array();
var arr=new Array();   //创建一个新的空数值

2.3 利用数组字面量创建数组

//1.使用数组字面量方式创建空的数组
var 数组名=[];
//2.使用数组字面量方式创建带初始值的数组
var 数组名=['小白','小黑','大黄','瑞奇'];  

2.4 数组元素的类型

数组中可以存放任意类型的数据，例如字符串，数字，布尔值等。

var arrStus = ['小白',12,true,28.9];

3.获取数组元素

3.1 数组的索引

索引：用来访问数组元素的序号

 数组可以通过索引来访问、设置、修改对应的数组元素，我们可以通过“数组名【索引】”的形式来获取数组中的元素。

这里的访问就是获取得到的意思

//定义数组
var arrStus = [1,2,3];
//获取数组中的第2个元素
alert(arrStus[1]);

4.遍历数组

数组中的每一项可以通过“数组名[索引号]”的方式

var arr = ['red','green','blue'];
console.log(arr[0])  //red
console.log(arr[1])  //green
console.log(arr[2])  //blue

4.1 数组的长度

使用"数组名.length"可以访问数组元素的数量（数组长度）

for里面的i是计数器，当索引号使用，arr[i]是数组元素第i个数组元素

索引号从0开始，数组长度是元素个数

5.数组中新增元素

可以通过修改length长度以及索引号增加数组元素

5.1 通过修改length长度新增数组元素

可以通过length长度来实现数组扩容目的

length属性是可读写的

 其中索引号4,5,6的空间没有给值，就是声明变量未给，默认值就是undefined。

5.2通过修改数组索引新增数组元素

可以通过修改数组索引的方式追加数组元素

不能直接给数组名赋值，否则会覆盖掉以前数据

 这种方式也是我们最常用的一种方式。