前端之JavaScript

[toc]

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)