内容概览

• JavaScript
  • JS数据类型
  • 运算符
  • 流程控制
  • 函数
  • JS内置对象
  • BOM与DOM操作

JavaScript

JS数据类型

布尔值(boolean)

//与python的布尔值相比,JS中布尔值使用全小写
let a = false;
let b = true;
//空字符串、0、null、undefined、NaN都是false
1
2
3
4

null与undefined的区别
null表示值为空，一般是清空一个变量时才会使用
undefined表示刚声明了一个变量，还未赋值，那么变量的默认值为undefined；还有就是函数没有明确的返回值时，也是返回undefined

对象(Object)

JavaScript中所有的事物都是对象
对象就是自身包含了属性和方法的特殊数据类型
JavaScript提供了多个内建对象，比如String、Date、Array等

• 数组
  数组对象就是使用单个变量名存储多个元素，类似于Python中的列表

// 定义语法
let l1 = [11, 'jason', true]
// 取值
l1[1]  //'jason'
1
2
3
4

常用方法：

forEach

//语法结构
数组.forEach(function(当前元素,索引,当前元素所属的数组对象))
//类似于Python中的for循环
1
2
3

splice

//语法结构
数组.splice(索引,数值,新元素)
/*
索引：通过索引设定开始删除或添加元素的位置
数值：删除多少个元素,默认从索引位置到末尾,可以为0
新元素(可选)：要添加到数组的新元素
*/
1
2
3
4
5
6
7

map

//语法结构
数组.map(function(当前元素,索引,当前对象))
//map会返回一个处理后的新数组
1
2
3

自定义对象(Object)

类似于Python中的字典数据类型

//定义方式1
let d1 = {'name': 'jason', 'age':24}
//定义方式2
let d2 = new Object()
//相较于Python的字典,自定义对象操作数据值可以直接使用句点符的方式,更加简单方便
1
2
3
4
5

运算符

• 算数运算符

  符号	说明
  +	加
  -	减
  *	乘
  /	除
  %	取余
  ++	自增
  –	自减

  //需要注意自增与自减编写的位置
  let a = 10
  let b = a++
  let c = ++a
  //由于b赋值时是先赋值后自增，所以b是10；c是先自增后赋值，所以c是12
  1
  2
  3
  4
  5

• 比较运算符

  符号	说明
  >	大于
  <	小于
  >=	大于等于
  <=	小于等于
  !=	弱不等于
  !==	强不等于
  ==	弱等于
  ===	强等于

  1=='1'  //true
  1==='1'  //false
  //由于JavaScript是一门弱类型语言,会自动转换数据类型,使用两个等号进行比较时,会自动将数据类型转换为一致比较,所以以后尽量使用三个等号,防止判断错误
  1
  2
  3

• 逻辑运算符

  符号	说明
  &&	与，and
  ||	或，or
  !	非，not

• 赋值运算符

  符号	说明
  =	赋值符号
  a+=b	等同于a=a+b
  a-=b	等同于a=a-b
  a*=b	等同于a=a*b
  a/=b	等同于a=a/b

流程控制

分支结构

//单if分支
if(条件){
条件成立执行的代码
}
//if...else分支
if(条件){
条件成立执行的代码
}else{
条件不成立执行的代码
}
//if...else if...else分支
if(条件1){
条件1成立后执行的代码
}else if(条件2){
条件1不成立,条件2成立执行的代码
}else{
条件都不成立执行的代码}

//switch语句
var day = new Date().getDay();
switch(day){
	case 0:
		console.log("Sunday");
		break
	case 1::
		console.log("Monday");
		break
	default:
		console.log("...")
/*
switch 语句和 if...else...if 语句的区别
switch 语句进行条件判断后直接执行到程序的条件语句,效率更高;而if语句有几种条件,就得判断多少次
*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

循环结构

// for循环
关键字(循环开始前执行;结束条件;循环结束后执行){
	循环体代码
}
for(let i=1;i<101;i++){  
	console.log(i)
}

//while循环
关键字(条件){
	循环体代码
}
var i = 0
while (i<10){
	console.log(i)
	i++
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

函数

JS中的函数和Python的函数非常相似，只是定义方式有一点不同

//语法结构
function 函数名(形参){
	函数体代码
	return 返回值
}
function fn1(a,b){
	console.log(a,b)
}
//参数的数量不需要一一对应,如果不传参默认为undefined,如果想要限制参数传入个数,需要使用内置关键字arguments
function fn2(a,b){
	if(arguments===2){
		console.log(a,b)
	}else{console.log('参数不够')}
}

//匿名参数
function(a,b){
	return a + b;
}

//箭头函数
let f = 参数 => 返回值;
//如果不需要参数或多个参数,则需要使用括号
let sum = (num1, num2) => num1 + num2;
let f = () => 10;
//return只能返回一个值,如果想要返回多个值则需自己将数据使用数组或自定义对象保存
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

JS内置对象

类似于Python中的内置函数或内置模块
语法结构：var 变量名 = new 内置对象名();

Date对象

// 不指定参数
var d1 = new Date();  // Thu Aug 25 2022 19:12:47 GMT+0800 (中国标准时间)

//参数为日期字符串
var d2 = new Date('2022/8/25 11:11');  // Thu Aug 25 2022 11:11:00 GMT+0800 (中国标准时间)

//参数为毫秒数
var d3 = new Date(0);  // Thu Jan 01 1970 08:00:00 GMT+0800 (中国标准时间)

//参数为数值
var d4 = new Date(2022,8,25,11,11,11);  // Thu Sep 15 2022 11:11:11 GMT+0800 (中国标准时间)
1
2
3
4
5
6
7
8
9
10
11

Date对象的方法

JSON序列化对象

//序列化
let res = {'name':'jason','age':18}
let j1 = JSON.stringify(res)
j1;  // '{"name":"jason","age":18}'

//反序列化
let d2 = JSON.parse(j1)
d2;  // {name: 'jason', age: 18}
1
2
3
4
5
6
7
8

RegExp对象

//有两种正则表达式的定义方式
let reg1 = new RegExp('^[a-zA-Z][a-zA-z0-9]{5,12}')
let reg2 = /^[a-zA-Z][a-zA-z0-9]{5,12}/
//正则校验数据
reg.test('待校验数据')
/*正则的修饰符
g:全局匹配
i:大小写不敏感
m:检测字符串中的换行符
*/
//如果检验时不传入数据,那么会自动传入undefined
1
2
3
4
5
6
7
8
9
10
11

BOM与DOM操作

BOM：浏览器对象模型，通过js代码与浏览器交互
DOM：文档对象模型，通过js代码与HTML交互

window对象

所有浏览器都支持window对象，它表示浏览器窗口
常用window方法：

window.open()  // 打开一个新窗口
window.close()  // 关闭当前窗口
window.innerHeight  // 获取浏览器窗口内部高度
window.innerWidth  // 获取浏览器窗口内部宽度
1
2
3
4

• window子对象

// navigator
window.navigator.appName  // Web浏览器全称
window.navigator.appVersion  // Web浏览器厂商和版本的详细字符串
window.navigator.appAgent  // 客户端大部分信息
window.navigator.platform  // 浏览器运行所在的操作系统

// history
window.history.forward  // 前进一页
window.history.back  // 后退一页

// location
window.location.href  // 获取当前网址
window.location.href = 新网址  // 跳转到指定网址
window.location.reload  // 重新加载页面
1
2
3
4
5
6
7
8
9
10
11
12
13
14

弹出框

// 警告框
alert();  // 用于确保用户可以得到某些信息,需要用户确定才能继续操作

// 确认框
confirm();  // 用于使用户可以验证或接受某些信息,需要用户确定或者取消;如果选择确定则返回值为true,反之则为false

// 提示框
prompt();  // 用于提示用户输入某个值;如果确认返回值为输入的值,反之则返回null
1
2
3
4
5
6
7
8

定时器

通过js代码，实现每隔一定时间间隔之后执行代码

setTimeout
//语法结构
let t1 = setTimeout(js语句,毫秒)  // 经过指定的毫秒数后执行js语句
// 可以使用它的返回值来结束掉它
clearTimeout
//语法结构
clearTimeout(t1)

// 上边的方法只能够触发一次,如果想要重复触发可以使用下边的方法
setInterval
//语法结构
let t2 = setInterval(js语句,毫秒)
// 此方法会不停的调用js语句,直到调用clearInterval关闭或者窗口被关闭
clearInterval(t2)
1
2
3
4
5
6
7
8
9
10
11
12
13
14

DOM

DOM操作

js操作html也需要先查找标签

// 直接查找
document.getElementById();  // 根据id值查找标签,结果直接是标签对象本身
document.getElementsByClassName();  // 根据class值查找标签,结果是一个数组
document.getElementByTagName();  // 根据标签名查找标签,结果是一个数组
// 根据上边获得的标签,可以使用间接查找其他标签
let divEle = document.getElementById(d1);
div.parentElement  // 父节点标签
div.children  // 所有子标签
div.firstElementChild  // 第一个子标签
div.lastElementChild  // 最后一个子标签
div.nexElementSibling  // 下一个兄弟标签
div.previousElementSibling  // 上一个兄弟标签
1
2
3
4
5
6
7
8
9
10
11
12

节点操作

// 创建节点
let AEle = document.createElement('标签名')  // 动态创建一个标签,临时有效
divEle.append(AEle)  // 在指定标签下插入该标签
1
2
3

属性操作

AEle.id = 'id值'  // 可以使用句点符给id属性赋值
AEle.xxx = 'xxx'  // 只能够修改默认属性
AEle.setAttribute('username','jason')  // 既可以该默认属性,也可以改自定义属性
1
2
3

文本操作

divEle.innerText  // 只获取标签内部所有的文本信息
divEle.innerHTML  // 获取标签内部所有的信息

divEle.innerText = '
Text
'  // 只能修改标签内部的文本数据
divEle.innerHTML = '
HTML
'  // 能够实现标签的添加
1
2
3
4
5