前端之JavaScript
引入方式
1. js代码写在seript标签里
2. script src="被人导入路径"
注释和结束符
//单行注释
/**/多行注释
; 结束符
声明变量
-
声明变量时不用声明变量类型,全部使用var关键字
var a a=3
-
一行可以声明多个变量,并且可以是不同类型
var name=“luyi”,age=20,job=“teacher”
-
声明变量时,可以不用var,如果不用var 那么他是全局变量
-
单独声明变量并且没有进行赋值时,此变量的值为undefined
-
变量命名规则:首字符只能是字母,下划线,$美元符三选一,余下的字符可以是下划线美元符,或者任何字母或者数字。(注意:不能以数字开头,并且区分大小写)
特有命名规范: Camel 标记法 首字母是小写的,接下来的字母都以大写字符开头。例如: var myTestValue = 0, mySecondValue = "hi"; Pascal 标记法 首字母是大写的,接下来的字母都以大写字符开头。例如: Var MyTestValue = 0, MySecondValue = "hi"; 匈牙利类型标记法 在以 Pascal 标记法命名的变量前附加一个小写字母(或小写字母序列),说明该变量的类型。例如,i 表示整数,s 表示字符串,如下所示“ Var iMyTestValue = 0, sMySecondValue = "hi";
数据类型
查看数据类型
typeof 变量名
var a=10
console.log(typeof(a))
数值(number)
数字类型
num=10 #表示整数10
num1=1.1 #表示小数1.1
num2=.1 #表示小数0.1
num3=10.0 #表示整数10
num3=10. #表示整数10
123e5 123*10的5次方 科学计数法
123e-5 123*10的-5次方 科学计数法
1.不区分整数和浮点型
2.所有数字都采用64位浮点格式储存
3.能表示的最大值是1.7976931348623157 * 10**308 #console.log(Number.MAX_VALUE)
4.最小值是5 * 10**-324 #console.log(Number.MIN_VALUE)
在javascript中10进制的整数由数字序列组成,能精确表达的范围是:-9007199254740992 (-253) 到 9007199254740992 (253) 超过范围的数字精确会收到影响
console.log(111111111111111111111111111111111==111111111111111111111111111111112) --->得到的结果为True
字符串(string)
字符串支持拼接(+)
字符串的转换
字符串转换数字 parseInt(变量名) ---->如有数字有字母,会丢弃字母
字符串转换小数 parseFloat(变量名)
字符串常用方法:
.lenght 查看字符串长度
.trim() 移除空白
.trimleft() 移除左空白
.trimright() 移除右空白
.charAt(索引值) 返回索引值的字符
.concat(被拼接的值) 字符串拼接
.indexOf(元素) 通过元素找索引
.indexOf(元素,找的起始位置) 找不到返回-1
.slice(起始位置,结束位置) 切片(顾头不顾尾)
. toLowerCase() 全部变小写
. toUpperCase() 全部变大写
.split(元素,返回几个数据) 以元素分割
布尔值(boolean)
javascript里布尔值只有:
true;
false;
注意:"",0,null,undefined,NaN为false
null和undefined
null:空 一遍需要清空一个变量时,使用
undefined:未定义 声明一个变量,未赋值未undefined
对象类型(object)
一切皆对象(声明时需要加new):string,number等等
数组(array)
a=[1,2,3] 类型为object
a=array([1,2,3]) 类型为array
索引取值a[1]
.length 数组长度
.push 尾部追加
.pop 尾部删除
.unshift 头部加入
.shift 头部删除
.slice(开始,结束) 切片
.reverse() 反转
.join(连接符) 链接
.sort() 排序,ascll 码排序(可以使用定制排序方法.来完成正常的排序)
数组排序
function sortNumber(a,b){
return a - b}
var arr1 = [11, 100, 22, 55, 33, 44]
arr1.sort(sortNumber)
.concat() 数组合并
.splice(从哪删(索引),删几个,删除的位置需要不需要替换的元素) 删除
自定义对象(字典)
var = {"name":"luyi","age":18}
键可以不加引号
for 循环
for (var i in a){
console.log(a[i])
}
算术运算符
+,-,*,/ #自己领悟
++自加一
--自减一
a++:先执行逻辑,再加
++a:先执行加,再执行逻辑
比较运算符
>,<,>=,<=, #自己领悟
== 弱等于:好像等于 #1=“1” 数字与字符串相等
=== 强等于: 等于
!= 弱不等于:好像不等于
!== 强不等于:不等于
逻辑运算符
&& 与(and)
|| 或(or)
! 非(not)
注意与python区分
赋值运算符
=
+=
-=
*=
/=
流程控制
var a=10
if (a>5){
console.log("a>5")
}else{console.log("no")}
多条件流程控制
if (){}
else if(){}
else{}
switch (a) //a必须是一个值,或者一个得到值的算式
{case 0:
console.log("00")
break;
case 1:
console.log("11")
break;
default:
console.log("没有匹配") //上面所有条件不成立走}
特殊情况:
case 条件1:
console.log("结果1")
//此处不些break
case 条件2:
console.log("结果2")
break;
条件1或者条件2成立一个都执行结果2,如果条件1成立就执行结果1,并且执行结果2
条件2成立就只执行结果2
for循环
方式一:
for (var i in l2){
console.log(i,l2[i]);
}
方式二:
for (var i=0;i<l2.length;i++){
console.log(i,l2[i])
}
循环自定义对象:
var d = {aa:'xxx',bb:'ss',name:'小明'};
for (var i in d){
console.log(i,d[i],d.i) #注意循环自定义对象的时候,打印键对应的值,只能是对象[键]来取值,不能使用对象.键来取值。
}
while循环
var i=1
while (i<10){
console.log(i);
i++;
}
三元运算
var c= a>b ? a:b 如果a>b 返回a ,否则b
函数
function fi(){
函数体代码
return #只能返回一个值(如传入多个值,只接受最后一个值)
}
调用:函数名()
匿名函数
var 函数名=function(){
}
自执行函数
(function(){})(参数) 函数自动执行
加载页面自动执行
箭头函数
var f = () => 5;
// 等同于
var f = function(){return 5};
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2){
return num1 + num2;
}
全局变量和局部变量
全局变量:定义再函数外的为全局变量
局部变量:定义再函数内的为局部变量
作用域
与python相同
函数内部有,使用函数内的,函数没有,使用父的,父的没有继续向外寻找,直致全局.
面向对象
es5封装方法
function Person(name){
this.name=name;
}
var p =new Person("luyi")
Person.prototype.f1=function(a,b){return a+b} //向面对对象封装一个方法即函数内多了一个f1方法,方法的内容为后面的函数
date对象
var d1 =new Date(); 获取国际时间
d1.toLocaleString() 通过国际时间,获取中国时间
d1.toUTCString() 获取UTCS时间
getdate() 获取日
getday() 获取星期
getmonth() 获取月份(0~11)
getfullyear() 获取年
gettime() 获取时间戳
json
JSON.parse() 将JSON字符串转换成对象(反序列化)
var d='{"xx":"xx"}'
var dd=JOSN.parse(d)
JSON.stringify() 将对象转换成JSON字符串(序列化)
var d={"xx":"xx"}
var dstr=JOSN.stringify(d)
python中符合josn结构就可以json.loads()
RegExp(正则)--->用于前端用户输入校验
创建正则对象
var reg=new Regexp("正则表达式")
简写:
var reg=/正则表达式/
test方法.测试某个字符串是否符合正则规则
var s="hello"
reg.test(s) 符合返回ture 不符合返回flase
一个坑:
reg.test() 什么都不写,默认括号内容为字符串"undefined"
字符串正则
var s="hello"
s.match(/o/)匹配符合正则的第一个值
s.match(/o/g)匹配符合正则的所有值
s.search(/o/)或s.search(/o/g)找到匹配正则字符索引位置
s.split(/o/)或s.split(/o/g) 把符合正则规则的字符分割
s.replace(/o/,"x") 符合正则规则的字符替换,只替换第一个
s.replace(/o/g,"x") 符合正则规则的字符替换,全部替换
s.replace(/o/gi) i不区分大小写.得到的为新字符串
注意:
加g后,匹配到某字符后,会记录匹配到的字符的位置.下次匹配会从记录字符后开始匹配
直至匹配结束返回flase.然后从第一个字符开始匹配
可以设置:reg.lastIndex=0来让每次匹配成功后返回第一个字符
math对象(数学相关方法)
Math.abs(x) 返回数的绝对值。
exp(x) 返回 e 的指数。
floor(x) 小数部分进行直接舍去。
log(x) 返回数的自然对数(底为e)。
max(x,y) 返回 x 和 y 中的最高值。
min(x,y) 返回 x 和 y 中的最低值。
pow(x,y) 返回 x 的 y 次幂。
random() 返回 0 ~ 1 之间的随机数。
round(x) 把数四舍五入为最接近的整数。
sin(x) 返回数的正弦。
sqrt(x) 返回数的平方根。
tan(x) 返回角的正切。
弹框
alert("内容")