前端之JavaScript
1. JavaScript 发展历史
JavaScript（通常缩写为JS）是一种高级的、解释型的编程语言。JavaScript是一门基于原型、头等函数的语言，是一门多范式的语言，它支持面向对象程序设计，指令式编程，以及函数式编程。
它提供语法来操控文本、数组、日期以及正则表达式等，不支持I/O，比如网络、存储和图形等，但这些都可以由它的宿主环境提供支持。
它已经由ECMA（欧洲电脑制造商协会）通过ECMAScript实现语言的标准化。
它被世界上的绝大多数网站所使用，也被世界主流浏览器（Chrome、IE、Firefox、Safari、Opera）支持。
2. JavaScript基础语法
2.1 注释
在JavaScript中单行注释使用//，多行注释/**/
// 这是单行注释
/*
这是多行注释的第一行，
这是第二行。
*/
2.2 变量和常量
在JavaScript中使用var和let定义变量:
- 变量必须以字母开头
- 变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
- 变量名称对大小写敏感（y 和 Y 是不同的变量）
var定义的都为全局变量
let可以声明局部变量
声明变量:
// 定义单个变量
> var name
> name = 'Hans'
//定义并赋值
> var name = 'Hans'
> name
'Hans'
// 定义多个变量
> var name = "Hans", age = 18
> name
'Hans'
> age
18
//多行使用反引号`` 类型python中的三引号
> var text = `A young idler，
an old beggar`
> text
'A young idler，\nan old beggar'
声明常量:
在JavaScript中使用const定义常量
> const pi = 3.14
> pi
3.14
> pi = 3.01
Uncaught TypeError: Assignment to constant variable.
at <anonymous>:1:4
2.3 基本数据类型
值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol(表示独一无二的值,ES6引入)。
引用数据类型：对象(Object)、数组(Array)、函数(Function)。
2.3.1 Number类型
> var a = 5
> typeof a //查看变量的类型
number
> var b = 1.3
> typeof b
number
// 不管整型还是浮点型打开出来的结果都是number类型
/*
NaN:Not A Number
NaN属于数值类型 表示的意思是 不是一个数字
*/
parseInt('2345') // 转整型
2345
parseInt('2345.5')
2345
parseFloat('2345.5') // 转浮点型
2345.5
parseFloat('ABC')
NaN
parseInt('abc')
NaN
2.3.2 String类型
> var name = 'Hans'
> typeof name
'string'
//常用方法
// 变量值长度
> name.length
4
// trim() 移除空白
> var a = ' ABC '
> a
' ABC '
> a.trim()
'ABC'
//移除左边的空白
> a.trimLeft()
'ABC '
//移除右边的空白
> a.trimRight()
' ABC'
//返回第n个字符,从0开始
> name
'Hans'
> name.charAt(3)
's'
> name.charAt()
'H'
> name.charAt(1)
'a'
// 在javascript中推荐使用加号(+)拼接
> name
'Hans'
> a
' ABC '
> name + a
'Hans ABC '
// 使用concat拼接
> name.concat(a)
'Hans ABC '
//indexOf(substring, start)子序列位置
> text
'A young idler，\nan old beggar'
> text.indexOf('young',0)
2
//.substring(from, to) 根据索引获取子序列
> text.substring(0,)
'A young idler，\nan old beggar'
> text.substring(0,10)
'A young id'
// .slice(start, end) 切片, 从0开始顾头不顾尾
> name.slice(0,3)
'Han'
// 转小写
> name
'Hans'
> name.toLowerCase()
'hans'
// 转大写
> name.toUpperCase()
'HANS'
// 分隔
> name
'Hans'
> name.split('a')
(2) ['H', 'ns']
2.3.3 Boolean布尔值
在JavaScript中布尔值true和false 都是小写
""(空字符串)、0、null、undefined、NaN都是false。
null和undefined
- null表示值是空，一般在需要指定或清空一个变量时才会使用，如 name=null;
- undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined。还有就是函数无明确的返回值时，返回的也是undefined。
2.3.4 Array数组
使用单独的变量名来存储一系列的值。类似python中的列表。
> var array1 = [1, 2, 3, 'a','b','c']
> array1
(6) [1, 2, 3, 'a', 'b', 'c']
> console.log(array1[2]) //console.log打印类似python中的print
3
// length元素个数
> array1.length
6
// 在尾部增加元素，类型append
> array1.push('D')
7
> array1
(7) [1, 2, 3, 'a', 'b', 'c', 'D']
// 在头部增加元素
> array1.unshift(0)
8
> array1
(8) [0, 1, 2, 3, 'a', 'b', 'c', 'D']
//取最后一个元素
> array1.pop()
'D'
> array1
(7) [0, 1, 2, 3, 'a', 'b', 'c']
//取头部元素
> array1.shift()
0
> array1
(6) [1, 2, 3, 'a', 'b', 'c']
//切片， 从0开始顾头不顾尾
> array1.slice(3,6)
(3) ['a', 'b', 'c']
// 反转
> array1.reverse()
(6) ['c', 'b', 'a', 3, 2, 1]
// 将数组元素连接成字符串
> array1.join() // 什么不都写默认使用逗号分隔
'c,b,a,3,2,1'
> array1.join('')
'cba321'
> array1.join('|')
'c|b|a|3|2|1'
// 连接数组
> var array2 = ['A','B','C']
> array1.concat(array2)
(9) ['c', 'b', 'a', 3, 2, 1, 'A', 'B', 'C']
// 排序
> array1.sort()
(6) [1, 2, 3, 'a', 'b', 'c']
// 删除元素，并可以向数据组中添加新元素(可选)
> array1.splice(3,3) // 删除元素
(3) ['a', 'b', 'c']
> array1
(3) [1, 2, 3]
> array1.splice(3,3,'A','B','C') // 删除元素从添加新元素
[]
> array1
(6) [1, 2, 3, 'A', 'B', 'C']
/*
splice(index,howmany,item1,.....,itemX)
index:必需,必须是数字。规定从何处添加/删除元素。
howmany: 必需。规定应该删除多少元素。必须是数字，但可以是 "0"。如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
item1, ..., itemX 可选。要添加到数组的新元素
*/
// forEach() 将数组的每个元素传递给回调函数
> array1.forEach(function test(n){console.log(n)})
1
2
3
A
B
C
// 返回一个数组元素调用函数处理后的值的新数组
> array1.map(function(value){return value +1})
(6) [2, 3, 4, 'A1', 'B1', 'C1']
2.4 运算符
2.4.1 数学运算符
+ - * / % ++ --
> var a = 6
> var b = 3
// 加
> a + b
9
// 减
> a - b
3
// 乘
> a * b
18
// 除
> a / b
2
// 取模(取余)
> a % b
0
// 自增1(先赋值再增1)
> a++
6
> a
7
// 自减1(先赋值再减1)
> a--
7
> a
6
// 自增1(先增1再赋值)
> ++a
7
// 自减1(先减1再赋值)
> --a
6
> a
6
//a++会先赋值再进行自增1运算，而++a会先进行自增运算再赋值,--同理
2.4.2 比较运算符
> >= < <= != == === !==
// 大于
> a > b
true
// 大于等于
> a >= b
true
// 小于
> a < b
false
// 小于等于
> a <= b
false
// 弱不等于
> a != b
true
// 弱等于
> 1 == '1'
true
// 强等于
> 1 === '1'
false
// 强不等于
> 1 !== '1'
true
/*
JS是一门弱类型语言(会自动转换数据类型)，所以用两个等号进行比较时，JS内部会自动先将数值类型的1转换成字符串类型的1再进行比较，所以以后写JS涉及到比较时尽量用三等号来强制限制类型，防止判断错误
*/
2.4.3 逻辑运算符
&& || !
&& 与
|| or
! 非
2.4.4 赋值运算符
= += -= *= /=
// 赋值
> var x = 3
// 加等于
> x += 2
5
// 减等于
> x -= 1
4
// 乘等于
> x *= 2
8
// 除等于
> x /= 2
4
2.5 流程控制
2.5.1 if
1， if(条件){条件成立执行代码}
> var x = 3
> if (x > 2){console.log("OK")}
OK
2, if(条件){条件成立执行代码}
else{条件不成立执行代码}
> if (x > 4){console.log("OK")}else{"NO"}
'NO'
3, if(条件1){条件1成立执行代码}
else if(条件2){条件2成立执行代码}
else{上面条件都不成立执行代码}
> if (x > 4){console.log("OK")}else if(x > 5){console.log("OK2")}else{console.log('Ha')}
Ha
2.5.2 switch
var day = new Date().getDay();
switch (day) {
case 0:
console.log("Sunday");
break;
case 1:
console.log("Monday");
break;
default:
console.log("不在范围")
}
不在范围
注意:switch中的case子句通常都会加break语句，否则程序会继续执行后续case中的语句。
2.5.3 for
// for 循环
for(起始值;循环条件;每次循环后执行的操作){
for循环体代码
}
for (var i = 0; i<10; i++){
console.log(i)
}
0
1
2
3
4
5
6
7
8
9
2.5.4 while
// while 循环
while(循环条件){
循环体代码
}
> var i = 0
> while(i<10){
console.log(i)
i++
}
0
1
2
3
4
5
6
7
8
9
2.5.5 break和continue
// break
for (var i = 0; i<10; i++){
if (i == 5){break}
console.log(i)
}
0
1
2
3
4
// continue
for (var i = 0; i<10; i++){
if (i == 5){continue}
console.log(i)
}
0
1
2
3
4
6
7
8
9
2.6 三元运算
> a
6
> b
3
//条件成立c为a的值，不成立c为b的值
> var c = a > b ? a : b
> c
6
// 三元运算可以嵌套
2.7 函数
1. 普通函数
> function foo1(){
console.log("Hi")
}
> foo1()
Hi
2. 带参数函数
> function foo1(name){
console.log("Hi",name)
}
> foo1("Hans")
Hi Hans
> var name = "Hello"
> foo1(name)
Hi Hello
3. 带返回值函数
> function foo1(a,b){
return a + b
}
> foo1(1,2)
3
> var a = foo1(10,20) //接受函数返回值
> a
30
4. 匿名函数
> var sum = function(a, b){
return a + b;
}
> sum(1,2)
3
// 立即执行函数 书写立即执行的函数，首先先写两个括号()()这样防止书写混乱
> (function(a, b){
return a + b
})(10, 20)
30
5. 闭包函数
// 内部函数可以使用外部函数的参数，这个内部函数就是个闭包函数
var city = "BJ"
function f(){
var city = "SH"
function inner(){
console.log(city)
}
return inner
}
var ret = f()
ret()
执行结果:
SH
ES6中允许使用“箭头”（=>）定义函数。
var f = v => v;
// 等同于
var f = function(v){
return v;
}
arguments参数 可以获取传入的所有数据
function foo1(a,b){
console.log(arguments.length) //参数的个数
console.log(arguments[0]) // 第一个参数的值
return a + b
}
foo1(10,20)
结果:
2 //参数的个数
10 // 第一个参数的值
30 // 返回相加的结果
注意:函数只能返回一个值，如果要返回多个值，只能将其放在数组或对象中返回
2.8 内置对象和方法
JavaScript中的所有事物都是对象：字符串、数字、数组、日期等。在JavaScript中，对象是拥有属性和方法的数据。
2.8.1 Date对象
> var data_test = new Date()
> data_test
Fri Feb 11 2022 21:44:43 GMT+0800 (中国标准时间)
> data_test.toLocaleString()
'2022/2/11 下午9:44:43'
> data_test.toLocaleDateString()
'2022/2/11'
> var data_test2 = new Date("2022/2/11 9:44:43")
> data_test2.toLocaleString()
'2022/2/11 上午9:44:43'
// 获取当前几号
> data_test.getDate()
11
// 获取星期几，数字表示
> data_test.getDay()
5
// 获取月份(0-11)
> data_test.getMonth()
1
// 获取完整年份
> data_test.getFullYear()
2022
// 获取时
> data_test.getHours()
21
// 获取分
> data_test.getMinutes()
44
// 获取秒
> data_test.getSeconds()
43
// 获取毫秒
> data_test.getMilliseconds()
290
// 获取时间戳
> data_test.getTime()
1644587083290
2.8.2 Json对象
JSON.stringify() // 序列化, 把对象转换成JSON字符串
JSON.parse() // 反序列化，把JSON字符串转换成对象
// 序列化
> var jstojson = JSON.stringify(person)
> jstojson
'{"Name":"Hans","Age":18}'
// 反序列化
> var x = JSON.parse(jstojson)
> x
{Name: 'Hans', Age: 18}
> x.Age
18
2.8.3 RegExp对象
正则
> var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{4,7}");
> reg1
/^[a-zA-Z][a-zA-Z0-9]{4,7}/
> reg1.test("Hans666")
true
> var reg2 = /^[a-zA-Z][a-zA-Z0-9]{4,7}/ // 推荐这种写法使用 /正则/
> reg2
/^[a-zA-Z][a-zA-Z0-9]{4,7}/
> reg2.test('Hasdfa')
true
全局匹配：
> name
'Hello'
> name.match(/l/)
['l', index: 2, input: 'Hello', groups: undefined]
> name.match(/l/g)
(2) ['l', 'l']
// 正则表达式的最后不加g则表示匹配成功就结束 加g表示全局匹配
全局匹配注意事项:
> var reg2 = /^[a-zA-Z][a-zA-Z0-9]{4,7}/g
> reg2.test('Hasdfa')
true
>reg2.lastIndex;
6
> reg2.test('Hasdfa')
false
> reg2.lastIndex;
0
> reg2.test('Hasdfa')
true
> reg2.lastIndex;
6
> reg2.test('Hasdfa')
false
> reg2.lastIndex;
0
// 全局匹配会有一个lastindex属性
> reg2.test()
false
> reg2.test()
true
// 校验时不传参数默认传的是undefined
2.8.4 自定义对象
就相当于是python中的字典
> var person = {'Name':"Hans", "Age":18}
> person
{Name: 'Hans', Age: 18}
> person.Name
'Hans'
> person["Name"]
'Hans'
// 也可以使用new Object创建
> var person2 = new Object()
> person2.name = "Hello"
'Hello'
> person2.age = 20
20
3. JavaScript BOM和DOM操作
BOM（Browser Object Model）是指浏览器对象模型，使用js操作浏览器。
DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。使用js操作前端页面。
3.1 window 对象
所有浏览器都支持 window 对象。它表示浏览器窗口。
//览器窗口的内部高度
window.innerHeight
706
//浏览器窗口的内部宽度
window.innerWidth
1522
// 打开新窗口
window.open('https://www.baidu.com')
Window {window: Window, self: Window, document: document, name: '', location: Location, …}
// 关闭当前窗口
window.close()
// 后退一页
window.history.back()
// 前进一页
window.history.forward()
//Web浏览器全称
window.navigator.appName
'Netscape'
// Web浏览器厂商和版本的详细字符串
window.navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36'
// 客户端绝大部分信息
window.navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36'
// 浏览器运行所在的操作系统
window.navigator.platform
'Win32'
// 获取URL
window.location.href
// 跳转到指定页面
window.location.href='https://www.baidu.com'
// 重新加载页面
window.location.reload()
3.2 弹出框
三种消息框：警告框、确认框、提示框。
3.2.1 警告框
alert("Hello")
3.2.2 确认框
> confirm("你确定吗?") // 点确认返回true
true
> confirm("你确定吗?") // 点取消返回false
false
3.2.3 提示框
prompt("请输入","提示")
如果直接点确定后端得收到提示两个字，也可以删除输入自己想输入的内容、
如果直接点取消后端收到null
3.3 计时相关
在一定时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。
// 等于3秒钟弹窗
setTimeout(function(){alert("Hello")}, 3000)
var t = setTimeout(function(){alert("Hello")}, 3000)
// 取消setTimeout设置
clearTimeout(t)
setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。
3.3.1 setInterval() 间隔指定的毫秒数不停地执行指定的代码
每三秒弹出 "hello" ：
setInterval(function(){alert("Hello")},3000);
取消使用clearInterval() 方法.它用于停止 setInterval() 方法执行的函数代码。
var t = setInterval(function(){alert("Hello")},3000);
//取消：
clearInterval(t)