前端学习 JavaScript笔记

HMS Howe

已于 2022-04-07 09:26:56 修改

阅读量278

点赞数

分类专栏：前端开发文章标签：前端

于 2022-03-30 10:42:28 首次发布

本文链接：https://blog.csdn.net/Winchester_Y/article/details/123840512

版权

前端开发专栏收录该内容

12 篇文章 0 订阅

订阅专栏

JS基础

JS三种书写位置

1.行内式，直接写在元素内部

<body>
<input type="button" value="我" onclick="alert('挺好的')">
</body>

2.内嵌式

<head>
  <script>
    alert('')
  </script>
</head>

3.外部式

写完后引用

<script src="my.js"></script>

引用中间不能写代码

JS的注释

单行注释 // Ctrl+/
多行注释 /* */ Shift+Alt+A

JS的输入与输出

prompt('');        输入
alert('')          浏览器弹出
console.log()      控制台输出

变量

变量的声明

//声明变量
var age;
//赋值
age = 10;
//输出结果
console.log(age);

//变量初始化
var age = 10;  //声明变量同时赋值为10

同时声明多个变量，用逗号隔开

变量命名规范

由字母、数字、下划线、$组成
大小写区分
不能数字开头
不能是关键词
遵守驼峰命名法，首字母小写，后面单词大写

简单数据类型

字符串

'我的名字是'+name+'对吧'

布尔型

true的值为1，false的值为0

undefined和null型

umdefined和数字相加结果为NaN

null和数字相加结果为原先的数字

typeof 数据类型检测

typeof 数据

数据类型转换

转换为字符串

方式	说明	案例
toString()	转换为字符串	var num=1; alert(num.toString());
String()	转换为字符串	var num=1; alert(String(num));
加号拼接字符串	和字符串拼接的结果都是字符串	var num=1; alert(num+“字符串”)

转换为数字型

方式	说明	案例
parseInt(string)函数	string转成整数型	parseInt(“78”)
parseFloat(string)函数	string转成浮点型	parseFloat(“78.21”)
Number()	强制转换	Number(“12”)
js 隐式转换(- * /)	利用算术运算符	“12” - 0

转换为布尔型

方式	说明	案例
Boolean()函数	其他类型转换为布尔型	Boolean(0)

代表空、否定的都会被转换为false 0,NaN,null,undefined
其他值都会被转换为true

运算符

实现赋值、比较和执行运算等功能的符号

递增与递减运算符

运算符	语法	功能	解释
前置递增	++num	num = num + 1	先自加后返回值
后置递增	num++	num = num + 1	先返回原值再自加1
前置递减	–num
后置递减	num–

比较运算符

将两个数据进行比较的运算符，会返回布尔值

==会把字符串型转换为数字型

===要求数据和数据类型完全一样才行

逻辑运算符

	说明	案例
&&	与	true && false
\|\|	或	true \|\| false
!	非	! true

短路运算

当有多个表达式而非布尔值时，左边的表达式可以确定结果，就不再继续运算右边表达式

逻辑与

表达式1 && 表达式2

表达式1为真，返回表达式2

表达式1为假，返回表达式1

逻辑或

表达式1 || 表达式2

表达式1为真，返回表达式2

表达式1为假，返回表达式1

分支流程

if

if (条件表达式) {
	执行语句
} else if (条件表达式) {
	执行语句
}

switch

switch (表达式) {
	case value1:
		执行语句1；
		break;
	case value2:
		执行语句2；
		break;
	...
	default:
		如果所有的可能性都没有，最后执行的语句;
}

数值时用switch，条件判断还是用if

三元表达式

条件表达式 ? 表达式1 : 表达式2

循环流程

for

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

初始化变量用var声明的变量，用来计数
条件表达式终止的条件，用来决定每次循环是否继续执行
操作表达式每次循环最后执行的代码，勇于计数器的更新

F12=>Sources点击对应行号可打断点，F11步进，浅蓝色为当前位置

while

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

do while

先执行一次再判断条件，如果为真继续，如果为假退出

do {
	循环体
} while (条件表达式)

continue和break

continue跳过这一次循环

break直接退出

数组

数组的创建

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

var arr = []; //创建一个空的数组

数组里的数据一定用逗号分,称为数组元素,可以存放任意数据类型

获取数组元素

索引（下标）

格式：数组名[索引号]

数组长度

数组名.length

数组中新增元素

通过修改length长度
修改索引号，追加数组元素

函数

封装了一段可以被重复执行的代码块

函数的声明　function()
函数的调用　函数名()

函数的参数

function 函数名(形参1,形参2,...) { // 形参是接收实参的

}
函数名(实参1,实参2,...)

如果实参的个数等于形参，正常
实参大于形参取到形参个数
实参小于形参未取到的定义为undefined

函数的返回值

function 函数名() {
	return 需要返回的结果;
}
函数名();

函数只是实现某种功能，最终结果需要返回给函数的调用者
只要函数遇到return 就是把后面的结果返回给调用者，即函数名() = return的结果

返回的注意事项

return之后的函数不会运行
return只能返回一个值，但可以返回一个数组
没有return，则返回的值是undefined

arguments

里面存储了所有的实参，是一个伪数组

具有length
按索引方式存储数据
不具有push，pop功能
可以用数组的方式遍历arguments

函数的调用

函数是可以相互调用的

函数的两种声明方式

利用函数关键字自定义
```
function 函数名() {}
```

函数表达式（匿名函数）

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

作用域

全局作用域：全局有效
局部作用域：在函数内部起效果

预解析

1.我们js引擎运行js分为两步：预解析代码执行

js会把所有var和function提升到作用域的最前面
按照从上到下执行代码

2.预解析分为变量预解析和函数预解析

对象

创建对象的方法

利用字面量：用花括号{}表达具体事物的属性

利用new Object：利用等号赋值，添加，每个属性与方法之间用分号结束

利用构造函数：重复相同的代码，将相同的属性封装到函数里面

function 构造的函数名() {
	this.属性 = 值;
	this.方法 = function() {}
}
var 函数 = new 构造函数名();

构造函数名字首字母要大写
构造函数不需要return，就可以返回结果

对象使用：

对象名.属性名（可理解为对象的属性）
对象名[“属性名”]
对象名.方法名()

遍历对象

for (变量 in 对象) {
	console.log(变量); // 得到的是属性名
	console.log(对象[变量]); // 得到的是属性值
}

for in 中的变量一般喜欢用key或者k

DOM（见本专栏文章前端学习 JavaScript DOM笔记）