- A+
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
对象(object)
js中一切皆对象,如:字符串、数值、数组、函数
js也提供了多个内建对象,如string、Data、array等
对象知识带有属性和方法的特殊数据类型
数组
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作用域关系查找一模一样。
首先在函数内部查找变量,找不到再到外层函数查找,逐步找到最外层。
自定义对象
本质就键对集合,类似于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