0
点赞
收藏
分享

微信扫一扫

js笔记(一)

冬冬_79d4 2022-03-14 阅读 75

一、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次“你好吗”。

forvar 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=1while(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);
}

输出结果为1122.

在这里插入图片描述

经典案例
在这里插入图片描述
上面的backday函数的if里面调用了下面的函数,下面的函数返回值有真假,if里条件表达式如果为真则执行,为假则执行else后面的执行语句。

函数的两种声明方式

①利用函数关键字自定义函数;

function fn(){
}
fn()

②函数表达式声明函数;

var 变量名=function(){}
变量名()

这个函数没有名字,声明的只是变量名,变量名里面存了函数,也称为匿名表达式

举报

相关推荐

0 条评论