前端之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\'> age18//多行使用反引号`` 类型python中的三引号> var text = `A young idler，an old beggar`> text\'A young idler，\\nan old beggar\'

声明常量:

在

JavaScript

中使用

const

定义常量

> const pi = 3.14> pi3.14>  pi = 3.01Uncaught 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 bnumber// 不管整型还是浮点型打开出来的结果都是number类型/*NaN:Not A NumberNaN属于数值类型 表示的意思是 不是一个数字*/parseInt(\'2345\')  // 转整型2345parseInt(\'2345.5\')2345parseFloat(\'2345.5\') // 转浮点型2345.5parseFloat(\'ABC\')NaNparseInt(\'abc\')NaN

2.3.2 String类型

> var name = \'Hans\'> typeof name\'string\'//常用方法// 变量值长度> name.length4// 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中的print3// length元素个数> array1.length6// 在尾部增加元素，类型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)})123ABC// 返回一个数组元素调用函数处理后的值的新数组> 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 + b9// 减> a - b3// 乘> a * b18// 除> a / b2// 取模(取余)> a % b0// 自增1(先赋值再增1)> a++6> a7// 自减1(先赋值再减1)> a--7> a6// 自增1(先增1再赋值)> ++a7// 自减1(先减1再赋值)> --a6> a6//a++会先赋值再进行自增1运算，而++a会先进行自增运算再赋值,--同理

2.4.2 比较运算符

> >= < <= != == === !==

// 大于> a > btrue// 大于等于> a >= btrue// 小于> a < bfalse// 小于等于> a <= bfalse// 弱不等于> a != btrue// 弱等于> 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 += 25// 减等于> x -= 14// 乘等于> x *= 28// 除等于> x /= 24

2.5 流程控制

2.5.1 if

1， if(条件){条件成立执行代码}> var x = 3> if (x > 2){console.log("OK")}OK2, 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)}0123456789

2.5.4 while

// while 循环while(循环条件){循环体代码}> var i = 0> while(i<10){console.log(i)i++}0123456789

2.5.5 break和continue

// breakfor (var i = 0; i<10; i++){if (i == 5){break}console.log(i)}01234// continuefor (var i = 0; i<10; i++){if (i == 5){continue}console.log(i)}012346789

2.6 三元运算

> a6> b3//条件成立c为a的值，不成立c为b的值> var c = a > b ? a : b> c6// 三元运算可以嵌套

2.7 函数

1. 普通函数> function foo1(){console.log("Hi")}> foo1()Hi2. 带参数函数> function foo1(name){console.log("Hi",name)}> foo1("Hans")Hi Hans> var name = "Hello"> foo1(name)Hi Hello3. 带返回值函数> function foo1(a,b){return a + b}> foo1(1,2)3> var a = foo1(10,20)  //接受函数返回值> a304. 匿名函数> var sum = function(a, b){return a + b;}> sum(1,2)3// 立即执行函数 书写立即执行的函数，首先先写两个括号()()这样防止书写混乱> (function(a, b){return a + b})(10, 20)305. 闭包函数// 内部函数可以使用外部函数的参数，这个内部函数就是个闭包函数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_testFri 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.Age18

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 = 2020

3. JavaScript BOM和DOM操作

BOM（Browser Object Model）是指浏览器对象模型，使用js操作浏览器。

DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。使用js操作前端页面。

3.1 window 对象

所有浏览器都支持 window 对象。它表示浏览器窗口。

//览器窗口的内部高度window.innerHeight706//浏览器窗口的内部宽度window.innerWidth1522// 打开新窗口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\'//  获取URLwindow.location.href// 跳转到指定页面window.location.href=\'https://www.baidu.com\'// 重新加载页面window.location.reload()

3.2 弹出框

三种消息框：警告框、确认框、提示框。

3.2.1 警告框

alert("Hello")

3.2.2 确认框

> confirm("你确定吗?") // 点确认返回truetrue> confirm("你确定吗?")  // 点取消返回falsefalse

3.2.3 提示框

prompt("请输入","提示")

如果直接点

确定

后端得收到提示两个字，也可以删除输入自己想输入的内容、