Javascript基础
定义
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
