Javascript学习总结
Javascript基础
简介
什么是Javascript?
Javascript创建方式
JS有两种创建方式,分为外部与内部,且两种方式都可置于body或head标签内。在实际运用中常置于body底部,因为HTML代码从上到下执行,先加载CSS可避免html出现无样式状态;减少浏览器打开时间,避免因为加载JS代码块阻塞网页呈现。
1.外部
<script type="text/javascript" src="myScript.js"></script>
2.内部
- Javascript:前缀
- 在script标签中加入JS文件,格式如下:
<script type="text/javascript"> JS文件 </script>
语法
变量和数据类型
变量:JS是弱类型脚本语言,使用变量前,可以无需定义,直接使用。
A.定义方式
- 隐式定义:直接给变量赋值
- 显式定义:使用var关键字定义变量
B.变量声明规则
- 以字母开头,其余字母可以是下划线_,美元$,任意字母与数字
- 以美元$,和下划线_开头合法,但不常用
- 区别大小写
数据类型:JS是弱类型脚本语言,声明变量时无需指定变量的数据类型。JS是解释时动态决定的,数据保存在内存中有数据类型。
A.常用数据类型
- 数值(number)类型:整数和浮点数
- 布尔(boolean)类型:true或false
- 字符串(string)类型:用“”或‘’括起来
- 未定义(undefined)类型:专门用来确定一个已经创建但无初值的变量
- 空(null)类型:表明某个变量的值为空
- 对象(object)类型:JS中对象,数组等
数组 var a=[]; var a=new Array();//不推荐使用
B.数据类型转换
- 数值转换成字符串,用“+”或tostring()方法
- 字符串转换成整型,parseInt()
- 字符串转换成浮点型,parseFloat()
C.字符串处理
charAt() | 获取字符串特定索引处字符 |
toUpperCase() | 将字符串的所有字符转换成大写字母,相反的转换成小写为toLowerCase() |
indexOf() | 返回字符串中特定字符串第一次出现位置,相反的最后一次为lastindexOf() |
subString() | 返回字符串某个字串,不支持负数参数,格式为[ ) |
slice() | 返回字符串某个字串,支持负数参数,当从右往左,-1,-2,... |
concat() | 用于将多个字符串拼加成一个字符串 |
repalce() | 替换某个字符串中的子串 |
split() | 用于将一个字符串分割成多个字符串,可指定分隔符,返回数组 |
match() | 使用正则表达式搜索目标子串,返回目标字符串,不匹配返回null |
search() | 使用正则表达式搜索目标子串,返回目标字符串,不匹配返回-1 |
判断两字符串是否相等用==即可,无须用equals()方法
D.正则表达式
是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符以及这些特定字符的组合,组成一个规则字符串,这个规则字符串用来表达对字符串的一种过滤逻辑。
目的:匹配字符串并获取特定部分。
1.创建正则表达式语法:
var 对象名=/规则/; var 对象名=new RegExp('规则');
2.RegExp对象使用的常用方法:
exec(str) | 检索字符串中指定值。返回找到值,并确定其位置,若无,返回null |
test(str) | 检索字符串中是否有指定值。返回true或false |
3.正则表达式支持的常用通配符
. | 匹配任意字符 |
\d | 匹配0-9所有数字 |
\D | 匹配非数字(有一个即可) |
\s | 匹配所有空白数字,包括空格、制表符、换行符、回车符等 |
\S | 匹配所有非空白符(有一个即可) |
\w | 匹配所有单词字符,包括0-9,26个英文字母和下划线 |
\W | 匹配所有非单词字符(有一个即可) |
\b | 匹配所有单词边界(\b首字母,末字母\b) |
\B | 匹配所有非单词边界 |
[abc] | 查找[]之间的任意字符 |
[^abc] | 查找不在[]之间的任意字符 |
[0-9] | 查找0至9之间的数字,等同于/d |
[a-z] | 查找从a到z之间的字符 |
[A-Z] | 查找从A到Z之间的字符 |
[A-z] | 查找从A到z之间的字符 |
(red|blue|green) | 任何指定选项 |
n+ | 匹配包含至少一个n的字符串 |
n* | 匹配包含0个或多个n的字符串 |
n? | 匹配包含0个或一个n的字符串 |
n{X} | 匹配包含X个n的序列字符串 |
n{X,Y} | 匹配包含X个或Y个序列字符串 |
n{X,} | 匹配包含至少X个n序列字符串 |
n$ | 匹配包含结尾为n的字符串 |
^n | 匹配包含开头为n的字符串 |
正则表达式修饰符语法:
var 对象名=/规则/修饰符;
i | 不区分大小写匹配 |
g | 全局匹配 |
m | 多行匹配 |
E.数组
var a=[]; var a=new Array();//不推荐使用
运算符
算术运算符 | + - * / % ++ -- |
赋值运算符 | = |
比较运算符 | > < >= <= == != ===(严格恒等于) !== |
逻辑运算符 | && || ! |
位运算符 | & | ~ ^ << >> |
其他运算符 | 三目(? :) ,(取最右边表达式结果) void typeof(判断字符属于什么类型数据) instanceof |
流程控制语句
A.分支语句:if和switch
B.循环语句:while,do while,for,for in
for(变量 in 对象){ 执行的语句块; }//一般用来遍历对象 遍历数组中的所有数组元素或遍历JS对象的所有属性
C.提供break(直接终止循环)和continue(终止本次循环,直接进入下一次循环)来改变循环的控制流
常用特殊语句型
A.语句块
B.空语句
C.异常抛出语句 throw new Error(‘xxx’);
D.异常捕捉语句:
try{ //代码块,有任何一个语句抛出异常,该代码结束运行 } catch(e){ //try代码块抛出异常时执行此代码块 //e为局部变量,用来指向Error对象或其他抛出对象 //catch只有一个,e前不用加var } finally{ //无论代码怎么,finally代码块始终执行 }
E.with语句 with(重复对象名)
函数
函数是事件驱动的或者当它被调用时执行的可重复使用的代码块。
A.函数定义的三种方式
- 有名函数
function 函数名(参数列表){ 语句块; }
- 匿名函数
var func=function(参数列表){ 语句块; }
- 使用function类构造匿名函数
new function(参数列表,函数执行体);
- 立即执行函数IIFE(Immediately Invoked Function Expression)
(function foo(){ 语句块; })(); //第一个()把函数变成表达式,第二个()执行这个函数 改进 (function (){ 语句块; }());
B.函数返回值
JS无声明返回类型,可有函数返回值。return 值
C.局部变量和局部函数
变量只有全局变量跟局部变量之分。
- 全局变量:直接定义的变量
- 局部变量:函数中定义的变量。只在函数内部有效,可覆盖全局变量
- 外部函数:可直接调用其内部函数
- 局部函数:函数中定义
D.函数调用的三种方式
- 直接调用函数
格式: 对象.函数引用; //函数未指明分配给哪个对象使用,默认window对象
- 以call方法调用函数
格式: 函数引用.call(调用名,参数1,参数2,……)
- 以apply方法调用函数
格式: 函数引用.apply(调用名,arguments) //arguments相当于数组,可存放多个参数
对象
JS对象-常用的内置对象:是一种非常重要的数据类型,是自我包含的数据集合。
A.创建Date对象方法
new Date(); |
new Date(month dd,yyyy hh:mm:ss); |
new Date(yyyy,mth,dd,hh,mm,ss); |
new Date(yyyy,mth,dd); |
new Date(ms); |
Date对象获取时间细节方法:
getDate() | 从Date对象返回一个月中的某一天(1~31) |
getDay() | 从Date对象返回一周中的某一天(0~6) |
getMonth() | 从Date对象返回月份(0~11) |
getFullYear() | 从Date对象以四位数字返回年份 |
getHours() | 返回Date对象的小时(0~23) |
getMinutes() | 返回Date对象的分钟(0~59) |
getSeconds() | 返回Date对象的秒数(0~59) |
getTime() | 返回1970年1月1日至今的毫秒数 |
Date对象设置时间细节方法:
setDate() | 从Date对象设置一个月中的某一天(1~31) |
setMonth() | 从Date对象设置月份(0~11) |
setFullYear() | 从Date对象以四位数字设置年份 |
setHours() | 设置Date对象的小时(0~23) |
setMinutes() | 设置Date对象的分钟(0~59) |
setSeconds() | 设置Date对象的秒数(0~59) |
setTime() | 设置1970年1月1日至今的毫秒数 |
B.Math对象的常用方法
abs(x) | 返回绝对值 |
ceil(x) | 上舍入 |
floor(x) | 下舍入 |
max(x,y) | 返回最大值 |
min(x,y) | 返回最小值 |
pow(x,y) | 返回x的y次幂 |
random() | 返回0~1之间的随机数 |
round(x) | 返回四舍五入 |
sqrt(x) | 返回x的平方根 |
JS对象-创建:对象是拥有属性(是与对象相关的值)和方法(是能在对象上执行的动作)的数据。
A.访问对象属性
格式:1.objectName.propertyName 2.objectName.["propertyName"] //常用于for...in遍历对象属性
B.访问对象方法
格式:objectName.methodName()
C.创建对象
- 使用new关键字调用构造器创建对象
例1: function student(name,age){ this.name=name; this.age=age; } var s1=new student(); var s2=new student("Jack",30); document.write(s1.name+"--"+s1.age+"<br/>"); //undefined--undefined document.write(s2.name+"--"+s2.age+"<br/>"); //Jack--30 例2: function student(name,age){ this.name=name; this.age=age; student.gender="male"; this.info=function(){ document.write(this.name+"--"+this.age+"--"+student.gender+"<br/>"); } } var s1=new student(); s1.info(); //undefined--undefined--male var s2=new student("Jack",30); s2.info(); //Jack--30--male
- 使用object直接创建对象
例: var myobj=new object(); myobj.name="Jack"; myobj.age=30; my.info=function(){ document.write(this.name+"--"+this.age+"<br/>"); } myobj.info(); //Jack--30
- 使用JSON语法创建对象
- JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。
- JSON 格式:{名:值,名:值,……} //值可以是各种数据的值,也可以是JSON对象。JSON数组用[]。
例1:{"name":"Jack","age":"30","email":"h.chen@iotek.com.cn"} 例2:{"people":[ {"firstname":"Bill","lastname":"Mclaugnlin"}, {"firstname":"Jason","lastname":"Hunter"}, {"firstname":"Elliotte","lastname":"Harold"}, ]}
- JS使用JSON创建对象:object={名:值,名:值,……}
例1:var p={ name:"Jack"; gender:"male"; info:function(){ document.write(this.name+"--"+this.gender); } //此处不加逗号 }; //此处不加分号不报错,但不规范 p.info(); //Jack--male 例2: var person={ name:"Jack", age:30, son:[ {name:"Tom",age:2}, {name:"Jerry",age:5} ], info:function(){ document.write("父亲名字:"+this.name+",年龄:"+this.age+"<br/>"); for(var child in this.son){ document.write("儿子名字:"+this.son[child].name+",年龄:"+this.son[child].age+"<br/>"); } } }; person.info(); 输出:父亲名字:Jack,年龄:30 儿子名字:Tom,年龄:2 儿子名字:Jerry,年龄:5