定义
javascript是一门动态弱类型的解释型编程语言,增强页面动态效果,实现页面与用户之间的实时动态的交互。
javascript是由三部分组成:ECMAScript、DOM、BOM
- ECMAScript由ECMA-262定义,提供核心语言功能(ECMA是欧洲计算机制造商协会)
- DOM(Document Object Model)文档对象模型,提供访问和操作网页内容的方法和接口
- BOM(Browser Object Model)浏览器对象模型,提供与浏览器交互的方法和接口
JavaScript引入方式
Script标签内写代码
可以写在head中,不过推荐写在body中
<script type="text/javascript"> Js代码内容 </script>
引入外部的JS文件
<script type="text/javascript" src="JS文件"> </script>
注释方式
// 单行注释 /**/ 多行注释
; 结束符
console.log() 输出
变量
声明变量使用 var 变量名; 的格式来进行声明,JavaScript的变量名可以使用_,数字,字母,$组成,不能以数字开头。
注意:局部变量必须以 var 开头申明,如果不写 var 则为全局变量
<script type="text/javascript"> // 全局变量 name = '张三'; function func(){ // 局部变量 var age = 18; // 全局变量 work='doctor' } </script>
数据类型
特殊值:
- null 表示一个空对象指针,常用来描述"空值";
- undefined 表示变量定义,但是没有值传入
数字(Number)
JavaScript中不区分整数和浮点数,所有数字均用浮点数值表示。
NaN表示非数字
转换:
- parseInt(..) 将某值转换成整数,不成功则NaN
- parseFloat(..) 将某值转换成浮点数,不成功则NaN
数字的方法
Number | 对数字的支持 |
Number.MAX_VALUE | 最大数值 |
Number.MIN_VALUE | 最小数值 |
Number.NaN | 非数字 |
Number.NEGATIVE_INFINITY | 负无穷大 |
Number.POSITIVE_INFINITY | 正无穷大 |
Number.toExponential( ) | 返回四舍五入的科学计数法,加参数为保留几位 |
Number.toFixed( ) | 小数点后面的数字四舍五入,加参数为保留几位 |
Number.toPrecision( ) | 四舍五入,自动调用toFixed()或toExponential() |
Number.toLocaleString( ) | 把数字转换成本地格式的字符串 |
Number.toString( ) | 将数字转换成字符串 |
Number.valueOf( ) | 返回原始数值 |
字符串(String)
String.length | 字符串的长度 |
String.trim() | 移除空白 |
String.trimLeft() | 移除左侧空白 |
String.trimRight() | 移除右侧空白 |
String.concat(value, ...) | 拼接 |
String.slice(start, end) | 切片 |
String.split( ) | 分割 |
String.search( ) | 从头开始匹配,返回匹配成功的第一个位置(g无效) |
String.match( ) | 全局搜索,如果正则中有g表示找到全部,否则只找到第一个 |
String.replace( ) | 替换,正则中有g则替换所有,否则只替换第一个匹配项;
$数字:匹配的第n个组内容;
$&:当前匹配的内容;
$`:位于匹配子串左侧的文本;
$':位于匹配子串右侧的文本
$$:直接量$符号 |
String.charAt( ) | 返回字符串中的第n个字符 |
String.charCodeAt( ) | 返回字符串中的第n个字符的代码 |
String.fromCharCode( ) | 从字符编码创建—个字符串 |
String.indexOf( ) | 查找子字符串位置 |
String.lastIndexOf( ) | 查找子字符串位置 |
String.localeCompare( ) | 用本地特定的顺序来比较两个字符串 |
String.substr( ) | 抽取一个子串 |
String.substring( ) | 返回字符串的一个子串 |
String.toLocaleLowerCase( ) | 把字符串转换小写(针对地区,在不知道程序在哪个语言环境中运行时用) |
String.toLocaleUpperCase( ) | 将字符串转换成大写(针对地区) |
String.toLowerCase( ) | 小写 |
String.toUpperCase( ) | 大写 |
String.toString( ) | 返回原始字符串值 |
String.toString() | 返回原始字符串值 |
String.valueOf( ) | 返回原始字符串值 |
布尔类型(Boolean)
true和false 首字母小写,在python中首字母需大写
toString() | 返回Boolean的字符串值('true'或'false') |
toLocaleString() | 返回Boolean的字符串值('true'或'false') |
valueOf() | 返回Boolean的原始布尔值(true或false) |
数组(Array)
var a = ['a',1,2]; console.log(a[0]);
// 输出"a"
Array.length | 数组的大小 |
Array.push() | 尾部添加元素 |
Array.pop() | 删除并返回数组的最后一个元素 |
Array.unshift() | 在数组头部插入一个元素 |
Array.shift( ) | 在数组头部移除一个元素 |
Array.slice( ) | 切片 |
Array.reverse( ) | 反转 |
Array.join( ) | 将数组元素连接起来以构建一个字符串 |
Array.concat( ) | 拼接 |
Array.sort( ) | 排序 |
Array | 对数组的内部支持 |
Array.toLocaleString( ) | 把数组转换成局部字符串 |
Array.toString( ) | 将数组转换成一个字符串 |
运算符
算数运算符
+ - * / % ++(递增1) --(递减1)
比较运算符
=== 严格运算符 | 比较过程没有任何类型转换 |
!== 严格运算符 | ===的结果取反 |
== 相等运算符 | 如果两个操作值不是同一类型,相等运算符会尝试进行一些类型转换,然后再进行比较 |
!= 不相等运算符 | ==的结果取反 |
> 大于运算符 | |
>= 大于等于运算符 | |
< 小于运算符 | |
<= 小于等于运算符 |
逻辑运算符
! 非(两个!!表示Boolean()转型函数) |
返回一个布尔值 |
&& 与 | 两个操作都为true时返回true,否则返回false(返回值不一定是布尔值),可以多个连用(..&&..&&..) |
|| 或 | 两个操作都是false时返回false,否则返回true(返回值不一定是布尔值),可以多个连用(..||..||..) |
语句
1、条件语句
JavaScript中支持两个条件语句,分别是:if 和 switch。
if语句
//if语句 if(条件){ }
else if(条件){ }
else{ }
switch语句
//switch语句,条件等于a是执行第一个case,等于第二个执行第二个case,其它执行default. switch(条件){ case 'a': 执行内容1; break; case 'b': 执行内容1; break; #switch中的case子句通常都会加break语句,否则程序会继续执行后续case中的语句。 default : 默认执行的内容; }
2.循环语句
JavaScript中支持四种循环语句,分别是:for、for in、while、do-while
for 循环
for (var i=0;i<10;i++) { console.log(i); }
for in
var array1 = ["a", "b"]; for(var i in array1){ console.log(i); console.log(array[i]); }
while
var i = 0; while (i < 10) { console.log(i); i++; }
do -while
//循环的代码至少执行一次,结果为1 var num = 0; do { num++; }while (num>10);
函数(Function)
函数定义
// 普通函数 function func(i){ return true; } // 匿名函数 这里无需写函数名,定义一个变量赋值给变量 var func = function(i){ console.log(i); } // 自执行函数 (function(i){ console.log(i); })('哈哈')
函数参数:
函数传参的个数可以小于实际需传参的个数,没传参的默认为undefined
参数传多默认不起作用
function func(a,b){ console.log(); }
func(1,2,3) //结果为 1,2
func(1) //结果为
arguments 可接收所有参数,返回一个数组
function func() { console.log(arguments); }
func(1,2,3) //结果为 [1,2,3]
func('a','b') // 结果为 ["a","b"]
函数的全局变量和局部变量
局部变量:
在JavaScript函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它(该变量的作用域是函数内部)。只要函数运行完毕,本地变量就会被删除。
全局变量:
在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。
变量生存周期:
JavaScript变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
作用域与作用域链
首先在函数内部查找变量,找不到则到外层函数查找,逐步找到最外层。
var a = 100; function outer() { function inner1(){ var a = 10; console.log(a); } //10 function inner2() { console.log(a); } // 100 inner1(); inner2(); } outer();
inner1()的作用域链为 inner1--->outer
inner2()的作用域链为 inner2--->outer
闭包:
var name= "张三"; function f(){ var name = "李四"; function inner(){ console.log(name); } return inner; } var ret = f(); //ret就是inner的闭包函数 ret();
面向对象
创建对象
var person=new Object(); // 创建一个person对象 person.name="张三"; // person对象的name属性 person.age=18; // person对象的age属性
JSON序列化
var str1 = '{"name": "张三", "age": 18}'; var obj1 = {"name": "张三", "age": 18}; // JSON字符串转换成对象 var obj = JSON.parse(str1); // 对象转换成JSON字符串 var str = JSON.stringify(obj1);
正则表达式
JavaScript中支持正则表达式,其主要提供了两个功能:
- test(string) 用于检测正则是否匹配
- exec(string) 用于获取正则匹配的内容
// 创建RegExp对象方式(逗号后面不要加空格) var reg1 = new RegExp("^(13|14|15|17|18)[0-9]{9}$"); === var reg2 = /^(13|14|15|17|18)[0-9]{9}$/; // 匹配响应的字符串 var s1 = "138888888888888"; //RegExp对象的test方法,测试一个字符串是否符合对应的正则规则,返回值是true或false。 reg1.test(s1); // true
匹配模式:
g:表示全局(global)模式,匹配所有字符串,不会匹配到第一项时停止
i:表示不区分大小写(case-insensitive)模式
m:表示多行(multiline)模式,到达一行文本末尾时还会继续查找下一行中是否存在匹配的项
var s2 = "hello world"; s2.match(/o/g); // ["o", "o"] 查找字符串中 符合正则 的内容 s2.search(/h/g); // 0 查找字符串中符合正则表达式的内容位置 s2.split(/o/g); // ["hell", " w", "rld"] 按照正则表达式对字符串进行切割 s2.replace(/o/g, "s"); // "hells wsrld" 对字符串按照正则进行替换 // 关于匹配模式:g和i的简单示例 var s1 = "Uliusouthern"; s1.replace(/u/, "哈哈哈"); // "Uli哈哈哈southern" s1.replace(/u/g, "哈哈哈"); // "Uli哈哈哈so哈哈哈thern" 全局匹配 s1.replace(/u/gi, "哈哈哈"); // "哈哈哈n哈哈哈me:哈哈哈lex 哈哈哈ge:18" 不区分大小写
时间对象
创建对象
//方法1:不指定参数 var d1 = new Date(); console.log(d1.toLocaleString()); //方法2:参数为日期字符串 var d2 = new Date("2004/3/20 11:12"); console.log(d2.toLocaleString());
Date 操作日期和时间的对象 Date.getDate( ) 返回一个月中的某一天 Date.getDay( ) 返回一周中的某一天 Date.getFullYear( ) 返回Date对象的年份字段 Date.getHours( ) 返回Date对象的小时字段 Date.getMilliseconds( ) 返回Date对象的毫秒字段 Date.getMinutes( ) 返回Date对象的分钟字段 Date.getMonth( ) 返回Date对象的月份字段 Date.getSeconds( ) 返回Date对象的秒字段 Date.getTime( ) 返回Date对象的毫秒表示 Date.getTimezoneOffset( ) 判断与GMT的时间差 Date.getUTCDate( ) 返回该天是一个月的哪一天(世界时) Date.getUTCDay( ) 返回该天是星期几(世界时) Date.getUTCFullYear( ) 返回年份(世界时) Date.getUTCHours( ) 返回Date对象的小时字段(世界时) Date.getUTCMilliseconds( ) 返回Date对象的毫秒字段(世界时) Date.getUTCMinutes( ) 返回Date对象的分钟字段(世界时) Date.getUTCMonth( ) 返回Date对象的月份(世界时) Date.getUTCSeconds( ) 返回Date对象的秒字段(世界时) Date.getYear( ) 返回Date对象的年份字段(世界时) Date.parse( ) 解析日期/时间字符串 Date.setDate( ) 设置一个月的某一天 Date.setFullYear( ) 设置年份,也可以设置月份和天 Date.setHours( ) 设置Date对象的小时字段、分钟字段、秒字段和毫秒字段 Date.setMilliseconds( ) 设置Date对象的毫秒字段 Date.setMinutes( ) 设置Date对象的分钟字段和秒字段 Date.setMonth( ) 设置Date对象的月份字段和天字段 Date.setSeconds( ) 设置Date对象的秒字段和毫秒字段 Date.setTime( ) 以毫秒设置Date对象 Date.setUTCDate( ) 设置一个月中的某一天(世界时) Date.setUTCFullYear( ) 设置年份、月份和天(世界时) Date.setUTCHours( ) 设置Date对象的小时字段、分钟字段、秒字段和毫秒字段(世界时) Date.setUTCMilliseconds( ) 设置Date对象的毫秒字段(世界时) Date.setUTCMinutes( ) 设置Date对象的分钟字段和秒字段(世界时) Date.setUTCMonth( ) 设置Date对象的月份字段和天数字段(世界时) Date.setUTCSeconds( ) 设置Date对象的秒字段和毫秒字段(世界时) Date.setYear( ) 设置Date对象的年份字段 Date.toDateString( ) 返回Date对象日期部分作为字符串 Date.toGMTString( ) 将Date转换为世界时字符串 Date.toLocaleDateString( ) 回Date对象的日期部分作为本地已格式化的字符串 Date.toLocaleString( ) 将Date转换为本地已格式化的字符串 Date.toLocaleTimeString( ) 返回Date对象的时间部分作为本地已格式化的字符串 Date.toString( ) 将Date转换为字符串 Date.toTimeString( ) 返回Date对象日期部分作为字符串 Date.toUTCString( ) 将Date转换为字符串(世界时) Date.UTC( ) 将Date规范转换成毫秒数 Date.valueOf( ) 将Date转换成毫秒表示
词法分析
JavaScript中在调用函数的那一瞬间,会先进行词法分析。
词法分析的过程:
分析阶段
当函数调用的前一瞬间,会先形成一个激活对象:Avtive Object(AO),并会分析以下3个方面:
- 函数参数,如果有,则将此参数赋值给AO,且值为undefined。如果没有,则不做任何操作。
- 函数局部变量,如果AO上有同名的值,则不做任何操作。如果没有,则将此变量赋值给AO,并且值为undefined。
- 函数声明,如果AO上有,则会将AO上的对象覆盖。如果没有,则不做任何操作。级别最高
执行阶段
函数内部无论是使用参数还是使用局部变量都到AO上找。
var age = 18; function foo(){ console.log(age); var age = 22; console.log(age); } foo(); // 问:执行foo()之后的结果是 undifined
22
var age = 18; function foo(){ console.log(age); var age = 22; console.log(age); function age(){ console.log("呵呵"); } console.log(age); } foo(); // 执行后的结果是 undifined
22
22