前端之JavaScript篇
JavaScript
javaScript是一种脚本语言，主要由下面三部分组成：
- 核心（ECMAScript)
- 文档对象模型（DOM) Document object model(整合js，css，html)
- 浏览器对象模型（BOM) Broswer object model（整合js和浏览器）
注意：ES6是指ECMAScript 6。
JavaScript引入方式
//第一种，在Script标签内写代码 <script> js代码 </script> //第二种，直接引入js文件 <script src="myscript.js"></script>
JavaScript语言规范
// 这是单行注释 /* 多行注释 */ //结束符 是以分号为结束符号 ；
JavaScript语言基础（与python做对比）
变量声明
1、js的变量名可以使用字母、数字、_、$组成，同样不能用数字开头
2、用var、let (let是ES6后才支持的）来声明变量
3、不能用关键字作为变量名
4、声明常量用const，一旦声明，该值就不能改变（ES6新增）
var userName='json' let id='111' const PI=3.14
注意：变量名是区分大小写的
js推荐使用驼峰式命名规则：如userName
pyton 则推荐用_下划线命名规则：如user_name
var、let的区别：
var 声明的都是全局变量，全局变量容易受影响
let 声明的是局部变量，所以let可以区分全局变量和局部变量
JavaScript数据类型
js跟python一样，都是拥有动态类型：
>var x; >var x=1; >var x='alex' >x
<alex
数值类型（Number)
js不区分整形和浮点型，就只用number这一种类型
var a=11 var b=11.11 typeof b <number //注意NaN也是number类型 typeof NaN <number //NaN 表示不是一个数字
类型转换
parseInt('111') //返回 111
parseFloat('11.11') //返回11.11
parseInt('11sagljks') //返回11，如果是小数字符串则返回整数部分，如11.11返回11
parseInt("aljgla") //返回NaN
//总结：只要是数字开头就可以转换，否则会报错
字符串类型（String）
js 支持单引号、双引号，但是不止三引号
python支持引号、双引号、三引号
字符串的拼接：
js推荐直接用+做拼接
python 推荐用join做拼接
var a="json"; var a1='pytoh'; var a2='''hello''' //不支持 //模板字符串 var aa=` my name is ${a1} , ${a2}world ` //返回 my name is pytoh ,hello world
//注意：${}会自动去前面寻找大括号内变量名对应的值，如果找不到，则会报错。
字符串常用的方法：
| js方法 | 说明 | python |
| .length | 返回长度 | .len() |
| .trim() | 移除空白 | strip() |
| .trimLeft() | 移除左边空白 | lstrip() |
| .trimRight() | 移除右边空白 | rstrip() |
| .charAt(n) | 返回第n个字符 | |
| .concat(value,...) | 拼接 | join () |
| .indexOf(substring,start) | 子序列位置 | index() |
| .substring(from,to) | 根据索引获取子序列 | []索引取值 |
| .slice(start.end) | 切片 | [] |
| .toLowerCase() | 小写 | lower() |
| .toUpperCase() | 大写 | upper() |
| .split(delimiter,limit) | 分割 | split() |
h="hellowold" h.length >9 h1=" hell " h1.trim() >"hell" h1.trimLeft() >"hell " h1.trimRight() >" hell" h.charAt(2) >"l" h.indexOf('ol') >6 h.substring(1,3) >"el" h.slice(0,-1) >"hellowol" h.toLowerCase() >"hellowold" h.toUpperCase() >"HELLOWOLD" h.split('o') >(3) ["hell", "w", "ld"] name1='hello' name2='world' name1.concat(name2) >"helloworld"
注意：js使用切片的时候，用slice()方法
slice和substring的区别
string.slice(start, stop)和string.substring(start, stop)：
两者的相同点：
如果start等于end，返回空字符串
如果stop参数省略，则取到字符串末
如果某个参数超过string的长度，这个参数会被替换为string的长度
substirng()的特点：
如果 start > stop ，start和stop将被交换
如果参数是负数或者不是数字，将会被0替换
silce()的特点：
如果 start > stop 不会交换两者
如果start小于0，则切割从字符串末尾往前数的第abs(start)个的字符开始(包括该位置的字符)
如果stop小于0，则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符)
布尔值
js中布尔值都是小写的。python中布尔值首字母都是大写
js布尔值为false的情况有：空字符串，NaN，0，undefined，null
null和undefined的区别
- null表示值是空，一般在需要指定或清空一个变量时才会使用
- undefined表示当声明一个变量但是没有初始化时，该变量默认值时undefined
注意：函数没有设置return返回值的时候，函数返回的是undefined
数组
js的数组类似于python中的列表
数组常用的方法如下：
| js数组方法 | 说明 | python |
| length | 数组的大小 | len(列表名) |
| push(ele) | 尾部追加元素 | append() |
| pop() | 删除并获取尾部元素 | pop() |
| unshift(ele) | 头部插入元素 | insert(0,元素） |
| shift() | 头部移除元素并获取该元素的值 | del l[0]/remove(l[0]) |
| slice(start,end) | 切片 | l[0:2] |
| reverse() | 反转 | reverse() |
| join(seq) | 将数组元素连接成字符串,join()里面参数放连接符 | join()，相反，如：‘a’.join(l1) |
| concat(val,...) | 连接数组 | + |
| sort() | 排序 | sort() |
| forEach() | 将数组的每个元素传递给回调函数 | |
| splice() | 删除元素，并向数组添加新元素 | |
| map() | 将数组的每个元素给函数处理后，返回一个处理后新的数组 | map() |
//例子： var l=[1,2,3] l.pop() >3 l.push(5) >3 l.unshift(6) >4 l >(4) [6, 1, 2, 5] l.shift() #删除头部元素 >6 l >(3) [1, 2, 5] l.slice(0,2) >(2) [1, 2] l.reverse() >(3) [5, 2, 1] l.join('a') >"5a2a1" var l2=["a","b","c"] l.concat(l2) >(6) [1, 2, 5, "a", "b", "c"] l.sort() >(3) [1, 2, 5]
forEach()方法实例：参数最多三个，第一个参数是必须的，第二个，可选，表示当前元素的索引值，第三个参数，可选，表示当前元素所属的数组对象
splice（index,howmany,item1）方法实例：同样也是三个参数，第一个参数是必须的，表示起始位置，第二个参数也是必需的，表示删除元素个数，必须是数字，也是是“0”。如果这个参数没有设置，则会从index开始删除到数组最后一个元素，第三个参数，可选，表示要添加到数组的新元素。
map()方法实例：参数性质跟forEach一致
运算符
//算数运算符 + - * / % ++ -- var x=1; var res1=x++; //结果是1 ，先赋值再运算 var res2=++x; //结果是3，先运算再赋值 //比较运算符 > >= < <= != == === !== //注意： 1=="1" //结果是true 。弱等于，会自动转换数据类型 1===“1” //结果是false 。强等于，不会自动转换数据类型 //逻辑运算符 /* 注意：python是 and or not js 是 && || ！ 逻辑运算的时候，返回的是数据，而不是布尔值 */ !5&&'5' >5 5&&'5' >5 0 || 1 >1
//赋值运算符 = += -= *= /+
流程控制
//if-else结构 if(条件){代码块}else{代码块｝ //if-else if - esle结构 if(条件){ 代码块 }else if{ 代码块 }else{ 代码块 } //switch结构： switch(num){ case 0: 代码块 barek; ..... default: console.log("...") } //注意：case子句通常要加break语句，否则程序会继续执行后续case中语句 //for结构： for(条件）｛ 代码块 ｝ //while结构： while(条件）｛代码块} //三元运算 /* python 三元运算符是 var res=1 if 1>2 else 3 js 三元运算符是 var res=1>3?1:3 */
函数
函数定义(可以带参数，也可以不带）
//python 是def js是function
function f(参数1,..){ 代码块 } //匿名函数 var sum=function(a,b){ return a+b; } sum(1,2); //立即执行函数 （function(a,b){ return a+b; })(1,2); //箭头函数(ES6才运许使用） var f=v =>v; //箭头左边是形参，右边是返回值 //等价于 var f=function(v){ return v } var f=(arg1,arg2) => arg1+arg2; var f=function(arg1,arg2){ return arg1+arg2; }
注意：函数中arguments参数，是存放存入的参数。
函数只能返回一个值，如果要返回多个值，只能将其放在数组或对象中返回
函数的全局变量和局部变量
局部变量：在函数内部声明的变量就是局部变量，只能在函数内部访问，函数执行完毕，该变量也会被删除
全局变量：在函数外部声明的变量，该变量会在页面关闭后被删除
作用域：跟python作用域关系查找一模一样。
首先在函数内部查找变量，找不到再到外层函数查找，逐步找到最外层。
对象（object）
js中一切皆对象，如：字符串、数值、数组、函数
js也提供了多个内建对象，如string、Data、array等
对象知识带有属性和方法的特殊数据类型
自定义对象
本质就键对集合，类似于python中中的字典。
#第一种创建自定义对象的方式 var d={'user':'hell','passwd':123} #第二种创建自定义对象的方式 var d1=new Object() d1.id='alex'; d1.password=123; //等价于 d1={'id':'alex','password':123}
//遍历对象内容
for （var i in d1){
console.log(i,d1[i]);
}
Data对象
var d1=new Date(); var d2=new Date("2020/9/20 21:03") //参数是日期字符串 var d3=new Date(1000) //参数是毫秒 var d4=new Date(2020,9,20,21,3,1,100) //参数是年月日时分秒毫秒 //Date对象方法 var d=new Date() getDate() // 获取日 getDay () //获取星期 getMonth () // 获取月（0-11） getFullYear () // 获取完整年份 getYear () //获取年 getHours () //获取小时 getMinutes () //获取分钟 getSeconds () //获取秒 getMilliseconds () //获取毫秒 getTime () //返回累计毫秒数(从1970/1/1午夜)
JSON对象
在python中序列化、反序列化
- dumps 序列化
- loads 反序列化
在js中序列化反、序列化
- JSON.stringify() 等价于dumps 序列化
- JSON.parse() 等价于loads 反序列化
RegExp对象
在python中，使用正则，需要借助于re模块，
在js中，则需要创建正则对象
//第一种创建正则对象方法 let reg1= new RegExp("正则语句“) //eg: let reg1 =new RegExp(^[a-zA-Z][a-zA-Z0-9]{5,11}) //第二种 let reg2 = /正则语句/ //eg: let reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/ //匹配以字母开头，长度在5~11 //匹配内容，调用test方法 reg1.test('helloworld) //全局匹配缺陷 let reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/ g /* 全局模式有一个lastIndex属性，匹配结果为true是，lastIndex是字符串的长度，下次匹配会从字符串尾部开始匹配，匹配结果为false时，lastIndex会重新置0，从头开始匹配。 */ reg2.test('helloworld') >true reg2.test('helloworld') //此时lastIndex是10，从字母d后面开始匹配，所以结果为false >false //第二个缺陷，当test()，不传参数的时候，默认传undefined
