一、JS前期知识
1.1JS三种书写位置
①行内式(特殊情况下使用)
②内嵌式(最常用)
③外部式(引入外部js文件,在代码量较大时使用)
1.2js注释
注释方式
- 单行注释(ctrl + /)
- 多行注释(shitf + alt +a)
1.3js输入输出语句
二、变量
变量是储存数据的空间
2.1变量的初始化
①声明变量
‘var age’声明了一个叫age的变量。
②给变量赋值
‘age*18’
③输出结果(输出age)
‘consule.log(age)’
案例
2.2变量的语法
①一个变量被重新赋值后它所原有的值会被覆盖
‘’’
var age=18;
age=81;
consule.log(age)
‘’’
输出值为81
②同时声明多个变量,用逗号把各个变量隔开
上下两种写法等价。
③变量输出特殊情况
2.3js命名规范
案例:定义两个变量分别青苹果和红苹果怎么把它们第一个变量放红苹果第二个青苹果?
这时候需要定义一个临时变量(空的),相当于我们左手青苹果右手红苹果,怎么把它们调换位置,需要一个桌子先把左手苹果放进桌子再把右手苹果给左手,再用右手拿桌上苹果
三、数据类型
3.1变量的数据类型
①js的数据变量类型是只有程序运行过程中根据等号后面的值来确定的,不用像其他语言提前声明变量类型。
②js为动态语言,数据类型可以变化。如下图
3.2数据类型的分类
①简单数据类型
(一)数字型
注:1、八进制前面加0,例如010等于十进制的8;
2、数字前面加0x即为16进制,16进制只有0-9,10以上用a-f表示,例如0xa等于10.,编码输入一个数电脑默认转化为10进制。
3、isNAN( )用来判断是不是数字,是的话返回false,不是的话返回true,例如
‘console.log(isNAN(12))‘输出为false。
(二)字符串型
1、任意文本,要加单引号或者双引号;
2、引号嵌套,外单内双或者内双外单,不然会报错;转义符要包含在引号里面。
3、字符串的换行规则参考上图;
4、字符串长度,length属性可以检测获取字符串长度
5、字符串拼接:+
口诀:字符串相连,数值相加
例如:’console.log(‘pink老师’+18),输出为pink老师18。
变量不要写道字符串里面,单独写到引号外面。如下图:
(三)布尔型
①只有true和false两种结果,分别表示1和0;
true和false可以参加加法运算
undefined和NULL的区别
3.3获取数据类型
typeof属性可以检测
3.4数据类型转化
3.4.1转化为字符型
①转换为字符串(数字转化为字符型)
②利用+拼接字符串(重点)
给num加一个引号在后面。
3.4.2转化为数字型(重点)
①parseInt(变量)只能取整数
②parseFloat(变量)与parseint基本一致,但是可以取小数
3.4.3转换为布尔型
①代表空的否定的值会变成false,其余都转换为true。
四、运算符
4.1算术运算符
4.1.1前置递增运算符`
①两个方框内的写法等价,右边更便捷。
②如果需要反复给变量添加或者减去1,可以使用递增(++)或者递减(–)来完成。
③++num前置递增自加1,使用口诀:先加1后返回值;
例如
var num=10;
console.log(++num+10)
(先加一变为11加上10,再返回)
输出结果为21.
④注:
`var a=10;
++a;//11
var b=++a +2;//12+2
console.log(b);//b输出结果为14.`加了两次a
4.1.2后置递增运算符
①口诀:先返回值后加一。例如:
var age=10;
console.log(age++ +10);//结果为20.
输出10之后再加一变为11.
重点例题
上图下面的例题e++为原值e即10,运算完e++后自加一此时e等于11,然后加上后面的++e(即12),所以和为22.
4.2比较运算符
注意:程序里面的等于符号是==
①等于符号可以转型
console.log(18=='18' )
true
②全等号===要求两侧值与数据类型完全一致
例如console.log(18==='18' )
false。
4.3逻辑运算符
①例如:console.log(3>5 && 3>2);
true.
4.3.1短路运算(逻辑中断)
当有多个表达式(值)时,左边表达式的值可以确定结果时,就不再继续运算右边的表达式的值。
①与逻辑短路运算:表达式1为真,返回2表达式,表达式1为假时返回1表达式。(0为假,其余数字都为真)
②或逻辑短路运算:表达式1为真时返回表达式1,表达式1为假时返回表达式2,如下图:
**注:下题结果为0,因为后面num++因为逻辑短路所以没有运行。
var num=0;
console.log(123||num++);
console.log(num)`
4.4赋值运算符
例如number+=2等价于number=number+2
4.5运算符优先级
五、流程控制
5.2分支语句
- if语句结构:如果if里面的条件表达式结果为真时,则执行大括号里面的语句,条件表达式为假时不执行大括号,执行大括号后面的代码。
if(条件表达式){
执行语句
}
- 双分支语句ifelse
if(条件表达句){
执行语句
}else{
执行语句
}
如果if里面的条件表达式结果为真时,则执行if后面的执行语句,条件表达式为假时不执行if后面执行语句,执行else后面的语句。
- if else if多分支语句
如果满足其中一个条件表达式,执行之后退出整个if分支
5.3三元表达式
由三元运算符组成的式子:条件表达式?表达式1:表达式2
如果条件表达式结果为真,返回表达式1的值,如果为假则返回表达式2的值
var number=10;
var rusult=nunber>5?'是的':'不是的';
等价于简化版ifelse
if (number=5){result='是的'}
else{result='不是的'}
5.4多分支语句switch语句
如果表达式与哪个value相匹配就执行哪个执行语句,break是退出case循环。如果没有一个value匹配的就执行最后的default。
注:表达式中的num与下面各个value之间的匹配的时候一定要是全等关系。
如果当前case没有break则不会退出switch语句会继续执行下一个case。
5.5ifelseif与switch语句区别
六、循环结构语句
6.1 for循环(重点)
for(初始变量;条件表达式;操作表达式){
循环体}
执行顺序:初始变量—条件表达式—循环体—操作表达式
初始变量就是用var声明的普通变量,用来计数(只执行一次);
条件表达式用来决定每一次循环是否继续执行;
操作表达式更新初始变量(递增或者递减)。
例如:打印100次“你好吗”。
for(var i=1;i<=100;i++){
console.log('你好吗‘);
}
6.1.1断点调试
6.1.2for循环输入不同的代码
例如
还可以在for循环中嵌套分支语句
6.1.3双重for循环
双重for循环格式
外头循环1次,里头循环3次
6.2 while循环
while(条件表达式){
//循环体}
条件表达式结果为真执行循环体,否则退出循环。
例如用while循环输出100句你好吗:
var num=1;
while(num<=100){
console.log('你好吗')
num++}
while循环可以用在一些复杂的循环上,例如不爱我就一直弹出窗口
6.3 do while循环
执行思路:先执行循环体再判断条件,满足条件继续循环,条件表达式为真继续循环,反之弹出循环。(至少都可以循环一次)
do{
//循环体
}while(
条件表达式
)
6.4 continue break关键字
6.4.1 continue关键字
立即跳出本次循环,开始下一次循环,本循环体最终会少一次循环。
for(var i=1;i<=5;i++){
if(i==3){
continue;
}
console.log('我正在吃第'+i+'个包子')
}
最后“我正在吃第3个包子”将不会执行。
6.4.2 break关键字
用于跳出整个循环(循环结束)。
for(var i=1;i<=5;i++){
if(i==3){
break;
}
console.log('我正在吃第'+i+'个包子')
}
最后“我正在吃第3个包子”往后的循环将不会执行,只有前两次。
七、数组
定义:可以把一组相关数据一起存放,数据可以是任意类型,数组就是一组数据的集合,其中,每个数据叫做元素,数组是将一组数据存储在一个变量名下的优雅方式。
7.1 创建数组方式
①利用new创造数组
var arr = new Array()
(创建了一个空的新数组)
②利用数组字面量创建数组(常用)
var arr = 【】
注:数组里面的数据一定要用逗号隔开
7.2 获取数组中的元素
7.2.1 数组的索引
获取索引格式:数组名【索引号】例如:
console.log(arr1【3】);
7.2遍历数组
遍历:就是把数组每个元素从头到尾都访问一遍;可输出数组中的每一个元素。
7.2.1数组长度
以下代码可输出数组长度。
console.log(arr.length)
案例1:求数组中最大值
之所以i=1开始是因为第一个元素被取进max中只需要从第二个元素开始比较即可(类似于打擂台)
案例2
与数组中元素相加同理,这是字符串相加。
7.2.2 数组新增元素
方法①:修改length长度
var
arr【‘红’,'绿','蓝'】;
console.log(arr.length);
arr length=5;
输出后数组长度变为5,增加的两个元素为空元素()
方法②:通过修改数组索引的方法增加数组
var arr=['red','green','bule'];
arr[3]='pink';
console.log(arr);
输出后会多一个元素且元素不为空(pink),追加的索引号如果数组中没有的话是增加,与数组的元素相同时会改变原数组元素。
7.2.3 筛选数组方法①
用if分支将符合条件的数据追加给新数组时,不能用newarr[i]=arr[i],因为索引号对的太死,会导致新数组除了追加的数据外还会有空元素,应该定义一个j从0开始每存一次加一次,j随索引号从0开始递增,j就成为新数组的索引号。
7.2.4 筛选数组方法②(案例同方法①)
相比于上一种方法把追加式子newarr[i]=arr[i]改成了newarr[newarr.length]=arr[i],一开始新数组长度为0,加上一个元素后变为1,刚好和索引号等值同步递增。
7.3冒泡排序(重点)
是一种算法,能够把一系列数据按一定的顺序排列显示。一次比较相邻两个元素,位置不对就调换位置,移到下一对开始比较。。。
里层循环次数与外层i的关系
八、函数
函数就是封装了一段可以被 重复调用执行的代码块。目的:让大量代码重复使用
8.1 函数的使用
1、声明函数
function 函数名(){
//函数体
}
2、调用函数
一定要加小括号,函数不调用,自己不执行
函数名()
8.2 函数的参数
8.2.1 种类
函数的参数分为形参和实参
形参:在函数声明的括号里面,当前并不知道是什么
实参:在调用函数的括号里面,调用函数时实参是传递给形参的
可以利用函数参数实现函数重复不同的代码
调用了两次函数值,分别输出后是‘酸辣土豆丝’和‘大肘子’
利用函数参数求两数的和
8.2.2 形参与实参的匹配问题
例形参与实参加法运算时
- 个数相等时:正常输出结果
- 个数实参>形参时,会取参数取到形参的个数
- 个数形参>实参时,实参有一个未接受值为undefined,输出结果为NAN。
8.3 函数返回值
8.3.1 return返回
函数只是实现某种功能,最终结果需要返回给函数的调用处,可通过return实现,函数名()==需要返回的结果。
function 函数名(){
return 需要返回的结果;
}
函数名()
利用return来执行两数相加的函数
8.3.2 return终止函数
return特性
- return后面的代码不会被执行
- return只能输出一个值,返回多个值后只取最后一个返回,除非把多个结果包含在一个数组里面,return可以返回一个数组。
- 我没点函数如果有return,则返回return后面的值,如果没有return,则返回undefined
break,continue,return的区别
判断函数是否为闰年
8.3.3通过榨汁机认识函数
经典案例:用户输入三数字弹出最大值
8.4 arguments的使用
arguments主要作用:里面存储了所有传递来的实参,展示参数形式为伪数组,伪数组特性:
当不知道用户将输入几个实参时,应该用arguments,arguments是函数内置对象,每个函数都有的,不用再声明。
案例,利用函数求任意个数的数字的最大值
arguments是函数内置对象,每个函数都有的,不用再声明。相当于直接求arguments里面实参的最大数。
8.5函数的互相调用
函数都是独立的代码块,用于完成特殊任务,所以会出现函数互相调用的情况。
function fn1(){
console.log(11);
fn(2);//在fn1中调用了fn2函数
}
fn(1);
function fn2(){
console.log(22);
}
输出结果为11;22.
经典案例
上面的backday函数的if里面调用了下面的函数,下面的函数返回值有真假,if里条件表达式如果为真则执行,为假则执行else后面的执行语句。
函数的两种声明方式
①利用函数关键字自定义函数;
function fn(){
}
fn()
②函数表达式声明函数;
var 变量名=function(){}
变量名()
这个函数没有名字,声明的只是变量名,变量名里面存了函数,也称为匿名表达式