前端之JavaScript

引入方式

1. js代码写在seript标签里
2. script src="被人导入路径"

注释和结束符

//单行注释
/**/多行注释
; 结束符

声明变量

  1. 声明变量时不用声明变量类型,全部使用var关键字

    var a
    a=3
    
  2. 一行可以声明多个变量,并且可以是不同类型

    var name=“luyi”,age=20,job=“teacher”
    
  3. 声明变量时,可以不用var,如果不用var 那么他是全局变量

  4. 单独声明变量并且没有进行赋值时,此变量的值为undefined

  5. 变量命名规则:首字符只能是字母,下划线,$美元符三选一,余下的字符可以是下划线美元符,或者任何字母或者数字。(注意:不能以数字开头,并且区分大小写)

    特有命名规范:
        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("内容")
posted @ 2019-11-28 19:54  路一  阅读(195)  评论(0编辑  收藏  举报