目录
一、简介
1、定义
javascript是一门动态弱类型的解释型编程语言，增强页面动态效果，实现页面与用户之间的实时动态的交互。
javascript是由三部分组成：ECMAScript、DOM、BOM
- ECMAScript由ECMA-262定义，提供核心语言功能（ECMA是欧洲计算机制造商协会）
- DOM(Document Object Model)文档对象模型，提供访问和操作网页内容的方法和接口
- BOM(Browser Object Model)浏览器对象模型，提供与浏览器交互的方法和接口
2、注释
JavaScript中代码注释：
- 单行 //
- 多行 /* */
注意：此注释仅在Script块中生效。
3、引入文件
1. 引入外部文件
<script type="text/javascript" src="JS文件"></script>2. 存放在HTML的<head>或<body>中
<!-- 方式二 -->
<script type"text/javascript">
Js代码内容
</script>- HTML的head中
- HTML的body代码块底部(推荐)
3. 为什么要放在<body>代码块底部？
- HTML代码从上到下执行，先加载CSS，避免html出现无样式状态；
- 将JavaScript代码块放在<body>最后，可以让网页尽快的呈现给用户，减少浏览者的等待时间，避免因为JS代码块阻塞网页的呈现。
二、变量
JavaScript中变量的声明是一个非常容易出错的点，局部变量必须一个 var 开头，如果未使用var，则默认表示声明的是全局变量。
<script type="text/javascript">
// 全局变量
name = 'seven';
function func(){
// 局部变量
var age = 18;
// 全局变量
gender = "男"
}
</script>三、数据类型
JavaScript 中的数据类型分为原始类型和对象类型：
- 原始类型
- 数字
- 字符串
- 布尔值
- 对象类型
- 数组
- “字典”
- ...
特别的，数字、布尔值、null、undefined、字符串是不可变。
// null、undefined
null是JavaScript语言的关键字，它表示一个特殊值，常用来描述“空值”。
undefined是一个特殊值，表示变量未定义。1、数字（Number）
JavaScript中不区分整数和浮点数，所有数字均用浮点数值表示。
转换：
- parseInt(..) 将某值转换成整数，不成功则NaN
- parseFloat(..) 将某值转换成浮点数，不成功则NaN
特殊值：
- NaN，非数字。可以使用 isNaN(num) 来判断。
- Infinity，无穷大。可以使用 isFinite(num) 来判断。
| 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( ) | 返回原始数值 |
2、字符串（String）
字符串是由字符组成的数组，但在JavaScript中字符串是不可变的：可以访问字符串任意位置的文本，但是JavaScript并未提供修改已知字符串内容的方法。
常见功能：
| 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则替换所有，否则只替换第一个匹配项；
|
| 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( ) | 返回原始字符串值 |
//创建字符串对象两种方式
var str1="hello";
var str2=new String("hello2"); //查询字符串索引
var str="welcome to the world of JS!";
var str2=str.indexOf("l");
var str3=str.lastIndexOf("l");
alert(str2);
//结果为2
alert(str3);
//结果为18
// substr substring
console.log(str1.substr(1,3));//ell
console.log(str1.substring(1,3));//el
console.log(str1.slice(1,4));//ell
console.log(str1.slice(-3,-1))//el
var num1 = new Number(123); //创建了一个数字类型的对象
var num3 = Number(456); // 456
var num2 = 666;
var s1 = 's123';
var num4 = parseInt(s1);
console.log(num1.valueOf(),num2,num3);
console.log(num4); // NaN
if(isNaN(num4)){
console.log('not a number'); // not a number
}
else {
console.log('a number');
}
console.log(isFinite(num3)); // 是否是有限值 true Infinity表示无穷大。
console.log(typeof num3); // 'number' 返回的是字符串
var a = 1222.4444444;
console.log(a.toFixed(2)); // 1222.44
console.log(a.toExponential(3)); // 1.222e+3 3、布尔类型（Boolean）
布尔类型仅包含真假，与Python不同的是其首字母小写。
true（真）和false（假）
- == 比较值相等
- != 不等于
- === 比较值和类型相等（比较过程没有任何类型转换）
- !=== 不等于
- || 或
- && 且
var a = 123;
var s = '123';
console.log(a==s); // true
console.log(a===s); // false 判断值和类型一样 4、数组
JavaScript中的数组类似于Python中的列表
| Array.length | 数组的大小 |
| Array.push() | 尾部添加元素 |
| Array.pop() | 删除并返回数组的最后一个元素 |
| Array.unshift() | 在数组头部插入一个元素 |
| Array.shift( ) | 在数组头部移除一个元素 |
| Array.slice( ) | 切片 |
| Array.reverse( ) | 反转 |
| Array.join( ) | 将数组元素连接起来以构建一个字符串 |
| Array.concat( ) | 拼接 |
| Array.sort( ) | 排序 |
| Array | 对数组的内部支持 |
| Array.splice( start, deleteCount, value, ...) | 插入、删除或替换数组的元素
|
| Array.toLocaleString( ) | 把数组转换成局部字符串 |
| Array.toString( ) | 将数组转换成一个字符串 |
// //创建方式
var arr1=[1,"hello",[11,2],{"name":"Yuan"}];
var arr2=new Array(3);
var arr3=new Array(1,"world",true,[1,2,3]);
console.log(typeof arr1);
console.log(typeof arr2);
console.log(typeof arr3);
// 注意： var arr4=new Array(10) 10是size
console.log(arr1.length);
// Array对象的方法
// join方法 拼接字符串
var arr5=[1,2,3,4,"1234"];
var ret=arr5.join("**");
console.log(ret);
console.log(typeof ret)
//toString()
var ret2=arr1.toString();
console.log(ret2);
console.log(typeof ret2);
// concat() 连接字符串
var arr5=[1,2,3];
// var ret3=arr5.concat([5,66]);
var ret3 = arr5.concat([5,66])
console.log(ret3);
console.log(typeof ret3);
console.log(typeof arr5);
// reverse 反转字符串
// var arr6=[23,45,37,88];
var arr6=[10,45,100,88];
console.log(arr6.reverse());
console.log(arr6.sort()) ; //10,100,45,88 //对arr6数组进行排序
// function f(a,b) {
//
// if(a>b){
// return 4
// }
// else if(a<b){
// return -4
// }
// else {
// return 0
// }
// }
function f2(a,b) {
return a-b
}
console.log(arr6.sort(f2))
// push pop:栈操作 尾部插入/移除元素
var arr7=[1,2,3];
arr7.push([7,8,0]);
arr7.push("hello",5);
console.log(arr7);
console.log(arr7.length);
console.log(arr7.pop());
console.log(arr7.pop());
console.log(arr7.length);
// shift unshift: 栈操作 头部移除/插入元素
var arr8=[4,5,6];
arr8.unshift([11,222]); //
arr8.unshift(true,"yes");//[true,"yes",[11,22],4,5,6]
arr8.shift();//["yes",[11,22],4,5,6]
console.log(arr8);
console.log(arr8.length)5. Math
Math对象是一个静态对象，而不是构造函数。实际上，Math只是一个由Javascript设置的对象命名空间，用于存储数学函数。
作用是执行普通的算数任务。
常量
Math.E
常量e，自然对数的底数。
Math.LN10
10的自然对数。
Math.LN2
2的自然对数。
Math.LOG10E
以10为底的e的对数。
Math.LOG2E
以2为底的e的对数。
Math.PI
常量figs/U03C0.gif。
Math.SQRT1_2
2的平方根除以1。
Math.SQRT2
2的平方根。
静态函数
Math.abs( )
计算绝对值。
Math.acos( )
计算反余弦值。
Math.asin( )
计算反正弦值。
Math.atan( )
计算反正切值。
Math.atan2( )
计算从X轴到一个点的角度。
Math.ceil( )
对一个数上舍入。
Math.cos( )
计算余弦值。
Math.exp( )
计算e的指数。
Math.floor( )
对一个数下舍人。
Math.log( )
计算自然对数。
Math.max( )
返回两个数中较大的一个。
Math.min( )
返回两个数中较小的一个。
Math.pow( )
计算xy。
Math.random( )
计算一个随机数。
Math.round( )
舍入为最接近的整数。
Math.sin( )
计算正弦值。
Math.sqrt( )
计算平方根。
Math.tan( )
计算正切值。四、其他
1、序列化
- JSON.stringify(obj) 序列化
- JSON.parse(str) 反序列化
2、转义
- decodeURI( ) URl中未转义的字符
- decodeURIComponent( ) URI组件中的未转义字符
- encodeURI( ) URI中的转义字符
- encodeURIComponent( ) 转义URI组件中的字符
- escape( ) 对字符串转义
- unescape( ) 给转义字符串解码
- URIError 由URl的编码和解码方法抛出
// 转义 其中escape() unescape()主要是对cookies使用
var a = 'http://www.baidu.com?name=Aaron';
console.log(encodeURI(a));
//http://www.baidu.comname=%E6%9D%8E%E6%9D%B0
console.log(decodeURI(encodeURI(a)));
// http://www.baidu.com?name=Aaron
console.log(encodeURIComponent(a));
// http%3A%2F%2Fwww.baidu.com%3Fname%3D%E6%9D%8E%E6%9D%B0
console.log(decodeURIComponent(encodeURIComponent(a)));
// http://www.baidu.com?name=Aaron3、eval
JavaScript中的eval是Python中eval和exec的合集，既可以编译代码也可以获取返回值。
- eval()
- EvalError 执行字符串中的JavaScript代码
console.log(eval('1+2*5-5')); // 6
console.log(eval(a = 1)); // 1 声明了一个局部变量a值为14、正则表达式
1、定义正则表达式
- /.../ 用于定义正则表达式
- /.../g 表示全局匹配
- /.../i 表示不区分大小写
- /.../m 表示多行匹配
JS正则匹配时本身就是支持多行，此处多行匹配只是影响正则表达式^和$，m模式也会使用^$来匹配换行的内容)
注：定义正则表达式也可以 reg= new RegExp()
var pattern = /^Java\w*/gm;
var text = "JavaScript is more fun than \nJavaEE or JavaBeans!";
result = pattern.exec(text)
console.log(result)
result = pattern.exec(text)
console.log(result)
result = pattern.exec(text)
console.log(result)
2、匹配
JavaScript中支持正则表达式，其主要提供了两个功能：
- test(string) 检查字符串中是否和正则匹配
n = 'uui99sdf'
reg = /\d+/
reg.test(n) ---> true
# 只要正则在字符串中存在就匹配，如果想要开头和结尾匹配的话，就需要在正则前后加 ^和$- exec(string) 获取正则表达式匹配的内容，如果未匹配，值为null，否则，获取匹配成功的数组。
获取正则表达式匹配的内容，如果未匹配，值为null，否则，获取匹配成功的数组。
非全局模式
获取匹配结果数组，注意：第一个元素是第一个匹配的结果，后面元素是正则子匹配（正则内容分组匹配）
var pattern = /\bJava\w*\b/;
var text = "JavaScript is more fun than Java or JavaBeans!";
result = pattern.exec(text)
var pattern = /\b(Java)\w*\b/;
var text = "JavaScript is more fun than Java or JavaBeans!";
result = pattern.exec(text)
全局模式
需要反复调用exec方法，来一个一个获取结果，直到匹配获取结果为null表示获取完毕
var pattern = /\bJava\w*\b/g;
var text = "JavaScript is more fun than Java or JavaBeans!";
result = pattern.exec(text)
var pattern = /\b(Java)\w*\b/g;
var text = "JavaScript is more fun than Java or JavaBeans!";
result = pattern.exec(text)3、字符串中相关方法
obj.search(regexp) 获取索引位置，搜索整个字符串，返回匹配成功的第一个位置(g模式无效)
obj.match(regexp) 获取匹配内容，搜索整个字符串，获取找到第一个匹配内容，如果正则是g模式找到全部
obj.replace(regexp, replacement) 替换匹配替换，正则中有g则替换所有，否则只替换第一个匹配项，
$数字：匹配的第n个组内容；
$&：当前匹配的内容；
$`：位于匹配子串左侧的文本；
$'：位于匹配子串右侧的文本
$$：直接量$符号5、时间处理
JavaScript中提供了时间相关的操作，时间操作中分为两种时间：
- 时间统一时间
- 本地时间（东8区
var current_time=new Date().toLocaleString();//得到当前时间五、语句和异常
1、条件语句
JavaScript中支持两个中条件语句，分别是：if 和 switch。
if 语句：
//if语句
if(条件){
}else if(条件){
}else{
}Switch 语句：
// ----- switch
var week="Monday";
var week=3;
switch (week){
case "Monday" :alert("星期一");break;
case "Tuesday":alert("星期二");break;
case 3:alert("星期三");break;
case 4:alert("星期四");break;
case 5:alert("星期五");break;
case 6:alert("星期六");break;
case 7:alert("星期日");break;
default:alert("nothing");
}2、循环语句
JavaScript中支持四种循环语句，分别是：for、for in、while、do-while
for 循环：
for(var i=0; i<10; i++){
document.write("welcome"+i+"<br>")
document.write("welcome"+i+"<br>")
}for in 循环：
var attr=[111,222,333];
for (var i=0;i<attr.length;i++){
document.write(i);
document.write("<br>");
document.write(attr[i]);
document.write("<br>");
}
for (var i in attr){
document.write(i);
document.write("<br>");
document.write(attr[i]);
document.write("<br>");
}while 循环：
while(条件){
// break;
// continue;
}do-while 循环：
//循环的代码至少执行一次，结果为1
var num = 0;
do {
num++;
}while (num>10);3. label语句
label 语句可以理解为跳出任意循环
未加label语句实例：
//输出结果为95
<script>
var num = 0;
for (var i=0;i<10;i++) {
for (var j=0;j<10;j++) {
if (i==5 && j==5) {
break;
}
num++;
}
}
console.log(num);
</script>加label语句实例：
//输出结果为55
//i和j都循环为到5时，跳出了两层循环
<script>
var num = 0;
outPoint:
for (var i=0;i<10;i++) {
for (var j=0;j<10;j++) {
if (i==5 && j==5) {
break outPoint;
}
num++;
}
}
console.log(num);
</script>4. 异常处理
主动跑出异常 throw Error('xxxx')
try {
//这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行
}
catch (e) {
// 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。
//e是一个局部变量，用来指向Error对象或者其他抛出的对象
}
finally {
//无论上述代码怎么，finally代码块始终会执行
}六、函数
1、基本函数
JavaScript中函数基本上可以分为一下三类：
// 普通函数
function func(arg){
return true;
}
// 匿名函数
var func = function(arg){
return "tony";
}
// 自执行函数
(function(arg){
console.log(arg);
})('123')注意：对于JavaScript中函数参数，实际参数的个数可能小于形式参数的个数，函数内的特殊值arguments中封装了所有实际参数。
function f() {
console.log(arguments);
}
f(1,2,45,6,7,78);
function ADD() {
var sum=0;
for (var i=0;i<arguments.length;i++){
sum+=arguments[i]
}
return sum
}
console.log(ADD(1,2))2、函数的作用域与作用域链
JavaScript中没有块级作用域
var name = 'Aaron';
(function Main(){
console.log(name);//undefined
if(1){
var name = 'peng';
}
console.log(name);//peng
})();
console.log(name);//Aaron
//输出结果第一个为undefined
//声明需提前（Hoisting），在JavaScript引擎“预编译”时进行，函数在被执行之前，会将其中的变量全部声明，而不赋值作用域链
每个构造函数都有一个内部对象指针，指向原型对象，而原型对象也包含一个指向构造函数的指针。如此层层递进，形成作用域链条
var name = 'Aaron';
function Main() {
function F1(){
var name = 'peng';
console.log(name);//peng
}
function F2() {
console.log(name);//Aaron
}
F1();
F2();
}
Main();
// 从内到外的优先级寻找
// F2() 的作用域链为 F2()-->Main()3、闭包
闭包是指可以包含自由（未绑定到特定对象）变量的代码块。
「闭包」，是指拥有多个变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。
闭包是个函数，而它「记住了周围发生了什么」。表现为由「一个函数」体中定义了「另个函数」
由于作用域链只能从内向外找，默认外部无法获取函数内部变量。闭包，在外部获取函数内部的变量。
function f1(){
var n=1;
Add=function(){
n++;
};
function f2(){
console.log(n);
}
return f2;
}
var result=f1();
result(); //1
Add();
result(); //2
//result就是闭包f2函数
//函数f1中的局部变量n一直保存在内存中，并没有在f1调用后被自动清除闭包使函数中的变量都被保存在内存中，内存消耗大，所以少用闭包，否则会造成网页的性能低，在IE中可能导致内存泄露。
所以在退出函数之前，将不使用的局部变量全部删除。
4、面向对象
面向对象的三大特性:
封装：隐藏代码实现的细节，实现代码的模块化
继承：扩展已经存在的代码模块，实现代码重用
多态：接口的不同实现方式，实现接口重用
关键字：
this 代指此时的对象
new 创建对象时必须使用
构造函数模式：
function Foo (name,age) {
this.Name = name;
this.Age = age;
this.Func = function(arg){
return this.Name + arg;
}
}
var obj = new Foo('alex', 18);
var ret = obj.Func("sb");
console.log(ret);对于上述代码需要注意：
- Foo充当的构造函数
- this代指对象
- 创建对象时需要使用 new
上述代码中每个对象中均保存了一个相同的Func函数，从而浪费内存。使用原型和可以解决该问题：
function Foo (name,age) {
this.Name = name;
this.Age = age;
}
Foo.prototype = {
GetInfo: function(){
return this.Name + this.Age
},
Func : function(arg){
return this.Name + arg;
}
}七、Prototype模式的验证方法
1. isPrototypeOf()
用来判断一个对象是否存在于另一个对象的原型链中
Foo.prototype.isPrototypeOf(obj)
true
Foo.prototype.isPrototypeOf(obj2)
true
2. hasOwnProperty()
用来判断某一个对象(不包括原型链)是否具有指定属性。
obj.hasOwnProperty('Name')
true
obj.hasOwnProperty('Age')
true3. in运算符
判断某个实例是否具有某个属性
'Name' in obj
true
'Age' in obj
true
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
